/* Impala workspace v3 shell. Tokens first, then shell (sidebar, top bar, view), primitives, legacy view classes, overlays, responsive.
   Amber (--ai) = the AI only; jacaranda (--act / --staff) = people and actions only; neutrals elsewhere. */
:root{
  /* motion (MOTION.md): strong custom curves, nothing over 300ms in the UI */
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--ease-drawer:cubic-bezier(.32,.72,0,1);
  --dur-press:140ms;--dur-tip:125ms;--dur-pop:160ms;--dur-modal:200ms;--dur-drawer:260ms;
  --spring-settle:var(--ease-out);--spring-stamp:var(--ease-out);
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --r1:6px;--r2:8px;--r3:12px; --r-sm:6px;--r:8px;--r-lg:12px;
  --side-w:232px;--top-h:48px;
  --display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --body:"Public Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  /* light */
  --bg:#fbfaf7;--bg-2:#f4f2ec;--surface:#ffffff;--hover:rgba(40,32,12,.045);--press:rgba(40,32,12,.08);--sel:#ebe7dd;
  --ink:#14231f;--ink-2:#3a4642;--muted:#61665f;--faint:#6f6c63;--line-ctl:#948d7e;--line:#e6e2d8;--line-2:#d5cfc2;
  --ai:#9a5f0c;--ai-soft:#fcf3e3;--ai-line:#ecd2a4;
  --act:#5a4a8c;--act-soft:#efecf8;--act-line:#cdc5e8;--on-act:#ffffff;
  --good:#1f7a4a;--good-bg:#e3f3ea;--warn:#93560a;--warn-bg:#fbefd9;--bad:#a3352b;--bad-bg:#f8e4e1;
  --scrim:rgba(0,0,0,.32);--shadow-1:0 1px 2px rgba(16,24,22,.06);--shadow-2:0 8px 28px rgba(16,24,22,.14),0 1px 3px rgba(16,24,22,.08);--shadow-3:0 20px 56px rgba(16,24,22,.22);
  /* legacy aliases used by views */
  --ground:var(--bg-2);--paper:var(--surface);--soft:#f1eee6;--staff:var(--act);--staff-bg:var(--act-soft);--ai-bg:var(--ai-soft);
  --side:var(--bg-2);--side-ink:var(--ink-2);--side-muted:var(--muted);--side-hi:var(--sel);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1412;--bg-2:#0b0f0d;--surface:#151b18;--hover:rgba(240,232,214,.05);--press:rgba(240,232,214,.09);--sel:#1e2622;
  --ink:#e9e6dd;--ink-2:#c9c5ba;--muted:#999a90;--faint:#8a8c84;--line-ctl:#626c66;--line:#242c28;--line-2:#323b36;
  --ai:#f0b65a;--ai-soft:#2c2213;--ai-line:#5e451d;
  --act:#b5a6e8;--act-soft:#26213a;--act-line:#4a4170;--on-act:#14111f;
  --good:#7ad3a0;--good-bg:#14291d;--warn:#f0c26a;--warn-bg:#30260f;--bad:#f19a90;--bad-bg:#371a17;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);--shadow-2:0 8px 28px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04);--shadow-3:0 20px 56px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05);
  --soft:#1d2622;--scrim:rgba(0,0,0,.56);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1412;--bg-2:#0b0f0d;--surface:#151b18;--hover:rgba(240,232,214,.05);--press:rgba(240,232,214,.09);--sel:#1e2622;
  --ink:#e9e6dd;--ink-2:#c9c5ba;--muted:#999a90;--faint:#8a8c84;--line-ctl:#626c66;--line:#242c28;--line-2:#323b36;
  --ai:#f0b65a;--ai-soft:#2c2213;--ai-line:#5e451d;
  --act:#b5a6e8;--act-soft:#26213a;--act-line:#4a4170;--on-act:#14111f;
  --good:#7ad3a0;--good-bg:#14291d;--warn:#f0c26a;--warn-bg:#30260f;--bad:#f19a90;--bad-bg:#371a17;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);--shadow-2:0 8px 28px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04);--shadow-3:0 20px 56px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05);
  --soft:#1d2622;--scrim:rgba(0,0,0,.56);color-scheme:dark}

/* ===== base ===== */
*{box-sizing:border-box}
html,body{height:100%;margin:0} html{overflow:hidden} /* the view is the only scroller: scrollIntoView must never move the shell */
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,h4,p{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:where(button,select,input,textarea,a,[role=button],[tabindex]):focus-visible{outline:2px solid var(--act);outline-offset:2px}
.muted{color:var(--muted)} .small{font-size:12px} .mono{font-family:var(--mono)}
::selection{background:var(--act-soft)}

/* ===== app shell ===== */
.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);height:100%;transition:grid-template-columns 200ms var(--ease-in-out)}
.app.rail{--side-w:56px}
@media (prefers-reduced-motion:reduce){.app{transition:none}}

/* sidebar */
.side{background:var(--bg-2);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:var(--s2);gap:0;overflow-y:hidden;overflow-x:hidden;min-width:0}
.brand{display:flex;align-items:center;gap:var(--s2);height:40px;padding:0 var(--s1) 0 6px;margin-bottom:var(--s2);flex:none}
.logo{width:24px;height:24px;flex:none;display:block}
.brand-t{min-width:0;flex:1} .brand-t b{display:block;font:600 13px/1.2 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.brand-t small{display:block;color:var(--muted);font-size:11px;line-height:1.3;white-space:nowrap}
.sidetoggle{all:unset;box-sizing:border-box;width:28px;height:28px;border-radius:var(--r1);display:grid;place-items:center;color:var(--muted);cursor:pointer;flex:none}
.sidetoggle svg{width:16px;height:16px}
.sidetoggle:hover{background:var(--hover);color:var(--ink)} .sidetoggle:active{background:var(--press)}
.sidetoggle:focus-visible{outline:2px solid var(--act);outline-offset:0}
.navlist{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
.navsec{font:600 11px/1 var(--body);color:var(--faint);padding:var(--s4) var(--s2) 6px;letter-spacing:.01em}
.navsec:first-child{padding-top:var(--s1)}
.nav{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;gap:var(--s2);height:32px;padding:0 var(--s2);border-radius:var(--r1);cursor:pointer;font-size:13px;font-weight:500;color:var(--ink-2);transition:background .12s,color .12s}
.nav svg{width:16px;height:16px;flex:none;color:var(--muted)}
.nav .nl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav:hover{background:var(--hover);color:var(--ink)}
.nav:active{background:var(--press)}
.nav[aria-current="page"]{background:var(--sel);color:var(--ink);font-weight:600}
.nav[aria-current="page"] svg{color:var(--act)}
.nav:focus-visible{outline:2px solid var(--act);outline-offset:-2px}
.nav .b{margin-left:auto;flex:none;min-width:20px;height:18px;padding:0 6px;border-radius:999px;display:grid;place-items:center;font:600 11px/1 var(--body);font-variant-numeric:tabular-nums;background:var(--ai-soft);color:var(--ai)}
.nav .b.st{background:var(--act);color:var(--on-act)}
.sidefoot{margin-top:auto;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3) var(--s1) var(--s1);border-top:1px solid var(--line);flex:none}
.aipulse{display:flex;gap:var(--s2);align-items:center;font-size:12px;color:var(--ink-2);min-height:20px;padding:0 var(--s1)}
.aipulse i{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px var(--good-bg);flex:none}
.aipulse span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-ctl{display:flex;flex-direction:column;gap:var(--s1)}
.sf-ctl label{font-size:11px;color:var(--muted);padding:0 var(--s1)}
.sf-ctl select,.sidefoot select{height:28px;width:100%;border:1px solid var(--line);border-radius:var(--r1);background:var(--surface);color:var(--ink);font:inherit;font-size:12px;padding:0 var(--s2)}
.side-note{font-size:11px;color:var(--faint);padding:0 var(--s1)}
.themeseg{display:flex;background:var(--hover);border-radius:var(--r1);padding:2px;gap:2px}
.themeseg button{all:unset;box-sizing:border-box;flex:1;height:24px;display:grid;place-items:center;border-radius:4px;cursor:pointer;color:var(--muted)}
.themeseg button svg{width:14px;height:14px}
.themeseg button:hover{color:var(--ink)}
.themeseg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
.themeseg button:focus-visible{outline:2px solid var(--act);outline-offset:-2px}

/* rail (56px) */
.app.rail .side{padding:var(--s2) 6px}
.app.rail .brand{flex-direction:column;justify-content:center;height:auto;gap:var(--s1);padding:var(--s1) 0 0}
.app.rail .brand-t{display:none}
.app.rail .navsec{height:1px;padding:0;margin:var(--s2) 6px;background:var(--line);font-size:0;overflow:hidden}
.app.rail .navsec:first-child{display:none}
.app.rail .nav{justify-content:center;padding:0;height:36px}
.app.rail .nav svg{width:18px;height:18px}
.app.rail .nav .nl{display:none}
.app.rail .nav .b{position:absolute;top:3px;right:3px;min-width:0;width:8px;height:8px;padding:0;font-size:0;border:2px solid var(--bg-2);box-sizing:content-box}
.app.rail .sidefoot{padding:var(--s2) 0 0;align-items:center;gap:var(--s1)}
.app.rail .sf-ctl,.app.rail .side-note,.app.rail .aipulse span{display:none}
.app.rail .aipulse{padding:0;justify-content:center;height:24px}
.app.rail .themeseg{display:none}

/* main + top bar */
.main{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden;background:var(--bg)}
.top{display:flex;align-items:center;gap:var(--s2);height:var(--top-h);min-height:var(--top-h);padding:0 var(--s4);border-bottom:1px solid var(--line);background:var(--bg);position:relative;z-index:30;flex:none}
.tt{display:flex;align-items:center;gap:6px;min-width:0;flex:0 1 auto}
.crumb{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--muted);white-space:nowrap}
.crumb:empty{display:none}
.crumb-d{color:var(--faint)}
.crumb .lnk{font-weight:500;border-bottom:0;color:var(--muted)} .crumb .lnk:hover{color:var(--ink)}
.top h1{font:600 13px/1.2 var(--body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.search{position:relative;margin-left:auto;display:flex;align-items:center;gap:var(--s2);height:32px;width:300px;min-width:0;padding:0 var(--s2) 0 10px;background:var(--soft);border:1px solid transparent;border-radius:var(--r1);transition:border-color .12s,background .12s,box-shadow .12s}
.search:hover{border-color:var(--line)}
.search:focus-within{background:var(--surface);border-color:var(--act);box-shadow:0 0 0 3px var(--act-soft)}
.search svg{width:14px;height:14px;flex:none;color:var(--muted)}
.search input{flex:1;min-width:0;width:auto;border:0;background:transparent;font:inherit;font-size:13px;color:var(--ink);outline:none;padding:0}
.search input::placeholder{color:var(--faint)}
.search input:focus-visible{outline:none}
.kbd{font:500 11px/18px var(--body);color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 5px;background:var(--surface);flex:none}
.search:focus-within .kbd{display:none}
.iconbtn{all:unset;box-sizing:border-box;position:relative;width:32px;height:32px;border-radius:var(--r1);display:grid;place-items:center;cursor:pointer;color:var(--ink-2);flex:none}
.iconbtn svg{width:16px;height:16px}
.iconbtn:hover{background:var(--hover);color:var(--ink)} .iconbtn:active{background:var(--press)}
.iconbtn:focus-visible{outline:2px solid var(--act);outline-offset:0}
.iconbtn.search-mob{display:none}
.iconbtn .dot{position:absolute;top:2px;left:17px;right:auto;min-width:14px;width:auto;height:14px;padding:0 3px;border-radius:999px;background:var(--bad);color:#fff;font:700 9px/14px var(--body);text-align:center;border:1.5px solid var(--bg);box-sizing:content-box;display:block}
.iconbtn .dot[hidden]{display:none}
#logtp{margin-left:var(--s1)}
#logtp[hidden]{display:none}

/* routed view */
.view{flex:1;min-height:0;overflow-y:auto;padding:var(--s5) var(--s6) var(--s6);display:flex;flex-direction:column;gap:var(--s4);background:var(--bg)}
.view:focus{outline:none}
.view:not(.full)>*{width:100%;max-width:1200px;margin-inline:auto}
.view.full{padding:0;gap:0;overflow:hidden}
.view.full>*{flex:1 1 auto;min-height:0;max-width:none;margin:0}
.view.full>.phead{flex:none;padding:0 var(--s4);min-height:48px;border-bottom:1px solid var(--line)}
.view.full>.phead h2{font-size:15px}
.doc{width:100%;max-width:1200px;margin-inline:auto;padding:0}
.view.full .doc{padding:0 var(--s5)}
.pane{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:auto}
body.locked .view{overflow:hidden}

/* compact page header: one line */
.phead{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);min-height:32px;flex:none;height:auto}
.phead h2{font:600 18px/1.3 var(--body);letter-spacing:-.01em;color:var(--ink);margin-right:var(--s1);white-space:nowrap}
.phead-chip{display:inline-flex;align-items:center;height:22px;padding:0 var(--s2);border-radius:999px;background:var(--soft);color:var(--ink-2);font-size:12px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.phead-i{all:unset;box-sizing:border-box;width:24px;height:24px;border-radius:var(--r1);display:grid;place-items:center;color:var(--faint);cursor:help}
.phead-i svg{width:15px;height:15px}
.phead-i:hover{color:var(--ink);background:var(--hover)}
.phead-i:focus-visible{outline:2px solid var(--act);outline-offset:0}
.phead-a{margin-left:auto;display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.phead-t{display:flex;align-items:center;gap:var(--s2);min-width:0} .phead p{color:var(--muted);font-size:12px}

/* tooltip */
.tip{position:fixed;z-index:90;max-width:300px;padding:5px var(--s2);border-radius:var(--r1);background:var(--ink);color:var(--bg);font-size:12px;line-height:1.4;pointer-events:none;box-shadow:var(--shadow-2);animation:tipin var(--dur-tip) var(--ease-out)}
.tip[hidden]{display:none}
@keyframes tipin{from{opacity:0;scale:.97}}
.tip[data-instant]{animation:none}

/* ===== shared primitives ===== */
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 var(--s3);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:var(--r1);font:600 13px/1 var(--body);cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .12s,border-color .12s,color .12s,filter .12s;flex:none}
.btn svg{width:14px;height:14px;flex:none}
.btn:hover{background:var(--hover);border-color:var(--line-2)}
.btn:active{background:var(--press)}
.btn:focus-visible{outline:2px solid var(--act);outline-offset:2px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn.primary,.btn.st.fill{background:var(--act);border-color:var(--act);color:var(--on-act)}
.btn.primary:hover,.btn.st.fill:hover{background:var(--act);filter:brightness(1.08)}
.btn.primary:active,.btn.st.fill:active{filter:brightness(.95)}
.btn.st{color:var(--act);border-color:var(--act-line)} .btn.st:hover{background:var(--act-soft)}
.btn.ai{color:var(--ai);border-color:var(--ai-line)} .btn.ai:hover{background:var(--ai-soft)}
.btn.ai.fill{background:var(--ai);border-color:var(--ai);color:var(--bg)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)} .btn.ghost:hover{background:var(--hover);color:var(--ink)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent)} .btn.danger:hover{background:var(--bad-bg)}
.btn.danger.fill{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.sm{height:28px;padding:0 10px;font-size:12px}
.btn.icon{width:32px;padding:0} .btn.sm.icon{width:28px}
/* inputs */
.inp,.field input,.field select,.field textarea,.compose input{height:32px;width:100%;border:1px solid var(--line-2);border-radius:var(--r1);background:var(--surface);color:var(--ink);font:inherit;font-size:13px;padding:0 10px;transition:border-color .12s,box-shadow .12s}
textarea.inp,.field textarea{height:auto;min-height:72px;padding:var(--s2) 10px;line-height:1.5;resize:vertical}
.inp:hover,.field :is(input,select,textarea):hover{border-color:var(--faint)}
.inp:focus,.field :is(input,select,textarea):focus,.compose input:focus{outline:none;border-color:var(--act);box-shadow:0 0 0 3px var(--act-soft)}
.inp::placeholder,.field ::placeholder{color:var(--faint)}
.field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ink-2)}
.field label{font-weight:500}
/* chips: span.chip = 22px label; button.chip = 28px filter */
.chip{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 var(--s2);border-radius:999px;background:var(--soft);color:var(--ink-2);font:500 11px/1 var(--body);white-space:nowrap;border:0}
.chip.ai{background:var(--ai-soft);color:var(--ai)} .chip.st,.chip.act{background:var(--act-soft);color:var(--act)}
.chip.good{background:var(--good-bg);color:var(--good)} .chip.warn{background:var(--warn-bg);color:var(--warn)} .chip.bad{background:var(--bad-bg);color:var(--bad)}
button.chip{height:28px;padding:0 10px;font-size:12px;background:transparent;border:1px solid var(--line-2);color:var(--ink-2);cursor:pointer}
button.chip:hover{background:var(--hover);color:var(--ink)}
button.chip.on,button.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
/* segmented control: the one filter/sub-view style for every page (subTabs() renders it) */
.seg{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:var(--r2);background:var(--soft);flex-wrap:wrap;max-width:100%}
.seg button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 var(--s3);border-radius:var(--r1);font:500 13px/1 var(--body);color:var(--ink-2);cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-selected="true"],.seg button[aria-pressed="true"],.seg button.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-1)}
.seg button:focus-visible{outline:2px solid var(--act);outline-offset:-2px}
.seg-n{font:600 11px/1 var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
/* lists */
.list{display:flex;flex-direction:column}
.list-row{display:flex;align-items:center;gap:var(--s3);min-height:40px;padding:var(--s2) var(--s3);border-radius:var(--r1);cursor:pointer;position:relative;color:inherit;text-align:left;background:transparent;border:0;width:100%;transition:background .1s}
.list-row:hover{background:var(--hover)}
.list-row:active{background:var(--press)}
.list-row.is-sel,.list-row[aria-selected="true"],.list-row[aria-current="true"]{background:var(--act-soft)}
.list-row.is-sel::before,.list-row[aria-selected="true"]::before,.list-row[aria-current="true"]::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--act)}
.list-row:focus-visible{outline:2px solid var(--act);outline-offset:-2px}
.lr-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lr-t{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-s{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lr-m{font-size:12px;color:var(--muted);white-space:nowrap;flex:none;font-variant-numeric:tabular-nums}
.group-label{font:600 11px/1.2 var(--body);color:var(--muted);padding:var(--s4) var(--s3) var(--s1);letter-spacing:.01em}
.group-label:first-child{padding-top:var(--s2)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none;vertical-align:middle}
.dot.ai{background:var(--ai)} .dot.act,.dot.st{background:var(--act)} .dot.good{background:var(--good)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)} .dot.mute{background:var(--line-2)}
.dot.ring{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;color:var(--act)}
.dot.ring.ai{color:var(--ai)}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:18px;min-width:18px;padding:0 6px;border-radius:999px;background:var(--soft);color:var(--ink-2);font:600 11px/1 var(--body);font-variant-numeric:tabular-nums;white-space:nowrap}
.pill.ai{background:var(--ai-soft);color:var(--ai)} .pill.act{background:var(--act-soft);color:var(--act)}
.pill.good{background:var(--good-bg);color:var(--good)} .pill.warn{background:var(--warn-bg);color:var(--warn)} .pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.solid{background:var(--act);color:var(--on-act)}
/* AI checklist card */
.ai-card{border:1px solid var(--ai-line);border-radius:var(--r2);background:var(--surface);overflow:hidden;display:flex;flex-direction:column}
.ai-card-h{display:flex;align-items:center;gap:var(--s2);padding:10px var(--s3);background:var(--ai-soft);color:var(--ai);font-size:13px;font-weight:600}
.ai-card-h svg{width:14px;height:14px;flex:none}
.ai-card-st{margin-left:auto;font-size:12px;font-weight:500;color:var(--ai);opacity:.85}
.ai-card-b{display:flex;flex-direction:column;padding:var(--s1) 0}
.ai-check{display:flex;align-items:flex-start;gap:var(--s2);padding:6px var(--s3);font-size:13px;color:var(--ink)}
.ai-check::before{content:"";flex:none;width:14px;height:14px;margin-top:2px;background:var(--ai);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat}
.ai-check small{display:block;color:var(--muted);font-size:12px}
.ai-card-f{display:flex;gap:var(--s2);padding:var(--s3);border-top:1px solid var(--line)}
/* empty + skeleton */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:var(--s6) var(--s4);text-align:center;color:var(--muted);font-size:13px}
.empty-ic{color:var(--faint)} .empty-ic svg,.empty>svg{width:32px;height:32px}
.empty-t{font-weight:600;color:var(--ink);font-size:13px}
.empty-s{font-size:12px;color:var(--muted);max-width:40ch}
.empty .btn{margin-top:var(--s2)}
.skeleton,.sk-line,.sk-row,.sk-av{display:block;border-radius:var(--r1);background:linear-gradient(90deg,var(--soft) 0%,var(--hover) 50%,var(--soft) 100%);background-size:200% 100%;animation:shimmer 1.3s linear infinite}
.sk-line{height:12px;margin:6px 0} .sk-row{height:40px;margin-bottom:4px} .sk-av{width:32px;height:32px;border-radius:50%}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skeleton,.sk-line,.sk-row,.sk-av{animation:none}}

/* ===== shared view classes (legacy names, v3 tokens) ===== */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.card h2{font:600 14px/1.3 var(--body)}
.card h3{font:600 11px/1.3 var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:var(--s2);align-items:center}
.grid{display:grid;gap:var(--s4)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.item{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.lvl{display:inline-flex;align-items:center;height:20px;font:600 11px/1 var(--body);padding:0 6px;border-radius:4px;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.lvl.HOT{background:var(--bad-bg);color:var(--bad)} .lvl.WARM{background:var(--warn-bg);color:var(--warn)} .lvl.COLD{background:var(--soft);color:var(--muted)}
.lnk{all:unset;cursor:pointer;font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.lnk:hover{color:var(--act);text-decoration-color:currentColor}
.lnk.ai{color:var(--ai)} .lnk.ai:hover{color:var(--ai);text-decoration-color:currentColor}
.lnk[disabled]{opacity:.4;cursor:default;text-decoration:none}
.lnk:focus-visible{outline:2px solid var(--act);outline-offset:2px;border-radius:2px}
.row{display:grid;align-items:center;gap:var(--s3);min-height:40px;padding:var(--s2) var(--s3);border-radius:var(--r1);cursor:pointer}
.row:hover{background:var(--hover)}
.row:focus-visible,.conv:focus-visible,.deal:focus-visible{outline:2px solid var(--act);outline-offset:-2px}
.sev{width:4px;align-self:stretch;border-radius:2px;background:var(--good)} .sev.bad{background:var(--bad)} .sev.warn{background:var(--warn)}
.cd{font:600 12px var(--body);color:var(--bad);white-space:nowrap;font-variant-numeric:tabular-nums} .cd.w{color:var(--warn)}
.av{width:32px;height:32px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font:600 12px var(--body);color:var(--ink-2);flex:none}
.aistate{display:inline-flex;gap:6px;align-items:center;height:22px;font:600 11px/1 var(--body);padding:0 var(--s2);border-radius:999px;white-space:nowrap}
.aistate i{width:6px;height:6px;border-radius:50%}
.aistate.on{background:var(--ai-soft);color:var(--ai)} .aistate.on i{background:var(--ai)}
.aistate.off{background:var(--act-soft);color:var(--act)} .aistate.off i{background:var(--act)}
.aistate.won{background:var(--good-bg);color:var(--good)} .aistate.won i{background:var(--good)}
.aistate.lost{background:var(--soft);color:var(--muted)} .aistate.lost i{background:var(--muted)}
.prov{font:500 11px var(--body);padding:1px 6px;border-radius:4px;background:var(--soft);color:var(--muted);margin-left:6px;white-space:nowrap}
.prov.c{background:var(--ai-soft);color:var(--ai)} .prov.v{background:var(--act-soft);color:var(--act)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px var(--s3);font-size:13px;margin:0} .kv dt{color:var(--muted)} .kv dd{margin:0}
.brief,.draft{background:var(--ai-soft);border:1px solid var(--ai-line);border-radius:var(--r2);padding:10px var(--s3);font-size:14px;line-height:1.55}
.banner{display:flex;gap:var(--s2);align-items:center;background:var(--warn-bg);color:var(--warn);border-radius:var(--r2);padding:var(--s2) var(--s3);font-size:13px;flex-wrap:wrap}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:2px;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color .12s,background .12s}
.tile:hover{border-color:var(--line-2);background:var(--hover)}
.tile b{font:700 28px/1.1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.tile span{font-size:12px;color:var(--muted)}
.tile.ai b{color:var(--ai)} .tile.st b{color:var(--act)}
.tile:focus-visible{outline:2px solid var(--act);outline-offset:2px}
.big{font:700 28px/1 var(--display);color:var(--ai);font-variant-numeric:tabular-nums}
table{border-collapse:collapse;width:100%;font-size:13px} th,td{text-align:left;padding:var(--s2) var(--s3);border-top:1px solid var(--line);vertical-align:middle}
thead th{border-top:0;font:600 11px var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);height:32px}
tbody tr:hover td{background:var(--hover)}
.tw{overflow-x:auto;position:relative} /* the containing block for sr-only labels in sortable headers, so they cannot widen the page past the scroll box */
.bar{height:6px;border-radius:3px;background:var(--soft);overflow:hidden} .bar span{display:block;height:100%;background:var(--ai);border-radius:3px}
.tabs{display:flex;gap:var(--s1);border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs button{all:unset;cursor:pointer;height:36px;padding:0 var(--s3);font-size:13px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;box-sizing:border-box}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink);font-weight:600;border-color:var(--ink)}
.tabs button:focus-visible{outline:2px solid var(--act);outline-offset:-2px}
/* timeline */
.ev{display:grid;grid-template-columns:44px 10px minmax(0,1fr);gap:0 var(--s2);padding:6px 0;align-items:start}
.ev time{font:500 11px/20px var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
.ev .d{width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--ai)} .ev .d.st{background:var(--act)} .ev .d.sys{background:var(--faint)}
.ev p{font-size:13px} .ev p small{display:block;color:var(--muted);font-size:12px}
.spark{width:100%;height:40px;display:block}
.plus{color:var(--good);font-variant-numeric:tabular-nums;font-weight:600} .minus{color:var(--bad);font-variant-numeric:tabular-nums;font-weight:600}
.reasons div{display:flex;justify-content:space-between;gap:var(--s2);border-bottom:1px solid var(--line);padding:6px 0;font-size:13px}
.reasons div:last-child{border-bottom:0}
/* lead stepper */
.lhead{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center}
.lhead h2{font:600 20px/1.2 var(--body)}
.stepper{display:flex;gap:var(--s1);overflow-x:auto;padding-bottom:2px}
.stp{flex:1 0 72px;display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--muted)}
.stp span{height:4px;border-radius:2px;background:var(--soft)} .stp.ai span{background:var(--ai)} .stp.st span{background:var(--act)} .stp.now{color:var(--ink);font-weight:600}
.stp.lostpill{flex:0 0 auto;min-width:96px;color:var(--bad);font-weight:600} .stp.lostpill span{background:var(--bad)} .stp.lostpill small{font-weight:400;color:var(--muted)}
/* inbox (legacy; work lane owns the detail) */
.inbox{display:grid;grid-template-columns:320px minmax(0,1fr) 300px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;min-height:560px}
.view.full .inbox{border:0;border-radius:0;min-height:0;height:100%}
.convlist{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto}
.filters{display:flex;gap:6px;flex-wrap:wrap;padding:var(--s2) var(--s3);border-bottom:1px solid var(--line)}
.filters button{height:26px;border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:0 10px;font-size:12px;font-weight:500;color:var(--ink-2);cursor:pointer}
.filters button:hover{background:var(--hover)}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.conv{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:var(--s3);padding:10px var(--s3);cursor:pointer;align-items:start;position:relative}
.conv:hover{background:var(--hover)} .conv[aria-current="true"]{background:var(--act-soft)}
.conv[aria-current="true"]::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--act)}
.conv p{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv b{display:block;font-size:13px;font-weight:600}
.chat{display:flex;flex-direction:column;min-width:0;min-height:0}
.chathead{display:flex;align-items:center;gap:var(--s2);padding:0 var(--s4);min-height:48px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.msgs{flex:1;min-height:0;overflow-y:auto;padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);background:var(--bg-2)}
.msg{max-width:72%;padding:var(--s2) var(--s3);border-radius:var(--r3);display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.5}
.msg small{font-size:11px;color:var(--muted)}
.msg.in{background:var(--surface);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.msg.ai{background:var(--ai-soft);border:1px solid var(--ai-line);align-self:flex-end;border-bottom-right-radius:4px}
.msg.st{background:var(--act-soft);border:1px solid var(--act-line);align-self:flex-end;border-bottom-right-radius:4px}
.msg.sys{align-self:center;background:transparent;border:0;font:500 11px var(--body);color:var(--muted);padding:2px}
.who{font:600 11px var(--body)} .who.ai{color:var(--ai)} .who.st{color:var(--act)}
.held{align-self:stretch;border:1px dashed var(--act-line);border-radius:var(--r2);padding:var(--s2) var(--s3);display:flex;gap:var(--s3);align-items:center;background:var(--surface);font-size:13px;flex-wrap:wrap}
.compose{display:flex;gap:var(--s2);padding:var(--s3);border-top:1px solid var(--line);align-items:center;background:var(--surface)}
.compose input{flex:1;min-width:0;height:36px}
.ctx{border-left:1px solid var(--line);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);overflow-y:auto;min-width:0;min-height:0}
.working{align-self:flex-end;display:flex;gap:var(--s2);align-items:center;font-size:12px;color:var(--ai)}
.dots{display:inline-flex;gap:3px} .dots i{width:5px;height:5px;border-radius:50%;background:var(--ai);animation:p 1.2s infinite} .dots i:nth-child(2){animation-delay:.2s} .dots i:nth-child(3){animation-delay:.4s}
@keyframes p{0%,100%{opacity:.2}50%{opacity:1}} @media (prefers-reduced-motion:reduce){.dots i{animation:none;opacity:.8}}
/* board (legacy; ops lane owns the detail) */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:var(--s3);overflow-x:auto;padding-bottom:var(--s2)}
.col{background:var(--bg-2);border-radius:var(--r2);padding:var(--s2);display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.col>header{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:13px;padding:var(--s1)}
.deal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:10px var(--s3);display:flex;flex-direction:column;gap:6px;cursor:pointer;font-size:13px;box-shadow:var(--shadow-1);transition:border-color .12s}
.deal:hover{border-color:var(--line-2)}
.deal .mv{font:500 11px var(--body)} .deal .mv.ai{color:var(--ai)} .deal .mv.st{color:var(--act)}
.idle{font:600 11px var(--body);color:var(--bad)}

/* ===== overlays ===== */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:40;display:flex;justify-content:flex-end;animation:fade 150ms var(--ease-out)}
.drawer{width:min(440px,100%);height:100%;background:var(--surface);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);overflow-y:auto;box-shadow:var(--shadow-3);animation:slidein var(--dur-drawer) var(--ease-drawer);border-left:1px solid var(--line)}
.drawer h2{font:600 18px/1.3 var(--body)!important}
.modal{margin:auto;width:min(480px,calc(100% - 32px));max-height:calc(100% - 48px);overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);box-shadow:var(--shadow-3);animation:pop var(--dur-modal) var(--ease-out)}
.modal h2{font:600 15px/1.3 var(--body)!important}
.modal>div:last-child{padding-top:var(--s1)}
.notif{position:absolute;right:var(--s4);top:calc(var(--top-h) + 4px);width:min(380px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--shadow-2);z-index:45;padding:var(--s1);display:flex;flex-direction:column;gap:2px;transform-origin:top right;animation:pop var(--dur-pop) var(--ease-out)}
.notif-h{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s2) 10px;border-bottom:1px solid var(--line);margin-bottom:var(--s1)}
.notif-h b{font:600 13px var(--body)} .notif-h .lnk{margin-left:auto;font-size:12px}
.notif>.btn{margin:var(--s1) var(--s2) var(--s2)}
.nitem{all:unset;box-sizing:border-box;display:grid;grid-template-columns:4px minmax(0,1fr) 14px;gap:10px;align-items:center;padding:var(--s2);border-radius:var(--r1);cursor:pointer;font-size:13px}
.nitem:hover{background:var(--hover)} .nitem:focus-visible{outline:2px solid var(--act);outline-offset:-2px}
.nitem b{display:block;font-weight:500} .nitem.unread b{font-weight:600}
.nitem small{display:block;color:var(--muted);font-size:12px}
.nitem svg{width:14px;height:14px;color:var(--faint)}
.sres{position:absolute;top:calc(100% + 6px);right:0;width:min(420px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--shadow-2);padding:var(--s1);display:flex;flex-direction:column;gap:2px;z-index:46}
.sres[hidden]{display:none}
.sr-h{font:600 11px var(--body);color:var(--muted);padding:6px var(--s2) 2px}
.sri{all:unset;box-sizing:border-box;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:40px;padding:6px var(--s2);border-radius:var(--r1);cursor:pointer}
.sri .av{width:28px;height:28px;font-size:11px}
.sri-t{min-width:0} .sri-t b{display:block;font-size:13px;font-weight:600} .sri-t small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sri:hover,.sri.on{background:var(--hover)}
.sri:focus-visible{outline:2px solid var(--act);outline-offset:-2px}
.sr-empty{padding:var(--s4);color:var(--muted);font-size:13px;text-align:center}
/* a toast is text only (core.js): clicks pass through to whatever it covers, such as the composer's Reply/Note switch */
.toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:max-content;max-width:min(420px,calc(100vw - 32px));background:var(--ink);color:var(--bg);padding:10px var(--s3);border-radius:var(--r2);font-size:13px;line-height:1.4;text-align:center;z-index:60;box-shadow:var(--shadow-3);animation:toastin 220ms var(--ease-out);pointer-events:none}
@keyframes fade{from{opacity:0}} @keyframes slidein{from{translate:100% 0}} @keyframes pop{from{scale:.96;opacity:0}}
@keyframes up{from{translate:0 100%}} @keyframes toastin{from{opacity:0;translate:0 8px}}
@media (prefers-reduced-motion:reduce){.scrim,.drawer,.modal,.sheet,.notif,.toast,.tip{animation:none}}
#backbtn{display:none!important}
/* phone tab bar + more sheet */
.tabbar{display:none}
.sheet-scrim{align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:520px;background:var(--surface);border-radius:var(--r3) var(--r3) 0 0;padding:var(--s2) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:var(--s3);animation:up var(--dur-drawer) var(--ease-drawer);max-height:85%;overflow-y:auto;box-shadow:var(--shadow-3)}
.sheet-grip{width:36px;height:4px;border-radius:2px;background:var(--line-2);align-self:center}
.sheet-h{display:flex;align-items:center;justify-content:space-between} .sheet-h b{font:600 16px var(--body)}
.sheet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.sheet-item{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--s3) var(--s1);border-radius:var(--r2);background:var(--bg-2);cursor:pointer;font-size:12px;text-align:center}
.sheet-item svg{width:20px;height:20px;color:var(--ink-2)}
.sheet-item[aria-current="page"]{background:var(--act-soft);color:var(--act);font-weight:600} .sheet-item[aria-current="page"] svg{color:var(--act)}
.sheet-item .b{position:absolute;top:6px;right:8px;font:600 10px/16px var(--body);background:var(--ai-soft);color:var(--ai);border-radius:999px;padding:0 6px}
.sheet-item .b.st{background:var(--act);color:var(--on-act)}
.sheet-item:focus-visible{outline:2px solid var(--act)}
.sheet-foot{display:flex;flex-direction:column;gap:var(--s2);border-top:1px solid var(--line);padding-top:var(--s3)}
.sheet-foot label{font-size:12px;color:var(--muted)}
.sheet-foot select{height:36px;border:1px solid var(--line-2);border-radius:var(--r1);padding:0 var(--s2);background:var(--surface);color:var(--ink);font:inherit}
.sheet-foot .themeseg button{height:32px}

/* ===== responsive ===== */
@media (max-width:1180px){.inbox{grid-template-columns:280px minmax(0,1fr)}.ctx{display:none}}
@media (max-width:1100px){.search{width:220px}.view{padding:var(--s5)}}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .app,.app.rail{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  .side{display:none}
  .tabbar{display:flex;background:var(--bg);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));gap:2px;z-index:35}
  .tab{all:unset;box-sizing:border-box;flex:1;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;height:48px;justify-content:center;border-radius:var(--r2);cursor:pointer;color:var(--muted);font-size:10.5px;font-weight:500}
  .tab svg{width:20px;height:20px}
  .tab .nl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tab[aria-current="page"]{color:var(--act);font-weight:600}
  .tab[aria-current="page"] svg{stroke-width:2.4}
  .tab .b{position:absolute;top:3px;left:calc(50% + 6px);font:600 10px/16px var(--body);background:var(--ai-soft);color:var(--ai);border-radius:999px;padding:0 5px;min-width:16px;text-align:center}
  .tab .b.st{background:var(--act);color:var(--on-act)}
  .tab:focus-visible{outline:2px solid var(--act);outline-offset:-2px}
  .top{height:auto;min-height:calc(var(--top-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--s2) 0 var(--s4);gap:var(--s1)}
  .top h1{font:600 16px/1.2 var(--body)} .crumb{display:none}
  .search{display:none;margin-left:0;width:auto}
  .iconbtn.search-mob{display:grid;margin-left:auto}
  .top.searching .tt,.top.searching .search-mob,.top.searching #bell,.top.searching #logtp{display:none}
  .top.searching .search{display:flex;flex:1;margin-right:var(--s2)}
  .top.searching .search input{font-size:16px}
  .kbd{display:none}
  .sres{left:0;right:0;width:auto}
  #logtp .lt{display:none} #logtp{width:32px;padding:0}
  .notif{right:var(--s2);left:var(--s2);width:auto}
  .view{padding:var(--s4) var(--s4) var(--s5);gap:var(--s3)}
  .view.full{padding:0}
  .phead h2{font-size:16px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .inbox{grid-template-columns:1fr} .convlist{display:var(--cl,flex)} .chat{display:var(--ch,none)}
  .inbox.open{--cl:none;--ch:flex}
  .msg{max-width:86%}
  .toast{left:var(--s4);right:var(--s4);transform:none;width:auto;max-width:none;bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  #backbtn{display:inline-flex!important}
  .drawer{width:100%;padding:var(--s4)}
  .modal{width:calc(100% - 24px);padding:var(--s4)}
  .tip{display:none}
}

/* ===== art direction: "a developer's ledger" (see DESIGN.md › Art direction) ===== */
/* page titles in the display face on document pages; full-bleed workspaces keep the compact UI title */
.view:not(.full) .phead h2{font:600 20px/1.2 var(--display);letter-spacing:-.015em}
.view:not(.full)>.phead{padding-bottom:var(--s3);border-bottom:1px solid var(--line);box-shadow:0 3px 0 -2px var(--line)} /* the ledger double rule */
.phead-chip{font-family:var(--mono);font-size:11px;font-weight:500;background:transparent;border:1px solid var(--line);color:var(--ink-2)}
body{font-variant-numeric:tabular-nums}
/* section label: <span class="sl">Response</span> (no decorative numbers) */
.sl{display:inline-flex;align-items:baseline;gap:var(--s2);font:600 11px/1.4 var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.sl i{font:500 11px var(--mono);font-style:normal;letter-spacing:0;color:var(--faint)}
.sl i::after{content:" —"}
/* double rule like a ledger total */
.rule-2{border:0;height:4px;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line);margin:var(--s3) 0}
/* hero figure for report pages */
.hero-n{font:700 64px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.big-n{font:600 32px/1.05 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mid-n{font:600 22px/1.1 var(--display);letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.kes{font-size:.6em;color:var(--muted);font-weight:500;letter-spacing:0;margin-right:.2em}
/* footnotes */
.fn{font:400 11px/1.5 var(--mono);color:var(--muted)} .fn sup,sup.fn-m{font:500 9px var(--mono);color:var(--faint);margin-left:1px}
/* survey registration marks on a featured block */
.ticks{position:relative}
.ticks::before,.ticks::after{content:"";position:absolute;width:10px;height:10px;border:1px solid var(--line-2);pointer-events:none}
.ticks::before{top:-5px;left:-5px;border-right:0;border-bottom:0}
.ticks::after{bottom:-5px;right:-5px;border-left:0;border-top:0}
/* faint survey grid, used only behind empty states, the journey map and the impact head */
.plot-grid{background-image:radial-gradient(circle,color-mix(in srgb,var(--ink) 9%,transparent) 1px,transparent 1.2px);background-size:24px 24px;background-position:-1px -1px}
/* stamp: stage/status on dossier and log pages */
.stamp{display:inline-flex;align-items:center;height:20px;padding:0 6px;border:1px solid var(--line-2);border-radius:3px;font:500 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);white-space:nowrap}
.stamp.ai{border-color:var(--ai-line);color:var(--ai)} .stamp.act{border-color:var(--act-line);color:var(--act)}
.stamp.good{border-color:color-mix(in srgb,var(--good) 40%,transparent);color:var(--good)} .stamp.bad{border-color:color-mix(in srgb,var(--bad) 40%,transparent);color:var(--bad)}
/* amber as a highlighter: wash under a word or phrase the AI did */
.hl-ai{background:linear-gradient(transparent 58%,color-mix(in srgb,var(--ai) 22%,transparent) 58%);color:inherit;padding:0 1px}
/* AI and staff message rules */
.rule-ai{border-left:3px solid var(--ai);padding-left:var(--s3)} .rule-act{border-left:3px solid var(--act);padding-left:var(--s3)}
.byline{font:500 11px/1.4 var(--mono);color:var(--muted)} .byline.ai{color:var(--ai)} .byline.act{color:var(--act)}
/* buyer avatar = square, staff avatar = circle */
.av-sq{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:6px;font:600 13px/1 var(--display);background:var(--soft);color:var(--ink-2);flex:none}
.av-ci{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;font:600 11px/1 var(--body);background:var(--act-soft);color:var(--act);flex:none}
/* the only thing that pulses: a live AI dot */
.breathe{width:8px;height:8px;border-radius:50%;background:var(--ai);display:inline-block;animation:breathe 2s ease-in-out infinite;flex:none}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ai) 35%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--ai) 0%,transparent)}}
/* contour motif for empty-state illustrations */
.contour{display:block;width:96px;height:56px;color:var(--line-2)}
.empty{background-image:radial-gradient(circle,color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 1.2px);background-size:24px 24px}
/* entrance */
@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.rise{animation:rise .18s ease-out both} /* opt-in only: render() rebuilds the view on every action */
@media (prefers-reduced-motion:reduce){.breathe,.rise{animation:none}}
/* "Why" drawer: a proper header */
.drawer>div:first-child{padding-bottom:var(--s3);border-bottom:1px solid var(--line);margin-bottom:var(--s1)}
.drawer>div:first-child .chip.ai{height:22px;border:1px solid var(--ai-line);background:transparent;color:var(--ai);font:500 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;border-radius:3px;gap:6px}
.drawer>div:first-child .chip.ai svg{width:12px;height:12px}
.drawer h2{font:600 22px/1.2 var(--display)!important;letter-spacing:-.015em}
.drawer p{font-size:15px;line-height:1.6;color:var(--ink-2)}
/* sidebar: brand set in the display face; rail footer tight on short screens */
.brand-t b{font-family:var(--display);font-size:14px;letter-spacing:-.01em}
@media (max-height:760px){.side .nav{height:30px}.navsec{padding-top:var(--s3)}.app.rail .sidefoot{padding-top:var(--s1)}}
/* modal header: title left, close pulled into the corner so it lines up optically */
.modal-h{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
.modal .modal-h h2{font:600 18px/1.25 var(--display)!important;letter-spacing:-.01em;margin:0}
.modal-h .btn.icon{margin:-4px -4px 0 0;flex:none;color:var(--muted)}
.modal-h .btn.icon:hover{color:var(--ink)}
.modal:has(.modal-h){gap:0} .modal:has(.modal-h)>*:not(.modal-h)+*{margin-top:var(--s4)}
/* phone: the top bar already carries the page title, so the page head drops its duplicate and keeps chips + actions */
@media (max-width:760px){
  .view:not(.full) .phead:first-of-type>h2{display:none}
  .view:not(.full)>.phead{padding-bottom:var(--s2)}
  .hero-n{font-size:44px} .big-n{font-size:28px}
}
/* phone: segmented tabs scroll sideways in one row instead of wrapping into a block */
@media (max-width:760px){
  .seg[role="tablist"]{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;justify-content:flex-start;width:100%}
  .seg[role="tablist"]::-webkit-scrollbar{display:none}
  .seg[role="tablist"] button{flex:none}
}
/* phone: one-row scrolling sub-tabs with an edge fade and a 16px gutter */
@media (max-width:600px){
  .seg{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;max-width:100%;flex:none;min-height:32px;scroll-padding-inline:16px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .seg::-webkit-scrollbar{display:none}
  .seg button{flex:none} .seg button:last-child{margin-right:16px}
}
/* phone lead dossier: no nested boxes (the view already gives the 16px gutter); staff bar becomes a full-width scrolling strip */
@media (max-width:760px){
  #view .w-lhead,#view .w-doc .card:not(.ai-card){padding:var(--s3) 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
  #view .w-lhead.ticks::before,#view .w-lhead.ticks::after{display:none}
  #view .w-actionbar{margin:0 calc(-1 * var(--s4));border-radius:0;border:0;border-top:1px solid var(--line);padding:var(--s2) var(--s4);box-shadow:none;background:var(--surface)!important;opacity:1;backdrop-filter:none;-webkit-mask-image:none;mask-image:none}
  #view .w-actionbar .btn:last-child{margin-right:var(--s4)}
}
/* phone lead: dock the staff bar on the tab bar (no view bottom padding under it) */
@media (max-width:760px){
  #view[data-route="lead"]{padding-bottom:0}
  #view[data-route="lead"] .w-doc{padding-bottom:0;margin-bottom:0}
  #view .w-actionbar{bottom:0;margin-bottom:0}
}


/* ================= Motion and finish layer (MOTION.md) =================
   Rules: transform/opacity only; ease-out curves; ≤300ms; nothing animates on keyboard actions or on the
   re-render that follows every click; reduced motion keeps opacity, drops movement. */

/* an overlay animates once, on open. render() repaints the overlay root on every action, so anything that was
   already open is marked .settled by core.js; keyboard opens get #ov.instant */
.settled,.settled :is(.modal,.drawer,.sheet),.instant > *,.instant > * :is(.modal,.drawer,.sheet){animation:none!important}
.app.instant{transition:none!important}

/* page entrance motion (chart draw-in, .rise) plays when you arrive on a page, not on each re-render of it */
#view.settled :is(.rise,.ni-reveal,.ch-draw,.ch-area,.ch-vtrack,.ch-htrack,.ch-fbar,.ch-ringv,.ch-tb,.ch-bval,.ch-s100t i,.ch-brt i){animation:none!important}

/* press feedback for mouse and trackpad (touch has its own in mobile.css): a 3% give, back in 140ms */
@media (hover:hover) and (pointer:fine){
  :is(.btn,.iconbtn,.sidetoggle,button.chip,.w-ib,.w-qrb,.themeseg button){transition-property:background-color,border-color,color,filter,box-shadow,transform;transition-duration:120ms,120ms,120ms,120ms,120ms,var(--dur-press);transition-timing-function:ease,ease,ease,ease,ease,var(--ease-out)}
  :is(.btn,.iconbtn,.sidetoggle,button.chip,.w-ib,.w-qrb,.themeseg button):not([disabled]):active{transform:scale(.97)}
}

/* text: balanced headings, no orphans in prose, tabular figures already on body */
:is(h1,h2,h3,.phead h2,.empty-t,.modal h2) {text-wrap:balance}
:is(p,.empty-s,.lr-s,.fn,.sowhat){text-wrap:pretty}

/* scrollbars: thin, ink-tinted, invisible track; the page itself never shows one */
:root{scrollbar-color:color-mix(in srgb,var(--ink) 18%,transparent) transparent}
:is(.view,.navlist,.drawer,.modal,.sheet,.notif,.sres){scrollbar-width:thin}

/* hit areas: small icon controls get an invisible 4px apron so the target is ≥40px without changing layout */
@media (pointer:fine){:is(.w-x,.phead-i){position:relative}:is(.w-x,.phead-i)::after{content:"";position:absolute;inset:-8px}}

/* reduced motion: fades stay (they explain), movement and scale go */
@media (prefers-reduced-motion:reduce){
  .drawer,.sheet{animation:fade 150ms ease-out}
  .modal,.notif,.toast,.tip{animation:fade 120ms ease-out}
  :is(.btn,.iconbtn,.sidetoggle,button.chip,.w-ib,.w-qrb,.themeseg button):active{transform:none}
}

/* break-ui: full-bleed rows (action bar, impact masthead) bleed into the gutter without making the page scroll sideways */
@media (max-width:760px){.w-doc,#view .doc{overflow-x:clip}}

/* springs sampled into linear() (r-motion, research/crm-workspace/motion/patterns.md): settle ≈380ms no overshoot, stamp ≈400ms ~7% overshoot */
@supports (transition-timing-function:linear(0,1)){:root{
  --spring-settle:linear(0,.053,.172,.313,.452,.577,.682,.768,.834,.885,.922,.949,.968,.981,.989,.995,.998,1,1.001,1.001,1.002,1.001,1.001,1);
  --spring-stamp:linear(0,.083,.267,.48,.677,.836,.949,1.019,1.056,1.068,1.064,1.053,1.038,1.024,1.013,1.005,.999,.997,.995,.996,.996,.997,.998,1)}}

/* ================= Form controls (night polish, POLISH.md) =================
   One control system for every view: 32px tall (28px for .sm / compact rows), radius 6, 1px line-2 border,
   a drawn chevron 12px from the right edge, a jacaranda focus ring, a visible disabled state, light and dark. */
:root{--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b706a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa39d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}}
:root[data-theme="dark"]{--chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa39d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* select: native arrow replaced; the text never runs under the chevron */
select:not([multiple]):not([size]){-webkit-appearance:none;appearance:none;background-image:var(--chev);background-repeat:no-repeat;background-position:right 12px center;background-size:10px 6px;padding-right:32px;text-overflow:ellipsis;cursor:pointer;line-height:normal}
select:not([multiple]):not([size])::-ms-expand{display:none}
select:not([multiple]):not([size]) option{color:var(--ink);background:var(--surface)}
/* sizes: every shell select is a 32px control; compact filter rows stay 28 */
.sf-ctl select,.sidefoot select,.sheet-foot select{height:32px;border:1px solid var(--line-2);border-radius:var(--r1);background-color:var(--surface);color:var(--ink);font:500 12.5px var(--body);padding-left:10px}
:is(select,input,textarea):hover:not(:disabled):not(:focus){border-color:var(--faint)}
:is(.sf-ctl,.sidefoot,.sheet-foot) select:focus-visible{outline:none;border-color:var(--act);box-shadow:0 0 0 3px var(--act-soft)}

/* text inputs share the same box; native date/time pickers follow the theme */
input[type=date],input[type=time],input[type=datetime-local]{height:32px;padding:0 10px;font:inherit;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r1)}
::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer;padding:2px;border-radius:4px}
::-webkit-calendar-picker-indicator:hover{opacity:.9;background:var(--hover)}
input::placeholder,textarea::placeholder{color:var(--faint);opacity:1}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}

/* checkbox and radio: native, drawn in the action colour, a 16px target with an even baseline next to its label */
input[type=checkbox],input[type=radio]{accent-color:var(--act);width:16px;height:16px;margin:0;flex:none;vertical-align:-3px;cursor:pointer}
label:has(> input[type=checkbox]),label:has(> input[type=radio]){display:inline-flex;align-items:center;gap:var(--s2);cursor:pointer}

/* disabled, everywhere: it reads as off, not as broken */
:is(select,input,textarea,.btn,button.chip):disabled,:is(.btn,button.chip)[aria-disabled="true"]{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn:disabled:active,button.chip:disabled:active{transform:none}

/* buttons: the icon is optically centred with the label, 16px, never squashed */
.btn svg,.iconbtn svg,button.chip svg{width:16px;height:16px;flex:none}
.btn.sm svg{width:14px;height:14px}
.btn.icon{width:32px;padding:0}.btn.icon.sm{width:28px}

/* the theme segmented control: three equal 28px cells inside a 32px track, the selected cell lifted on paper */
.themeseg{height:32px;padding:2px;gap:2px;align-items:stretch}
.themeseg button{flex:1;min-width:0;border-radius:4px}
.themeseg svg{width:15px;height:15px}
/* the selected theme cell must read in dark too: a raised paper cell in light, a lighter tile in dark */
.themeseg button{height:auto}
.themeseg button[aria-pressed="true"]{background:color-mix(in srgb,var(--ink) 4%,var(--surface));box-shadow:0 0 0 1px var(--line),var(--shadow-1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .themeseg button[aria-pressed="true"]{background:color-mix(in srgb,var(--ink) 14%,var(--surface));box-shadow:0 0 0 1px var(--line-2)}}
:root[data-theme="dark"] .themeseg button[aria-pressed="true"]{background:color-mix(in srgb,var(--ink) 14%,var(--surface));box-shadow:0 0 0 1px var(--line-2)}
/* bell count: sits on the icon's top-right shoulder, ringed in the bar colour so it never fuses with the glyph */
.iconbtn .dot{top:3px;left:auto;right:2px;transform:translateX(30%);border:2px solid var(--bg);font-variant-numeric:tabular-nums}
/* out of office line in the sidebar footer and the phone More sheet: a warn dot, the end date, the cover */
.sf-away{display:flex;gap:var(--s2);align-items:flex-start;flex-wrap:wrap;padding:0 var(--s1);margin-bottom:var(--s1);font-size:12px;line-height:1.4;color:var(--ink-2)}
.sf-away.on{padding:var(--s2);border-radius:var(--r1);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.sf-away-t{flex:1;min-width:0}
.sf-away-b,.sf-away-set{font-size:12px;font-weight:600}
.sf-away-set{color:var(--muted)}.sf-away-set:hover{color:var(--ink)}
.sf-away[hidden]{display:none}
.sf-away b{font-weight:600;color:var(--ink)}
.sf-away-d{width:8px;height:8px;border-radius:50%;background:var(--warn);flex:none;margin-top:4px}
.app.rail .sf-away{padding:6px;justify-content:center}.app.rail .sf-away>:not(.sf-away-d){display:none}.app.rail .sf-away:not(.on){display:none}
/* contrast (dark-mode audit, WCAG): form-control boundaries get their own 3:1 token (--line-ctl); cards keep the quiet --line */
.inp,.field :is(input,select,textarea),.compose input,select:not([multiple]):not([size]),input[type=date],input[type=time],input[type=datetime-local],textarea,
input:is([type=text],[type=search],[type=email],[type=tel],[type=number]){border-color:var(--line-ctl)}
:is(.inp,select,input,textarea):focus{border-color:var(--act)}
/* shared loading and error states (pair with emptyState / loadingRows / errorState in core.js) */
.sk-list{display:flex;flex-direction:column}
.sk-item{display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:var(--s2) var(--s3);border-top:1px solid var(--line)}
.sk-item:first-child{border-top:0}
.sk-col{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.sk-col .sk-line{margin:0;height:10px}.sk-col .sk-line.sm{height:8px;opacity:.7}
.state-err{background-image:none}
.state-err .empty-t{color:var(--bad)}
/* file input: the browser's grey "Choose file" button becomes a quiet app button; the file name reads as the value */
input[type=file]{font:inherit;font-size:13px;color:var(--muted);max-width:100%;height:auto;padding:4px;border:1px dashed var(--line-ctl);border-radius:var(--r1);background:var(--surface);cursor:pointer}
input[type=file]::file-selector-button{font:600 12.5px var(--body);height:28px;padding:0 var(--s3);margin-right:var(--s3);border:1px solid var(--line-2);border-radius:var(--r1);background:var(--surface);color:var(--ink);cursor:pointer;transition:background-color 120ms ease,border-color 120ms ease}
input[type=file]:hover::file-selector-button{background:var(--hover);border-color:var(--faint)}
input[type=file]:focus-visible{outline:2px solid var(--act);outline-offset:2px}
/* skip link: invisible until focused, then a small pill at the top left */
.skip{position:fixed;left:8px;top:8px;z-index:100;padding:6px 12px;border-radius:var(--r1);background:var(--ink);color:var(--bg);font:600 13px var(--body);text-decoration:none;transform:translateY(-200%);transition:transform 120ms var(--ease-out)}
.skip:focus{transform:none;outline:2px solid var(--act);outline-offset:2px}
/* bell count in dark: the pale dark-mode red needs dark figures (white on it was 2.2:1) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .iconbtn .dot{color:#1b0f0d}}
:root[data-theme="dark"] .iconbtn .dot{color:#1b0f0d}
/* icons sit on the text's x-height centre, not its baseline: inline icons next to labels nudge down 1px and never shrink */
:is(.btn,.lnk,.chip,.nav,.sheet-item,.pill,.stamp) svg{flex:none;vertical-align:-3px}
p svg,span svg{vertical-align:-3px}
/* "Set out of office" is a footer row like the nav: icon + label, 32px, quiet until hovered */
.sf-away-set{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:var(--s2);width:100%;height:32px;padding:0 var(--s2);border-radius:var(--r1);font:500 13px var(--body);color:var(--ink-2);cursor:pointer}
.sf-away-set svg{width:16px;height:16px;color:var(--muted)}
.sf-away-set:hover{background:var(--hover);color:var(--ink)}
.sf-away-set:focus-visible{outline:2px solid var(--act);outline-offset:-2px}
.sf-away:not(.on){padding:0;margin-bottom:var(--s1)}
/* type scale: shell selects sit on the 13px UI base, not 12.5 */
.sf-ctl select,.sidefoot select,.sheet-foot select{font-size:13px}
/* the AI line may wrap to two lines rather than lose "open chats" to an ellipsis */
.aipulse{align-items:flex-start}
.aipulse i{margin-top:5px}
.aipulse span{white-space:normal;overflow:visible;line-height:1.4;font-variant-numeric:tabular-nums}
/* shared hit apron: a small text control keeps its look but gets a ≥32px target */
.hit{position:relative}.hit::after{content:"";position:absolute;inset:-8px -4px}
/* Impact hub: every hub page renders pageHead() then subTabs(IMPACT_TABS(),"Impact") as the first two children of #view.
   A fixed head height means the tab row sits at the same top on all five pages, whatever actions each head carries. */
.view:not(.full)>.phead:has(+ .seg[aria-label="Impact"]){min-height:41px;box-sizing:border-box}
.view>.seg[aria-label="Impact"]{flex:none;align-self:flex-start}
/* phone: the page header is always one line so the tab row below it sits at the same height on every hub page; extra chips scroll sideways inside the header */
@media (max-width:760px){
  .view:not(.full)>.phead{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;height:45px;box-sizing:border-box;overscroll-behavior-x:contain;scrollbar-width:none}
  .view:not(.full)>.phead::-webkit-scrollbar{display:none}
  .view:not(.full)>.phead>*{flex:none}
  .view:not(.full)>.phead .phead-a{flex-wrap:nowrap}
  /* hub heads on phone: the count chips repeat what the first section says, so drop them and let the actions fit on the one line; anything still too wide fades at the edge instead of being cut */
  .view:not(.full)>.phead:has(+ .seg[aria-label="Impact"]) :is(.phead-chip,.phead-a>.chip,.phead-a>span:not(.btn)){display:none}
  .view:not(.full)>.phead{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);padding-right:24px}
  .view:not(.full)>.phead .phead-a .btn{padding-inline:10px}
}
/* phone: a header left with only the (i) button (title hidden, no chips or actions) is an empty row; drop it */
@media (max-width:760px){.view:not(.full)>.phead:has(h2):not(:has(.phead-chip,.phead-a)):not(:has(+ .seg)){display:none}}

/* sidebar footer, compact (triage T): AI line, then one row of role select + theme icons, then the prototype note. Target ≤ 84px */
.sidefoot{gap:6px;padding:8px var(--s1) 4px}
.sidefoot .sf-row{flex-direction:row;align-items:center;gap:6px}
.sidefoot .sf-row select{flex:1;min-width:0;height:28px}
.sidefoot .sf-row .themeseg{flex:none;height:28px;padding:2px}
.sidefoot .sf-row .themeseg button{width:26px;flex:none}
.sidefoot .sf-row .themeseg svg{width:14px;height:14px}
.sidefoot .aipulse{min-height:16px;line-height:16px}
.sidefoot .sf-away:not([hidden]){padding-block:2px}
.sidefoot .side-note{line-height:14px}
.app.rail .sidefoot .sf-row{display:none}
.themecycle{all:unset;box-sizing:border-box;flex:none;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line-2,var(--line));border-radius:var(--r1);color:var(--muted);cursor:pointer;background:var(--surface)}
.themecycle svg{width:14px;height:14px}.themecycle:hover{color:var(--ink)}.themecycle:focus-visible{outline:2px solid var(--act);outline-offset:1px}
.sidefoot .sf-away:not([hidden]) :is(button,a){min-height:28px;padding-block:0}
.themecycle[hidden]{display:none}