/* SEG Core Sales CRM — v4 styles */
:root{
  color-scheme: light;
  --navy:#001B33; --yellow:#F4E500;
  --page:#F3F4F6; --surface:#FFFFFF; --surface-2:#F8F9FB;
  --ink:#0b1524; --ink-2:#52565e; --ink-muted:#62697a;
  --hairline:#e3e5e9; --ring:rgba(11,21,36,.12);
  --chip-bg:#eef0f3;
  --good-text:#006300; --warn-text:#7d5600;
  --crit:#b12a2a; --crit-dot:#d03b3b;
  --row-flag:#fffbe0;
  --focus:#001B33;
  --pipe-1:#8aa6c1; --pipe-2:#6e8fb0; --pipe-3:#3f6285; --pipe-4:#001B33;
  --chip-new:#FFF4B8;   --chip-new-ink:#4a3d00;
  --chip-crit:#FBE1E1;  --chip-crit-ink:#8e1f1f;
  --chip-prog:#E3ECF5;  --chip-prog-ink:#0f3a66;
  --chip-qual:#DCE8F5;  --chip-qual-ink:#0b2f55;
  --chip-quote:#CFDDEE; --chip-quote-ink:#001B33;
  --chip-won:#DDF3DD;   --chip-won-ink:#0a5a0a;
  --chip-lost:#ECEEF1;  --chip-lost-ink:#4d5361;
  --flash-ok:#d6f5d6; --flash-new:#fff6bf;
  --btn-primary:#001B33; --btn-primary-ink:#fff;
  --err-bg:#fdeceb; --err-ink:#8c2020; --err-border:#f3c9c6;
  --toast-bg:#001B33; --toast-ink:#fff; --toast-bad:#8e1f1f;
  --sk:#eef0f3; --sk-2:#e3e5e9;
  --pressed-bg:#001B33; --pressed-ink:#fff;
  --nav-bg:#FFFFFF; --nav-ink:#52565e; --nav-on:#001B33; --nav-on-bg:#eef0f3;
  --drawer-w:560px; --nav-w:212px;
  --chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%2352565e' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  --t-xs:11.5px; --t-sm:12.5px; --t-md:14px; --t-lg:16px; --t-xl:20px; --t-num:34px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px;
  --r-sm:6px; --r-md:10px;
  --scale:1;
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    color-scheme: dark;
    --page:#0d0f12; --surface:#181b20; --surface-2:#1e2228;
    --ink:#f2f4f7; --ink-2:#b6bcc6; --ink-muted:#9aa2ae;
    --hairline:#2a2e35; --ring:rgba(255,255,255,.12);
    --chip-bg:#242830;
    --good-text:#2fbf2f; --warn-text:#fab219;
    --crit:#f28b8b; --crit-dot:#e05252;
    --row-flag:#22241c;
    --focus:#8ab4dc;
    --pipe-1:#3e5972; --pipe-2:#4d6d8d; --pipe-3:#7fa3c8; --pipe-4:#b8d2e8;
    --chip-new:#3a3300;   --chip-new-ink:#F4E500;
    --chip-crit:#4a1d1d;  --chip-crit-ink:#f5a3a3;
    --chip-prog:#1c2f45;  --chip-prog-ink:#a9c8ea;
    --chip-qual:#1f3550;  --chip-qual-ink:#bcd4ee;
    --chip-quote:#22364d; --chip-quote-ink:#cfe0f2;
    --chip-won:#173a1e;   --chip-won-ink:#8fe08f;
    --chip-lost:#2a2e35;  --chip-lost-ink:#9aa2ae;
    --flash-ok:#173a1e; --flash-new:#3a3410;
    --btn-primary:#e8eaee; --btn-primary-ink:#0b1524;
    --err-bg:#2b1514; --err-ink:#f0b3ae; --err-border:#5a2624;
    --sk:#242830; --sk-2:#2e333c;
    --pressed-bg:#e8eaee; --pressed-ink:#0b1524;
    --nav-bg:#181b20; --nav-ink:#b6bcc6; --nav-on:#f2f4f7; --nav-on-bg:#242830;
    --chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%23b6bcc6' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --page:#0d0f12; --surface:#181b20; --surface-2:#1e2228;
  --ink:#f2f4f7; --ink-2:#b6bcc6; --ink-muted:#9aa2ae;
  --hairline:#2a2e35; --ring:rgba(255,255,255,.12);
  --chip-bg:#242830;
  --good-text:#2fbf2f; --warn-text:#fab219;
  --crit:#f28b8b; --crit-dot:#e05252;
  --row-flag:#22241c;
  --focus:#8ab4dc;
  --pipe-1:#3e5972; --pipe-2:#4d6d8d; --pipe-3:#7fa3c8; --pipe-4:#b8d2e8;
  --chip-new:#3a3300;   --chip-new-ink:#F4E500;
  --chip-crit:#4a1d1d;  --chip-crit-ink:#f5a3a3;
  --chip-prog:#1c2f45;  --chip-prog-ink:#a9c8ea;
  --chip-qual:#1f3550;  --chip-qual-ink:#bcd4ee;
  --chip-quote:#22364d; --chip-quote-ink:#cfe0f2;
  --chip-won:#173a1e;   --chip-won-ink:#8fe08f;
  --chip-lost:#2a2e35;  --chip-lost-ink:#9aa2ae;
  --flash-ok:#173a1e; --flash-new:#3a3410;
  --btn-primary:#e8eaee; --btn-primary-ink:#0b1524;
  --err-bg:#2b1514; --err-ink:#f0b3ae; --err-border:#5a2624;
  --sk:#242830; --sk-2:#2e333c;
  --pressed-bg:#e8eaee; --pressed-ink:#0b1524;
  --nav-bg:#181b20; --nav-ink:#b6bcc6; --nav-on:#f2f4f7; --nav-on-bg:#242830;
  --chev: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%23b6bcc6' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding:calc(72px + env(safe-area-inset-top)) 0 calc(80px + env(safe-area-inset-bottom))}
body{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--page);color:var(--ink);
  font-size:calc(var(--t-md) * var(--scale));line-height:1.45;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
}
@media (display-mode:standalone){body{overscroll-behavior-y:none}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none !important}
:is(button, a, select, input, summary, textarea, [tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
button{font:inherit;color:inherit}
a{color:inherit}
b{font-weight:650}
.num{font-variant-numeric:tabular-nums}

/* ── Top bar ─────────────────────────────────────────────── */
header.top{background:var(--navy);border-bottom:4px solid var(--yellow);position:sticky;top:0;z-index:30;padding-top:env(safe-area-inset-top)}
.top-in{display:flex;align-items:center;gap:12px;padding:8px max(var(--sp-4),env(safe-area-inset-right)) 8px max(var(--sp-4),env(safe-area-inset-left));min-height:58px}
.logo-card{background:#fff;border-radius:var(--r-sm);padding:5px 9px;display:flex;align-items:center;flex:none;height:36px}
.logo-card img{height:26px;display:block}
.top-title{color:#fff;font-weight:650;font-size:16px;letter-spacing:.2px;white-space:nowrap}
.top-title small{display:block;font-weight:400;font-size:11.5px;color:#9fb0c2;margin-top:-1px}
.search{flex:1;max-width:460px;margin-left:8px;position:relative}
.search input{width:100%;font:inherit;font-size:13.5px;padding:8px 12px 8px 34px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;min-height:36px}
.search input::placeholder{color:#9fb0c2}
.search input:focus{background:#fff;color:var(--navy);outline:2px solid var(--yellow);outline-offset:1px}
.search input:focus::placeholder{color:#8a93a0}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:#9fb0c2}
.search input:focus + svg{color:var(--navy)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.live{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#b7c4d1;background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 12px;cursor:pointer;min-height:36px;white-space:nowrap}
.live .pip{width:8px;height:8px;border-radius:50%;background:#3fd03f;flex:none}
.live.on .pip{animation:pulse 2s ease-in-out infinite}
.live.stale .pip{background:#fab219;animation:none}
.live.off .pip{background:#9aa2ae;animation:none}
.live.err .pip{background:#f07575;animation:none}
.live.busy .pip{animation:spinpip .8s linear infinite;border-radius:2px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes spinpip{to{transform:rotate(360deg)}}
@media (hover:hover){.live:hover{background:rgba(255,255,255,.08)}}
.btn{font-size:12.5px;font-weight:600;white-space:nowrap;padding:6px 13px;border-radius:var(--r-sm);cursor:pointer;min-height:36px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#e4eaef;display:inline-flex;align-items:center;gap:6px}
.btn.quiet{border-color:transparent;color:#9fb0c2}
.btn.primary{background:var(--yellow);color:var(--navy);border-color:var(--yellow)}
.btn.bell[aria-pressed="true"]{color:var(--yellow);border-color:rgba(244,229,0,.35)}
.btn.bell[aria-pressed="true"] svg{fill:var(--yellow)}
@media (hover:hover){.btn:hover{background:rgba(255,255,255,.10);color:#fff} .btn.primary:hover{background:#fff1a8;color:var(--navy)}}
.me{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid transparent;border-radius:999px;padding:3px 10px 3px 3px;color:#e4eaef;cursor:pointer;min-height:36px}
.me .av{background:var(--yellow);color:var(--navy)}
.menu{position:absolute;right:16px;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--ring);border-radius:var(--r-md);box-shadow:0 12px 30px rgba(0,0,0,.18);padding:6px;min-width:220px;z-index:40}
.menu .who{padding:8px 10px;font-size:12.5px;color:var(--ink-muted);border-bottom:1px solid var(--hairline);margin-bottom:4px}
.menu .who b{display:block;color:var(--ink);font-size:13.5px}
.menu .lo-only{display:none}
@media (max-width:860px){.menu .lo-only{display:block}}
.menu button{display:block;width:100%;text-align:left;padding:9px 10px;border:none;background:transparent;border-radius:var(--r-sm);font-size:13.5px;cursor:pointer}
@media (hover:hover){.menu button:hover{background:var(--chip-bg)}}

/* ── Layout / nav ─────────────────────────────────────────── */
.layout{display:flex;min-height:calc(100vh - 62px)}
nav.side{width:var(--nav-w);flex:none;background:var(--nav-bg);border-right:1px solid var(--hairline);padding:14px 10px;position:sticky;top:62px;height:calc(100vh - 62px);overflow:auto}
nav.side .grp{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-muted);padding:10px 10px 4px}
.navbtn{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:none;background:transparent;color:var(--nav-ink);border-radius:var(--r-sm);font-size:13.5px;font-weight:550;cursor:pointer;text-align:left}
.navbtn svg{flex:none;opacity:.85}
.navbtn .n{margin-left:auto;font-size:11.5px;color:var(--ink-muted);background:var(--chip-bg);border-radius:999px;padding:1px 7px;min-width:22px;text-align:center}
.navbtn[aria-current="page"]{background:var(--nav-on-bg);color:var(--nav-on);font-weight:650}
.navbtn[aria-current="page"] .n{background:var(--navy);color:#fff}
.navbtn.bad .n{background:var(--chip-crit);color:var(--chip-crit-ink)}
@media (hover:hover){.navbtn:hover{background:var(--chip-bg);color:var(--ink)}}
main{flex:1;min-width:0;padding:18px max(20px,env(safe-area-inset-right)) 60px max(20px,env(safe-area-inset-left))}
.vhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.vhead h2{font-size:18px;font-weight:650}
.vhead .note{color:var(--ink-muted);font-size:12.5px}
.vhead .spacer{flex:1}
.sortSel,.sel{font:inherit;font-size:12.5px;padding:6px 26px 6px 10px;border-radius:var(--r-sm);border:1px solid var(--hairline);background:var(--surface) var(--chev) no-repeat right 9px center;color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none;min-height:34px}
.panel{background:var(--surface);border:1px solid var(--ring);border-radius:var(--r-md);padding:14px 16px;margin-bottom:16px}
.panel h3{font-size:14px;font-weight:650;margin-bottom:8px}
.mini{font-size:12px;font-weight:600;padding:5px 10px;border-radius:var(--r-sm);border:1px solid var(--hairline);background:var(--surface);color:var(--ink);cursor:pointer;min-height:30px;white-space:nowrap}
.mini.primary{background:var(--btn-primary);color:var(--btn-primary-ink);border-color:var(--btn-primary)}
.mini.danger{color:var(--crit)}
.mini:disabled{opacity:.5;cursor:default}
@media (hover:hover){.mini:hover{border-color:var(--focus)} .mini.danger:hover{background:var(--chip-crit);border-color:var(--chip-crit)}}
.ico{width:30px;height:30px;border-radius:var(--r-sm);border:1px solid transparent;background:transparent;color:var(--ink-muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
@media (hover:hover){.ico:hover{background:var(--chip-bg);color:var(--ink)}}
.acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* ── Alerts ── */
.alert{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--ring);border-left:4px solid var(--yellow);border-radius:var(--r-md);padding:12px 14px;margin-bottom:14px}
.alert.warn{border-left-color:var(--crit-dot)}
.alert.info{border-left-color:var(--focus)}
.alert h3{font-size:14px;font-weight:650;margin-bottom:2px}
.alert p{font-size:13px;color:var(--ink-2)}
.alert .ic{flex:none;margin-top:2px;color:var(--ink-muted)}
.alert details{margin-top:6px;font-size:12px;color:var(--ink-muted)}
.alert pre{white-space:pre-wrap;word-break:break-word;font-size:11.5px;margin-top:4px;background:var(--chip-bg);padding:8px;border-radius:var(--r-sm)}
.alert .act{margin-top:8px}

/* ── Tiles ── */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.tile{background:var(--surface);border:1px solid var(--ring);border-radius:var(--r-md);padding:12px 14px 11px;text-align:left;cursor:pointer;display:block;width:100%}
.tile .label{font-size:12px;color:var(--ink-muted);font-weight:600}
.tile .value{font-size:30px;font-weight:700;line-height:1.15;margin-top:2px;font-variant-numeric:tabular-nums}
.tile .sub{font-size:12px;color:var(--ink-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .sub.bad{color:var(--crit)} .tile .sub.good{color:var(--good-text)}
.tile[aria-pressed="true"]{border-color:var(--focus);box-shadow:0 0 0 1px var(--focus) inset}
@media (hover:hover){.tile:hover{border-color:var(--focus)}}

/* ── Chips / avatars ── */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;padding:2px 9px;border-radius:999px;background:var(--chip-bg);color:var(--ink-2);white-space:nowrap;line-height:1.6}
.s-New{background:var(--chip-new);color:var(--chip-new-ink)}
.s-crit{background:var(--chip-crit);color:var(--chip-crit-ink)}
.s-Contacted{background:var(--chip-prog);color:var(--chip-prog-ink)}
.s-Qualified{background:var(--chip-qual);color:var(--chip-qual-ink)}
.s-Quoted{background:var(--chip-quote);color:var(--chip-quote-ink)}
.s-Won{background:var(--chip-won);color:var(--chip-won-ink)}
.s-Lost,.s-Junk{background:var(--chip-lost);color:var(--chip-lost-ink)}
.av{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-size:10.5px;font-weight:700;flex:none;letter-spacing:.3px}
.av.sm{width:22px;height:22px;font-size:9.5px}
.av.none{background:var(--chip-bg);color:var(--ink-muted);border:1px dashed var(--ring)}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .av{background:#e8eaee;color:#0b1524}}
:root[data-theme="dark"] .av{background:#e8eaee;color:#0b1524}
.flagdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--crit-dot);flex:none}
.flagdot.fu{background:#e0a800}
.tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 7px;border-radius:4px;background:var(--chip-crit);color:var(--chip-crit-ink)}
.tag.fu{background:var(--chip-new);color:var(--chip-new-ink)}
.tag.q{background:var(--chip-quote);color:var(--chip-quote-ink)}
.tag.ok{background:var(--chip-won);color:var(--chip-won-ink)}

/* ── Board ─────────────────────────────────────────────────── */
.board{display:grid;grid-template-columns:repeat(4,minmax(220px,1fr)) 150px;gap:12px;align-items:start;overflow-x:auto;padding-bottom:8px}
.col{background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-md);min-height:240px;display:flex;flex-direction:column;transition:border-color .12s,background .12s}
.col.over{border-color:var(--focus);background:var(--chip-bg)}
.col-h{display:flex;align-items:baseline;gap:8px;padding:10px 12px 8px;border-bottom:1px solid var(--hairline);background:inherit;border-radius:var(--r-md) var(--r-md) 0 0}
.col-h b{font-size:13.5px}
.col-h .n{font-size:11.5px;color:var(--ink-muted);background:var(--chip-bg);border-radius:999px;padding:0 7px}
.col-h .sum{margin-left:auto;font-size:12px;color:var(--ink-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.col-b{padding:8px;display:flex;flex-direction:column;gap:8px;flex:1}
.col.closed{min-height:140px}
.col.closed .col-b{gap:6px}
.col .empty{font-size:12px;color:var(--ink-muted);text-align:center;padding:18px 8px}
.card{background:var(--surface);border:1px solid var(--ring);border-radius:var(--r-md);padding:10px 11px 9px;cursor:pointer;text-align:left;width:100%;display:block;touch-action:pan-y;user-select:none;-webkit-user-select:none;position:relative}
.card.flag{border-left:4px solid var(--crit-dot);padding-left:9px}
.card.flag.fuflag{border-left-color:#e0a800}
.card.dragging{opacity:.35}
.card .co{font-weight:650;font-size:13.5px;line-height:1.3;display:flex;align-items:center;gap:6px}
.card .co .flagdot{margin-left:auto}
.card .who{font-size:12px;color:var(--ink-2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .sub{font-size:12px;color:var(--ink-muted);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
.card .foot{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11.5px;color:var(--ink-muted)}
.card .foot .val{font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.card .foot .age{margin-left:auto}
.card .foot .age.bad{color:var(--crit);font-weight:650}
.card .foot .age.warn{color:var(--warn-text);font-weight:650}
.card.mini-card{padding:7px 10px}
.card.mini-card .co{font-size:12.5px}
.card.saveflash{animation:flashok 1.2s ease-out}
.card.new-row{animation:flashnew 2.4s ease-out}
@keyframes flashok{0%{background:var(--flash-ok)}100%{background:var(--surface)}}
@keyframes flashnew{0%{background:var(--flash-new)}100%{background:var(--surface)}}
@media (hover:hover){.card:hover{border-color:var(--focus)}}
.ghost{position:fixed;z-index:60;pointer-events:none;width:240px;transform:rotate(1.5deg);box-shadow:0 14px 30px rgba(0,0,0,.25);opacity:.95}
body.dragging,body.dragging *{cursor:grabbing !important}

/* ── List / table ─────────────────────────────────────────── */
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--ring);border-radius:var(--r-md)}
table{width:100%;border-collapse:collapse;table-layout:fixed;min-width:820px}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--hairline);font-weight:650;white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--hairline);vertical-align:middle;font-size:13px}
tbody tr{cursor:pointer}
tbody tr:last-child td{border-bottom:none}
tbody tr.flag{background:var(--row-flag)}
tbody tr.saveflash{animation:flashok 1.2s ease-out}
tbody tr.new-row{animation:flashnew 2.4s ease-out}
@media (hover:hover){tbody tr:hover{background:var(--chip-bg)}}
.c-who{width:30%}.c-sub{width:auto}.c-stage{width:120px}.c-own{width:60px}.c-val{width:100px;text-align:right}.c-fu{width:120px}.c-wait{width:90px;text-align:right}
td.c-val,td.c-wait{text-align:right;font-variant-numeric:tabular-nums}
.who{font-weight:650;font-size:13.5px}
.co{font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subj{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wait b{font-size:13.5px}
.since{display:block;font-size:11px;color:var(--ink-muted)}
.fu-due{color:var(--crit);font-weight:650}.fu-today{color:var(--warn-text);font-weight:650}
.empty{padding:28px 14px;text-align:center;color:var(--ink-muted);font-size:13px}
tr.divider td{background:var(--surface-2);color:var(--ink-muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:5px 12px}

/* ── To do / Mine cards list ── */
.stack{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.stack .card .why{font-size:12px;color:var(--ink-2);margin-top:4px}

/* ── Drawer ────────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:44;opacity:0;transition:opacity .15s}
.scrim.show{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(var(--drawer-w),100vw);background:var(--surface);border-left:1px solid var(--ring);box-shadow:-12px 0 30px rgba(0,0,0,.18);z-index:45;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .18s ease-out;padding-top:env(safe-area-inset-top)}
.drawer.show{transform:none}
@media (prefers-reduced-motion:reduce){.drawer{transition:none}.scrim{transition:none}}
.d-head{padding:14px 18px 10px;border-bottom:1px solid var(--hairline)}
.d-top{display:flex;align-items:flex-start;gap:10px}
.d-top h2{font-size:17px;font-weight:650;line-height:1.25;flex:1;min-width:0;word-break:break-word}
.d-top .meta{font-size:12.5px;color:var(--ink-2);margin-top:3px}
.d-top .meta a{color:var(--ink-2)}
.stepper{display:flex;gap:4px;margin-top:12px;flex-wrap:wrap}
.step{flex:1;min-width:70px;border:1px solid var(--hairline);background:var(--surface-2);border-radius:var(--r-sm);padding:6px 4px;font-size:11.5px;font-weight:650;text-align:center;cursor:pointer;color:var(--ink-muted);position:relative}
.step.done{background:var(--chip-bg);color:var(--ink-2)}
.step[aria-current="step"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.step.won[aria-current="step"]{background:#1f7a2f;border-color:#1f7a2f}
.step.lost[aria-current="step"]{background:#6b7280;border-color:#6b7280}
.step.busy::after{content:"";position:absolute;right:5px;top:5px;width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 1s infinite}
@media (hover:hover){.step:hover{border-color:var(--focus);color:var(--ink)} .step[aria-current="step"]:hover{color:#fff}}
.closebar{display:flex;gap:6px;margin-top:8px}
.closebar .step{flex:0 0 auto;min-width:64px}
.d-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 10px;padding:12px 18px;border-bottom:1px solid var(--hairline);background:var(--surface-2)}
.fld label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-muted);font-weight:650;margin-bottom:3px}
.fld input,.fld select{width:100%;font:inherit;font-size:13px;padding:6px 8px;border-radius:var(--r-sm);border:1px solid var(--hairline);background:var(--surface);color:var(--ink);min-height:34px}
.fld select{padding-right:24px;background:var(--surface) var(--chev) no-repeat right 8px center;-webkit-appearance:none;appearance:none}
.fld .money{position:relative}
.fld .money input{padding-left:20px}
.fld .money::before{content:"£";position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--ink-muted)}
.fld input.busy,.fld select.busy{border-color:var(--focus)}
.fld.wide{grid-column:span 3}
.tabs{display:flex;gap:2px;padding:6px 18px 0;border-bottom:1px solid var(--hairline)}
.tab{border:none;background:transparent;padding:9px 12px;font-size:13px;font-weight:600;color:var(--ink-muted);border-bottom:2px solid transparent;cursor:pointer;margin-bottom:-1px}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--navy)}
.tab .n{font-size:11px;color:var(--ink-muted);margin-left:4px}
.d-body{flex:1;overflow:auto;padding:14px 18px 24px;-webkit-overflow-scrolling:touch}
.d-foot{border-top:1px solid var(--hairline);padding:8px 18px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--surface-2);padding-bottom:max(8px,env(safe-area-inset-bottom))}
.d-foot .spacer{flex:1}

/* Activity */
.composer{background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-md);padding:10px;margin-bottom:14px;position:relative}
.composer textarea{width:100%;font:inherit;font-size:13.5px;padding:8px 10px;border-radius:var(--r-sm);border:1px solid var(--hairline);background:var(--surface);color:var(--ink);resize:vertical;min-height:64px;line-height:1.4}
.composer .row{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap}
.kind{border:1px solid var(--hairline);background:var(--surface);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;cursor:pointer;color:var(--ink-2)}
.kind[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.composer .hint{font-size:11.5px;color:var(--ink-muted);margin-left:auto}
.mention-pop{position:absolute;left:10px;right:10px;background:var(--surface);border:1px solid var(--ring);border-radius:var(--r-sm);box-shadow:0 10px 24px rgba(0,0,0,.18);z-index:5;max-height:180px;overflow:auto}
.mention-pop button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 10px;border:none;background:transparent;font-size:13px;cursor:pointer}
.mention-pop button[aria-selected="true"],.mention-pop button:hover{background:var(--chip-bg)}
.timeline{list-style:none;display:flex;flex-direction:column;gap:2px}
.tl{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--hairline)}
.tl:last-child{border-bottom:none}
.tl .ic{width:28px;height:28px;border-radius:50%;background:var(--chip-bg);display:flex;align-items:center;justify-content:center;color:var(--ink-2);font-size:12px}
.tl.k-Comment .ic{background:var(--chip-new);color:var(--chip-new-ink)}
.tl.k-Stage .ic{background:var(--chip-quote);color:var(--chip-quote-ink)}
.tl.k-Assigned .ic{background:var(--chip-prog);color:var(--chip-prog-ink)}
.tl.k-Received .ic,.tl.k-Reply .ic,.tl.k-Email .ic{background:var(--chip-qual);color:var(--chip-qual-ink)}
.tl.k-Call .ic,.tl.k-Meeting .ic{background:var(--chip-won);color:var(--chip-won-ink)}
.tl .t{font-size:13px}
.tl .t b{font-weight:650}
.tl .m{font-size:11.5px;color:var(--ink-muted);margin-top:1px}
.tl .b{font-size:13px;white-space:pre-wrap;word-break:break-word;margin-top:4px;color:var(--ink)}
.tl .b .mn{background:var(--chip-new);color:var(--chip-new-ink);border-radius:4px;padding:0 3px;font-weight:600}
.tl.temp{opacity:.6}
.tl.failed .m{color:var(--crit)}

/* Email tab */
.mail{background:var(--surface-2);border:1px solid var(--hairline);border-radius:var(--r-md);padding:12px 14px}
.mailhead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px;font-size:12.5px;color:var(--ink-2)}
.mailbody{white-space:pre-wrap;word-break:break-word;font-size:13.5px;line-height:1.5;max-height:60vh;overflow:auto}
.mailnote{margin-top:8px;font-size:12px;color:var(--ink-muted)}
a.open{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:5px 10px;border-radius:var(--r-sm);border:1px solid var(--hairline);background:var(--surface);text-decoration:none;color:var(--ink);white-space:nowrap;min-height:30px}
@media (hover:hover){a.open:hover{border-color:var(--focus)}}

/* Details tab */
.dl{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.dl .fld.wide{grid-column:span 2}
.dl textarea{width:100%;font:inherit;font-size:13px;padding:6px 8px;border-radius:var(--r-sm);border:1px solid var(--hairline);background:var(--surface);color:var(--ink);min-height:70px;resize:vertical}

/* ── Companies ────────────────────────────────────────────── */
.cogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.cocard{background:var(--surface);border:1px solid var(--ring);border-radius:var(--r-md);padding:12px 13px;cursor:pointer;text-align:left;width:100%}
.cocard .nm{font-weight:650;font-size:14px}
.cocard .dm{font-size:12px;color:var(--ink-muted)}
.cocard .st{display:flex;gap:10px;margin-top:8px;font-size:12px;color:var(--ink-2);flex-wrap:wrap}
.cocard .st b{color:var(--ink)}
@media (hover:hover){.cocard:hover{border-color:var(--focus)}}
.cohead{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.cohead h2{font-size:20px;font-weight:650}
.cohead .dm{color:var(--ink-muted);font-size:13px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.plist{list-style:none}
.plist li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--hairline);font-size:13px;flex-wrap:wrap}
.plist li:last-child{border-bottom:none}
.plist .nm{font-weight:650}
.plist .em{color:var(--ink-muted);font-size:12px}
.plist .r{margin-left:auto;display:flex;gap:6px}

/* ── Reports ──────────────────────────────────────────────── */
.rgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.bars{display:flex;flex-direction:column;gap:6px}
.bar{display:grid;grid-template-columns:120px 1fr 90px;gap:8px;align-items:center;font-size:12.5px}
.bar .lab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .trk{height:12px;background:var(--chip-bg);border-radius:6px;overflow:hidden}
.bar .fill{height:100%;background:var(--navy);border-radius:6px;min-width:2px}
:root[data-theme="dark"] .bar .fill{background:#7fa3c8}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .bar .fill{background:#7fa3c8}}
.bar .v{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--surface);border:1px solid var(--ring);border-radius:var(--r-md);padding:10px 12px}
.kpi .l{font-size:11.5px;color:var(--ink-muted);font-weight:600}
.kpi .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.kpi .s{font-size:11.5px;color:var(--ink-muted)}

/* ── Modal / forms ───────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.4)}
.modal .box{background:var(--surface);border:1px solid var(--ring);border-radius:var(--r-md);width:min(620px,100%);max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.modal .box header{padding:14px 18px;border-bottom:1px solid var(--hairline);display:flex;align-items:center;gap:10px;background:var(--surface);position:static}
.modal .box header h2{font-size:16px;font-weight:650;flex:1}
.modal form,.modal .body{padding:14px 18px}
.modal .foot{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--hairline);background:var(--surface-2);flex-wrap:wrap}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.fgrid .fld.wide{grid-column:span 2}
.fld textarea{width:100%;font:inherit;font-size:13px;padding:6px 8px;border-radius:var(--r-sm);border:1px solid var(--hairline);background:var(--surface);color:var(--ink);min-height:70px;resize:vertical}
.ferr{color:var(--crit);font-size:12.5px;margin-top:8px}
.setup li{padding:8px 0;border-bottom:1px solid var(--hairline);display:flex;gap:10px;align-items:center;font-size:13px;flex-wrap:wrap}
.setup li .st{font-weight:650;min-width:60px}
.setup li .ok{color:var(--good-text)} .setup li .no{color:var(--crit)}
.setup li .d{color:var(--ink-muted);font-size:12px;flex-basis:100%}
.setup pre{background:var(--chip-bg);padding:8px;border-radius:var(--r-sm);font-size:11.5px;white-space:pre-wrap}

/* ── Toast ── */
.toast{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--toast-bg);color:var(--toast-ink);padding:10px 14px;border-radius:var(--r-md);font-size:13px;display:flex;align-items:center;gap:12px;z-index:70;max-width:calc(100vw - 32px);box-shadow:0 10px 30px rgba(0,0,0,.3);animation:toastin .18s ease-out}
.toast.bad{background:var(--toast-bad)}
.toast button{font-size:12.5px;font-weight:700;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:var(--r-sm);padding:5px 10px;cursor:pointer;white-space:nowrap}
@keyframes toastin{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}

/* ── Gate ── */
.gate{max-width:440px;margin:14vh auto;padding:0 20px;text-align:center}
.gate .mark{background:var(--navy);border-bottom:4px solid var(--yellow);border-radius:var(--r-md) var(--r-md) 0 0;padding:20px}
.gate .mark img{height:34px}
.gate .body{background:var(--surface);border:1px solid var(--ring);border-top:none;border-radius:0 0 var(--r-md) var(--r-md);padding:24px 22px}
.gate h2{font-size:16px;font-weight:650;margin-bottom:6px}
.gate p{color:var(--ink-2);font-size:13.5px;margin-bottom:18px}
.gate button{font:inherit;font-size:14px;font-weight:600;width:100%;padding:12px;border-radius:var(--r-sm);border:none;cursor:pointer;background:var(--btn-primary);color:var(--btn-primary-ink)}
@media (hover:hover){.gate button:hover{filter:brightness(1.12)}}
.gate .err{margin-top:16px;padding:11px 13px;border-radius:var(--r-sm);text-align:left;background:var(--err-bg);color:var(--err-ink);font-size:12.5px;border:1px solid var(--err-border);white-space:pre-wrap;word-break:break-word}
.spin{width:26px;height:26px;margin:8px auto;border-radius:50%;border:3px solid var(--hairline);border-top-color:var(--focus);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── Skeleton ── */
.sk{background:linear-gradient(90deg,var(--sk) 25%,var(--sk-2) 37%,var(--sk) 63%);background-size:400% 100%;animation:shine 1.4s infinite;border-radius:4px;height:12px}
.sk.big{height:28px;width:40%;margin-top:8px}
@keyframes shine{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}
footer .band{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--ink-muted);padding:14px 20px;border-top:1px solid var(--hairline);flex-wrap:wrap}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:1100px){
  .board{grid-template-columns:repeat(4,minmax(210px,1fr)) 130px}
  .d-fields{grid-template-columns:repeat(2,1fr)}
  .fld.wide{grid-column:span 2}
}
@media (max-width:860px){
  nav.side{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;width:auto;border-right:none;border-top:1px solid var(--hairline);padding:4px max(6px,env(safe-area-inset-left)) max(4px,env(safe-area-inset-bottom));display:flex;justify-content:space-around;z-index:35;overflow:visible}
  nav.side .grp,nav.side .navbtn.lo{display:none}
  .navbtn{flex-direction:column;gap:2px;padding:6px 4px;font-size:10.5px;font-weight:600;width:auto;flex:1;text-align:center;min-width:0}
  .navbtn .n{margin:0;position:absolute;top:2px;right:calc(50% - 22px);font-size:9.5px;padding:0 5px;min-width:16px}
  .navbtn{position:relative}
  main{padding:12px 12px 90px}
  .layout{min-height:auto}
  .top-title small{display:none}
  .search{max-width:none}
  .live .lbl,.btn.bell .bellLbl{display:none}
  .btn.primary .lbl{display:none}
  .drawer{width:100vw}
  .two{grid-template-columns:1fr}
  .board{grid-template-columns:repeat(6,82vw);scroll-snap-type:x mandatory;gap:10px;margin:0 -12px;padding:0 12px 8px}
  .col{scroll-snap-align:start}
  .col.closed{min-height:120px}
  .tiles{grid-template-columns:1fr 1fr}
  .tile .value{font-size:26px}
}
@media (max-width:560px){
  .top-in{gap:8px;padding:8px 10px;flex-wrap:wrap}
  .search{order:10;flex-basis:100%;max-width:none;margin:0 0 2px}
  .top-right{margin-left:auto}
  .logo-card{height:32px;padding:4px 7px}.logo-card img{height:22px}
  .top-title{display:none}
  .search input{padding-left:30px;font-size:13px}
  .me .nm{display:none}
  .d-fields{grid-template-columns:1fr 1fr;padding:10px 14px}
  .d-head,.d-body{padding-left:14px;padding-right:14px}
  .stepper{gap:3px}
  .step{min-width:0;font-size:10.5px;padding:6px 2px}
  .fgrid{grid-template-columns:1fr}
  .fgrid .fld.wide{grid-column:span 1}
  .dl{grid-template-columns:1fr}
  .dl .fld.wide{grid-column:span 1}
  .bar{grid-template-columns:90px 1fr 80px}
}

/* ── Phone (≤720px): stacked board, bigger tap targets, no zoom-on-focus ── */
@media (max-width:720px){
  /* Stacked pipeline */
  .board.stacked{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:0;padding:0;overflow:visible;scroll-snap-type:none}
  .board.stacked .col{width:100%}
  .board.stacked .col{min-height:0;scroll-snap-align:none;scroll-margin-top:calc(env(safe-area-inset-top) + 118px)}
  .board.stacked .col-h{width:100%;border:none;background:var(--surface-2);font:inherit;color:var(--ink);cursor:pointer;align-items:center;min-height:50px;padding:10px 14px;text-align:left;border-radius:var(--r-md)}
  .board.stacked .col.collapsed .col-h{border-bottom:none}
  .board.stacked .col:not(.collapsed) .col-h{border-radius:var(--r-md) var(--r-md) 0 0;border-bottom:1px solid var(--hairline)}
  .board.stacked .col-h b{font-size:15px}
  .board.stacked .col-h .n{font-size:12.5px;padding:1px 9px;min-width:24px;text-align:center}
  .board.stacked .col-h .sum{font-size:13px}
  .board.stacked .col-h .chev{margin-left:8px;color:var(--ink-muted);transition:transform .15s;flex:none}
  .board.stacked .col.collapsed .chev{transform:rotate(-90deg)}
  .board.stacked .col.collapsed .col-b{display:none}
  .board.stacked .col-b{padding:10px;gap:10px}
  .board.stacked .col.closed .col-b{gap:8px}
  .board.stacked .col .empty{padding:14px 8px;font-size:13px}
  .board.stacked #stage-Won .col-h b{color:var(--good-text)}
  .board.stacked #stage-Lost .col-h b{color:var(--ink-muted)}
  .stagebar{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -12px 12px;padding:0 12px 4px}
  .stagebar::-webkit-scrollbar{display:none}
  .sbtn{flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hairline);background:var(--surface);color:var(--ink);border-radius:999px;padding:8px 12px;font:inherit;font-size:13px;font-weight:600;min-height:40px;cursor:pointer;white-space:nowrap}
  .sbtn .n{font-size:11.5px;background:var(--chip-bg);color:var(--ink-2);border-radius:999px;padding:0 7px;min-width:20px;text-align:center}
  .sbtn.won{color:var(--good-text)} .sbtn.lost{color:var(--ink-muted)}
  .phone-hint{color:var(--ink-muted);font-size:12.5px;text-align:center;padding:14px 8px 4px}

  /* Cards: roomier, easier to read */
  .card{padding:12px 14px 11px;border-radius:12px}
  .card.flag{padding-left:12px}
  .card .co{font-size:15px}
  .card .who{font-size:13px;margin-top:2px}
  .card .sub{font-size:13px;margin-top:5px;line-height:1.4}
  .card .foot{font-size:12.5px;margin-top:10px;gap:10px}
  .card.mini-card{padding:10px 14px}
  .card.mini-card .co{font-size:14px}
  .stack{grid-template-columns:1fr}
  .stack .card .why{font-size:13px}

  /* Tap targets and type: nothing under 40px, inputs 16px so iOS doesn't zoom */
  .mini{min-height:40px;padding:8px 14px;font-size:13.5px}
  .btn{min-height:42px}
  .ico{width:40px;height:40px;font-size:18px}
  .navbtn{min-height:54px;font-size:11px}
  .tab{padding:12px 14px;font-size:14px;min-height:46px}
  .step{min-height:42px;font-size:12.5px;padding:8px 4px}
  .closebar .step{min-width:80px}
  .kind{min-height:36px;padding:6px 13px;font-size:13px}
  .fld label{font-size:11px}
  .fld input,.fld select,.dl textarea,.composer textarea,.search input{font-size:16px}
  .fld input,.fld select{min-height:44px;padding:8px 10px}
  .fld .money::before{font-size:15px}
  .composer textarea{min-height:84px;padding:10px 12px}
  .composer .row{gap:8px;margin-top:10px}
  .composer .hint{display:none}
  .composer .row #composerPost{flex-basis:100%;min-height:46px;margin-top:4px;background:var(--btn-primary);color:var(--btn-primary-ink);border-color:var(--btn-primary);font-size:14px}
  .mention-pop button{padding:11px 12px;font-size:14px}
  .tl{grid-template-columns:32px 1fr;padding:10px 0}
  .tl .t,.tl .b{font-size:14px}
  .tl .m{font-size:12px}
  a.open{min-height:40px;padding:8px 12px;font-size:13px}

  /* Drawer: pinned to both edges (iOS 100vw can exceed the screen when the page scrolls sideways) */
  html,body{overflow-x:clip}
  .drawer{left:0;right:0;width:auto;max-width:none;border-left:none;box-shadow:none}
  .drawer:has(.composer textarea:focus) .d-foot{display:none}   /* keyboard open — don't stack the action bar on the keyboard */
  .d-head{padding:12px 14px 10px}
  .d-top h2{font-size:18px}
  .d-top .meta{font-size:13px;margin-top:4px}
  .stepper{margin-top:12px;gap:5px}
  .d-fields{grid-template-columns:1fr 1fr;gap:10px;padding:12px 14px}
  .d-fields .fld.wide{grid-column:span 2}
  .d-body{padding:14px 14px 28px}
  .d-foot{padding:10px 14px;gap:8px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .d-foot .mini,.d-foot a.open{flex:1;justify-content:center;text-align:center;min-height:46px}
  .d-foot .spacer{display:none}
  .mailbody{font-size:14.5px;max-height:none}

  /* Views */
  .vhead{margin-bottom:12px;gap:8px}
  .vhead h2{font-size:20px}
  .vhead .note{font-size:12.5px}
  .kpis{grid-template-columns:1fr 1fr;gap:8px}
  .kpi{padding:12px 12px 10px}
  .kpi .v{font-size:24px}
  .rgrid{grid-template-columns:1fr;gap:10px}
  .bar{grid-template-columns:88px 1fr auto;font-size:13px}
  .bar .trk{height:14px}
  .cogrid{grid-template-columns:1fr}
  .cocard{padding:14px}
  .cocard .nm{font-size:15px}
  .cocard .st{font-size:13px}
  .tiles{grid-template-columns:1fr 1fr;gap:10px}
  .tile{padding:12px 12px 10px}
  .tile .value{font-size:26px}
  .panel{padding:14px}
  .panel h3{font-size:15px}
  .two{grid-template-columns:1fr}

  /* Modals become bottom sheets */
  .modal{align-items:flex-end;padding:0}
  .modal .box{width:100%;max-height:92vh;border-radius:16px 16px 0 0;border-bottom:none;padding-bottom:env(safe-area-inset-bottom)}
  .modal .box header{padding:14px 16px}
  .modal form,.modal .body{padding:14px 16px}
  .modal .foot{padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .modal .foot .mini{flex:1;min-height:46px}
  .fgrid{grid-template-columns:1fr}
  .fgrid .fld.wide{grid-column:span 1}
  .dl{grid-template-columns:1fr}
  .dl .fld.wide{grid-column:span 1}

  /* Toast above the bottom nav */
  .top-in{flex-wrap:wrap}
  .toast{bottom:calc(74px + env(safe-area-inset-bottom));left:12px;right:12px;transform:none;max-width:none;animation-name:toastin-ph}
  @keyframes toastin-ph{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* ── Wall (TV) ───────────────────────────────────────────── */
body.wall{--scale:1.6}
body.wall header.top{position:static}
body.wall .search,body.wall .top-right .btn,body.wall .me,body.wall nav.side,body.wall footer{display:none}
body.wall .live{font-size:22px;padding:8px 18px;pointer-events:none;border-color:transparent}
body.wall .live .pip{width:14px;height:14px}
body.wall .logo-card{height:56px;padding:8px 14px}
body.wall .logo-card img{height:38px}
body.wall .top-title{font-size:32px}
body.wall .top-title small{display:block;font-size:16px}
body.wall main{padding:18px 26px 0}
body.wall .tiles{grid-template-columns:repeat(5,1fr);gap:18px}
body.wall .tile{cursor:default;padding:18px 22px 16px}
body.wall .tile .label{font-size:22px}
body.wall .tile .value{font-size:66px}
body.wall .tile .sub{font-size:18px}
body.wall .alert h3{font-size:28px}
body.wall .alert li{font-size:22px}
body.wall .alert ul{grid-template-columns:1fr 1fr;column-gap:32px}
body.wall table{min-width:0}
.stack .card .why .chip{margin-right:4px}
body.wall th{font-size:15px}
body.wall td{font-size:22px;padding:12px 14px}
body.wall .who{font-size:24px}
body.wall .co,body.wall .subj{font-size:17px}
body.wall .chip{font-size:16px;padding:3px 12px}
body.wall .since{font-size:15px}
body.wall .av{width:36px;height:36px;font-size:14px}
body.wall tbody tr{cursor:default}
body.wall tr.more td{color:var(--ink-muted);font-size:18px;text-align:center}
.todo-ul{list-style:none;display:grid;gap:5px;margin-top:4px}
.todo-ul li{display:flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap}
.todo-ul li .why{color:var(--ink-muted);font-size:12px}
.todo-ul li.more{color:var(--ink-muted);font-size:12px}