/* Vetly agency app · Direction A restraint (ops): hairlines, 10–12px radius, no offset shadows, pink = the one priority per viewport.
   Layout = One True SaaS: rail · contextual sidebar · header+tabs · main · right panel · bottom status bar. Mobile (PRD 8.1): top context + bottom nav. */
:root{--f-disp:'Fraunces',Georgia,serif;--f-ui:'Work Sans',system-ui,sans-serif;--f-mono:'Geist Mono',ui-monospace,monospace;
 --stock:#f3eee2;--bg2:#ebe4d4;--card:#fbf8f0;--ink:#1e1b2e;--mut:#5f596a;--rule:rgba(30,27,46,.12);--rule2:rgba(30,27,46,.22);--hover:rgba(30,27,46,.05);
 --pink:#ff48b0;--pink-ink:#b3156f;--pink-wash:#ffe1f1;--teal:#00787f;--teal-ink:#00646a;--teal-wash:#d6ebe7;--yel:#f6b73c;--yel-ink:#7a5200;--yel-wash:#fbecc6;--red:#e8452c;--red-ink:#b42a14;--red-wash:#fbdcd3;--blue-ink:#2a5bb8;--blue-wash:#dfe8f8;
 --rail:#1e1b2e;--out:cubic-bezier(.23,1,.32,1);--drawer:cubic-bezier(.32,.72,0,1);--r:10px}
html.dark{--stock:#16141d;--bg2:#1c1a24;--card:#211e2a;--ink:#efeae0;--mut:#a7a0b0;--rule:rgba(239,234,224,.09);--rule2:rgba(239,234,224,.18);--hover:rgba(239,234,224,.05);
 --pink-ink:#ff8fd0;--pink-wash:rgba(255,72,176,.15);--teal:#2fb3ab;--teal-ink:#6fd3ca;--teal-wash:rgba(47,179,171,.14);--yel-ink:#f3c66b;--yel-wash:rgba(246,183,60,.14);--red-ink:#ff8a72;--red-wash:rgba(232,69,44,.16);--blue-ink:#8db0f0;--blue-wash:rgba(90,140,230,.15);--rail:#0f0d14}
body{background:var(--stock);color:var(--ink);font:400 13.5px/1.45 var(--f-ui);letter-spacing:-.003em}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:6px;z-index:200;background:var(--ink);color:var(--stock);padding:8px 12px;border-radius:8px}.skip:focus{left:70px}
.mono,.id{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:0}.id{font-size:12px;color:var(--mut)}
kbd{font:500 10.5px var(--f-mono);padding:1px 5px;border:1px solid var(--rule2);border-bottom-width:2px;border-radius:4px;background:var(--card);color:var(--mut)}
/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:60px 256px minmax(0,1fr) 332px;grid-template-rows:minmax(0,1fr) 28px;height:100vh;overflow:hidden}
.app.no-rp{grid-template-columns:60px 256px minmax(0,1fr)}
.app.no-side{grid-template-columns:60px minmax(0,1fr) 332px}.app.no-side.no-rp{grid-template-columns:60px minmax(0,1fr)}
.rail{grid-row:1/3;background:var(--rail);color:#f3eee2;display:flex;flex-direction:column;align-items:center;padding:12px 0 10px;gap:4px}
.rail .logo{width:30px;height:30px;color:#f3eee2;margin-bottom:12px;display:block}.rail .logo svg{width:100%;height:100%}
.ri{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;color:rgba(243,238,226,.6);position:relative;transition:background-color 120ms var(--out),color 120ms var(--out)}
.ri:hover{color:#f3eee2;background:rgba(243,238,226,.08)}.ri.on{color:#1e1b2e;background:#f3eee2}
.ri .dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--yel);box-shadow:0 0 0 2px var(--rail)}
.ri .tip{position:absolute;left:48px;white-space:nowrap;background:#1e1b2e;color:#f3eee2;font-size:12px;padding:4px 8px;border-radius:6px;opacity:0;pointer-events:none;transform:translateX(-4px);transition:opacity 120ms var(--out),transform 120ms var(--out);z-index:60;box-shadow:0 0 0 1px rgba(243,238,226,.15)}
.ri:hover .tip,.ri:focus-visible .tip{opacity:1;transform:none}
.rail .sp{flex:1}.rail hr{width:24px;border:0;border-top:1px solid rgba(243,238,226,.14);margin:6px 0}
.av{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;font:600 11px var(--f-ui);background:var(--teal-wash);color:var(--teal-ink);flex:none}
.rail .av{background:#3a3647;color:#f3eee2;margin-top:6px}
.av.lg{width:40px;height:40px;font-size:14px}.av.sm{width:22px;height:22px;font-size:9.5px}
/* contextual sidebar */
.side{background:var(--bg2);border-right:1px solid var(--rule);display:flex;flex-direction:column;min-height:0}
.org{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--rule)}
.org b{display:block;font-weight:600;font-size:13.5px}.org small{color:var(--mut);font-size:12px}.org .hi{margin-left:auto;color:var(--mut)}
.side-search{margin:10px 12px 4px;display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:8px;background:var(--card);box-shadow:inset 0 0 0 1px var(--rule2);color:var(--mut)}
.side-search span{flex:1}
.side-sec{padding:10px 8px 4px}.side-sec>h4{font:600 11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);padding:4px 8px 6px;display:flex;justify-content:space-between}
.side-scroll{overflow:auto;flex:1;min-height:0}
.sl{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;color:var(--ink);font-size:13.5px;transition:background-color 100ms var(--out)}
.sl:hover{background:var(--hover)}.sl.on{background:var(--card);box-shadow:inset 0 0 0 1px var(--rule2);font-weight:600}
.sl .n{margin-left:auto;font:500 11.5px var(--f-mono);color:var(--mut)}.sl .hi{color:var(--mut)}
.sc{display:block;padding:9px 10px;border-radius:9px;margin-bottom:2px;transition:background-color 100ms var(--out)}
.sc:hover{background:var(--hover)}.sc.on{background:var(--card);box-shadow:inset 0 0 0 1px var(--rule2)}
.sc .r1{display:flex;gap:8px;align-items:baseline}.sc .r1 b{font-weight:600}.sc .r1 .id{margin-left:auto}.sc .r2{color:var(--mut);font-size:12.5px;margin:2px 0 5px}
/* header + tabs */
.mainwrap{display:flex;flex-direction:column;min-width:0;min-height:0}
.top{padding:14px 28px 0;border-bottom:1px solid var(--rule);background:var(--stock)}
.crumbs{font:500 12px var(--f-mono);color:var(--mut);display:flex;gap:6px;align-items:center}.crumbs a:hover{color:var(--ink)}
.title-row{display:flex;align-items:center;gap:12px;margin:6px 0 12px;flex-wrap:wrap}
.title-row h1{font:700 26px/1.15 var(--f-disp);font-variation-settings:'SOFT' 100,'opsz' 36;letter-spacing:-.015em}
.title-row h1 small{font:400 15px var(--f-ui);color:var(--mut);margin-left:6px;letter-spacing:0}
.title-row .acts{margin-left:auto;display:flex;gap:8px;align-items:center}
.tabs{display:flex;gap:2px;margin-bottom:-1px;overflow-x:auto;scrollbar-width:none}
.tabs [data-tab],.tabs a{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;font-weight:500;color:var(--mut);border-bottom:2px solid transparent;white-space:nowrap;transition:color 100ms var(--out)}
.tabs [data-tab]:hover{color:var(--ink)}.tabs .on,.tabs [aria-current=page]{color:var(--ink);border-color:var(--ink)}
.tabs .n{font:500 11px var(--f-mono);background:var(--hover);padding:0 6px;border-radius:99px;color:var(--mut)}
main{flex:1;overflow:auto;padding:22px 28px 60px;min-height:0;position:relative}
/* right panel */
.rp{border-left:1px solid var(--rule);background:var(--bg2);overflow:auto;padding:16px}
.rp h3{font:600 11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:4px 0 8px;display:flex;justify-content:space-between}
.rp section{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--rule)}.rp section:last-child{border:0}
.kv{display:grid;grid-template-columns:96px 1fr;gap:5px 10px;font-size:13px}.kv dt{color:var(--mut)}.kv dd{min-width:0}
/* status bar */
.sbar{grid-column:2/-1;display:flex;align-items:center;gap:16px;padding:0 14px;border-top:1px solid var(--rule);background:var(--bg2);font:500 11.5px var(--f-mono);color:var(--mut);white-space:nowrap;overflow:hidden}
.no-side .sbar{grid-column:2/-1}
.sbar .live{display:inline-flex;align-items:center;gap:6px;color:var(--teal-ink)}.sbar .live i{width:7px;height:7px;border-radius:50%;background:var(--teal)}
.sbar .meter{display:inline-flex;align-items:center;gap:6px}.sbar .meter b{display:inline-block;width:46px;height:4px;border-radius:2px;background:var(--rule2);position:relative;overflow:hidden}.sbar .meter b i{position:absolute;inset:0 auto 0 0;background:var(--teal)}
.sbar .sp{flex:1}.sbar button{color:inherit;display:inline-flex;gap:5px;align-items:center}
/* ---------- primitives ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 14px;border-radius:8px;font:600 13.5px var(--f-ui);white-space:nowrap;cursor:pointer;transition:transform 150ms var(--out),background-color 120ms var(--out),box-shadow 120ms var(--out);background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule2)}
.btn:hover{box-shadow:inset 0 0 0 1px var(--ink)}.btn:active{transform:scale(.96)}
.btn.pri{background:var(--ink);color:var(--stock);box-shadow:none}.btn.pri:hover{background:#000}html.dark .btn.pri:hover{background:#fff}
.btn.hot{background:var(--pink);color:#1e1b2e;box-shadow:none}
.btn.danger{background:var(--red-wash);color:var(--red-ink);box-shadow:none}.btn.ghost{background:none;box-shadow:none;color:var(--mut)}.btn.ghost:hover{color:var(--ink);background:var(--hover)}
.btn.sm{height:28px;padding:0 10px;font-size:12.5px;border-radius:7px}.btn.lg{height:42px;padding:0 18px;font-size:14.5px}.btn.w{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.ibtn{width:32px;height:32px;border-radius:8px;display:inline-grid;place-items:center;color:var(--mut);transition:background-color 100ms var(--out),transform 150ms var(--out)}.ibtn:hover{background:var(--hover);color:var(--ink)}.ibtn:active{transform:scale(.96)}
.chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:99px;font:600 11.5px var(--f-ui);white-space:nowrap;background:var(--hover);color:var(--mut)}
.chip i{width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.ok{background:var(--teal-wash);color:var(--teal-ink)}.chip.warn{background:var(--yel-wash);color:var(--yel-ink)}.chip.bad{background:var(--red-wash);color:var(--red-ink)}.chip.pk{background:var(--ink);color:var(--stock)}.chip.info{background:var(--blue-wash);color:var(--blue-ink)}.chip.line{background:none;box-shadow:inset 0 0 0 1px var(--rule2)}
.card{background:var(--card);border-radius:12px;box-shadow:0 0 0 1px var(--rule)}
.card>header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--rule)}.card>header h2{font:600 14.5px var(--f-ui)}.card>header .r{margin-left:auto;display:flex;gap:6px;align-items:center}
.card .bd{padding:14px 16px}
.h2{font:700 19px var(--f-disp);font-variation-settings:'SOFT' 100;letter-spacing:-.01em;margin:4px 0 12px}
.muted{color:var(--mut)}.sm{font-size:12.5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stack{display:grid;gap:16px}
.stat{padding:14px 16px}.stat small{display:block;color:var(--mut);font-size:12px}.stat b{display:block;font:700 30px/1.1 var(--f-disp);font-variation-settings:'SOFT' 100;margin-top:4px}.stat span{font-size:12px;color:var(--mut)}
.stat.pk b{color:var(--ink)}.stat.pk{box-shadow:0 0 0 1.5px var(--ink)}
/* tables */
.tbl{width:100%;border-collapse:collapse}.tbl th{text-align:left;font:600 11px var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mut);padding:8px 12px;border-bottom:1px solid var(--rule2);white-space:nowrap}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:middle}.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background-color 100ms var(--out)}.tbl tbody tr:hover{background:var(--hover)}.tbl td b{font-weight:600}
.tbl .num{text-align:right;font-family:var(--f-mono)}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}.toolbar .sp{flex:1}
.fchip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--rule2);background:var(--card);font-weight:500;font-size:13px;color:var(--ink)}.fchip .hi{color:var(--mut)}.fchip.on{box-shadow:inset 0 0 0 1.5px var(--ink)}
.seg{display:inline-flex;background:var(--hover);border-radius:8px;padding:2px}.seg a,.seg button{height:28px;padding:0 10px;border-radius:6px;display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--mut)}.seg .on{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--rule2)}
/* coverage rows / board */
.crow{display:grid;grid-template-columns:70px minmax(0,1.4fr) minmax(0,1fr) 170px 120px 24px;gap:14px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--rule)}
.crow:hover{background:var(--hover)}.crow .t{font:600 15px var(--f-mono)}.crow .t small{display:block;font-size:11px;color:var(--mut);font-weight:500}
.crow b{font-weight:600}.crow .s{color:var(--mut);font-size:12.5px}
.urg{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}.urg.critical{background:var(--red)}.urg.high{background:var(--yel)}.urg.normal{background:var(--rule2)}
.board{display:grid;grid-template-columns:repeat(5,minmax(200px,1fr));gap:12px;overflow-x:auto}
.col{background:var(--bg2);border-radius:12px;padding:10px;min-height:360px}.col h3{font:600 12px var(--f-ui);display:flex;justify-content:space-between;padding:2px 4px 10px;color:var(--mut)}
.bcard{display:block;background:var(--card);border-radius:10px;box-shadow:0 0 0 1px var(--rule);padding:10px 12px;margin-bottom:8px}.bcard b{display:block}.bcard .s{color:var(--mut);font-size:12px;margin:2px 0 6px}
/* candidate */
.cand-top{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start;padding:16px}
.fit{font:700 44px/1 var(--f-disp);font-variation-settings:'SOFT' 100;text-align:right}.fit small{display:block;font:500 11px var(--f-mono);color:var(--mut);margin-top:4px}
.why{list-style:none;display:grid;gap:5px;margin-top:8px}.why li{display:flex;gap:8px;align-items:flex-start}.why .hi{color:var(--teal);margin-top:2px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule)}.facts>div{padding:10px 16px;border-right:1px solid var(--rule)}.facts>div:last-child{border:0}.facts small{display:block;color:var(--mut);font-size:11.5px}.facts b{font-weight:600}
.bars{display:grid;gap:6px;min-width:190px}.bars div{display:grid;grid-template-columns:76px 1fr 38px;gap:8px;align-items:center;font-size:12px}.bars span{height:5px;background:var(--rule);border-radius:3px;overflow:hidden}.bars span i{display:block;height:100%;background:var(--teal)}
/* timeline */
.tl{list-style:none;position:relative}.tl li{display:grid;grid-template-columns:52px 14px 1fr auto;gap:10px;padding:7px 0;align-items:start}
.tl .tm{font:500 12px var(--f-mono);color:var(--mut);padding-top:1px}.tl .pt{width:9px;height:9px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 2px var(--rule2);margin-top:4px;position:relative}
.tl li:not(:last-child) .pt:after{content:"";position:absolute;left:3.5px;top:11px;width:2px;height:24px;background:var(--rule)}
.tl .pt.on{box-shadow:inset 0 0 0 2px var(--teal);background:var(--teal)}
/* banners + states */
.banner{display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:10px;margin-bottom:16px;font-size:13.5px}
.banner.warn{background:var(--yel-wash);color:var(--yel-ink)}.banner.bad{background:var(--red-wash);color:var(--red-ink)}.banner.ok{background:var(--teal-wash);color:var(--teal-ink)}.banner.info{background:var(--blue-wash);color:var(--blue-ink)}
.banner .btn{margin-left:auto}.banner b{font-weight:600}
.empty{text-align:center;max-width:440px;margin:40px auto;padding:20px}.empty picture{width:132px;display:block;margin:0 auto 12px}.empty picture img{width:100%;height:auto;display:block}
.empty h2{font:700 21px var(--f-disp);font-variation-settings:'SOFT' 100;margin-bottom:6px}.empty p{color:var(--mut)}.empty .acts{display:flex;gap:8px;justify-content:center;margin-top:16px}
.sk{background:linear-gradient(90deg,var(--rule) 0,var(--hover) 50%,var(--rule) 100%);background-size:200% 100%;border-radius:6px;animation:sk 1.4s linear infinite;height:12px}
@keyframes sk{to{background-position:-200% 0}}
.skrow{display:grid;grid-template-columns:70px 1.4fr 1fr 170px 120px;gap:14px;padding:16px 14px;border-bottom:1px solid var(--rule)}
.expired{position:absolute;inset:0;background:rgba(20,18,28,.35);display:grid;place-items:center;z-index:30}
.expired .card{padding:24px;max-width:380px;text-align:center}
.okline{display:flex;gap:10px;align-items:center}
/* stamp (borrowed from B for pending/approval) */
.pstamp{width:96px;transform:rotate(-8deg);flex:none}.pstamp svg{width:100%;height:auto;display:block}
/* forms */
.fld{display:grid;gap:5px;margin-bottom:14px}.fld label{font-weight:600;font-size:13px}.fld .hint{color:var(--mut);font-size:12px}
.fld input,.fld select,.fld textarea{height:36px;border-radius:8px;border:1px solid var(--rule2);background:var(--card);padding:0 10px;font:400 13.5px var(--f-ui);color:var(--ink);width:100%}
.fld textarea{height:auto;min-height:80px;padding:8px 10px}.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:var(--red-ink)}.fld .err{color:var(--red-ink);font-size:12px;display:none}.fld.bad .err{display:block}
.radio{display:grid;gap:6px}.radio label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:9px;box-shadow:inset 0 0 0 1px var(--rule2);font-weight:400;cursor:pointer}.radio label.on{box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--card)}
.check{display:flex;gap:8px;align-items:center;font-size:13px}
/* drawers + modals (vetly.js layers) */
.layer{position:fixed;inset:0;z-index:100;background:rgba(20,18,28,.32);opacity:0;transition:opacity 220ms var(--out)}
.layer.open{opacity:1}
.dr{position:absolute;right:0;top:0;bottom:0;width:min(480px,100vw);background:var(--stock);box-shadow:-1px 0 0 var(--rule2);display:flex;flex-direction:column;transform:translateX(100%);transition:transform 340ms var(--drawer)}
.layer.open .dr{transform:none}
.dr>header{display:flex;align-items:flex-start;gap:10px;padding:16px 20px;border-bottom:1px solid var(--rule)}.dr>header h2{font:700 19px var(--f-disp);font-variation-settings:'SOFT' 100}.dr>header p{color:var(--mut);font-size:12.5px;margin-top:2px}.dr>header .ibtn{margin-left:auto}
.dr .bd{flex:1;overflow:auto;padding:18px 20px}.dr>footer{display:flex;gap:8px;padding:12px 20px;border-top:1px solid var(--rule);background:var(--bg2)}.dr>footer .sp{flex:1}
.mdl{position:absolute;left:50%;top:50%;width:min(440px,92vw);background:var(--stock);border-radius:14px;box-shadow:0 0 0 1px var(--rule2),0 24px 60px -20px rgba(0,0,0,.4);transform:translate(-50%,-50%) scale(.96);opacity:0;transition:transform 200ms var(--out),opacity 200ms var(--out)}
.layer.open .mdl{transform:translate(-50%,-50%);opacity:1}.mdl .bd{padding:20px}.mdl h2{font:700 19px var(--f-disp);font-variation-settings:'SOFT' 100;margin-bottom:6px}.mdl footer{display:flex;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid var(--rule)}
.checks{list-style:none;display:grid;gap:6px;margin:10px 0}.checks li{display:flex;gap:8px;align-items:center}.checks .hi{color:var(--teal)}.checks li.w .hi{color:var(--yel-ink)}.checks li.x .hi{color:var(--red-ink)}
/* chat / thread */
.thread{display:flex;flex-direction:column;gap:8px;max-width:640px}.msg{max-width:78%;padding:9px 12px;border-radius:14px;font-size:13.5px}.msg.in{background:var(--card);box-shadow:0 0 0 1px var(--rule);align-self:flex-start}.msg.out{background:var(--ink);color:var(--stock);align-self:flex-end}
.msg.sys{align-self:center;background:none;color:var(--mut);font:500 11.5px var(--f-mono);padding:2px}.msg small{display:block;font-size:11px;opacity:.7;margin-top:3px}.msg.note{background:var(--yel-wash);color:var(--ink);align-self:stretch;max-width:none}
.composer{display:flex;gap:8px;align-items:flex-end;margin-top:14px;padding:10px;border-radius:12px;background:var(--card);box-shadow:0 0 0 1px var(--rule2)}.composer textarea{flex:1;border:0;background:none;resize:none;font:400 13.5px var(--f-ui);color:var(--ink);min-height:40px}.composer textarea:focus{outline:none}
/* calendar (schedule / on-call) */
.cal{display:grid;grid-template-columns:150px repeat(var(--cols,12),1fr);border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--card)}
.cal>div{border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);min-height:44px;position:relative;font-size:12px}
.cal .hd{font:500 11px var(--f-mono);color:var(--mut);padding:6px 8px;min-height:0;background:var(--bg2)}.cal .ln{padding:8px 10px;font-weight:600;background:var(--bg2)}.cal .ln small{display:block;font-weight:400;color:var(--mut)}
.ev{position:absolute;top:6px;bottom:6px;border-radius:7px;padding:4px 7px;font-size:11.5px;line-height:1.2;overflow:hidden;background:var(--teal-wash);color:var(--teal-ink);box-shadow:inset 3px 0 0 var(--teal);z-index:1;white-space:nowrap}
.ev.gap{background:repeating-linear-gradient(135deg,var(--red-wash) 0 6px,transparent 6px 12px);color:var(--red-ink);box-shadow:inset 3px 0 0 var(--red)}
.ev.pend{background:var(--yel-wash);color:var(--yel-ink);box-shadow:inset 3px 0 0 var(--yel)}.ev.abs{background:var(--hover);color:var(--mut);box-shadow:inset 3px 0 0 var(--rule2)}
/* mobile chrome */
.mtop,.mbot{display:none}
@media (max-width:860px){
 .app,.app.no-rp,.app.no-side,.app.no-side.no-rp{display:block;height:auto;overflow:visible}
 .rail,.side,.sbar{display:none}
 .mtop{display:flex;position:sticky;top:0;z-index:40;align-items:center;gap:10px;padding:10px 14px;background:var(--stock);border-bottom:1px solid var(--rule)}
 .mtop b{font-weight:600}.mtop small{display:block;color:var(--mut);font-size:11.5px}.mtop .sp{flex:1}
 .top{padding:12px 16px 0}.title-row h1{font-size:22px}.title-row .acts{margin-left:0;width:100%}
 main{overflow:visible;padding:16px 16px 96px}
 .rp{border-left:0;border-top:1px solid var(--rule);padding:16px 16px 96px}
 .mbot{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--stock);border-top:1px solid var(--rule2);padding:6px 0 18px}
 .mbot a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:500;color:var(--mut);position:relative}.mbot a.on{color:var(--ink)}.mbot .dot{position:absolute;top:0;right:calc(50% - 16px);width:7px;height:7px;border-radius:50%;background:var(--yel)}
 .grid2,.grid3{grid-template-columns:1fr}.grid4{grid-template-columns:1fr 1fr}
 .crow{grid-template-columns:56px 1fr;gap:4px 12px}.crow>:nth-child(n+3){grid-column:2}.crow>:last-child{display:none}
 .facts{grid-template-columns:1fr 1fr}.cand-top{grid-template-columns:auto 1fr}.cand-top .fit{grid-column:2;text-align:left}
 .tbl-wrap{overflow-x:auto}.board{grid-template-columns:repeat(5,240px)}
 .dr{top:auto;width:100%;max-height:92vh;border-radius:16px 16px 0 0;transform:translateY(100%)}
 .state-sw{bottom:84px!important}
}
/* state switcher (prototype only) */
.state-sw{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);z-index:90;display:flex;gap:2px;align-items:center;background:#1e1b2e;color:#f3eee2;border-radius:99px;padding:4px;font:500 11px var(--f-mono);box-shadow:0 10px 30px -10px rgba(0,0,0,.5);max-width:94vw;overflow:auto}
.state-sw span{display:inline-flex;gap:6px;align-items:center;padding:0 10px;color:#8de0d6}.state-sw a{padding:5px 9px;border-radius:99px;white-space:nowrap;color:#cfc8d6}.state-sw a.on{background:#f3eee2;color:#1e1b2e}
.shotmode .state-sw{display:none}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* brand personality (restrained): Bell in empty/success/expired/error, inked stamps at key moments, Fraunces numerals */
.okcard{display:flex;align-items:center;gap:18px;padding:14px 18px;margin-bottom:16px;border-radius:12px;background:var(--teal-wash);color:var(--ink)}
.okcard picture{width:64px;flex:none}.okcard picture img{width:100%;height:auto;display:block}
.okcard h2{font:700 20px/1.15 var(--f-disp);font-variation-settings:'SOFT' 100;letter-spacing:-.01em}.okcard p{color:var(--mut);font-size:13px;margin-top:2px}
.okcard .pstamp{margin-left:auto;width:104px}
.errcard{display:flex;align-items:center;gap:14px;padding:12px 16px;margin-bottom:16px;border-radius:12px;background:var(--red-wash);color:var(--red-ink)}
.errcard picture{width:48px;flex:none}.errcard picture img{width:100%;height:auto;display:block}.errcard b{font-weight:600}
.expired .card picture{width:96px;display:block;margin:0 auto 6px}.expired .card picture img{width:100%;height:auto}
.hero-band{display:flex;align-items:center;gap:20px;margin:-4px 0 18px}
.hero-band h2{font:800 34px/1.05 var(--f-disp);font-variation-settings:'SOFT' 100,'opsz' 72;letter-spacing:-.025em}.hero-band h2 span{color:var(--mut)}
.hero-band picture{width:84px;margin-left:auto;transform:rotate(6deg)}.hero-band picture img{width:100%;height:auto;display:block}
.stat b{font-size:38px;font-weight:800;font-variation-settings:'SOFT' 100,'opsz' 72;letter-spacing:-.02em}
.fit{font-weight:800}
.title-row h1{font-size:28px;font-weight:800}
@media (max-width:860px){.hero-band h2{font-size:26px}.hero-band picture{width:64px}.okcard .pstamp{width:80px}}
/* ---- density pass: right-panel widgets, rich rows ---- */
.ladder{list-style:none;display:grid}.ladder li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;padding:8px 0;border-bottom:1px solid var(--rule);align-items:center;font-size:13px}.ladder li:last-child{border:0}
.ladder .n{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--rule2);display:grid;place-items:center;font:600 11px var(--f-mono);color:var(--mut)}
.ladder li.done .n{background:var(--teal);color:#fff;box-shadow:none}.ladder li.now .n{box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink)}.ladder small{display:block;color:var(--mut);font-size:11.5px}
.cd{font:800 40px/1 var(--f-disp);font-variation-settings:'SOFT' 100,'opsz' 72;letter-spacing:-.02em}.cd small{font:500 12px/1.4 var(--f-ui);color:var(--mut);display:block;margin-top:6px;letter-spacing:0}
.pbar{height:6px;border-radius:3px;background:var(--rule);overflow:hidden;margin-top:8px}.pbar i{display:block;height:100%;background:var(--ink);border-radius:3px}.pbar.w i{background:var(--yel)}.pbar.t i{background:var(--teal)}.pbar.r i{background:var(--red)}
.apr{display:grid;grid-template-columns:64px minmax(0,1fr) 200px;gap:18px;padding:16px;border-bottom:1px solid var(--rule)}.apr:last-child{border-bottom:0}
.apr.on{box-shadow:inset 3px 0 0 var(--ink)}.apr .t{font:600 18px var(--f-mono)}.apr .t small{display:block;font-size:11px;color:var(--mut);font-weight:500}
.apr .who{display:flex;gap:10px;align-items:center;margin-top:10px}.apr .side-c{display:grid;gap:8px;align-content:start}
.elig{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sumstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--rule);border-radius:12px;background:var(--card);margin-bottom:16px}.sumstrip>div{padding:10px 14px;border-right:1px solid var(--rule)}.sumstrip>div:last-child{border:0}
.sumstrip small{display:block;color:var(--mut);font-size:12px}.sumstrip b{display:block;font:800 26px/1.15 var(--f-disp);font-variation-settings:'SOFT' 100,'opsz' 72;letter-spacing:-.02em}.sumstrip span{font-size:11.5px;color:var(--mut)}
.notes{display:grid;gap:8px;margin-bottom:12px}.note{background:var(--yel-wash);border-radius:10px;padding:9px 12px;font-size:13px}.note b{font-weight:600}.note small{color:var(--mut);font-size:11.5px}
.rlist a,.rlist div.r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:7px 0;border-bottom:1px solid var(--rule);font-size:13px}.rlist a:last-child{border:0}.rlist small{display:block;color:var(--mut);font-size:11.5px}
.res-ty{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--bg2);color:var(--mut)}
@media (max-width:860px){.apr{grid-template-columns:1fr;gap:10px}.sumstrip{grid-template-columns:repeat(2,minmax(0,1fr))}.sumstrip>div:nth-child(2){border-right:0}.sumstrip>div:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
.eyebrow{font:600 11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}

/* =====================================================================
   TYPE + LAYOUT PASS (authoritative; overrides everything above)
   Scale: display 28/32 Fraunces (one per page: h1 or hero) · metric 32/36 Fraunces numerals
          · section 20/24 Fraunces (empty/success/drawer titles) · UI 13/20 body + card titles (600)
          · meta 12/16 · label 11/16 mono caps. Cards use at most 13 / 12 / 11.
   Grid: every padding/gap/margin is a multiple of 4 (8 preferred). Left edges: sidebar text 16px,
         header/tabs/main content 32px, right panel 16px.
   ===================================================================== */
.appbody{font:400 13px/20px var(--f-ui);font-variant-numeric:tabular-nums lining-nums;letter-spacing:0}
.appbody h1,.appbody h2,.appbody h3,.appbody .cd,.appbody .hero-band h2{text-wrap:balance}
.appbody p,.appbody .why li,.appbody .banner span{text-wrap:pretty}
.appbody .hi{flex:none}
/* sizes */
.sm,.muted.sm{font-size:12px;line-height:16px}
.id{font-size:12px;line-height:16px}
kbd{font-size:11px;line-height:14px}
.chip{height:24px;padding:0 8px;font:600 11px/1 var(--f-ui);gap:4px}
.btn{font-size:13px;gap:8px}.btn.sm{font-size:12px;height:28px;padding:0 12px}.btn.lg{font-size:14px;height:40px;padding:0 16px}
.tbl th,.side-sec>h4,.rp h3,.eyebrow,.crumbs{font-size:11px;line-height:16px}
.crumbs{font-size:12px}
.card>header{padding:12px 16px;min-height:48px;gap:8px}.card>header h2{font:600 13px/20px var(--f-ui)}
.card .bd{padding:16px}
.title-row{margin:8px 0 16px;gap:12px;flex-wrap:nowrap}
.title-row h1{font:800 28px/32px var(--f-disp);font-variation-settings:'SOFT' 100,'opsz' 36;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.title-row h1 small{font:400 13px/20px var(--f-ui);margin-left:8px}
.title-row>.chip{flex:none}.title-row .acts{flex:none}
.hero-band{margin:0 0 24px;gap:24px}.hero-band h2{font-size:28px;line-height:32px}
.stat b,.sumstrip b,.cd,.fit{font-family:var(--f-disp);font-weight:800;font-size:32px;line-height:36px;font-variation-settings:'SOFT' 100,'opsz' 72;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}
.stat small,.sumstrip small{font-size:12px;line-height:16px}.stat span,.sumstrip span,.cd small,.fit small{font:400 12px/16px var(--f-ui);letter-spacing:0}
.fit small{font:500 11px/16px var(--f-mono)}
.empty h2,.okcard h2,.dr>header h2,.mdl h2,.h2{font:700 20px/24px var(--f-disp);font-variation-settings:'SOFT' 100;letter-spacing:-.01em}
.empty p,.okcard p{font-size:13px;line-height:20px}
/* 4/8 spacing + aligned left edges */
.top{padding:16px 32px 0}
main{padding:24px 32px 64px}
.tabs{margin-left:-12px;gap:0}.tabs [data-tab],.tabs a{padding:0 12px;height:40px}
.org{padding:12px 16px;gap:12px;min-width:0}.org>div{min-width:0;flex:1}
.org b,.org small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-search{margin:12px 8px 4px;padding:0 8px;gap:8px}
.side-sec{padding:12px 8px 4px}.side-sec>h4{padding:4px 8px 8px}
.sl{padding:8px;gap:8px;font-size:13px}
.sc{padding:8px;margin-bottom:4px}.sc .r1{gap:8px;min-width:0}.sc .r1 b,.sc .r1 span:not(.id){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sc .r2{font-size:12px;line-height:16px;margin:4px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp{padding:16px}.rp section{padding-bottom:16px;margin-bottom:16px}.rp h3{margin:0 0 8px}
.banner{padding:12px 16px;gap:12px;margin-bottom:16px;font-size:13px;line-height:20px}.banner>span{max-width:75ch}
.empty{margin:48px auto;padding:24px;max-width:480px}.empty p{max-width:56ch;margin:0 auto}
.okcard{padding:16px 24px;gap:16px}.errcard{padding:12px 16px;gap:16px}
.toolbar{margin-bottom:16px;gap:8px}
.grid4{gap:16px}.stat{padding:16px}
.sumstrip>div{padding:12px 16px}
.note{padding:8px 12px}
.rlist a,.rlist div.r{padding:8px 0;align-items:center}.rlist small{font-size:12px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ladder li{gap:12px;padding:8px 0}.ladder small{font-size:12px;line-height:16px}
.apr{gap:24px;padding:16px}.apr .t{font-size:16px;line-height:20px;white-space:nowrap}
.elig{gap:8px;margin-top:12px}.why{gap:4px}
.why li{align-items:flex-start}.why li .hi{margin-top:2px}
.checks{gap:8px;margin:8px 0 12px}.checks li{align-items:flex-start;line-height:20px}.checks li .hi{margin-top:2px}
/* definition lists: labels and values share a baseline, labels never wrap */
.kv{grid-template-columns:96px minmax(0,1fr);gap:4px 12px;align-items:baseline;font-size:13px;line-height:20px}
.kv dt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv dd .chip{vertical-align:baseline;transform:translateY(-1px)}
/* rows + tables: nothing wraps awkwardly; numbers are tabular and right-aligned */
.crow{grid-template-columns:80px minmax(0,1.4fr) minmax(0,1fr) 176px 120px 24px;gap:16px;padding:12px 16px}
.crow>*{min-width:0}.crow .t{font-size:14px;line-height:20px;white-space:nowrap}
.crow b,.crow .s{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crow .s{font-size:12px;line-height:16px}
.crow .urg+b{display:inline}
.tbl td{padding:12px;white-space:nowrap;line-height:20px}
.tbl td.sm,.tbl td.wrap{white-space:normal;min-width:180px;max-width:42ch}
.tbl td .muted.sm,.tbl td .id{white-space:nowrap}
.tbl th.num,.tbl td.num,.tbl .mono{font-variant-numeric:tabular-nums}.tbl th.num,.tbl td.num{text-align:right}
.tl li{grid-template-columns:var(--tm,56px) 12px minmax(0,1fr) auto;gap:12px;padding:8px 0}
.tl .tm{white-space:nowrap;line-height:20px;padding-top:0}.tl .pt{margin-top:6px}.tl.wide{--tm:84px}
.tl li:not(:last-child) .pt:after{top:12px;height:28px}
.facts>div{padding:12px 16px}.facts small{font-size:12px;line-height:16px}
.cand-top{gap:16px;padding:16px}
.msg{font-size:13px;line-height:20px}.msg small{font-size:11px;line-height:16px}
.thread{max-width:68ch}
.sbar{gap:16px;padding:0 16px;font-size:11px}
.ev{font-size:11px;line-height:16px;text-overflow:ellipsis}
.cal .ln{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fld label{font-size:13px}.fld .hint,.fld .err{font-size:12px;line-height:16px}
/* icons optically centred with text */
.btn svg,.chip svg,.fchip svg,.sl svg,.crumbs svg{flex:none;display:block}
.okline{gap:12px;min-width:0}.okline>div{min-width:0}
@media (max-width:860px){
 .top{padding:12px 16px 0}main{padding:16px 16px 96px}.tabs{margin-left:-12px}
 .title-row{flex-wrap:wrap}.title-row h1{font-size:24px;line-height:28px;white-space:normal}
 .crow{grid-template-columns:64px minmax(0,1fr);gap:4px 12px;padding:12px 16px}
 .tbl td.sm,.tbl td.wrap{min-width:160px}
}
.cd small{display:block;font:400 12px/16px var(--f-ui);margin-top:8px;color:var(--mut);letter-spacing:0;text-wrap:pretty}
.rp{padding-bottom:96px;overscroll-behavior:contain}
.tbl td.mono,.tbl td.mono.sm,.tbl td.id{white-space:nowrap;min-width:0;max-width:none}
.side-search span,.side-search input{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.side-search{flex-wrap:nowrap}
.tbl-wrap{overflow-x:auto}

/* ===== COMPACT TYPE TOKENS (no squashed text: fit by size/role, never by squeezing) =====
   --t-body 13/20 · --t-table 13/18 · --t-meta 12/16 · --t-caps 11/14 (mono caps) · --t-chip 11/14
   Ids, times, phones, metadata: nowrap (+ ellipsis where the box is a flex/grid child).
   Fixed/min-width columns first; the descriptive text column flexes. */
:root{--t-body:400 13px/20px var(--f-ui);--t-table:400 13px/18px var(--f-ui);--t-meta:400 12px/16px var(--f-ui);--t-caps:600 11px/14px var(--f-mono);--t-chip:600 11px/14px var(--f-ui)}
.tbl td{font:var(--t-table);padding:12px;vertical-align:middle}.tbl td b{font-weight:600}
.tbl th{font:var(--t-caps);letter-spacing:.05em;padding:8px 12px}
.tbl td .muted.sm,.tbl td .id,.tbl td small{display:block;font:var(--t-meta);margin-top:2px}
.tbl td .id{font-family:var(--f-mono)}
.chip{font:var(--t-chip);height:24px}
.side-sec>h4,.rp h3,.eyebrow{font:var(--t-caps);letter-spacing:.06em}
.sl{font:var(--t-table);font-weight:500}.sl.on{font-weight:600}
.sc .r1{font:var(--t-table)}.sc .r1 b{font-weight:600}.sc .r2{font:var(--t-meta);margin:4px 0 8px}
.rp{font:var(--t-table)}.rp .kv{font:var(--t-table);gap:6px 12px}.rp p{font:var(--t-table)}.rp .muted.sm,.rp small{font:var(--t-meta)}
.rp .kv{grid-template-columns:88px minmax(0,1fr)}
.kv dd{overflow-wrap:anywhere}
.id,.mono,.tm,.crow .t,.apr .t,kbd,.sbar span{white-space:nowrap}
.okline>*,.sc .r1>*,.card>header>*,.title-row>*,.banner>*,.rlist>a>*,.rlist>.r>*,.ladder li>*,.apr>*,.crow>*,.toolbar>*,.composer>*,.org>*,.mtop>*{min-width:0}
.card>header h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card>header .muted.sm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}
.card>header .r{flex:none}
.sc .r1 .id,.rlist small,.ladder small,.crow .s,.mtop small,.mtop b,.org small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.banner>span{flex:1 1 auto}.banner>.btn{flex:none}
.btn,.chip,.fchip,.tabs [data-tab],.sl{white-space:nowrap}
.btn .ld-lab,.btn>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.msg,.note,.why li,.checks li,.empty p,.okcard p,.banner span{line-height:1.45}
.checks li+li,.why li+li{margin-top:2px}
.sumstrip span,.stat span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sumstrip small,.stat small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* overflow-check fixes */
.grid2>*,.grid3>*,.grid4>*,.stack>*{min-width:0}
.hero-band picture{margin-right:8px}
.okline .pstamp{margin-right:8px}
.okline>.id,.okline>.chip,.okline>.av,.okline>.pstamp,.okline>.btn{flex:none}
.okline.wrap{flex-wrap:wrap;row-gap:8px}
.mtop b,.mtop small{display:block}
.tl li{grid-template-columns:var(--tm,64px) 12px minmax(0,1fr) auto}
.tbl td{white-space:normal}
.tbl td.sm,.tbl td.wrap{min-width:160px;max-width:none}
.tbl td>.chip,.tbl td.num,.tbl td.mono{white-space:nowrap}
.card>.tbl,.card>table{width:100%}
@media (max-width:860px){
 .grid2,.grid3{grid-template-columns:1fr!important}
 .crow{grid-template-columns:72px minmax(0,1fr)!important}
 .tbl td.sm,.tbl td.wrap{min-width:220px}
 .tbl{min-width:100%}
}
.tbl td.nw{white-space:nowrap}
.tbl td .muted.sm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch}
.tbl td.who{min-width:200px}
.tbl td .muted.sm{max-width:26ch}
.tbl td,.tbl th{padding-left:8px;padding-right:8px}.tbl td:first-child,.tbl th:first-child{padding-left:16px}.tbl td:last-child,.tbl th:last-child{padding-right:16px}

/* ===== motion + surface polish (design-engineering-motion-polish · emil-design-eng · better-ui) ===== */
:root{--sw:1.5}
.btn,.chip,.fchip,.sl.on,.tabs .on,.ri.on{--sw:2}
/* optical alignment: icon side gets 2px less padding */
.btn:has(>svg:first-child){padding-left:12px}.btn.sm:has(>svg:first-child){padding-left:10px}.btn.lg:has(>svg:first-child){padding-left:14px}
/* shadows for elevation, borders for structure */
.card,.sumstrip,.ld-board,.ld-up{box-shadow:0 0 0 1px rgb(30 27 46/.08),0 1px 2px -1px rgb(30 27 46/.08),0 2px 4px rgb(30 27 46/.04);border:0}
html.dark .card,html.dark .sumstrip,html.dark .ld-board,html.dark .ld-up{box-shadow:0 0 0 1px rgb(255 255 255/.08)}
/* concentric radii */
.sc,.radio label,.sl{border-radius:8px}.seg{border-radius:8px;padding:2px}.seg a,.seg button{border-radius:6px}
/* drawers: exit shorter and softer than enter */
.layer:not(.open){transition-duration:150ms}.layer:not(.open) .dr{transition:transform 200ms var(--out)}.layer:not(.open) .mdl{transition-duration:150ms}
/* keyboard-initiated actions never animate */
.kbd-instant .layer,.kbd-instant .dr,.kbd-instant .mdl{transition:none!important}
/* hover motion only for fine pointers */
.ri .tip{transition:none}
@media (hover:hover) and (pointer:fine){.ri .tip{transition:opacity 125ms var(--out),transform 125ms var(--out)}}
/* Magic UI "Animated List" idea, restrained: the newest live event enters once */
.tl.live li:last-child{animation:li-in 300ms var(--out) both}
@keyframes li-in{from{opacity:0;transform:translateY(8px)}}
/* Cult UI "card stack" idea: the approval queue reads as a stack (hairline layers, no offset shadow) */
.stackcard{position:relative;margin-bottom:12px}
.stackcard::before,.stackcard::after{content:"";position:absolute;left:12px;right:12px;bottom:-6px;height:12px;border-radius:0 0 12px 12px;background:var(--card);box-shadow:0 0 0 1px var(--rule);z-index:-1}
.stackcard::after{left:24px;right:24px;bottom:-12px;opacity:.7}
/* reduced motion: drop movement, keep opacity */
@media (prefers-reduced-motion:reduce){
 .dr{transform:none!important;opacity:0;transition:opacity 180ms var(--out)!important}.layer.open .dr{opacity:1}
 .mdl{transform:translate(-50%,-50%)!important;transition:opacity 180ms var(--out)!important}
 .layer{transition:opacity 180ms var(--out)!important}
 .btn:active,.ibtn:active{transform:none}
}
/* odometer digits */
.odo{display:inline-block;font-variant-numeric:tabular-nums}.odo.roll{animation:odo 220ms var(--out)}
@keyframes odo{from{transform:translateY(-40%);opacity:0}}
/* approval countdown ring (pauses on hover) */
.ring{position:relative;display:inline-grid;place-items:center;width:88px;height:88px;flex:none}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}.ring circle{fill:none;stroke-width:3}.ring .ring-bg{stroke:var(--rule2)}.ring .ring-fg{stroke:var(--yel);stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset 1s linear}
.ring b{font:800 22px/1 var(--f-disp);font-variation-settings:'SOFT' 100;font-variant-numeric:tabular-nums}
.ringrow{display:flex;gap:16px;align-items:center}.ringrow small{font:var(--t-meta);color:var(--mut)}
[data-pause-hover].paused .ring-fg{stroke:var(--ink)}[data-pause-hover] .pz{display:none;font:var(--t-meta);color:var(--mut)}[data-pause-hover].paused .pz{display:block}
/* receipt line (approval collapses to one line) */
.receipt{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;background:var(--teal-wash);font:var(--t-table);margin-bottom:16px}.receipt .pstamp{width:56px;margin-left:auto}
/* morphing tray crossfade */
.tray-in{animation:tray 240ms var(--out)}@keyframes tray{from{opacity:0;filter:blur(4px)}}
/* copy button icon swap */
.cp{position:relative}.cp .cp-i{display:inline-grid;place-items:center;width:14px;height:14px;position:relative}.cp .cp-i>*{position:absolute;transition:opacity 300ms cubic-bezier(.2,0,0,1),transform 300ms cubic-bezier(.2,0,0,1),filter 300ms cubic-bezier(.2,0,0,1)}
.cp .cp-ok{opacity:0;transform:scale(.25);filter:blur(4px)}.cp.copied .cp-ok{opacity:1;transform:none;filter:none}.cp.copied .cp-cp{opacity:0;transform:scale(.25);filter:blur(4px)}
/* agent-plan rail for "finding replacements" */
.plan{list-style:none;display:grid;gap:0;margin-top:8px}.plan li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:12px;align-items:center;padding:4px 0;font:var(--t-meta);position:relative}
.plan li .pd{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--rule2);margin-left:3px;position:relative}
.plan li.done .pd{background:var(--teal);box-shadow:none}.plan li.now .pd{box-shadow:inset 0 0 0 2px var(--ink)}
.plan li:not(:last-child) .pd::after{content:"";position:absolute;left:4px;top:12px;width:2px;height:14px;background:var(--rule)}.plan li.done:not(:last-child) .pd::after{background:var(--teal)}
.plan li.now span:nth-child(2){position:relative;overflow:hidden}
.plan li .mono{color:var(--mut)}
.ld-board.with-plan{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start}
@media (prefers-reduced-motion:reduce){.odo.roll,.tray-in{animation:none}.cp .cp-i>*{transition:opacity 150ms}}
@media (max-width:600px){.skrow{grid-template-columns:48px minmax(0,1fr) minmax(0,1fr)}.skrow>:nth-child(n+4){display:none}}
/* ===== Truncation is a last resort (QA 3:36 PM): wrap instead of ellipsis.
   Only calendar events (.ev, .cal .ln) keep ellipsis, marked data-trunc-ok in markup. ===== */
.title-row{flex-wrap:wrap;row-gap:4px}
.title-row h1{white-space:normal;overflow:visible;text-overflow:clip;text-wrap:balance}
.org b,.org small,.sc .r1 b,.sc .r1 span:not(.id),.sc .r2,.rlist small,.kv dt,.crow b,.crow .s,.card>header h2,.card>header .muted.sm,.ladder small,.mtop small,.mtop b,.sumstrip span,.stat span,.sumstrip small,.stat small,.tbl td .muted.sm{white-space:normal;overflow:visible;text-overflow:clip}
.sc .r1 .id{white-space:nowrap;overflow:visible;text-overflow:clip;flex:none}
.card>header{flex-wrap:wrap;row-gap:2px}
.kv dt{white-space:nowrap}
.tbl td .muted.sm{max-width:none}
.side-search span{overflow:visible;text-overflow:clip}
.tbl td .muted.sm.nw{white-space:nowrap}
.side-search>span:first-child{flex:none;display:inline-flex}.toolbar .side-search span.muted{flex:none;min-width:auto}
@media (min-width:1001px){.crow{grid-template-columns:72px minmax(0,2.2fr) minmax(0,1fr) 150px 72px 24px}}
.sumstrip b span,.stat b span{font:inherit;display:inline;color:inherit;white-space:nowrap}
/* Drawer footer is wrap-safe (QA 3:52 PM): in 3+ action footers the primary takes its own full-width row on top */
.dr>footer{flex-wrap:wrap;row-gap:8px;min-width:0}
.dr>footer .btn{flex:0 1 auto;min-width:0;white-space:nowrap}
.dr>footer:has(>.btn:nth-of-type(3)) :is(.btn.hot,.btn.pri){order:-1;flex:1 0 100%;justify-content:center}
.dr>footer:has(>.btn:nth-of-type(3)) .sp{display:none}
.dr>footer:has(>.btn:nth-of-type(3)) .btn:not(.hot):not(.pri){flex:1 1 0;justify-content:center}
.dr .okline .pstamp{width:72px;flex:none;margin-top:-4px}
.dr .bd{overflow-x:hidden}
@media (max-width:600px){.dr>footer .btn{flex:1 0 100%;justify-content:center}.dr>footer .sp{display:none}}
@media (max-width:600px){.dr>footer:has(>.btn:nth-of-type(3)) .btn:not(.hot):not(.pri){flex:1 0 100%}}
/* Conversation: the column fills the shell, the thread scrolls, the composer sits on the status bar. */
main:has(.composer){display:flex;flex-direction:column;overflow:hidden;padding-bottom:12px}
main:has(.composer)>[data-state-view]:has(.composer){flex:1;min-height:0;display:flex;flex-direction:column}
main:has(.composer) .thread{flex:1;min-width:0;min-height:0;overflow:auto}
@media (max-width:860px){
 .app:has(.composer){display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
 .app:has(.composer) .mainwrap{flex:1;min-height:0;overflow:hidden;padding-bottom:72px}
 .app:has(.composer) .rp{display:none}
 .app:has(.composer) main{overflow:hidden;padding:16px 16px 8px}
}