/* Inter is loaded by _sidebar.js without blocking paint (a remote @import here held every page until Google Fonts answered) */
/* Shared Office sidebar - loaded AFTER each page's inline styles so every page renders the identical panel. */
aside{background:#fff;color:var(--ink);padding:22px 18px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;border-right:1px solid var(--line);box-sizing:border-box}
aside .brand{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-weight:700;font-size:12px;letter-spacing:.4px;text-transform:uppercase;margin:0 0 2px 4px;color:var(--mute);text-decoration:none}
aside .brand img{height:26px;width:auto;filter:none}
aside .wsel{appearance:none;-webkit-appearance:none;width:100%;min-height:0;font:inherit;font-size:12px;font-weight:700;color:var(--mute);background:var(--bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 10px center;border:1px solid var(--line);border-radius:10px;padding:7px 28px 7px 10px;margin:0 0 14px;cursor:pointer;text-overflow:ellipsis}
aside .wsel:hover{color:var(--ink);border-color:#cbd5e1}aside .wsel:focus:not(:focus-visible){outline:none}aside .wsel:focus-visible{outline:2px solid var(--p,#4169e1);outline-offset:2px}
aside a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;color:var(--mute);text-decoration:none;font-weight:700;font-size:15px;margin:0}
aside a.on,aside a:hover{background:var(--bg);color:var(--ink)}
aside a .ic{width:19px;height:19px;flex:0 0 auto;opacity:.95;stroke-width:2.3}aside a.on .ic{opacity:1;color:var(--p)}
aside a .n{margin-left:auto;background:var(--pl);color:var(--pt,#3355c8);border-radius:999px;font-size:11px;padding:2px 9px;font-weight:800;line-height:1.4}aside a .n:empty{display:none}
aside .sp{flex:1}
aside .me{display:flex;align-items:center;gap:10px;font-weight:700;margin-top:6px;padding:0 4px}
aside .me .av{width:36px;height:36px;border-radius:50%;background:var(--bg);color:var(--ink);display:grid;place-items:center;font-size:12px;font-weight:900}
@media (max-width:900px){
  html body{grid-template-columns:minmax(0,1fr)}   /* html body outranks each page's own body rule; the sidebar is a top bar here, so every page is one column (pages that only collapse at 820px would otherwise squeeze the bar into a 236px track) */
  aside{position:sticky;top:0;height:auto;flex-direction:row;align-items:center;gap:2px;padding:10px 12px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto;z-index:5;scrollbar-width:none}
  aside::-webkit-scrollbar{display:none}
  aside .brand{margin:0 10px 0 0;font-size:11px;flex:0 0 auto;flex-direction:row;align-items:center;gap:8px}aside .brand img{height:20px}
  aside .wsel,aside .sp,aside .me{display:none}
  aside a{padding:8px 10px;font-size:13px;flex:0 0 auto;gap:6px}aside a .n{margin-left:2px}
}

/* ---- collapsible: html.nav-min shrinks the first grid track (pages use var(--navw)) and hides labels ---- */
html.nav-min{--navw:76px}
body.nav-ready aside{transition:padding .2s}   /* no transition on load: the remembered collapsed state is applied by script after the first layout, and animating that looked like a glitch */
.navtog{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border-radius:12px;border:0;background:transparent;color:var(--mute);font:inherit;font-weight:700;font-size:15px;cursor:pointer;text-align:left}
.navtog:hover{background:var(--bg);color:var(--ink)}.navtog .ic{width:19px;height:19px;flex:0 0 auto;opacity:.95;stroke-width:2.3}
html.nav-min .navtog{width:44px;height:44px;padding:0;justify-content:center;gap:0}html.nav-min .navtog .lbl{display:none}html.nav-min .navtog .ic{width:20px;height:20px}
html.nav-min aside{padding:42px 14px 22px;align-items:center}
html.nav-min aside .brand{margin:0 0 8px;align-items:center}html.nav-min aside .brand img{height:42px;width:42px;object-fit:contain;object-position:center}html.nav-min aside .brand .cap{display:none}
html.nav-min aside .wsel{width:44px;padding:8px 0;color:transparent;background-position:center;margin-bottom:12px;text-indent:-999px}
html.nav-min aside a{width:44px;height:44px;padding:0;justify-content:center;gap:0;font-size:0}html.nav-min aside a .ic{width:18px;height:18px;opacity:.9}   /* 2026-09-30: slightly smaller than 20 px (Wafi) */
html.nav-min aside a .n{position:absolute;top:4px;right:4px;font-size:9px;padding:1px 5px;margin:0;min-width:16px;text-align:center}html.nav-min aside a{position:relative}
html.nav-min aside .me{padding:0;justify-content:center}html.nav-min aside .me .lbl{display:none}
@media (max-width:900px){.navtog{display:none}html.nav-min{--navw:auto}}

/* star glyph aligned to the text beside it */
.st{display:inline-block;font-style:normal;font-size:.85em;line-height:1;vertical-align:.09em}

/* ---- section parent vs. selected child (e.g. Agents > one agent's profile) ---- */
aside a.in{color:var(--ink)}aside a.in .ic{opacity:1;color:var(--p)}
aside a.sub{margin:-2px 0 0 0;padding:8px 14px 8px 22px;font-size:13.5px;gap:10px;position:relative}
aside a.sub::before{content:"";position:absolute;left:11px;top:-4px;bottom:50%;width:9px;border:1.5px solid var(--line);border-top:0;border-right:0;border-radius:0 0 0 6px}
aside a.sub .sav{width:22px;height:22px;border-radius:50%;flex:0 0 auto;object-fit:cover}
aside a.sub .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.nav-min aside a.sub{padding:0;margin:0}html.nav-min aside a.sub::before,html.nav-min aside a.sub::after{display:none}html.nav-min aside a.sub .sav{width:24px;height:24px}html.nav-min aside a.sub .lbl{display:none}
@media (max-width:900px){aside a.sub{padding:8px 10px}aside a.sub::before,aside a.sub::after{display:none}}

aside a[hidden]{display:none}

/* ---- Workspace-wide Ask: sidebar entry + side drawer (shared by every Office page) ---- */
aside a#askNav .kb{background:transparent;color:var(--mute);border:1px solid var(--line);font-weight:700;font-size:10.5px;padding:1px 7px}
html.nav-min aside a#askNav .kb{display:none}
#askWrap .askbg{position:fixed;inset:0;background:rgba(15,23,42,.18);z-index:60}
#askWrap .askd{position:fixed;top:12px;right:12px;bottom:12px;width:min(440px,calc(100vw - 24px));background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(15,23,42,.18);z-index:61;display:flex;flex-direction:column;padding:16px 18px;box-sizing:border-box;animation:askIn .18s ease-out}
@keyframes askIn{from{transform:translateX(16px);opacity:0}to{transform:none;opacity:1}}
#askWrap .hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
#askWrap .hd b{display:block;font-size:16px;color:var(--ink)}#askWrap .hd span{display:block;font-size:12px;font-weight:700;color:var(--mute);margin-top:2px}#askWrap .hd span:empty{display:none}
#askWrap .x{border:0;background:var(--bg);color:var(--mute);width:30px;height:30px;border-radius:50%;font-size:18px;line-height:1;cursor:pointer;flex:0 0 auto}#askWrap .x:hover{color:var(--ink)}
#askWrap .log{flex:1;display:flex;flex-direction:column;gap:8px;overflow:auto;padding:2px 0;min-height:0}
#askWrap .cm{font-size:13.5px;line-height:1.5;border-radius:12px;padding:8px 12px;max-width:92%;white-space:pre-wrap;word-break:break-word}
#askWrap .cm.me{align-self:flex-end;background:var(--pl);color:var(--p);font-weight:600}#askWrap .cm.ai{align-self:flex-start;background:var(--bg);color:var(--ink)}
#askWrap .cm.ai.err{background:#fee2e2;color:#991b1b}#askWrap .cm.ai code{background:#fff;border-radius:4px;padding:0 4px;font-size:12px}
#askWrap .cm .st{display:block;color:var(--mute);font-size:11px;font-weight:700;margin-top:4px}
#askWrap .hints{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}#askWrap .hints:empty{display:none}
#askWrap .hints span{font-size:12px;font-weight:700;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:5px 11px;cursor:pointer}#askWrap .hints span:hover{color:var(--p);border-color:var(--p)}
#askWrap .row{display:flex;gap:8px;align-items:center;margin-top:8px;background:var(--bg);border-radius:999px;padding:6px 6px 6px 14px}
#askWrap .row input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:14px;color:var(--ink);outline:none}
#askWrap .row button{border:0;background:var(--btn);color:#fff;width:36px;height:36px;border-radius:50%;font-size:15px;cursor:pointer;flex:0 0 auto}
#askWrap .foot{font-size:11.5px;font-weight:700;color:var(--mute);margin-top:8px}
@media (max-width:900px){#askWrap .askd{top:auto;left:8px;right:8px;bottom:8px;height:78vh;width:auto}}


/* ======================================================================================================
   v.2 Office look (approved brand guidelines v.2; reference mockups/office-linear-suite-v.2.html).
   Loaded after every page's inline styles, so these tokens and sidebar rules win without editing each page.
   :root:root outranks each page's own :root token block.
   ====================================================================================================== */
:root:root{--p:#4169e1;--pl:#eaeffc;--pt:#3355c8;--btn:#4169e1;--btn-t:#3355c8;--btn-soft:#eaeffc;--bg:#fafafa;--ink:#040d1c;--mute:#46556b;--line:#e4ecf5;
  --green:#1c7f5d;--amber:#b45309;--red:#b42318;--warm:#2f3d52;
  --v2-t2:#2f3d52;--v2-t3:#46556b;--v2-t4:#627187;--v2-head:#02254f;--v2-hover:#eaf0f8;--v2-raise:#f4f7fb;--v2-rail:#d3dfec;
  --v2-ui:"Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --v2-display:"Plus Jakarta Sans","Inter",-apple-system,BlinkMacSystemFont,Arial,sans-serif}
body{font-family:var(--v2-ui);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--v2-display);color:var(--v2-head)}
h1{letter-spacing:-.02em}

/* sidebar */
aside{padding:10px 8px;gap:2px;border-right-color:var(--v2-rail)}
/* 2026-09-30: the rail is #fbfbfb against a white page ground, with darker nav text (Wafi). :root wins over the per-page aside and body rules */
:root aside{background:#fbfbfb}:root body{background:#fff}:root aside .wsel,:root aside .nav-search{background-color:#fff}:root aside a.on:not(.brand),:root aside a:not(.brand):hover,:root .navtog:hover,:root aside .me:hover{background:#e1e7f0}:root aside a:not(.brand),:root .navtog,:root aside .nav-search,:root aside .me{color:var(--ink)}:root aside .sec{color:var(--v2-t2)}:root aside .me .av{background:#fff;color:var(--ink);border:1px solid #dbe6f2}:root .navtog:hover{background:var(--v2-hover)}
aside a.brand{height:auto;padding:0;background:transparent;flex-direction:column;align-items:flex-start;margin:6px 8px 10px;gap:5px;color:var(--v2-head);font:600 11.5px/1 var(--v2-display);letter-spacing:.14em}
aside .brand img{height:26px}
aside > *{flex-shrink:0}
aside{overflow-y:auto;scrollbar-width:none}
aside .wsel{margin:0 0 8px;border:1px solid #dbe6f2;border-radius:6px;background-color:#fff;color:var(--ink);font:500 12.5px var(--v2-ui);padding:7px 28px 7px 9px}
aside a,.navtog{gap:8px;height:28px;padding:0 8px;border-radius:6px;color:var(--v2-t2);font:450 13px/1 var(--v2-ui)}
aside a.on:not(.brand),aside a:not(.brand):hover,.navtog:hover{background:var(--v2-hover);color:var(--ink)}
aside a.brand:hover{background:transparent}
aside a.on{font-weight:500}
aside a .ic,.navtog .ic{width:15px;height:15px;stroke-width:1.9;opacity:.85}
aside a.on .ic,aside a.in .ic{color:currentColor;opacity:1}
aside a .nl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.4}   /* room for descenders: the link's line-height is 1, and an overflow-hidden span at that height clips the g in Agents */
aside a .n{background:transparent;color:var(--v2-t4);padding:0;font:450 11.5px var(--v2-ui);font-variant-numeric:tabular-nums}
body aside a .n{color:var(--v2-t4)}
aside a .n.hot,body aside a .n.hot{color:var(--red)}
aside .navlbl{font:600 11.5px/1 var(--v2-ui);letter-spacing:0;text-transform:none;color:var(--v2-t3);padding:16px 8px 6px}
aside{position:sticky}aside .navcol{position:absolute;top:12px;right:10px;width:24px;height:24px;display:inline-grid;place-items:center;border:0;border-radius:6px;background:transparent;color:var(--v2-t4);cursor:pointer;padding:0}aside .navcol svg{width:16px;height:16px}aside .navcol:hover{background:var(--v2-hover);color:var(--v2-t2)}
html.nav-min aside .navcol{right:auto;left:50%;transform:translateX(-50%);top:10px;bottom:auto}   /* 2026-09-30: the arrow stays at the top of the rail, above the mark, so it does not jump on toggle (Wafi) */html.nav-min aside .navcol svg{transform:rotate(180deg)}
:root .navtog{display:none}#nAg{display:none}
@media (max-width:900px){aside .navcol{display:none}}
aside .me{margin:4px 0 0;padding:6px 8px;border-top:1px solid #e4ecf5;font:450 12.5px var(--v2-ui);color:var(--v2-t2)}
aside .me .av{width:22px;height:22px;background:#032d60;color:#fff;font-size:10px;font-weight:600}
aside a[href="/"]:not(.brand){font-size:12.5px;color:var(--v2-t3)}
aside a#askNav .kb{font-size:10.5px}
/* the open agent sits under Agents on a square elbow */
aside a.in{color:var(--ink);font-weight:500}
aside a.sub{height:28px;margin:0 0 0 30px;padding:0 8px 0 10px;font-size:13px;color:var(--ink);font-weight:500;overflow:visible}
aside a.sub .ic{width:16px;height:16px;opacity:.9}
aside a.sub::before{left:-8px;top:-6px;bottom:50%;height:auto;width:0;border:0;border-left:1.3px solid var(--v2-rail);border-radius:0}   /* the vertical of the elbow */
aside a.sub::after{content:"";position:absolute;left:-8px;top:50%;width:8px;height:0;border-top:1.3px solid var(--v2-rail)}   /* its foot, pointing at the pill */
body.pf-tracked aside a.sub::before{display:none}
body.pf-tracked aside a.sub::after{left:-6.9px;width:6.9px}   /* the foot starts at the section rail's right edge and reaches the pill: no crossing */   /* on a profile the vertical carries on into the section list's rail, so it reads as one line */   /* the same x as the profile's section rail, so the two read as one line */
aside a.sub .sav{width:18px;height:18px}
html.nav-min aside a,html.nav-min .navtog{width:34px;height:34px}html.nav-min aside{gap:4px;overflow-y:auto;scrollbar-width:none}   /* 2026-09-30: square tiles with air between them, the rail felt squashed (Wafi) */
html.nav-min aside .navlbl{display:block;height:10px;padding:0;font-size:0;line-height:0;overflow:hidden}   /* the section breaks survive as small gaps */
html.nav-min aside a .n{display:none}   /* the rail shows icons only; the one count that matters (Inbox) stays as a small corner badge */
html.nav-min aside a .n.hot{display:block;position:absolute;top:1px;right:3px;min-width:0;padding:1px 3px;border-radius:6px;font:600 9px/1 var(--v2-ui);color:#fff;background:var(--red);border:1.5px solid #fff}
html.nav-min aside a .n.hot:empty{display:none}
@media (max-width:900px){ aside .navlbl{display:none} aside a{height:30px} }
/* v.2 search button and ⌘K palette */
aside .nav-search{display:flex;align-items:center;gap:7px;height:28px;padding:0 8px;margin:6px 0 2px;border:1px solid var(--line);border-radius:6px;color:var(--v2-t3);font:450 12.5px var(--v2-ui);width:100%;background:var(--v2-raise);cursor:pointer;box-sizing:border-box}
aside .nav-search:hover{border-color:var(--v2-rail);color:var(--v2-t2)}
aside .nav-search svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;flex:none}
aside .nav-search .kbd{margin-left:auto}
.kbd{font:500 10px/1 var(--v2-ui);color:var(--v2-t4);border:1px solid var(--line);border-radius:4px;padding:2px 4px;white-space:nowrap}
html.nav-min aside .nav-search{width:34px;justify-content:center;padding:0}html.nav-min aside .nav-search .lbl,html.nav-min aside .nav-search .kbd{display:none}
@media (max-width:900px){ aside .nav-search{width:auto;margin:0 4px 0 0} aside .nav-search .lbl,aside .nav-search .kbd{display:none} }
.cmd-scrim{position:fixed;inset:0;background:rgba(2,37,79,.28);display:none;z-index:60}.cmd-scrim.on{display:block}
.cmd{position:fixed;top:13vh;left:50%;transform:translateX(-50%);width:min(560px,92vw);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 48px rgba(2,37,79,.18);z-index:61;display:none;overflow:hidden}
.cmd.on{display:block}
.cmd input{width:100%;height:46px;padding:0 14px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:450 14px var(--v2-ui);outline:0;box-sizing:border-box}
.cmd ul{list-style:none;margin:0;padding:6px;max-height:340px;overflow:auto}
.cmd li{display:flex;align-items:center;gap:9px;min-height:32px;padding:4px 9px;border-radius:6px;font:450 13px var(--v2-ui);color:var(--v2-t2);cursor:pointer}
.cmd li .ct{display:flex;flex-direction:column;min-width:0}.cmd li .ct>span:first-child,.cmd li .ct{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd li .cs{font-size:11.5px;color:var(--v2-t4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd li[aria-selected="true"]{background:var(--v2-hover);color:var(--ink)}
.cmd li .k{margin-left:auto;flex:none}.cmd li.none{color:var(--v2-t4);cursor:default}
.cmd-note{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#02254f;color:#fff;font:500 13px var(--v2-ui);border-radius:8px;padding:9px 14px;z-index:70;box-shadow:0 8px 24px rgba(2,37,79,.2)}
/* v.2 shell details: workspace picker like the mockup's, user chip with a menu, no Collapse/Back rows (they live in the menu) */
:root aside .wsel{margin:8px 0;padding:0 28px 0 10px;height:34px;border:1px solid var(--line);border-radius:6px;background-color:#fff;font:600 13px/1 var(--v2-ui);letter-spacing:normal;color:var(--v2-t2, var(--ink))}
:root aside .wsel:hover{background-color:var(--v2-hover);border-color:var(--line)}
aside .navtog,aside a[href="/"]:not(.brand){display:none}
aside .me-dp{position:relative;margin-top:auto}
aside .me{display:flex;align-items:center;gap:8px;border-radius:6px;cursor:pointer}aside .me:hover,aside .me.on{background:var(--v2-hover)}aside .me .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
aside .me .dots{margin-left:auto;color:var(--v2-t4);letter-spacing:.5px}
[hidden]{display:none !important}
.dp-menu{position:absolute;z-index:30;min-width:190px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 32px -12px rgba(2,37,79,.28);padding:4px;display:grid}
.dp-menu button{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px;border:0;border-radius:6px;background:none;font:450 12.5px var(--v2-ui);color:var(--ink);text-align:left;cursor:pointer;white-space:nowrap}
.dp-menu button:hover,.dp-menu button:focus-visible{background:var(--v2-hover);outline:none}.dp-menu button .nm{flex:1}.dp-menu button .kbd{margin-left:12px}
.dp-menu button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;visibility:hidden;flex:none}.dp-menu button[aria-checked="true"]{font-weight:600}.dp-menu button[aria-checked="true"] svg{visibility:visible}
.dp-menu hr{border:0;border-top:1px solid var(--line);margin:4px 2px}
.me-menu{position:fixed;z-index:80}
html.nav-min aside .brand img{content:url("assets/manelink-mark.svg")}   /* the mark shows from the first paint; the script also swaps the src */
html.nav-min aside .wsel{display:none}html.nav-min aside .me .dots{display:none}

@media (max-width:900px){ aside .me-dp{display:none} }
/* v.2 base scale: every Office page renders 10% larger (the approved sizes, scaled), per Wafi 2026-09-16 */
html{zoom:1.1}
/* vh units ignore the zoom, so full-height boxes would run 10% past the screen: size them from the scaled viewport instead */
:root{--vh:calc(100vh / 1.1)}
:root aside{height:var(--vh)}
:root body{min-height:var(--vh)}
:root .dbtablewrap{max-height:max(420px,calc(var(--vh) - 250px))}
svg.li{width:18px;height:18px;flex:0 0 auto;vertical-align:-4px}   /* shared line icons (_icons.js) */
/* buttons never wrap or misalign their label: one line, centred, on every Office page (brand v.2, Office controls) */
:root .btn,:root .ov-btn,:root .fa-btn,:root .tile,:root .chip,:root .lnk,:root .pf-link,:root .dp-step,:root .dp .pick,:root .ot-seg button,:root .seg span,:root .st-tabs button,:root .wf-tabs button,:root .nameform .btn,:root button.tk-review{white-space:nowrap;text-align:center;justify-content:center;flex-shrink:0}
:root .btn,:root .ov-btn,:root .nameform .btn{display:inline-flex;align-items:center}
:root label.btn{display:inline-flex}
:root .wf-compose-bar{flex-wrap:wrap;row-gap:6px}
:root .wf-tabs button,:root .wf-tabs{flex-shrink:1}
.lnk[data-claude-signin]{border:0;background:none;padding:0;font:500 12px var(--v2-ui);color:var(--btn);cursor:pointer}.lnk[data-claude-signin]:hover{text-decoration:underline}
/* Sign in to Claude dialog */
#authModal{display:none;place-items:center;z-index:70}#authModal.on{display:grid}
.auth-box{width:min(480px,92vw);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 48px rgba(2,37,79,.18);padding:18px 20px 16px;font-family:var(--v2-ui)}
.auth-box h3{margin:0 0 4px;font:600 15px/1.35 var(--v2-display);color:var(--v2-head)}.auth-box .sub{margin:0 0 12px;font:450 12.5px/1.5 var(--v2-ui);color:var(--v2-t2)}
.auth-step{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}.auth-step > b{flex:0 0 22px;height:22px;border-radius:50%;background:var(--v2-raise);color:var(--v2-head);font:600 11.5px/22px var(--v2-ui);text-align:center}
.auth-step > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;font:450 12.5px/1.45 var(--v2-ui);color:var(--ink)}.auth-step .btn{align-self:flex-start}
.auth-wait{font-size:12px;color:var(--v2-t3)}
#authForm{display:flex;gap:6px}#authCode{flex:1;min-width:0;height:28px;padding:0 8px;border:1px solid var(--line);border-radius:6px;font:450 12.5px var(--v2-ui);color:var(--ink)}#authCode:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px var(--pl)}
.auth-st{min-height:18px;margin-top:6px;font:450 12px var(--v2-ui);color:var(--v2-t2)}.auth-acts{display:flex;justify-content:flex-end;margin-top:8px;padding-top:10px;border-top:1px solid var(--line)}
.auth-box .btn{height:28px;padding:0 10px;border-radius:6px;border:1px solid #dbe6f2;background:#fff;color:var(--ink);font:500 12.5px var(--v2-ui);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}.auth-box .btn.primary{background:var(--btn);border-color:var(--btn);color:#fff}.auth-box .btn:disabled{opacity:.5;cursor:default}
/* every pill or link styled as a button centres its label on its own box, not the row's line box */
:root .rv,:root a.rv,:root .actbtn,:root .act,:root .actv,:root .tk-review,:root .fa-btn,:root .kcard,:root .wf-edit,:root .flip-btn{display:inline-flex;align-items:center;justify-content:center;line-height:1;text-align:center;box-sizing:border-box}
:root .rv,:root a.rv{height:28px;padding:0 12px;border-radius:6px;border:1px solid color-mix(in srgb,var(--btn) 25%,#fff);background:var(--btn-soft);color:var(--btn-t);font:500 12.5px var(--v2-ui);text-decoration:none;white-space:nowrap;vertical-align:middle}
:root .rv:hover,:root a.rv:hover{background:color-mix(in srgb,var(--btn) 14%,#fff)}
:root .kcard{display:flex;justify-content:flex-start;text-align:left;line-height:normal}
.auth-ok{font:450 12px var(--v2-ui);color:var(--v2-t2)}
/* Ask the workspace: memory chips and the Remember this form */
#askWrap .cm.mem{align-self:flex-start;background:var(--pl);border:1px solid #cfe3f8;color:var(--v2-t2);font:450 12px var(--v2-ui);padding:5px 9px;border-radius:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#askWrap .cm.mem .lbl{font-weight:600;color:var(--v2-head)}#askWrap .cm.mem code{font:450 11.5px ui-monospace,Menlo,monospace;background:#fff;border:1px solid var(--line);border-radius:4px;padding:1px 5px}
#askWrap .cm-acts{align-self:flex-start;margin:-4px 0 4px}#askWrap .cm-acts .rem{height:24px;padding:0 9px;border-radius:6px;border:1px solid #dbe6f2;background:#fff;color:var(--v2-t2);font:500 12px var(--v2-ui);cursor:pointer}#askWrap .cm-acts .rem:hover{background:var(--v2-raise);border-color:#c5d6e8}
#askWrap .cm-acts .ok{font:450 12px var(--v2-ui);color:var(--green)}#askWrap .cm-acts .ok code{font:450 11.5px ui-monospace,Menlo,monospace;background:#fff;border:1px solid var(--line);border-radius:4px;padding:1px 5px}
#askWrap .cm-rem{align-self:stretch;display:grid;gap:8px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff;font:450 12.5px var(--v2-ui)}
#askWrap .cm-rem label{display:grid;gap:4px;font:500 11.5px var(--v2-ui);color:var(--v2-t3)}#askWrap .cm-rem textarea,#askWrap .cm-rem input,#askWrap .cm-rem select{font:450 12.5px var(--v2-ui);color:var(--ink);border:1px solid #dbe6f2;border-radius:6px;padding:6px 8px;background:#fff}
#askWrap .cm-rem .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}#askWrap .cm-rem .acts{display:flex;justify-content:flex-end;gap:6px}
#askWrap .cm-rem button{height:26px;padding:0 10px;border-radius:6px;border:0;background:var(--btn);color:#fff;font:500 12px var(--v2-ui);cursor:pointer}#askWrap .cm-rem button.ghost{background:#fff;color:var(--ink);border:1px solid #dbe6f2}
#askWrap .cm-rem .st{font:450 11.5px var(--v2-ui);color:var(--v2-t3);min-height:14px}
/* narrow screens, after every v.2 rule: the top bar is only as tall as its row, so the page starts right under it */
@media (max-width:900px){:root body aside{height:auto;min-height:0;max-height:none;overflow-y:hidden}}   /* outranks the `:root aside{height:var(--vh)}` desktop rule */
/* links that look like buttons never carry the browser's link underline */
:root a.btn,:root a.rv,:root a.hbtn,:root a.act,:root a.actbtn,:root a.actv,:root a.fa-btn,:root a.tk-review,:root a.b,:root a.kcard,:root a.ov-btn,:root a.pf-link,:root a.open,:root a.dbsecbtn,:root .btn a{text-decoration:none}

/* 2026-09-30: the top bar text is darker (Wafi): the breadcrumb prefix in the second text tone, the title in ink */
:root main .pre,:root main h1 .pre,:root main .ov-crumb .pre{color:var(--v2-t2)}
:root main :is(.ny-bar,.tk-top,.ot-top,.pg-top,.st-top,.wf-top,.sp-top,.mp-top,.ac-top,.pi-top,.ms-top,.ag-bar2) > h1,:root main > .top > .grow > h1,:root main :is(.ny-bar,.tk-top,.pg-top) > .top h1,:root main h1#crumb,:root main .ov-crumb{color:var(--ink)}
/* page top bars: the title never breaks across lines, and under 900px the bar wraps onto a second row instead of clipping or overlapping (the Overview and Agents bars carry their own version of this) */
:root main :is(.ny-bar,.tk-top,.ot-top,.pg-top,.st-top,.wf-top,.sp-top,.mp-top,.ac-top,.pi-top) > h1,:root main > .top > .grow > h1,:root main :is(.ny-bar,.tk-top,.pg-top) > .top h1{flex:none;white-space:nowrap}
:root main :is(.ny-bar,.tk-top,.pg-top) > .top{flex:0 1 auto;flex-wrap:nowrap;min-width:0;white-space:nowrap}
:root main :is(.ny-bar,.tk-top,.pg-top) > .top .sub{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){
  :root main :is(.ny-bar,.tk-top,.ot-top,.pg-top,.st-top,.wf-top,.sp-top,.mp-top,.ac-top,.pi-top),:root main > .top{height:auto;min-height:44px;flex-wrap:wrap;row-gap:6px;padding:6px 14px}
  :root main :is(.ny-tabs,.ot-tabs,.wf-tabs,.tabs2,.ac-tabs,.st-tabs,.ny-seg,.pi-tabs){flex:none;max-width:100%}
}

/* workspace switcher: the button wears the select's look; the native select is kept only as the data source */
:root aside button.wsel{display:flex;align-items:center;width:100%;text-align:left;cursor:pointer;line-height:normal;white-space:nowrap}
:root aside button.wsel .lbl{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:normal}
aside select.wsel.ws-native{display:none!important}
.ws-menu{position:fixed;z-index:80}
.ws-menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
/* 2026-09-30, the collapsed rail as one column (Wafi: it felt off): every item is a 34 px tile 4 px apart, section breaks are a clear
   14 px gap, the mark is tile-width, the switcher is a tile with the workspace's initial in the accent colour (the name in its tooltip),
   and the selected page is a blue icon rather than the only filled tile */
html.nav-min aside{padding:40px 14px 18px;gap:4px}
html.nav-min aside .brand{margin:0 0 6px}html.nav-min aside .brand img{width:34px;height:34px}
html.nav-min aside .wsel.wsbtn{display:grid;place-items:center;width:34px;height:34px;min-height:0;margin:0 0 4px;padding:0;text-indent:0;color:var(--p);background-image:none;background-color:#fff;border:1px solid #dbe6f2;border-radius:6px;font:600 13px var(--v2-ui)}
html.nav-min aside .wsel.wsbtn::before{content:attr(data-initial)}html.nav-min aside .wsel.wsbtn .lbl{display:none}
html.nav-min aside .nav-search{width:34px;height:34px;margin:0;border-radius:6px}
html.nav-min aside a,html.nav-min .navtog{width:34px;height:34px;border-radius:6px}
html.nav-min aside .navlbl{height:14px}
html.nav-min aside a.on:not(.brand){background:transparent;color:var(--p)}html.nav-min aside a.on:not(.brand) .ic{color:var(--p);opacity:1}
html.nav-min aside a.on:not(.brand):hover{background:var(--v2-hover)}
html.nav-min aside .me{width:34px;height:34px;justify-content:center;padding:0;margin-top:auto}

/* the collapse arrow sits under the mark as a tile of its own, in the column's rhythm (Wafi, 2026-09-30) */
html.nav-min aside{padding-top:18px}
html.nav-min aside .brand{order:-2;margin:0 0 4px}
html.nav-min aside .navcol{order:-1;position:static;transform:none;width:34px;height:34px;margin:0 0 4px;border-radius:6px;color:var(--v2-t3);display:grid;place-items:center}
html.nav-min aside .navcol:hover{background:var(--v2-hover);color:var(--ink)}html.nav-min aside .navcol svg{width:16px;height:16px}
/* the arrow tile draws its glyph exactly like the page icons: 18 px, ink, stroke 1.9, .9 opacity (Wafi, 2026-09-30) */
html.nav-min aside .navcol{color:var(--ink)}html.nav-min aside .navcol svg{width:18px;height:18px;stroke-width:1.9;opacity:.9}html.nav-min aside .navcol:hover svg{opacity:1}
/* the collapsed rail is as wide as the top bar is tall, 44 px, so the corner is a square (Wafi, 2026-09-30) */
html.nav-min.nav-min{--navw:60px}html.nav-min aside{padding-left:13px;padding-right:12px;overflow-x:hidden}   /* doubled class: the pages set 76px in their own style layer after this file */
/* 2026-09-30: nav icons a step lighter than the labels (Wafi); active stays blue, hover returns to ink */
:root aside a:not(.brand):not(.on) .ic,:root .navtog .ic,:root aside .navcol svg{color:var(--v2-t3)}
:root aside a:not(.brand):not(.on):hover .ic,:root .navtog:hover .ic,:root aside .navcol:hover svg{color:var(--ink)}
/* 2026-09-30: collapsed profile tile mirrors the workspace tile (Wafi): white square, hairline, blue initials */
html.nav-min aside .me{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid #dbe6f2;border-radius:6px;background:#fff;color:var(--p);font:600 13px var(--v2-ui)}
html.nav-min aside .me .av{width:100%;height:100%;border:0;border-radius:0;background:transparent;color:inherit;font:inherit}
html.nav-min aside .me:hover{background:var(--v2-hover)}
/* 2026-09-30: expanded profile row mirrors the workspace button (Wafi): same height, hairline, white fill, 600 13px label */
html:not(.nav-min) aside .me{height:34px;margin:8px 0 0;padding:0 10px 0 6px;border:1px solid var(--line);border-radius:6px;background:#fff;font:600 13px/1 var(--v2-ui);color:var(--v2-t2)}
html:not(.nav-min) aside .me:hover,html:not(.nav-min) aside .me.on{background:var(--v2-hover)}
html:not(.nav-min) aside .me .av{width:20px;height:20px;border:0;background:var(--pl);color:var(--p);font:600 9.5px var(--v2-ui)}
html:not(.nav-min) aside .me .dots{margin-left:auto;color:var(--v2-t3)}
/* 2026-09-30: the collapsed mark is the official vector icon drawn at 26 px inside the 34 px slot, like the icon tiles (Wafi) */
html.nav-min aside .brand{width:34px;height:34px;justify-content:center}
html.nav-min aside .brand img{width:34px;height:34px;object-fit:contain}
/* 2026-09-30: expanded nav text a step lighter than ink (Wafi); the active item and hover keep ink */
html:not(.nav-min) aside a:not(.brand):not(.on),html:not(.nav-min) aside .nav-search,html:not(.nav-min) .navtog{color:var(--v2-t2)}
html:not(.nav-min) aside a:not(.brand):not(.on):hover,html:not(.nav-min) .navtog:hover{color:var(--ink)}
/* 2026-09-30: section labels a step lighter (Wafi) */
html:not(.nav-min) aside .navlbl{color:var(--v2-t4)}
/* 2026-09-30: collapsed section spacers, 22 px tall with a hairline through the middle, 30 px between groups (Wafi) */
html.nav-min aside .navlbl{height:22px}
/* 2026-09-30: a hairline across the middle of each collapsed spacer (Wafi) */
html.nav-min aside .navlbl{position:relative;width:34px}
html.nav-min aside .navlbl::after{content:"";position:absolute;left:5px;right:5px;top:50%;height:1px;background:var(--v2-rail)}
/* 2026-09-30: Search and commands palette on the Linear scale (Wafi): 8 px dialog, 40 px input, 30 px rows at 12.5 px/500, 11 px notes, 4 px kind chips, #eceff3 hairlines */
.cmd{border-color:#e3e7ec;border-radius:8px;box-shadow:0 12px 36px rgba(15,23,42,.12)}
.cmd input{height:40px;padding:0 12px;border-bottom-color:#eceff3;font:400 13px var(--v2-ui)}.cmd input::placeholder{color:var(--v2-t4)}
.cmd ul{padding:4px;max-height:320px}
.cmd li{min-height:30px;padding:3px 8px;gap:8px;border-radius:5px;font:500 12.5px var(--v2-ui);letter-spacing:-.005em;color:var(--v2-t2)}
.cmd li .cs{font:400 11px var(--v2-ui);letter-spacing:0;color:var(--v2-t4)}
.cmd li[aria-selected="true"]{background:#f3f4f6;color:var(--ink)}.cmd li:hover{background:#fafbfc}
.cmd li .k{font:500 10.5px/14px var(--v2-ui);letter-spacing:0;padding:0 5px;border:1px solid #e3e7ec;border-radius:4px;color:var(--v2-t4);background:#fff}
.cmd li.none{font:400 12px var(--v2-ui);letter-spacing:0}
.cmd-note{font:500 12.5px var(--v2-ui);border-radius:6px;padding:8px 12px}
/* 2026-09-30: the expanded side panel on the Linear scale (Wafi): 12.5 px/500 nav rows, 14 px icons, 11 px counts and section labels, 30 px workspace and profile rows, #e3e7ec borders, neutral grey selection; the collapsed rail keeps its 34 px tiles */
:root aside{border-right-color:#eceff3}
html:not(.nav-min) aside a:not(.brand),html:not(.nav-min) .navtog{height:28px;font:500 12.5px/1 var(--v2-ui);letter-spacing:-.005em;gap:8px}
html:not(.nav-min) aside a.sub{height:28px;font-size:12.5px}
aside a .ic,.navtog .ic{width:14px;height:14px;stroke-width:1.8}aside a.sub .ic{width:14px;height:14px}
:root aside a.on:not(.brand){background:#eef1f4;color:var(--ink)}:root aside a:not(.brand):not(.on):hover,:root .navtog:hover{background:#f3f4f6}
aside a .n{font:500 11px var(--v2-ui);letter-spacing:0;color:var(--v2-t4)}
html:not(.nav-min) aside .navlbl{font:500 11px/1 var(--v2-ui);letter-spacing:0;padding:14px 8px 5px}
html:not(.nav-min) aside .wsel.wsbtn{height:30px;margin:6px 0;border-color:#e3e7ec;font:500 12.5px/1 var(--v2-ui);letter-spacing:-.005em;color:var(--ink)}
html:not(.nav-min) aside .wsel.wsbtn:hover{background-color:#f3f4f6;border-color:#d7dde4}
html:not(.nav-min) aside .nav-search{height:28px;border-color:#e3e7ec;font:400 12px var(--v2-ui);color:var(--v2-t3)}html:not(.nav-min) aside .nav-search:hover{border-color:#d7dde4;color:var(--v2-t2)}
aside .nav-search svg{width:13px;height:13px;stroke-width:1.8}
aside .kbd,.dp-menu .kbd,.nav-search .kbd{font:500 10.5px/14px var(--v2-ui);padding:0 4px;border:1px solid #e3e7ec;border-radius:4px;color:var(--v2-t4);background:#fff}
html:not(.nav-min) aside .me{height:30px;margin:6px 0 0;border-color:#e3e7ec;font:500 12.5px/1 var(--v2-ui);letter-spacing:-.005em;color:var(--ink)}
html:not(.nav-min) aside .me:hover,html:not(.nav-min) aside .me.on{background:#f3f4f6}
html:not(.nav-min) aside .me .av{width:18px;height:18px;border-radius:5px;font:600 9px var(--v2-ui)}
html:not(.nav-min) aside .me .dots{font-size:12px;color:var(--v2-t4)}
html.nav-min aside .wsel.wsbtn,html.nav-min aside .me,html.nav-min aside .nav-search{border-color:#e3e7ec}
html.nav-min aside .wsel.wsbtn:hover,html.nav-min aside .me:hover{border-color:#d7dde4}
.dp-menu{border-color:#e3e7ec;box-shadow:0 8px 24px rgba(15,23,42,.1)}
.dp-menu button{height:28px;font:450 12.5px var(--v2-ui);border-radius:5px}.dp-menu button:hover,.dp-menu button:focus-visible{background:#f3f4f6}
.dp-menu hr,.ws-menu hr{border-top-color:#eceff3}
/* 2026-09-30: the collapsed rail on the Linear scale (Wafi): 32 px tiles 4 px apart in the 60 px rail, 16 px icons, 12 px/500 initials, neutral #eef1f4 fill behind the selected page's blue icon, 18 px spacers with an #eceff3 hairline, 4 px-radius badge */
html.nav-min aside{padding-left:14px;padding-right:14px;gap:4px}
html.nav-min aside .brand,html.nav-min aside .brand img{width:32px;height:32px}
html.nav-min aside .navcol{width:32px;height:32px}html.nav-min aside .navcol svg{width:16px;height:16px;stroke-width:1.8}
html.nav-min aside .wsel.wsbtn,html.nav-min aside .nav-search,html.nav-min aside a,html.nav-min .navtog,html.nav-min aside .me{width:32px;height:32px;border-radius:6px}
html.nav-min aside .wsel.wsbtn,html.nav-min aside .me{font:500 12px var(--v2-ui);letter-spacing:0}
html.nav-min aside .nav-search svg{width:14px;height:14px}
html.nav-min aside a .ic{width:16px;height:16px;stroke-width:1.8;opacity:.9}html.nav-min aside a.sub .sav{width:22px;height:22px;border-radius:5px}
html.nav-min aside a.on:not(.brand){background:#eef1f4;color:var(--p)}html.nav-min aside a.on:not(.brand):hover{background:#e9edf1}
html.nav-min aside a:not(.brand):not(.on):hover,html.nav-min .navtog:hover,html.nav-min aside .navcol:hover,html.nav-min aside .wsel.wsbtn:hover,html.nav-min aside .me:hover{background:#f3f4f6}
html.nav-min aside a .n.hot{top:0;right:2px;border-radius:4px;font:500 9px/1 var(--v2-ui);padding:1.5px 3px}
html.nav-min aside .navlbl{height:18px;width:32px}html.nav-min aside .navlbl::after{left:6px;right:6px;background:#eceff3}
/* 2026-10-01: the expanded panel a step narrower (Wafi): 220 px instead of the pages' 236 px fallback; the collapsed rail keeps 60 px */
html:not(.nav-min){--navw:220px}
@media (max-width:900px){html:not(.nav-min){--navw:auto}}

/* first run: the one panel shown while companies/ has no workspace (see firstRun in _sidebar.js) */
.os-firstrun{max-width:420px;margin:96px auto 0;padding:0 16px;text-align:center}
.os-firstrun h2{margin:0 0 8px;font:600 16px/1.3 var(--v2-ui);color:var(--ink);letter-spacing:-.01em}
.os-firstrun p{margin:0 0 16px;font:450 13px/1.5 var(--v2-ui);color:var(--v2-t3)}
.os-firstrun code{font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--v2-t2);background:#f1f3f5;padding:1px 5px;border-radius:4px}
.os-firstrun .go{height:28px;padding:0 12px;border:0;border-radius:6px;background:var(--btn,#4169e1);color:#fff;font:500 12.5px var(--v2-ui);cursor:pointer}
.os-firstrun .go:hover{background:var(--btn-t,#3355c8)}
.os-firstrun .go:focus-visible{outline:2px solid var(--p,#4169e1);outline-offset:2px}
