/* The agent dashboard's Notifications tab, on top of dashboard.css (the shell: tabs, banner, header chips), and the phone
   app's Notifications screen. The mailbag, settled on the Notifications board (4 rounds, 2026-10-25). */

/* the banner is a short title strip here; the date card shows the date and time only, with Change States under the switch */
.banner.short{min-height:132px}
.datecard .avatar .tt{left:auto;right:calc(100% + 16px);top:50%;transform:translateY(-50%)}
.datecard .avatar .tt::after{left:auto;right:-10px;top:50%;margin:-4px 0 0;box-shadow:3px 0 0 #fff}
/* a button's insides never take the pointer, so the hand shows over its whole face */
.main button *,.rail .tab *,.appv button *{pointer-events:none}

/* ---------- shared pieces: a notice row's text, quotes, effects, buttons ---------- */
.nico{display:grid;place-items:center;width:44px;height:44px;flex:none;background:#fff;box-shadow:0 0 0 3px var(--teal-dark)}
.nico canvas{width:28px;height:28px}
.k-stop .nico{background:#ffe9e6;box-shadow:0 0 0 3px #8f1d16}
.nt{display:block;font:700 17px/1.25 var(--pxf);color:var(--teal-dark)}
.k-stop .nt{color:#8f1d16}
.nb{margin:3px 0 0;font:600 15px/1.4 var(--pxf);color:var(--text)}
.nmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:7px}
.kind{padding:4px 6px 3px;font:400 8px/1.38 var(--ps);text-transform:uppercase;background:#e6f2ef;color:var(--teal-dark);box-shadow:0 0 0 2px #9fd1c8}
.kind.leads{background:#fff1d6;color:#6b3f00;box-shadow:0 0 0 2px #e9a90f}
.kind.score{background:#e8e0ff;color:#3b2a7a;box-shadow:0 0 0 2px #8e7ae0}
.kind.stop{background:#8f1d16;color:#fff;box-shadow:none}
.when{font:400 8px/1.38 var(--ps);text-transform:uppercase;color:var(--muted)}
.ci{display:inline-block;margin-top:6px;padding:5px 8px 4px;font:700 15px/1.25 var(--pxf);background:#eef3f1;color:var(--teal-dark);box-shadow:0 0 0 2px #9fd1c8}
.ci.ok{background:#e3f7e6;color:#0e5e28;box-shadow:0 0 0 2px #7fd08c}
.ci.warn{background:#fff1d6;color:#7a4a00;box-shadow:0 0 0 2px #e9a90f}
.ci.bad{background:#ffe9e6;color:#8f1d16;box-shadow:0 0 0 2px #e8a29b}
.eff{display:inline-flex;align-items:center;gap:6px;margin:6px 0 0 10px;font:700 14px/1.2 var(--pxf)}
.eff::before{content:'';width:9px;height:9px;flex:none}
.eff.up{color:#127a34}.eff.up::before{background:#43d35b;clip-path:polygon(50% 0,100% 100%,0 100%)}
.eff.ok{color:var(--muted)}.eff.ok::before{background:#a7b0b9}
.eff.warn{color:#9a4a10}.eff.warn::before{background:#ff8a3a;clip-path:polygon(0 0,100% 0,50% 100%)}
.nbtn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 12px;font:400 8px/1.38 var(--ps);text-transform:uppercase;white-space:nowrap;background:var(--paper);color:var(--teal-dark);box-shadow:var(--rim)}
.nbtn:hover{background:#fff6c8}
.nbtn.red{background:#e8403a;color:#fff;box-shadow:0 -3px 0 0 #8f1d16,0 3px 0 0 #8f1d16,-3px 0 0 0 #8f1d16,3px 0 0 0 #8f1d16,0 6px 0 0 #8f1d16}
.nbtn.red:hover{background:#ff5a52}
.seen{display:inline-flex;align-items:center;gap:6px;font:600 14px/1.3 var(--pxf);color:#5a2a26}
.ph .tools{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px 16px}
.lk.ma{font:400 8px/1.38 var(--ps);text-transform:uppercase;cursor:pointer}
.ptools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 12px}
.ptools:empty{display:none}
.qh{display:inline-flex;align-items:center;gap:6px;padding:4px 7px 3px;font:400 8px/1.38 var(--ps);text-transform:uppercase;background:#2a0f2e;color:var(--coin)}
.nempty{display:grid;justify-items:center;gap:10px;padding:34px 16px 30px;text-align:center}
.nempty canvas{width:96px;height:77px}
.nempty b{font:700 22px/1.2 var(--pxf);color:var(--teal-dark)}
.nempty p{max-width:50ch;margin:0;font:600 15px/1.45 var(--pxf);color:var(--muted)}

/* ---------- Design A: the mailbag (one list, newest first) ---------- */
.fltr{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.fltr button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:7px 9px 6px;font:400 8px/1.38 var(--ps);text-transform:uppercase;background:#fff;color:var(--teal-dark);box-shadow:0 0 0 2px var(--teal)}
.fltr button b{font:inherit;color:var(--muted)}
.fltr button[aria-pressed="true"]{background:var(--teal);color:var(--coin)}
.fltr button[aria-pressed="true"] b{color:#fff}
.fltr button.need[aria-pressed="false"]{box-shadow:0 0 0 2px #e8403a;color:#8f1d16}
.day{margin:16px 0 8px;font:400 8px/1.38 var(--ps);text-transform:uppercase;color:var(--muted)}
.day:first-of-type{margin-top:4px}
.mb{display:grid;gap:10px}
.nr{position:relative;display:grid;grid-template-columns:12px 36px minmax(0,1fr) auto 30px;gap:10px;align-items:center;padding:8px 6px 8px 8px;background:#fff;box-shadow:0 0 0 2px var(--line);cursor:pointer}
.nr:hover{box-shadow:0 0 0 2px var(--teal)}
.nr .ndot{width:12px;height:12px}
.nr .nico{width:36px;height:36px}
.nr .nico canvas{width:22px;height:22px}
.nr .nt{font-size:16px}
.nr .nmeta{margin-top:4px}
.nr .ndet{margin-top:6px}
.nr .ndet .eff{margin-left:0}
.nr.open,.nr.k-stop{align-items:start}
.nr.open .ndot,.nr.k-stop .ndot{margin-top:12px}
.caret{width:0;height:0;border:5px solid transparent;border-top:6px solid var(--teal);border-bottom:0}
.caret.up{border-top:0;border-bottom:6px solid var(--teal)}
.nr .nact .nbtn{min-height:32px}
.nx{all:unset;box-sizing:border-box;display:grid;place-items:center;width:30px;height:30px;cursor:pointer;color:var(--muted);align-self:start}
.nx svg{width:11px;height:11px;fill:currentColor;shape-rendering:crispEdges}
.nx:hover{background:#ffe9e6;color:#8f1d16}
.nx:focus-visible{outline:3px dashed var(--pink);outline-offset:1px}
.nr.k-stop{grid-template-columns:12px 36px minmax(0,1fr) auto 30px}
.older{all:unset;box-sizing:border-box;display:block;width:100%;margin-top:12px;padding:10px;text-align:center;cursor:pointer;font:400 8px/1.38 var(--ps);text-transform:uppercase;color:var(--teal-dark);background:var(--paper);box-shadow:0 0 0 2px var(--teal)}
.older:hover{background:#fff6c8}
.toast .lk{all:unset;margin-left:8px;cursor:pointer;color:var(--coin);text-decoration:underline}
.ndot canvas{display:block;width:12px;height:12px}
.nr.un{background:#fffbea}
.nr.k-stop{background:#ffe9e6;box-shadow:0 -3px 0 0 #8f1d16,0 3px 0 0 #8f1d16,-3px 0 0 0 #8f1d16,3px 0 0 0 #8f1d16;cursor:default}
.nr.k-stop.seenr{background:#fbf0ee;box-shadow:0 0 0 3px #d9a19b}
.nr .nact{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.side .how{padding:14px 16px 16px;background:var(--paper)}
.how .hh{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.how .hh canvas{width:26px;height:26px}
.how .hh b{font:700 18px/1.2 var(--pxf);color:var(--teal-dark)}
.how ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.how li{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:0 0 7px;border-bottom:2px dashed var(--line);font:600 15px/1.3 var(--pxf)}
.how li span{font:400 8px/1.6 var(--ps);text-transform:uppercase;color:#127a34;text-align:right}
.how li span.off{color:var(--muted)}
.how li span.up a{color:#c9347d}
.how .go{display:inline-block;margin-top:12px;font:400 8px/1.6 var(--ps);text-transform:uppercase}
.always{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;background:#ffe9e6;box-shadow:0 -3px 0 0 #8f1d16,0 3px 0 0 #8f1d16,-3px 0 0 0 #8f1d16,3px 0 0 0 #8f1d16}
.always canvas{width:32px;height:32px}
.always b{display:block;font:700 16px/1.25 var(--pxf);color:#8f1d16}
.always span{font:600 14px/1.4 var(--pxf);color:#4a1410}

.appv .fltr{flex-wrap:nowrap;overflow-x:auto;padding:3px 3px 6px;margin:0 -3px 8px}
.appv .fltr button{flex:none;min-height:32px;box-sizing:border-box}
.appv .nr{grid-template-columns:12px 32px minmax(0,1fr) 30px;gap:8px;padding:8px 4px 8px 6px}
.appv .nr .nx{grid-column:4;grid-row:1}
.appv .nr:not(.open):not(.k-stop) .nact{display:none}
.appv .nr .nico{width:32px;height:32px}
.appv .nr .nico canvas{width:22px;height:22px}
.appv .nr .nact{grid-column:3;grid-row:2;flex-direction:row;flex-wrap:wrap;padding:0}
.appv .nr .ndot{align-self:start;margin-top:11px}
.appv .nt{font-size:15px}
.appv .nb{font-size:14px}
.appv .qh{margin:0 0 10px}
.appv .chip-ph{margin:18px 0 0;font:600 13px/1.4 var(--pxf);color:var(--muted)}


/* ---------- the phone app's Notifications screen (a phone, or ?phone=1) ---------- */
.appv{display:none}
html.phone body{background:var(--cream)}
html.phone .dash,html.phone .gate,html.phone .motion-toggle{display:none!important}
html.phone .appv{position:relative;display:flex;flex-direction:column;height:100vh;overflow:hidden}
.aptop{flex:none;display:flex;align-items:center;gap:10px;height:58px;padding:0 12px;background:var(--teal-dark)}
.aptop canvas.wm{width:128px;height:auto}
.aptop .pplan{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 2px;font:400 10px/1 var(--ps);text-transform:uppercase;background:#173f8c;color:#fff;box-shadow:0 0 0 2px #6fb6ff}
body[data-plan="max"] .aptop .pplan{background:#2a0f2e;color:var(--coin);box-shadow:0 0 0 2px var(--coin)}
body[data-plan="starter"] .aptop .pplan{background:#fff;color:var(--teal-dark);box-shadow:0 0 0 2px #9fd1c8}
.aptop .pplan canvas{width:26px;height:21px}
.aptop .rt{margin-left:auto;display:flex;align-items:center;gap:12px}
.aptop .bell{width:36px;height:36px}
.aptop .bell canvas{width:22px;height:22px}
.aptop .bell em{right:-9px;top:-9px;min-width:20px;padding:3px 4px 2px;font-size:11px}
.aptop .avatar{width:40px;height:38px}
.aptop .avatar canvas{width:34px;height:27px}
.apbody{flex:1;overflow:auto;padding:14px 14px 22px;-webkit-overflow-scrolling:touch}
.apbar{flex:none;display:flex;justify-content:space-between;gap:4px;padding:8px 10px 14px;background:var(--teal-dark);box-shadow:0 -3px 0 0 #2c6b62}
.apbar .tab{width:34px;height:36px}
.apbar .tab *{pointer-events:none}
.apbar .tab canvas{width:22px;height:22px}
.pt{margin:2px 0 12px;font:700 26px/1.1 var(--pxf);color:var(--teal-dark);text-shadow:3px 3px 0 #fff6c8}
.pstarter h2{margin:4px 0 8px;font:700 22px/1.15 var(--pxf);color:var(--teal-dark)}
.pstarter>p{margin:0 0 16px;font:600 15px/1.45 var(--pxf)}
html.phone .toast{left:12px;right:12px;top:66px;max-width:none}

.nl:focus{outline:0}
.nomatch{margin:8px 0;font:600 15px/1.45 var(--pxf);color:var(--muted)}
.nopen{all:unset;display:block;cursor:pointer;font:700 16px/1.25 var(--pxf);color:var(--teal-dark)}
.nopen:focus-visible{outline:3px dashed var(--pink);outline-offset:2px}
.nbtn:focus-visible,.fltr button:focus-visible,.older:focus-visible,.lk.ma:focus-visible{outline:3px dashed var(--pink);outline-offset:3px}
.how .go{display:inline-block}
.main .lk.ma,.appv .lk.ma{font:400 8px/1.38 var(--ps);text-transform:uppercase}
@media (max-width:1180px){.panel .ph .tools{margin-left:0}}