/* ===========================================================
Geist, self-hosted. The demo is shown on projectors, planes
and locked-down laptops; a Google Fonts silently
degrades the whole design system to system sans the moment
there is no network. Latin + latin-ext only — that is every
glyph the copy uses. OFL 1.1, see assets/fonts/LICENSE.
=========================================================== */
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;
src:url(assets/fonts/geist-400-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;
src:url(assets/fonts/geist-400-latin.woff2) format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;
src:url(assets/fonts/geist-500-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;
src:url(assets/fonts/geist-500-latin.woff2) format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;
src:url(assets/fonts/geist-600-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;
src:url(assets/fonts/geist-600-latin.woff2) format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:swap;
src:url(assets/fonts/geist-700-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:700;font-display:swap;
src:url(assets/fonts/geist-700-latin.woff2) format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;
src:url(assets/fonts/geist-mono-400-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;
src:url(assets/fonts/geist-mono-400-latin.woff2) format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;
src:url(assets/fonts/geist-mono-500-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;
src:url(assets/fonts/geist-mono-500-latin.woff2) format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Lato — Slack chrome imitation on slack.html only. */
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
src:url(assets/fonts/lato-400-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
src:url(assets/fonts/lato-400-latin.woff2) format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
src:url(assets/fonts/lato-700-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
src:url(assets/fonts/lato-700-latin.woff2) format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;
src:url(assets/fonts/lato-900-latin-ext.woff2) format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;
src:url(assets/fonts/lato-900-latin.woff2) format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ===========================================================
BenefitsMagic — Leader App (clickable prototype)
Shared design system. Extends the Command Center language
(Geist · warm cream · navy · pink-as-accent) and adds the
primitives the North Star screens need: workflow gallery,
artifact view, two-pane inbox, KB grids, toasts, empty states.
=========================================================== */
:root{
/* surface — near-white with the faintest warm undertone (= magic --background) */
--bg:#f8f6f3;
--bg-2:#f0efe8;
--paper:#ffffff;
/* ink — derived from the navy, no pure black anywhere */
--ink:#1f2a40;
--ink-2:#5a6478;
--ink-3:#9a9a93;
--ink-4:#c8c7c0;
/* lines — barely there */
--line:#ebe9df;
--line-2:#d8d6cb;
/* brand pink — reserved as accent / CTA */
--accent:#ff5e99;
--accent-deep:#e63e7d;
--accent-soft:#ffe3ed;
--accent-softer:#fff1f6;
/* status, neutralized.
⚠ THERE IS NO ORANGE IN THIS PRODUCT. Ratified 2026-08-05, and it is a rule
about the whole surface, not one page. "This needs you" is carried by NAVY —
the ink the interface is already built from — because a mustard dot appeared
on nine different screens at once and stopped meaning "look here", it just
meant "this screen is busy". Magic's gold (--gold:#ffce6b) used to be
declared here as well and is gone for the same reason.
--warn stays a red, and only for genuine failure: a run that failed, a
thumbs-down. Never for attention. If you find yourself reaching for an amber
to say "important", use weight and ink instead — that is what the rest of
this file does. */
--warn:#a23023;
--warn-soft:rgba(31,42,64,.07);
--warn-dot:#1f2a40;
--ok:#2f6645;
--ok-soft:#d9e5d7;
--ok-dot:#3f8b5c;
--info:#2c5a8c;
--info-soft:#dbe7f1;
/* active-nav wash — subtle navy tint (pink stays reserved for CTAs) */
--sel:rgba(31,42,64,.065);
--shadow-card:0 1px 0 rgba(31,42,64,.03), 0 12px 32px -16px rgba(31,42,64,.10);
--shadow-pop:0 8px 28px -8px rgba(31,42,64,.20), 0 2px 6px -2px rgba(31,42,64,.10);
/* radius scale — aligned to magic (--radius:0.5rem seed → sm/md/lg/xl) */
--r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:12px;
/* page title — ONE size for every page's h1, leader side and employee side.
34px is ref-05's title size and what the employee web app already used;
the old 40px made Home (largest text 24px) feel like a different zoom level.
--title-top is the distance from the top of .content to the title baseline
box, so every top-level page starts its title at the same y. */
--title-size:34px;
--title-track:-.026em;
--title-top:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
font-family:"Geist",ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
text-rendering:geometricPrecision;font-feature-settings:"ss01","cv11"}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.tnum{font-variant-numeric:tabular-nums}
.dim{color:var(--ink-3)}
/* Component rules set display:flex/grid, which outranks the UA's [hidden] rule —
without this, hiding a .rail or .section with the attribute silently does nothing. */
[hidden]{display:none !important}
/* ============================ SHELL ============================ */
.app{display:grid;grid-template-columns:268px 1fr;min-height:100vh}
/* ============================ SIDEBAR ============================ */
aside{background:var(--bg);display:flex;flex-direction:column;min-height:100vh;
padding:0 16px;border-right:1px solid var(--line);position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;margin:0 -16px;padding:22px 24px 14px;
border-bottom:1px solid var(--line)}
.brand img{height:28px;width:auto;display:block}
.nav-top{padding:4px 0 6px;display:flex;flex-direction:column;gap:2px}
/* The first row sits where the page title sits. .brand is the header bar's
height (65px, the .topbar min-height), so the rule under it lines up with the
bar; below that, Home starts at the same y as every page's h1 — .content's
8px plus --title-top — and its 36px row is the h1's line box height, so the
two read as one line across the seam. Restored 2026-09-03 (Michael): with
4px here Home crowded the rule and sat above the title. Only the first nav
block (the one directly after .brand) gets it; the Knowledge base block keeps
the small gap under its heading. */
.brand + .nav-top{padding-top:calc(8px + var(--title-top))}
.nav-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:8px;
font-size:14px;color:var(--ink);letter-spacing:-.005em;font-weight:500;cursor:pointer}
.nav-row .glyph{width:18px;height:18px;color:var(--ink-2);display:inline-flex;align-items:center;
justify-content:center;flex-shrink:0}
.nav-row .glyph svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.5;fill:none;
stroke-linecap:round;stroke-linejoin:round}
.nav-row .lbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-row:hover{background:var(--bg-2)}
/* Active row is a light gray filled pill with navy text (ref-01). Pink stays
reserved for CTAs — it is not a navigation state. */
.nav-row.active{background:var(--sel);color:var(--ink);font-weight:600}
.nav-row.active .glyph{color:var(--ink)}
.nav-divider{height:1px;background:var(--line);margin:12px 12px 4px}
.sec{padding:16px 12px 6px}
.sec h4{margin:0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600;
cursor:default;user-select:none}
.previews{margin-top:auto;padding:14px 0 22px}
.previews .sec{padding-left:12px}
.prev-row{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:8px;
font-size:13.5px;color:var(--ink-2);letter-spacing:-.005em;cursor:pointer}
.prev-row:hover{background:var(--bg-2);color:var(--ink)}
.prev-row.active{background:var(--sel);color:var(--ink);font-weight:600}
.prev-row .dot{width:6px;height:6px;border-radius:50%;background:var(--ink-4);flex-shrink:0}
.prev-row.active .dot{background:var(--ink-2)}
/* ============================ MAIN ============================ */
main{background:var(--bg);min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:flex-end;gap:18px;padding:0 44px;min-height:65px;
border-bottom:1px solid var(--line)}
.topbar .spacer{flex:1}
/* switch-view — restores the prod header affordance (injected by shell.js) */
.switch-view{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2);
letter-spacing:-.005em;font-weight:500;padding:8px 13px;border-radius:8px;cursor:pointer;
transition:color .15s,background .15s}
.switch-view:hover{color:var(--ink);background:var(--bg-2)}
.switch-view svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.back{font-size:14px;color:var(--ink-2);letter-spacing:-.005em;display:inline-flex;align-items:center;gap:8px}
.back svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.back:hover{color:var(--ink)}
.acct{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border:1px solid var(--line);
border-radius:999px;background:var(--paper);font-size:14px;cursor:pointer}
.acct:hover{border-color:var(--line-2)}
/* Settings and Activity live behind this chip, so on those pages the chip carries
the active state no sidebar row can (shell.js, punch list P1). */
.acct.is-here{background:var(--sel);border-color:var(--line-2)}
/* White with navy initials and a hairline ring, like the owner avatars (.nu-av,
round 28); it was a solid navy disc. */
.acct .av{width:28px;height:28px;background:var(--paper);color:var(--ink);display:grid;place-items:center;
font-size:11px;font-weight:600;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2)}
.acct .who{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.acct .who b{font-weight:600;letter-spacing:-.005em;color:var(--ink);font-size:13.5px}
.acct .who span{font-size:11.5px;color:var(--ink-3)}
.acct .chev{color:var(--ink-3);margin-left:2px;font-size:11px;transition:transform .15s}
/* §16 — Admin (Settings / Activity) lives only in this menu, never in the sidebar. */
.acct-wrap{position:relative}
.acct-wrap.open .acct{border-color:var(--line-2);background:var(--bg-2)}
.acct-wrap.open .acct .chev{transform:rotate(180deg)}
.acct-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:190px;background:var(--paper);
border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop);padding:6px;z-index:60;
display:none}
.acct-wrap.open .acct-menu{display:block}
.acct-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;font-size:13.5px;
color:var(--ink);letter-spacing:-.005em;cursor:pointer}
.acct-item:hover{background:var(--bg-2)}
/* Leaving the demo is not the same kind of act as opening Settings, so it sits below
a rule rather than reading as a third destination in the product. */
.acct-item-out{margin-top:5px;padding-top:11px;border-top:1px solid var(--line);
border-radius:0 0 8px 8px;color:var(--ink-2)}
.acct-item svg{width:16px;height:16px;stroke:var(--ink-2);stroke-width:1.6;fill:none;
stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.content{padding:8px 44px 96px;display:flex;flex-direction:column;gap:34px;max-width:1320px;width:100%}
.content.narrow{max-width:980px}
/* page header
ONE page-title scale, site-wide. Every top-level page's h1 must render at the
same size AND start at the same y — otherwise flipping between pages reads as
the browser zoom changing, which is exactly the complaint this fixes. Before:
h1 was 40px in .page-head, 34px hardcoded on chat-performance / plan-detail /
workflow, an unstyled 32px browser default on vendor-detail, and absent on Home.
Anything that renders a page title uses --title-size / .page-title — never a
local font-size. */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:18px 0 4px}
.page-head .kicker{font-size:13px;color:var(--ink-3);letter-spacing:-.005em;margin-bottom:12px}
.page-head h1,.page-title{margin:0;font-size:var(--title-size);font-weight:600;
letter-spacing:var(--title-track);line-height:1.05;color:var(--ink);text-wrap:balance}
.page-head h1 .dim{color:var(--ink-3);font-weight:500}
.page-head .sub{margin:10px 0 0;font-size:15px;color:var(--ink-2);letter-spacing:-.005em;max-width:62ch}
.head-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
/* buttons — pink primary (= magic --primary #ff5e99), ghost secondary.
One filled primary per visual section; everything else is .btn-ghost. */
.btn{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;background:var(--accent);color:#fff;
font-size:14px;border-radius:8px;letter-spacing:-.005em;font-weight:500;white-space:nowrap}
.btn:hover{background:var(--accent-deep)}
.btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.btn .k{font-size:11px;color:rgba(255,255,255,.62);border-left:1px solid rgba(255,255,255,.24);padding-left:10px}
/* escape hatch for the rare filled action that must not read as the page CTA */
.btn-navy{background:var(--ink)}
.btn-navy:hover{background:#152034}
.btn-ghost{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border:1px solid var(--line-2);
background:var(--paper);color:var(--ink);font-size:14px;border-radius:8px;letter-spacing:-.005em;font-weight:500}
.btn-ghost:hover{border-color:var(--ink-3);background:var(--bg-2)}
.btn-ghost svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.btn-sm{padding:8px 14px;font-size:13px}
.btn-sm svg{width:15px;height:15px}
/* link with arrow */
.alink{font-size:13.5px;color:var(--accent-deep);font-weight:500;letter-spacing:-.005em;
display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer}
.alink::after{content:"→";transition:transform .15s}
.alink:hover::after{transform:translateX(3px)}
.alink.plain::after{content:""}
/* ============================ CARD ============================ */
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card)}
.card-pad{padding:26px 28px}
.card-hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px}
.card-hd h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.card-hd h2 .cnt{color:var(--ink-3);font-weight:500;margin-left:6px}
.card-hd .meta{font-size:12.5px;color:var(--ink-3);letter-spacing:-.005em}
/* Count pill (round 28) — the sidebar badge's look, moved beside a card's own
title when the badge left the sidebar. Grey, never pink: counts are data,
and pink is actions only (round 14). Used by the Escalations card on Home
and the Escalations line on Employee chat. */
.count-pill{display:inline-block;vertical-align:2px;margin-left:8px;font-size:11px;font-weight:600;
letter-spacing:0;line-height:1.2;color:var(--ink-2);background:var(--bg-2);padding:2px 8px;
border-radius:999px;font-variant-numeric:tabular-nums}
.count-pill[hidden]{display:none}
/* section label (quiet) */
.section{display:flex;flex-direction:column;gap:8px}
.section>.hd{display:flex;align-items:baseline;justify-content:space-between;padding:0 2px 6px}
.section>.hd h2{margin:0;font-size:13px;font-weight:600;color:var(--ink-3);letter-spacing:.02em;text-transform:uppercase}
.section>.hd .meta{font-size:12.5px;color:var(--ink-3);letter-spacing:-.005em}
.section>.hd .meta b{color:var(--ink-2);font-weight:500}
/* ============================ STAT STRIP ============================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:4px 28px 4px 0;display:flex;flex-direction:column;gap:7px;position:relative}
.stat+.stat{padding-left:28px;border-left:1px solid var(--line)}
.stat .lab{font-size:13px;color:var(--ink-3);letter-spacing:-.005em}
/* 22px, not 30 (Michael, round 17 feedback): a stat is a fact under the
title, not a second title — 30px numbers read bulky against the h1. */
.stat .val{font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1;color:var(--ink);
display:flex;align-items:baseline;gap:9px}
.stat .foot{font-size:12.5px;color:var(--ink-3);letter-spacing:-.005em}
.delta{font-size:11.5px;font-weight:600;letter-spacing:-.005em;padding:3px 8px;border-radius:999px;
background:var(--bg-2);color:var(--ink-2);line-height:1}
.delta.up{background:var(--warn-soft);color:var(--ink-2)}
.delta.good{background:var(--ok-soft);color:var(--ok)}
.span-stats{padding:24px 28px}
/* ============================ QUIET LIST ============================ */
.list{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:15px 2px;
border-top:1px solid var(--line);cursor:pointer;transition:background .15s}
.row:first-child{border-top:0}
.row:hover{background:rgba(31,42,64,.028)}
.row .l{min-width:0;display:flex;flex-direction:column;gap:3px}
.row .nm{font-size:14.5px;font-weight:500;letter-spacing:-.008em;color:var(--ink);
overflow:hidden;text-overflow:ellipsis}
.row .meta{font-size:12.5px;color:var(--ink-3);letter-spacing:-.005em;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;max-width:46ch}
.row .r{font-size:13px;color:var(--ink-2);letter-spacing:-.005em;text-align:right;white-space:nowrap}
.row .chev{color:var(--ink-4);font-size:14px}
.row:hover .chev{color:var(--accent)}
/* avatar bubble (inbox) */
.ava{width:32px;height:32px;border-radius:50%;background:var(--bg-2);color:var(--ink-2);
display:grid;place-items:center;font-size:11.5px;font-weight:600;flex-shrink:0}
.row.with-ava{grid-template-columns:32px 1fr auto}
.ava.anon{background:var(--info-soft);color:var(--info)}
/* type glyph used in recent-activity / interleaved lists */
.tglyph{width:30px;height:30px;border-radius:8px;background:var(--bg-2);color:var(--ink-2);
display:grid;place-items:center;flex-shrink:0}
.tglyph svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.row.with-glyph{grid-template-columns:30px 1fr auto}
/* status dot (campaign list) */
.sdot{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);letter-spacing:-.005em}
.sdot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink-4)}
.sdot.sent::before{background:var(--ok-dot)}
.sdot.scheduled::before{background:var(--warn-dot)}
.sdot.draft::before{background:var(--ink-4)}
.sdot.active::before{background:var(--ok-dot)}
/* soft pill */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
background:var(--bg-2);font-size:12.5px;color:var(--ink-2);letter-spacing:-.005em;font-weight:500;white-space:nowrap}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--ink-2)}
.pill.info{background:var(--info-soft);color:var(--info)}
.pill.pink{background:var(--accent-soft);color:var(--accent-deep)}
.roi-dot{width:7px;height:7px;border-radius:50%;background:var(--ok-dot);display:inline-block}
.roi-dot.low{background:var(--warn-dot)}
/* ============================ TABLE ============================ */
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
color:var(--ink-3);padding:0 18px 14px 0;white-space:nowrap}
.table th.num,.table td.num{text-align:right;padding-right:0;padding-left:18px}
/* A .num column zeroes its right padding so the last column hugs the table edge.
When it is NOT last, that leaves nothing between the figure and its neighbour —
on Vendors, "$94K" and the status dot beside it were touching. Give the gutter
back in that case only. */
.table th.num:not(:last-child),.table td.num:not(:last-child){padding-right:18px}
.table th.sortable{cursor:pointer}
.table th.sortable::after{content:"↕";margin-left:6px;color:var(--ink-4);font-size:10px}
.table td{padding:16px 18px 16px 0;border-top:1px solid var(--line);font-size:14px;letter-spacing:-.005em;
color:var(--ink);vertical-align:middle}
/* Group divider (round 14): a table split into multiple tbodies draws a
slightly heavier hairline at each boundary — health-plans groups by plan
type this way. The sorter sorts within each tbody, so the divider can't
travel. A single-tbody table never matches this selector. */
.table tbody + tbody tr:first-child td{border-top:2px solid var(--line-2)}
.table tbody tr{transition:background .15s}
.table tbody tr[onclick],.table tbody tr[data-href]{cursor:pointer}
.table tbody tr[onclick]:hover,.table tbody tr[data-href]:hover{background:rgba(31,42,64,.028)}
.table td.name{font-weight:500}
.table td.dim{color:var(--ink-2)}
.table td .src{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);font-size:13.5px}
.table td .src svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* ============================ TABS ============================ */
.tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);margin-bottom:4px}
.tab-btn{padding:0 0 14px;font-size:14.5px;font-weight:500;letter-spacing:-.008em;color:var(--ink-3);
position:relative;cursor:pointer;white-space:nowrap}
.tab-btn.active{color:var(--ink)}
.tab-btn.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
background:var(--accent);border-radius:2px}
.tab-btn:hover{color:var(--ink-2)}
.tab-btn .c{color:var(--ink-3);font-weight:500;margin-left:5px}
/* ============================ PROGRESS ============================ */
.bar{height:34px;border-radius:8px;background:var(--bg-2);overflow:hidden;position:relative;
border:1px solid var(--line)}
.bar .fill{height:100%;background:var(--ink);display:flex;align-items:center;padding:0 12px;
color:#fff;font-size:13px;font-weight:600;letter-spacing:-.005em}
/* No .fill.pink variant (round 14): data marks are navy, pink is actions only. */
.bar-legend{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-3);
letter-spacing:-.005em;margin-top:10px}
/* thin progress */
.bar-thin{height:6px;border-radius:999px;background:var(--bg-2);overflow:hidden}
.bar-thin .fill{display:block;height:100%;background:var(--ink);border-radius:999px}
/* ============================ KEY-VALUE ============================ */
.kv{display:grid;grid-template-columns:1fr 1fr;gap:24px 40px}
.kv.three{grid-template-columns:1fr 1fr 1fr}
.kv .k{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.kv .v{font-size:15px;color:var(--ink);letter-spacing:-.008em;font-weight:500}
.ktab{width:100%;border-collapse:collapse}
.ktab th{text-align:right;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
color:var(--ink-3);padding:0 0 14px 16px}
.ktab th:first-child{text-align:left;padding-left:0}
.ktab td{padding:12px 0 12px 16px;border-top:1px solid var(--line);font-size:14px;text-align:right;letter-spacing:-.005em;
color:var(--ink);font-variant-numeric:tabular-nums}
.ktab td:first-child{text-align:left;color:var(--ink-2);padding-left:0}
.ktab tr.total td{border-top:1px solid var(--line-2);font-weight:600;color:var(--ink);padding-top:14px}
.ktab .pos{color:var(--ok);font-weight:500}
/* ============================ CHECKLIST ============================ */
.checklist{display:flex;flex-direction:column}
.chk{display:grid;grid-template-columns:20px 1fr auto;gap:14px;padding:16px 0;border-top:1px solid var(--line);align-items:start}
.chk:first-child{border-top:0}
.chk .box{width:18px;height:18px;border:1.5px solid var(--line-2);border-radius:5px;margin-top:1px}
.chk .ct{font-size:14.5px;font-weight:600;letter-spacing:-.008em;color:var(--ink)}
.chk .cd{font-size:13px;color:var(--ink-2);letter-spacing:-.005em;margin-top:3px;line-height:1.45}
.chk .when{font-size:12.5px;color:var(--ink-3);white-space:nowrap}
/* ============================ INSIGHTS ============================ */
.insights{display:flex;flex-direction:column}
.insight{padding:22px 2px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.insight:first-child{border-top:0}
.insight .kicker{font-size:12px;color:var(--ink-3);letter-spacing:-.005em;line-height:1;
display:inline-flex;align-items:center;gap:8px}
.insight .kicker svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.insight h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.018em;line-height:1.3;color:var(--ink);
text-wrap:balance;max-width:52ch}
.insight p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.5;letter-spacing:-.005em;max-width:60ch}
.insight .acts{margin-top:6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* insight card (Claims — North Star three-bucket layout) */
.icard{border:1px solid var(--line);border-radius:14px;padding:22px 24px;display:flex;flex-direction:column;gap:10px;
background:var(--paper);transition:border-color .15s}
.icard:hover{border-color:var(--line-2)}
.icard[data-insight]{cursor:pointer}
/* GR2 — selection is border weight/color ONLY. No inset stripe, no glow, no colored
corner, no gradient edge. The chart on the right is what confirms the selection. */
.icard.active{border-color:var(--line-2);background:var(--paper)}
.icard .top{display:flex;align-items:center;gap:11px}
.icard .ico{width:34px;height:34px;border-radius:9px;background:var(--bg-2);color:var(--ink);
display:grid;place-items:center;flex-shrink:0}
.icard .ico svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.icard .ico.navy{background:var(--bg-2);color:var(--ink)}
.icard h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.icard p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.5;letter-spacing:-.005em}
.icard .big{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.icard .big b{color:var(--ink);font-weight:600}
.icard .acts{margin-top:6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* ============================ CHARTS ============================ */
.chart{width:100%}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .axis{font-size:11px;fill:var(--ink-3);font-family:"Geist";letter-spacing:.01em}
.chart .gridline{stroke:var(--line);stroke-width:1}
/* Data marks are navy, never pink (round 14, Michael): pink exists only for
actions like "launch an outreach campaign". The customer series is --ink,
comparisons are --ink-2 — nearer/darker = you, which is what the legend says. */
.chart .line{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart .dot{fill:var(--ink)}
/* comparison bars (Claims insight panel, ref-02) — the customer is pink, the thing
being compared against is slate. Legend below, values right-aligned. */
.chart .cbar{fill:var(--ink-2)}
.chart .cbar-mine{fill:var(--ink)}
.chart-legend{margin-top:18px;display:flex;flex-direction:column;gap:2px}
.lg-row{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13.5px;color:var(--ink-2);
letter-spacing:-.005em}
.lg-dot{width:9px;height:9px;border-radius:50%;background:var(--ink-2);flex-shrink:0}
.lg-dot.mine{background:var(--ink)}
.lg-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-val{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.015em}
.chart-foot{margin-top:14px}
.chip-trend{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;
color:var(--ink-2);letter-spacing:-.005em;background:var(--bg-2);border-radius:8px;padding:7px 12px}
.chip-trend svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.9;fill:none;
stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.legend{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.legend .lr{display:flex;align-items:center;justify-content:space-between;gap:12px}
.legend .lr .nm{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink);letter-spacing:-.005em}
.legend .lr .nm .sw{width:10px;height:10px;border-radius:50%}
.legend .lr .v{font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
/* horizontal bars helper (flex so the track never collapses in narrow cards) */
.hbars{display:flex;flex-direction:column;gap:14px}
.hbar{display:flex;align-items:center;gap:12px}
.hbar .hl{flex:0 0 auto;width:118px;font-size:13.5px;color:var(--ink-2);letter-spacing:-.005em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar .ht{flex:0 0 auto;width:42px;font-size:13.5px;color:var(--ink);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.hbar .track{flex:1 1 auto;min-width:34px;height:10px;border-radius:999px;background:var(--bg-2);overflow:hidden}
/* All fills navy (round 14) — the first row's pink "lead series" treatment was
a data mark wearing the action colour. */
.hbar .track .f{display:block;height:100%;background:var(--ink);border-radius:999px}
/* ============================ LAYOUT HELPERS ============================ */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.grid-2.wide-left{grid-template-columns:1.55fr 1fr}
.grid-2.wide-right{grid-template-columns:1fr 1.55fr}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}
.stack{display:flex;flex-direction:column;gap:26px}
.stack-sm{display:flex;flex-direction:column;gap:16px}
/* ============================ ASK / HERO (Home) ============================ */
.hello{padding:30px 0 2px}
.hello .kicker{font-size:13px;color:var(--ink-3);letter-spacing:-.005em;margin-bottom:14px}
.hello h1{margin:0;font-size:44px;font-weight:600;letter-spacing:-.028em;line-height:1.05;
max-width:24ch;text-wrap:balance;color:var(--ink)}
.hello h1 .dim{color:var(--ink-3);font-weight:500}
.ask-wrap{background:var(--paper);border:1px solid var(--line);border-radius:16px;display:flex;
flex-direction:column;overflow:hidden;box-shadow:var(--shadow-card)}
.ask-body{padding:24px 26px 18px;min-height:104px;display:flex;flex-direction:column;gap:10px}
.ask-body textarea{border:0;background:none;font:inherit;font-size:18px;color:var(--ink);letter-spacing:-.01em;
line-height:1.45;resize:none;width:100%;min-height:64px;outline:none}
.ask-body textarea::placeholder{color:var(--ink-3)}
.ph{font-size:19px;color:var(--ink-3);letter-spacing:-.01em;line-height:1.4;display:flex;align-items:baseline}
.ph .caret{display:inline-block;width:2.5px;height:1.05em;background:var(--accent);transform:translateY(2px);
animation:blink 1.05s steps(1) infinite;flex-shrink:0;margin-right:3px;border-radius:1px}
@keyframes blink{50%{opacity:0}}
.ask-foot{display:flex;justify-content:space-between;align-items:center;padding:13px 16px 13px 26px;
border-top:1px solid var(--line);background:var(--paper);gap:12px}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid var(--line);
background:var(--paper);font-size:13px;border-radius:999px;color:var(--ink);letter-spacing:-.005em;cursor:pointer}
.chip:hover{border-color:var(--ink-3);background:var(--bg-2)}
.chip svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ask-tools{display:flex;align-items:center;gap:8px}
.icon-btn{width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:var(--paper);
display:grid;place-items:center;color:var(--ink-2);cursor:pointer}
.icon-btn:hover{border-color:var(--ink-3);color:var(--ink);background:var(--bg-2)}
.icon-btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.submit{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;background:var(--accent);color:#fff;
font-size:14px;border-radius:8px;letter-spacing:-.005em;font-weight:500}
.submit:hover{background:var(--accent-deep)}
.submit .k{font-size:11px;color:rgba(255,255,255,.7);border-left:1px solid rgba(255,255,255,.28);padding-left:10px}
/* quick-start workflow cards */
.qcards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.qcard{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;
display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:border-color .15s;
box-shadow:var(--shadow-card)}
.qcard:hover{border-color:var(--line-2)}
.qcard .ico{width:34px;height:34px;border-radius:9px;background:var(--bg-2);color:var(--ink);
display:grid;place-items:center}
.qcard .ico svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.qcard .nm{font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.qcard .ds{font-size:12.5px;color:var(--ink-3);letter-spacing:-.005em;line-height:1.45}
/* ============================ WORKFLOW GALLERY ============================ */
.filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.select{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid var(--line-2);
background:var(--paper);border-radius:8px;font-size:13px;color:var(--ink);letter-spacing:-.005em;cursor:pointer;font-weight:500}
.select:hover{border-color:var(--ink-3)}
.select .cv{color:var(--ink-3);font-size:11px}
.select svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.select.on{border-color:var(--ink);background:var(--bg-2)}
/* real filter dropdown (app.js initSelects builds the menu from the table column) */
.select{position:relative}
.select-menu{position:absolute;top:calc(100% + 5px);left:0;min-width:150px;background:var(--paper);
border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-pop);padding:5px;z-index:40;display:none}
.select-menu.open{display:block}
.select-menu button{display:block;width:100%;text-align:left;padding:7px 11px;border-radius:6px;font-size:13px;
color:var(--ink);letter-spacing:-.005em;font-weight:500}
.select-menu button:hover{background:var(--bg-2)}
.select-menu button.sel{color:var(--accent-deep)}
/* a labelled chip that isn't a real filter (no column to drive it) reads as static, not a dropdown */
.select.select-static{cursor:default}
.select.select-static:hover{border-color:var(--line-2)}
.select.select-static>svg{display:none}
.toggle-fav{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--line-2);
background:var(--paper);border-radius:8px;font-size:13px;color:var(--ink-2);cursor:pointer;font-weight:500}
.toggle-fav:hover{border-color:var(--ink-3);color:var(--ink)}
.toggle-fav svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery.two{grid-template-columns:repeat(2,1fr);max-width:680px}
.run-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 20px 16px;
display:flex;flex-direction:column;gap:12px;cursor:pointer;position:relative;transition:border-color .15s;
box-shadow:var(--shadow-card);min-height:172px}
.run-card:hover{border-color:var(--line-2)}
.run-card .rc-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.run-card .type{font-size:12px;color:var(--ink-3);letter-spacing:-.005em;font-weight:500}
.run-card h3{margin:0;font-size:16.5px;font-weight:600;letter-spacing:-.014em;line-height:1.3;color:var(--ink);
text-wrap:balance}
.run-card .excerpt{font-size:13px;color:var(--ink-2);line-height:1.5;letter-spacing:-.005em;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.run-card .rc-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
padding-top:6px}
.run-card .ts{font-size:12px;color:var(--ink-3);letter-spacing:-.005em}
.run-card.unread h3{font-weight:700}
.rc-actions{display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .15s}
.run-card:hover .rc-actions{opacity:1}
.rc-actions button{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--ink-3)}
.rc-actions button:hover{background:var(--bg-2);color:var(--ink)}
.rc-actions svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rc-actions .faved{color:var(--accent);fill:var(--accent)}
/* workflow status indicator */
.wstatus{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:-.005em}
.wstatus .d{width:8px;height:8px;border-radius:50%;background:var(--ink-4)}
.wstatus.queued{color:var(--ink-3)}
.wstatus.queued .d{background:var(--ink-4)}
.wstatus.running{color:var(--ink-2)}
.wstatus.running .d{background:var(--warn-dot);animation:pulse 1.3s ease-in-out infinite}
.wstatus.ready{color:var(--ink-2)}
.wstatus.ready .d{background:var(--ok-dot)}
.wstatus.viewed{color:var(--ink-3)}
.wstatus.viewed .d{display:none}
.wstatus.failed{color:var(--warn)}
.wstatus.failed .d{background:var(--warn)}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55);opacity:.5}}
/* ============================ WORKFLOW ARTIFACT ============================ */
.artifact-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.artifact-head .meta-row{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.artifact-head .meta-row .m{font-size:12.5px;color:var(--ink-3);letter-spacing:-.005em;display:inline-flex;align-items:center;gap:7px}
.artifact-head .meta-row .sep{color:var(--ink-4)}
.artifact-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.artifact-grid{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}
.assump{display:flex;flex-direction:column;gap:2px}
.assump-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:13px 0;border-top:1px solid var(--line)}
.assump-row:first-child{border-top:0}
.assump-row .ak{font-size:13px;color:var(--ink-2);letter-spacing:-.005em}
.assump-row .av{font-size:13.5px;color:var(--ink);font-weight:500;display:inline-flex;align-items:center;gap:9px}
.assump-row .av .edit{font-size:12px;color:var(--accent-deep);font-weight:500;opacity:0;transition:opacity .15s}
.assump-row:hover .av .edit{opacity:1}
/* citation marker + panel */
.cref{color:var(--accent-deep);font-size:.72em;font-weight:600;vertical-align:super;cursor:pointer;
margin-left:1px;letter-spacing:0}
.cref:hover{text-decoration:underline}
.citations{display:flex;flex-direction:column;gap:2px}
.cite-item{display:grid;grid-template-columns:22px 1fr;gap:11px;padding:13px 0;border-top:1px solid var(--line);cursor:pointer}
.cite-item:first-child{border-top:0}
.cite-item:hover .cdoc{color:var(--accent-deep)}
.cite-item .cnum{font-size:11px;font-weight:700;color:var(--accent-deep);background:var(--accent-softer);
border-radius:5px;width:22px;height:22px;display:grid;place-items:center}
.cite-item .cdoc{font-size:13px;font-weight:500;color:var(--ink);letter-spacing:-.005em;line-height:1.35}
.cite-item .cmeta{font-size:12px;color:var(--ink-3);margin-top:2px;display:inline-flex;align-items:center;gap:7px}
.cite-item .cmeta svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.5;fill:none}
/* audit trail */
.audit{border:1px solid var(--line);border-radius:14px;background:var(--paper);overflow:hidden}
.audit-hd{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;cursor:pointer}
.audit-hd h2{margin:0;font-size:15px;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.audit-hd .chev{color:var(--ink-3);transition:transform .2s}
.audit-body{padding:4px 24px 22px;border-top:1px solid var(--line)}
.audit-step{display:grid;grid-template-columns:24px 1fr;gap:14px;padding:14px 0;position:relative}
.audit-step .an{width:24px;height:24px;border-radius:50%;background:var(--bg-2);color:var(--ink-2);font-size:11px;
font-weight:600;display:grid;place-items:center;z-index:1}
.audit-step:not(:last-child)::before{content:"";position:absolute;left:11.5px;top:30px;bottom:-8px;width:1.5px;background:var(--line)}
.audit-step .at{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-.008em}
.audit-step .ad{font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.5}
.audit-step .tool{font-family:"Geist Mono",ui-monospace,monospace;font-size:11.5px;color:var(--ink-2);
background:var(--bg-2);padding:2px 7px;border-radius:5px}
/* ============================ TWO-PANE (Inbox) ============================ */
/* grid-template-rows:minmax(0,1fr) is load-bearing, not tidiness (Michael, Aug 11).
Without it the single implicit row is `auto`, so it sized to the TALLEST THREAD
(1077px) instead of the container (666px) — the row overflowed, `overflow:hidden`
chopped the bottom, and the composer was cut off entirely on every thread. The
pane never scrolled because it never knew it was too small. minmax(0,1fr) pins
the row to the container height; the min-height:0 below let the children shrink
into it so .thread-body can finally scroll. Remove any one of the four and the
composer disappears again. */
.twopane{display:grid;grid-template-columns:380px 1fr;grid-template-rows:minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:16px;
overflow:hidden;background:var(--paper);box-shadow:var(--shadow-card);min-height:640px}
.pane-list{border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;min-height:0}
.pane-list .plh{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
/* thread list rows (ref-04) — no avatar; name + date on one line, preview beneath,
unread dot inline, pink left-edge marker on the active row. */
.esc{position:relative;display:grid;grid-template-columns:1fr auto;column-gap:12px;row-gap:5px;
padding:15px 20px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s;
align-items:center}
.esc:hover{background:var(--bg)}
/* Selected = a calm grey wash (round 15, production mirror). The pink wash and
pink left-edge bar came off: pink is actions only, and "which row is open"
is a state. The unread dot (.udot) is untouched — docs open item #7. */
.esc.sel{background:var(--bg-2)}
.esc .en{font-size:14px;font-weight:600;letter-spacing:-.008em;color:var(--ink);display:flex;
align-items:center;gap:9px;min-width:0}
.esc .en .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.esc .eq{grid-column:1/-1;font-size:12.5px;color:var(--ink-2);letter-spacing:-.005em;line-height:1.4;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.esc .ets{font-size:12px;color:var(--ink-3);white-space:nowrap}
.esc .udot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0}
.esc.unread .en{font-weight:700}
.thread{display:flex;flex-direction:column;min-width:0;min-height:0}
.thread-hd{padding:16px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px}
.thread-hd .tn{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
/* escalation chip — same navy wash as the chat-performance watch pill, so a flagged
thread and a flagged metric read as the same signal. */
.thread-hd .esc-chip{background:var(--sel);color:var(--ink);font-size:12px;font-weight:500;
letter-spacing:-.005em;padding:4px 11px;border-radius:999px;white-space:nowrap}
.thread-hd .plan{font-size:13.5px;color:var(--ink-2);letter-spacing:-.005em;white-space:nowrap}
.thread-hd .more{margin-left:auto;color:var(--ink-3);font-size:18px;line-height:1;padding:4px 8px;
border-radius:7px;cursor:pointer;letter-spacing:.06em}
.thread-hd .more:hover{background:var(--bg-2);color:var(--ink)}
.thread-body{padding:26px 24px;flex:1;min-height:0;display:flex;flex-direction:column;gap:22px;overflow-y:auto}
.msg{display:flex;flex-direction:column;gap:6px}
.msg .body{font-size:14px;line-height:1.55;letter-spacing:-.005em}
/* Employee — constrained gray bubble on the left, sender name inside it. */
.msg.from-emp{align-self:flex-start;max-width:54%}
.msg.from-emp .bub{background:var(--bg-2);border-radius:14px;padding:12px 16px;display:flex;
flex-direction:column;gap:4px}
.msg.from-emp .who{font-size:12px;color:var(--ink-3);letter-spacing:-.005em}
/* AI — NOT a bubble. Offset from the employee bubble, running to the right edge, so the
answer gets the full width its formatting needs. */
.msg.from-bot{align-self:stretch;margin-left:11%}
.msg.from-bot .body{color:var(--ink)}
.msg.from-bot .body>p{margin:0 0 14px}
.msg.from-bot .body>p:last-child{margin-bottom:0}
.msg.from-bot .body b{font-weight:600}
.msg.from-bot .body ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:15px}
.msg.from-bot .body ol>li::marker{color:var(--ink-2)}
.msg.from-bot .body ul{margin:7px 0 0;padding-left:19px;display:flex;flex-direction:column;gap:6px}
.msg.from-bot .body ul li{color:var(--ink-2)}
.msg.from-bot .body .lead{font-weight:600;display:block;margin-bottom:3px}
.msg.from-bot .body h4{margin:20px 0 10px;font-size:14px;font-weight:600;letter-spacing:-.01em}
.msg.from-bot .body table{width:100%;border-collapse:collapse;margin-top:4px}
.msg.from-bot .body th{text-align:left;font-size:12px;font-weight:600;color:var(--ink-3);
padding:9px 14px 9px 0;border-bottom:1px solid var(--line);letter-spacing:-.005em}
.msg.from-bot .body td{font-size:13.5px;color:var(--ink-2);padding:10px 14px 10px 0;
border-bottom:1px solid var(--line);letter-spacing:-.005em}
.msg.from-leader{align-self:flex-end;max-width:66%}
.msg.from-leader .body{background:var(--ink);color:#fff;padding:12px 16px;border-radius:14px}
/* citation chip — a label, not a link; distinct from the interactive .cref pills */
.cchip{display:inline-flex;align-items:center;font-size:11.5px;color:var(--ink-2);background:var(--bg-2);
border-radius:5px;padding:2px 7px;letter-spacing:-.005em;margin-left:7px;white-space:nowrap}
/* Composer and the thread overflow menu are styled page-locally in escalations.html,
where they are the only consumers — not duplicated here. */
.thread-foot{border-top:1px solid var(--line);padding:16px 20px}
@media (max-width:900px){
.msg.from-bot{margin-left:0}
.msg.from-emp{max-width:80%}
}
/* ============================ CLUSTERS (Trending) ============================ */
.clusters{display:flex;flex-direction:column}
.cluster{display:grid;grid-template-columns:1fr auto auto auto;gap:22px;align-items:center;padding:18px 4px;
border-top:1px solid var(--line);cursor:pointer;transition:background .15s}
.cluster:first-child{border-top:0}
.cluster:hover{background:rgba(31,42,64,.028)}
.cluster .ct{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.cluster .cc{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.cluster .trend{font-size:13px;font-weight:600;letter-spacing:-.005em;white-space:nowrap}
.cluster .trend.up{color:var(--warn)}
.cluster .trend.down{color:var(--ok)}
.cluster .trend.flat{color:var(--ink-3)}
.cov{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
/* ============================ GUIDANCE ============================ */
.guide-item{display:grid;grid-template-columns:1fr auto;gap:16px;padding:16px 4px;border-top:1px solid var(--line);
align-items:start}
.guide-item:first-child{border-top:0}
.guide-item .gt{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
/* The instruction wraps normally across the FULL column and stops at two lines.
It used to carry max-width:72ch, which on a wide card meant the text broke
somewhere around two-thirds and then ran on for four or five lines — a list of
seven entries that needed two screens and looked ragged doing it. A measure cap
is right for prose you sit and read; this is a list you scan. */
.guide-item .gb{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-top:5px;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
/* A freshly saved entry announces itself, then settles. */
@keyframes gt-in{from{background:var(--sel)}to{background:transparent}}
.guide-item.is-new{animation:gt-in 1.6s ease-out}
.guide-item .gmeta{font-size:12px;color:var(--ink-3);margin-top:8px;display:inline-flex;gap:10px;align-items:center}
.guide-actions{display:flex;gap:8px;opacity:0;transition:opacity .15s}
.guide-item:hover .guide-actions{opacity:1}
/* forms */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-2);letter-spacing:-.005em}
.field .hint{font-size:12px;color:var(--ink-3);letter-spacing:-.005em}
.input,.textarea{border:1px solid var(--line-2);border-radius:9px;padding:11px 14px;font:inherit;font-size:14px;
color:var(--ink);background:var(--paper);outline:none;width:100%}
.input:focus,.textarea:focus{border-color:var(--ink-3)}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.textarea{resize:vertical;min-height:120px;line-height:1.55}
/* search input */
.search{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid var(--line-2);
border-radius:9px;background:var(--paper);min-width:280px}
.search:focus-within{border-color:var(--ink-3)}
.search svg{width:16px;height:16px;stroke:var(--ink-3);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.search input{border:0;background:none;font:inherit;font-size:14px;color:var(--ink);outline:none;width:100%}
.search input::placeholder{color:var(--ink-3)}
/* ============================ PLAN GRID (KB) ============================ */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plan-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px 22px 18px;
display:flex;flex-direction:column;gap:14px;cursor:pointer;transition:border-color .15s;box-shadow:var(--shadow-card)}
.plan-card:hover{border-color:var(--line-2)}
.plan-card .pc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.plan-card .picon{width:38px;height:38px;border-radius:10px;background:var(--bg-2);color:var(--ink);display:grid;place-items:center}
.plan-card .picon svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.plan-card h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.plan-card .pmeta{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.plan-card .pfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;
border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}
/* grouped plan list (Health plans, ref-03) — one bordered container, category bands,
hairline-separated rows. Scales past the card grid, which ran out of room at ~6 plans. */
.plan-list{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pl-group{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 24px;
background:var(--bg-2);border-top:1px solid var(--line);font-size:11px;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.plan-list>.pl-group:first-child{border-top:0}
.pl-group .cnt{font-size:12px;font-weight:400;letter-spacing:-.005em;text-transform:none;color:var(--ink-3)}
.pl-row{display:flex;align-items:center;gap:20px;padding:15px 24px;border-top:1px solid var(--line);
color:var(--ink);transition:background .12s}
.pl-row:hover{background:rgba(31,42,64,.028)}
.pl-ico{width:34px;height:34px;border-radius:9px;background:var(--bg-2);color:var(--ink-2);
display:grid;place-items:center;flex-shrink:0}
.pl-ico svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.5;fill:none;
stroke-linecap:round;stroke-linejoin:round}
.pl-id{flex:1;min-width:0}
.pl-id h3{margin:0;font-size:15px;font-weight:500;letter-spacing:-.012em;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-id .pl-sub{font-size:12.5px;color:var(--ink-3);letter-spacing:-.005em;margin-top:3px}
.pl-status{width:104px;flex-shrink:0}
.pl-status .sdot{font-size:13px}
.pl-docs{width:104px;flex-shrink:0;font-size:13.5px;color:var(--ink-2);letter-spacing:-.005em}
.pl-upd{width:140px;flex-shrink:0;font-size:13.5px;color:var(--ink-2);letter-spacing:-.005em}
.pl-chev{flex-shrink:0;color:var(--ink-4);display:flex}
.pl-chev svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none;
stroke-linecap:round;stroke-linejoin:round}
.pl-row:hover .pl-chev{color:var(--ink-2)}
@media (max-width:1080px){
.pl-upd{display:none}
}
@media (max-width:880px){
.pl-docs{display:none}
.pl-row{gap:14px;padding:14px 18px}
.pl-group{padding:10px 18px}
}
/* ============================ EMPTY STATES ============================ */
.empty{border:1px dashed var(--line-2);border-radius:16px;padding:56px 32px;display:flex;flex-direction:column;
align-items:center;text-align:center;gap:14px;background:rgba(255,255,255,.4)}
.empty .eico{width:48px;height:48px;border-radius:12px;background:var(--bg-2);color:var(--ink-2);display:grid;place-items:center}
.empty .eico svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.empty h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.empty p{margin:0;font-size:13.5px;color:var(--ink-2);max-width:48ch;line-height:1.55}
.empty .eacts{display:flex;gap:10px;margin-top:6px}
/* ============================ CHAT (AI answer in Home) ============================ */
.chat-wrap{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}
/* The conversation IS a card (Michael, Aug 11): everything else on the page —
the composer, the history rail, every table in the app — is white on the cream
background, and the thread was the one surface floating loose on it.
This does NOT bring back the old full-height paper box. That was removed
because it wrapped the composer too, so the zero state was a 560px empty box
with the input as a thin rail along the bottom. The card lives on .chat-body
alone, and `:empty` below still hides it — no thread, no card, so the zero
state is exactly as clean as it was. The composer stays its own card beneath. */
.chat{display:flex;flex-direction:column;gap:20px}
.chat-body{display:flex;flex-direction:column;gap:22px;background:var(--paper);
border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card);padding:26px 28px}
.chat-body:empty{display:none}
/* once a conversation starts the thread scrolls, so the composer stays reachable.
The scroll lives on the card, so the padding has to come along or the last
line would butt against the border on the way past. */
.chat-wrap.thread .chat-body{max-height:calc(100vh - 320px);overflow-y:auto}
.bubble-user{align-self:flex-end;background:var(--bg-2);color:var(--ink);padding:14px 18px;border-radius:14px 14px 4px 14px;
font-size:15px;letter-spacing:-.008em;line-height:1.45;max-width:70%}
.answer{display:flex;flex-direction:column;gap:16px;max-width:74ch}
.answer p{margin:0;font-size:15.5px;line-height:1.6;letter-spacing:-.006em;color:var(--ink)}
.answer .cite{display:inline-flex;align-items:center;background:var(--bg-2);color:var(--ink-2);font-size:12.5px;
padding:2px 9px;border-radius:6px;letter-spacing:-.005em;vertical-align:middle;font-weight:500;white-space:nowrap}
.answer .q{font-weight:600;color:var(--ink)}
.answer ul{margin:2px 0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.answer li{font-size:15px;line-height:1.55;color:var(--ink);letter-spacing:-.005em}
.yesno{display:flex;gap:10px;margin-top:2px}
.chip-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border:1px solid var(--line-2);
background:var(--paper);font-size:14px;border-radius:8px;color:var(--ink);letter-spacing:-.005em;font-weight:500}
.chip-btn:hover{border-color:var(--ink-3);background:var(--bg-2)}
.chip-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.chip-btn.primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.react{display:flex;gap:22px;padding-top:2px}
.react button{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-3);letter-spacing:-.005em}
.react button:hover{color:var(--ink-2)}
.react svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* ---------------- ASSIST DRAFTS (assist.js) ----------------
A drafted letter or brief is not chat, it is the ARTIFACT the thread exists
to produce — the thing the leader copies out and sends. So it gets a document
surface of its own: inset, bordered, tighter leading than an answer paragraph,
with the Copy button on the header rather than floating beside it. Deliberately
NOT monospace — this is a letter a person sends, and monospace would read as
code output rather than correspondence. */
.assist-draft{border:1px solid var(--line-2);border-radius:12px;background:var(--bg-2);
margin:4px 0 2px;overflow:hidden;max-width:74ch}
.assist-draft-hd{display:flex;align-items:center;gap:12px;padding:10px 16px;
border-bottom:1px solid var(--line);background:var(--paper)}
.assist-draft-t{font-size:12.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
color:var(--ink-2)}
.assist-copy{margin-left:auto;font-family:inherit;font-size:12.5px;font-weight:500;
color:var(--accent-deep);letter-spacing:-.005em;padding:3px 6px;border-radius:6px;cursor:pointer}
.assist-copy:hover{background:var(--bg-2);color:var(--accent)}
.assist-draft-body{padding:16px 18px}
.assist-draft-body p{margin:0;font-size:14px;line-height:1.62;color:var(--ink);letter-spacing:-.004em}
/* Blank lines in the source become real paragraph breaks — a letter reads by
its spacing, and collapsing them turns it into a wall. */
.assist-draft-body p.sp{height:11px}
/* The sentence after the draft: what to do with it, who to send it to. Quieter
than the answer body so the draft stays the loudest thing in the bubble. */
.assist-next{margin:14px 0 2px;font-size:14px;line-height:1.6;color:var(--ink-2);
letter-spacing:-.005em;max-width:74ch}
.assist-acts{margin-top:14px}
.chat-foot{border-top:1px solid var(--line);padding:16px 18px 16px 26px;display:flex;align-items:center;gap:14px}
.chat-foot input{flex:1;border:0;background:none;font:inherit;font-size:15px;color:var(--ink);letter-spacing:-.008em;outline:none}
.chat-foot input::placeholder{color:var(--ink-3)}
.send{width:42px;height:42px;border-radius:10px;background:var(--accent);display:grid;place-items:center;flex-shrink:0}
.send:hover{background:var(--accent-deep)}
.send svg{width:18px;height:18px;stroke:#fff;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rail{display:flex;flex-direction:column;gap:2px}
.rail .tabs{margin-bottom:10px}
.rail .tab-btn{font-size:14px;padding-bottom:12px}
.hist{padding:13px 12px;border-radius:9px;cursor:pointer}
.hist:hover{background:var(--bg-2)}
.hist.is-cur{background:var(--sel)}
.hist .ht{font-size:14px;font-weight:500;letter-spacing:-.008em;color:var(--ink);line-height:1.3}
.hist .hw{font-size:12px;color:var(--ink-3);margin-top:3px}
/* ============================ TOAST ============================ */
.toast-wrap{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;gap:12px;z-index:80}
.toast{background:var(--ink);color:#fff;border-radius:12px;padding:15px 18px;display:flex;align-items:flex-start;gap:13px;
box-shadow:var(--shadow-pop);min-width:320px;max-width:380px;animation:toastIn .25s ease-out}
.toast .ti{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.12);display:grid;place-items:center;flex-shrink:0}
.toast .ti svg{width:16px;height:16px;stroke:#fff;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.toast .ti .rdot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.3s ease-in-out infinite}
.toast .tt{font-size:13.5px;font-weight:600;letter-spacing:-.005em}
.toast .td{font-size:12.5px;color:rgba(255,255,255,.7);margin-top:3px;line-height:1.45}
.toast .tx{margin-left:auto;color:rgba(255,255,255,.5);font-size:16px;cursor:pointer;line-height:1}
.toast .tlink{color:#fff;font-weight:600;font-size:12.5px;margin-top:8px;display:inline-block;text-decoration:underline}
@keyframes toastIn{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
/* ============================ MODAL / PICKER ============================ */
.modal-backdrop{position:fixed;inset:0;background:rgba(31,42,64,.34);backdrop-filter:blur(2px);
display:none;align-items:flex-start;justify-content:center;z-index:90;padding:80px 20px}
.modal-backdrop.open{display:flex}
.modal{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-pop);
width:100%;max-width:680px;overflow:hidden;animation:toastIn .2s ease-out}
.modal-hd{display:flex;align-items:center;justify-content:space-between;padding:22px 26px 18px;border-bottom:1px solid var(--line)}
.modal-hd h2{margin:0;font-size:18px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.modal-hd .sub{margin:5px 0 0;font-size:13px;color:var(--ink-3)}
.modal-hd .x{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--ink-3);font-size:18px}
.modal-hd .x:hover{background:var(--bg-2);color:var(--ink)}
.modal-search{padding:16px 26px 6px}
.picker-grid{padding:8px 18px 22px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.picker-card{display:flex;gap:13px;padding:15px 16px;border-radius:11px;cursor:pointer;align-items:flex-start;transition:background .15s}
.picker-card:hover{background:var(--bg-2)}
.picker-card .pi{width:34px;height:34px;border-radius:9px;background:var(--bg-2);color:var(--ink);display:grid;place-items:center;flex-shrink:0}
.picker-card:hover .pi{background:var(--paper)}
.picker-card .pi svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.picker-card>span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.picker-card .pn{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink);display:block}
.picker-card .pd{font-size:12px;color:var(--ink-3);line-height:1.4;display:block}
/* help */
.help{position:fixed;right:22px;bottom:22px;width:40px;height:40px;border:1px solid var(--line);
border-radius:50%;background:var(--paper);display:grid;place-items:center;font-size:15px;color:var(--ink-2);
box-shadow:0 4px 16px -6px rgba(31,42,64,.14);cursor:pointer;z-index:70}
.help:hover{color:var(--ink);border-color:var(--line-2)}
/* divider */
.hr{height:1px;background:var(--line);border:0;margin:0}
/* ===========================================================
v3 ADDITIONS — command-center Home, Workflows action surface
=========================================================== */
/* ---- Home: notifications + inbox panels ---- */
.home-panels{align-items:stretch}
.home-panels>.card{display:flex;flex-direction:column}
.home-panels .list{flex:1}
/* notification glyphs carry a calm, faded type tint (no clashing) — info blue,
gentle green, navy wash — over the neutral base for everything else */
.home-panels .tglyph.info{background:var(--info-soft);color:var(--info)}
.home-panels .tglyph.ok{background:var(--ok-soft);color:var(--ok)}
.home-panels .tglyph.warn{background:var(--warn-soft);color:var(--ink-2)}
/* the whole Inbox panel on Home is one big link */
.inbox-panel{cursor:pointer;transition:border-color .15s}
.inbox-panel:hover{border-color:var(--line-2)}
.panel-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
/* recent chats — light pill row */
.chat-pills{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chat-pill{display:flex;align-items:center;gap:12px;padding:13px 16px;background:var(--paper);
border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-card);min-width:0;
transition:border-color .15s}
.chat-pill:hover{border-color:var(--line-2)}
.chat-pill .cg{width:30px;height:30px;border-radius:8px;background:var(--bg-2);color:var(--ink-2);
display:grid;place-items:center;flex-shrink:0}
.chat-pill .cg svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chat-pill .ct{font-size:14px;font-weight:500;letter-spacing:-.008em;color:var(--ink);flex:1;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-pill .cw{font-size:12px;color:var(--ink-3);white-space:nowrap;flex-shrink:0}
/* ---- Workflows: recent-runs table + slim in-progress ---- */
.rc-link{font-size:12.5px;color:var(--ink-3);letter-spacing:-.005em;cursor:pointer}
.rc-link:hover{color:var(--ink)}
/* recent runs table: a quiet type kicker under the name, hover-only Re-run */
.run-row td.name{line-height:1.35}
.run-row .rr-type{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--ink-3);letter-spacing:-.005em}
.run-row .rerun{padding:5px 10px;border:0;background:none;color:var(--ink-3);font-size:12.5px;font-weight:500;
letter-spacing:-.005em;border-radius:7px;cursor:pointer;opacity:0;transition:opacity .15s,color .15s,background .15s}
.run-row:hover .rerun{opacity:1}
.run-row .rerun:hover{color:var(--ink);background:var(--bg-2)}
.table td.rr-act{width:92px}
/* workflow status, on the calm .sdot dot vocabulary */
.sdot.ready::before{background:var(--ok-dot)}
.sdot.viewed{color:var(--ink-3)}
.sdot.viewed::before{background:var(--ink-4)}
.sdot.failed{color:var(--warn)}
.sdot.failed::before{background:var(--warn)}
/* slim in-progress (keeps the .run-card.progress primitive so JS-injected cards match) */
.ip-slim.gallery.two{max-width:760px}
.ip-slim .run-card.progress{min-height:0;padding:16px 18px;gap:10px;box-shadow:none}
.ip-slim .run-card.progress h3{font-size:15px;font-weight:600}
.ip-slim .rc-top{align-items:center}
.ip-slim .rc-top .ts{margin-left:auto;font-size:12px;color:var(--ink-3)}
.ip-slim .rc-foot{padding-top:2px}
.ip-slim .rc-sub{font-size:12.5px;color:var(--ink-3);letter-spacing:-.005em}
/* subtle deep-link — used where a space hands off to a Workflow (visibility-first) */
.dlink{font-size:13px;color:var(--ink-2);font-weight:500;letter-spacing:-.005em;
display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.dlink::after{content:"→";color:var(--ink-3);transition:transform .15s, color .15s}
.dlink:hover{color:var(--ink)}
.dlink:hover::after{transform:translateX(3px);color:var(--accent-deep)}
/* in-progress cards aren't whole-card links */
.run-card.progress{cursor:default}
.run-card.progress:hover{border-color:var(--line)}
/* ---- Workflow modal: two-step picker → input form ---- */
.modal{max-height:88vh;overflow-y:auto}
.modal-hd{align-items:flex-start}
.modal-hd-main{display:flex;align-items:flex-start;gap:12px;min-width:0}
.modal-back{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--ink-3);flex-shrink:0;margin-top:1px}
.modal-back:hover{background:var(--bg-2);color:var(--ink)}
.modal-back svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.picker-grid .picker-card{width:100%;text-align:left;font:inherit}
.wf-form{padding:22px 26px 4px;display:flex;flex-direction:column;gap:18px}
.grid-2-sm{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wf-sel{position:relative}
.wf-sel select{width:100%;appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer}
.wf-sel svg{position:absolute;right:13px;top:50%;transform:translateY(-50%);width:14px;height:14px;
stroke:var(--ink-3);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.wf-note{margin:0;font-size:12.5px;color:var(--ink-3);letter-spacing:-.005em;line-height:1.5;
display:flex;align-items:flex-start;gap:8px}
.wf-note svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.5;fill:none;flex-shrink:0;margin-top:1px;stroke-linecap:round;stroke-linejoin:round}
.wf-note b{color:var(--ink-2);font-weight:600}
.modal-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 26px 22px;border-top:1px solid var(--line);margin-top:4px}
/* ============================ RESPONSIVE ============================ */
@media (max-width:1180px){
.gallery{grid-template-columns:repeat(2,1fr)}
.qcards{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
.app{grid-template-columns:72px 1fr}
aside{padding:0 10px}
.brand{justify-content:center;padding:20px 0 12px;margin:0 -10px}
.nav-row .lbl,.sec h4,.previews{display:none}
.nav-row{justify-content:center;padding:11px}
.nav-divider{margin:10px 6px}
.content{padding:8px 28px 80px}
.topbar{padding:0 28px}
}
@media (max-width:820px){
.grid-2,.grid-2.wide-left,.grid-2.wide-right,.grid-3,.chat-wrap,.artifact-grid{grid-template-columns:1fr}
.gallery,.qcards{grid-template-columns:1fr}
.chat-pills,.grid-2-sm,.picker-grid{grid-template-columns:1fr}
.twopane{grid-template-columns:1fr}
.stats{grid-template-columns:repeat(2,1fr);gap:20px}
.stat+.stat{border-left:0;padding-left:0}
/* Retune the token, not individual headings — so every page title shrinks
together and the scale stays single-sourced at narrow widths too. */
:root{--title-size:28px}
}
/* ============ CHAT ENGINE (chat.js: staged reveal, markdown tables, reactions) ============ */
/* staged "thinking" bubble */
.answer.typing{flex-direction:row;align-items:center;gap:11px}
.typing-dots{display:inline-flex;align-items:center;gap:5px}
.typing-dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-4);animation:typedot 1.2s ease-in-out infinite}
.typing-dots i:nth-child(2){animation-delay:.16s}
.typing-dots i:nth-child(3){animation-delay:.32s}
@keyframes typedot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.typing-label{font-size:14px;color:var(--ink-3);letter-spacing:-.005em}
/* revealed answer fades in */
.answer.reveal{animation:answerIn .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes answerIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
/* small uppercase lead-in from "## heading" */
.answer .md-h{font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase;margin:4px 0 -4px}
/* markdown table — bordered, no shadow (magic convention) */
.md-table{border-collapse:collapse;width:100%;font-size:14px;border:1px solid var(--line)}
.md-table th{text-align:left;font-weight:600;color:var(--ink-2);background:var(--bg-2);padding:10px 14px;
font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.md-table td{padding:11px 14px;border-top:1px solid var(--line);color:var(--ink);letter-spacing:-.005em;vertical-align:top}
.md-table td:first-child{font-weight:500}
.md-table tbody tr:hover{background:var(--bg-2)}
/* reaction active state (like = pink, dislike = neutral); pairs with [data-reactions] */
.react button.on,[data-react].on{color:var(--accent-deep)}
[data-react="dislike"].on{color:var(--ink-2)}
.react button.on svg,[data-react].on svg{fill:currentColor}
/* ============ EMPLOYEE CHANNEL PREVIEWS (bot.js shared message + card styles) ============ */
/* Baseline message styling; Slack/Teams pages override colours to match their chrome. */
.bmsg{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;max-width:680px}
.bmsg.me{flex-direction:row-reverse;margin-left:auto}
.bmsg .bmsg-av{flex-shrink:0;width:30px;height:30px;border-radius:8px;background:var(--accent);color:#fff;
display:grid;place-items:center;font-size:11px;font-weight:600}
.bmsg .bmsg-b{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
font-size:14.5px;line-height:1.55;color:var(--ink);letter-spacing:-.005em}
.bmsg.me .bmsg-b{background:var(--ink);color:#fff;border-color:var(--ink)}
.bmsg .bmsg-b p{margin:0 0 8px}
.bmsg .bmsg-b p:last-child{margin-bottom:0}
.bmsg-b.typing{display:inline-flex;align-items:center;min-height:18px}
.bot-card{border:1px solid var(--line);border-radius:10px;margin:10px 0 8px;overflow:hidden;background:var(--bg)}
.bot-card .bc-row{display:flex;gap:14px;padding:9px 12px;border-top:1px solid var(--line);font-size:13.5px}
.bot-card .bc-row:first-child{border-top:0}
.bot-card .bc-k{flex-shrink:0;width:120px;color:var(--ink-3);font-weight:500}
.bot-card .bc-v{color:var(--ink)}
.bot-src{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.src-pill{font-size:11.5px;color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);
border-radius:999px;padding:3px 10px;letter-spacing:-.005em}
/* Links inside an answer, and the open-enrollment handoff button (bot.js's
comparison intent). Employee surfaces are the quieter Acme palette: the
in-answer action is an ink pill, matching .ea-send. */
.bmsg .bmsg-b a{color:var(--accent-deep);font-weight:500;text-decoration:none}
.bmsg .bmsg-b a:hover{text-decoration:underline;text-underline-offset:3px}
.bot-two{margin:12px 0}
.bot-two a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
background:var(--ink);color:#fff !important;font-size:13.5px;font-weight:500;letter-spacing:-.005em;text-decoration:none !important}
.bot-two a:hover{background:#152034}
/* ===================== AGENTS (agents.js: list, detail, run-config panel) ===================== */
/* sort control */
.agents-sort{display:inline-flex;align-items:center;gap:10px}
.agents-sort .lbl{font-size:13px;color:var(--ink-3);letter-spacing:-.005em}
.sortsel{position:relative;display:inline-flex;align-items:center}
.sortsel select{appearance:none;-webkit-appearance:none;border:1px solid var(--line-2);background:var(--paper);
border-radius:8px;padding:9px 34px 9px 14px;font:inherit;font-size:13.5px;color:var(--ink);letter-spacing:-.005em;cursor:pointer}
.sortsel select:hover{border-color:var(--ink-3)}
.sortsel svg{position:absolute;right:10px;width:16px;height:16px;stroke:var(--ink-3);stroke-width:1.6;fill:none;pointer-events:none}
/* list + rows */
/* one editorial roster — flat on cream, hairline rhythm, no boxed cards */
#agentList{border-top:1px solid var(--line-2)}
.roster-label{display:flex;align-items:center;gap:14px;padding:20px 6px 4px;
font-size:11.5px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-3)}
.roster-label .count{color:var(--ink-4);font-weight:500;letter-spacing:.05em}
.roster-label .rule{flex:1;height:1px;background:var(--line)}
.agent-row{position:relative;display:grid;
grid-template-columns:44px minmax(0,1fr) max-content max-content;
align-items:center;column-gap:28px;
padding:21px 14px 21px 8px;border-bottom:1px solid var(--line);
cursor:pointer;transition:background .16s ease}
.agent-row:hover{background:#fcfbf9}
/* a hairline navy edge on hover — the quiet "this one is live" tell */
.agent-row::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;
background:var(--ink);opacity:0;transition:opacity .16s ease;z-index:3}
.agent-row:hover::before{opacity:1}
.agent-row:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:4px}
/* whole-row navigation link, beneath the live inner controls */
.agent-row .rowlink{position:absolute;inset:0;z-index:1;font-size:0;color:transparent}
.agent-row .run-now,.agent-row .agent-chev,.agent-row .rlog,.agent-row .sched-link,.agent-row button.agent-sched{position:relative;z-index:2}
/* col 1 — orb. The 44px grid column's justify-items defaults to stretch, which would
widen the .orb-wrap to 44px while it stays 40px tall, distorting the inset ring into
an oval. Center the wrap so it stays square and the ring hugs the orb. */
.agent-row .orb-wrap{justify-self:center}
/* col 2 — identity (the anchor) */
.agent-main{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.agent-name{font-size:19px;font-weight:600;letter-spacing:-.018em;line-height:1.16;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.agent-sub{display:flex;align-items:center;flex-wrap:wrap;column-gap:11px;row-gap:4px;margin-top:7px;
font-size:13px;color:var(--ink-2);letter-spacing:-.005em;line-height:1.3;font-variant-numeric:tabular-nums}
.agent-sub .bullet{color:var(--ink-4);font-size:8px;line-height:1}
.agent-sub .rlog{color:var(--ink-2);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;text-decoration:none;
border-bottom:1px solid transparent;transition:color .14s ease, border-color .14s ease}
.agent-sub .rlog:hover{color:var(--ink);border-bottom-color:var(--line-2)}
.agent-sub .rlog .arr{font-size:12px;opacity:.7}
/* col 3 — schedule, quietest metadata, right-aligned (scheduled state is clickable to edit) */
.agent-sched{justify-self:end;min-width:172px;white-space:nowrap;font-family:inherit;
font-size:13px;color:var(--ink-3);letter-spacing:-.005em;
display:inline-flex;align-items:center;justify-content:flex-end;background:none;border:0;padding:0}
button.agent-sched{cursor:pointer}
button.agent-sched:hover .cadence{color:var(--ink)}
.agent-sched .cadence{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2);transition:color .14s ease}
.agent-sched svg{width:13px;height:13px;stroke:var(--ink-3);stroke-width:1.5;fill:none;flex-shrink:0}
.agent-sched .sep{color:var(--ink-4);margin:0 6px}
.agent-sched .demand{color:var(--ink-2)}
.sched-link{font-size:13px;color:var(--ink-3);font-weight:500;letter-spacing:-.005em;text-decoration:none;
border-bottom:1px solid var(--line-2);transition:color .14s ease, border-color .14s ease;background:none;cursor:pointer;font-family:inherit}
.sched-link:hover{color:var(--ink);border-bottom-color:var(--ink-4)}
/* col 4 — run + navigate */
.agent-actions{justify-self:end;display:flex;align-items:center;gap:16px}
.run-now{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;font-size:13.5px;font-weight:500;letter-spacing:-.005em;white-space:nowrap}
.run-now svg{width:15px;height:15px}
.agent-chev{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;color:var(--ink-4);flex-shrink:0;transition:color .15s ease, transform .15s ease}
.agent-row:hover .agent-chev{color:var(--ink-2);transform:translateX(2px)}
.agent-chev svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.agent-chev.spacer{width:22px}
@media (max-width:1040px){
.agent-row{grid-template-columns:auto minmax(0,1fr) auto;column-gap:22px;row-gap:12px}
.agent-sched{grid-column:2;grid-row:2;justify-self:start;justify-content:flex-start;min-width:0}
.agent-actions{grid-column:3;grid-row:1 / 3}
}
/* the living ready-orb — a frosted glass vessel with slate "wisps" that billow,
churn and fade in/out inside it like a slow nebula, under a fixed glass sheen.
Each wisp gets its OWN per-orb phase (--d1/--d2/--d3) and the whole orb its own
churn speed (--spd), so every orb is a distinct living thing — never lockstep,
never identical at a glance. One unified slate for all. */
.orb{position:relative;width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0;
background:radial-gradient(circle at 50% 32%, #eef1f7, #c2cad9);
box-shadow:inset 0 0 0 1px rgba(31,42,64,.06), inset 0 -3px 7px rgba(31,42,64,.10);
animation:orbBreathe calc(7s * var(--spd,1)) ease-in-out infinite;animation-delay:var(--d1,0s)}
.orb::before,.orb-b,.orb-b2{position:absolute;border-radius:50%;will-change:transform,opacity}
.orb::before{content:"";width:70%;height:60%;left:6%;top:12%;
background:radial-gradient(60% 48% at 42% 40%, rgba(92,106,138,.95), transparent 66%);filter:blur(4px);
animation:wispA calc(8.5s * var(--spd,1)) ease-in-out infinite;animation-delay:var(--d1,0s)}
.orb-b{width:66%;height:56%;right:4%;bottom:6%;
background:radial-gradient(56% 46% at 58% 56%, rgba(74,88,120,.95), transparent 64%);filter:blur(4.5px);
animation:wispB calc(10.5s * var(--spd,1)) ease-in-out infinite;animation-delay:var(--d2,0s)}
.orb-b2{width:58%;height:52%;left:18%;top:28%;
background:radial-gradient(52% 44% at 50% 48%, rgba(108,122,154,.9), transparent 68%);filter:blur(4px);
animation:wispC calc(12.5s * var(--spd,1)) ease-in-out infinite;animation-delay:var(--d3,0s)}
/* fixed soft glass sheen on top */
.orb::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
background:radial-gradient(42% 30% at 34% 22%, rgba(255,255,255,.5), transparent 58%)}
@keyframes orbBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes wispA{
0%{transform:translate(-24%,22%) scale(.65) rotate(0deg);opacity:.4}
25%{transform:translate(6%,-8%) scale(1.32) rotate(22deg);opacity:.82}
50%{transform:translate(26%,14%) scale(.85) rotate(44deg);opacity:.6}
75%{transform:translate(-4%,-20%) scale(1.18) rotate(22deg);opacity:.8}
100%{transform:translate(-24%,22%) scale(.65) rotate(0deg);opacity:.4}}
@keyframes wispB{
0%{transform:translate(22%,-20%) scale(1.2) rotate(0deg);opacity:.72}
33%{transform:translate(-22%,12%) scale(.62) rotate(-28deg);opacity:.45}
66%{transform:translate(-8%,-24%) scale(1.34) rotate(-50deg);opacity:.84}
100%{transform:translate(22%,-20%) scale(1.2) rotate(0deg);opacity:.72}}
@keyframes wispC{
0%{transform:translate(12%,22%) scale(.88) rotate(0deg);opacity:.5}
50%{transform:translate(-20%,-16%) scale(1.38) rotate(34deg);opacity:.8}
100%{transform:translate(12%,22%) scale(.88) rotate(0deg);opacity:.5}}
@media (prefers-reduced-motion: reduce){.orb,.orb::before,.orb-b,.orb-b2{animation:none}}
/* agent detail */
.agentd-head{display:flex;align-items:flex-start;gap:20px;padding:4px 0 28px;border-bottom:1px solid var(--line)}
.agentd-head .orb{width:58px;height:58px}
.agentd-id{flex:1;min-width:0}
.agentd-id h1{margin:0;font-size:30px;font-weight:600;letter-spacing:-.024em;color:var(--ink)}
.agentd-id .sub{margin:8px 0 0;font-size:15px;color:var(--ink-2);letter-spacing:-.005em;max-width:64ch;line-height:1.5}
.agentd-meta{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13px}
.agentd-actions{display:flex;gap:10px;flex-shrink:0}
.agentd-actions .btn svg,.agentd-actions .btn-ghost svg{width:15px;height:15px}
/* run-history section header + its own light filter control (scoped to one agent) */
.runs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:44px;margin-bottom:16px}
.runs-head h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-.012em;color:var(--ink)}
.runs-head .meta{font-size:12.5px;color:var(--ink-3);letter-spacing:-.003em;margin-top:3px;display:block}
.runs-head .sortsel select{padding-top:7px;padding-bottom:7px;font-size:13px}
.runs-list{display:flex;flex-direction:column;gap:0;margin-top:0;border-top:1px solid var(--line-2)}
.run-row2{position:relative;display:flex;align-items:center;gap:20px;padding:18px 10px;border-bottom:1px solid var(--line)}
.run-row2.navi{cursor:pointer;transition:background .16s ease}
.run-row2.navi:hover{background:#fcfbf9}
.run-row2.navi::before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--ink);opacity:0;transition:opacity .16s ease}
.run-row2.navi:hover::before{opacity:1}
/* run status dot — in-palette slate for complete, warm only for genuine failure */
.run-row2 .rdot2{flex-shrink:0;width:8px;height:8px;border-radius:50%;background:#8a96aa}
.run-row2 .rdot2.viewed{background:#c2c9d4}
.run-row2 .rdot2.failed{background:var(--warn)}
.run-row2 .rdot2.running{background:#8a96aa;animation:pulse 1.4s ease-in-out infinite}
.run-main{flex:1;min-width:0}
.run-name{font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.008em}
.run-ver{font-weight:400;color:var(--ink-3);font-size:12.5px;margin-left:6px}
.run-inputs{font-size:12.5px;color:var(--ink-3);margin-top:3px;letter-spacing:-.003em}
.run-result{font-size:13px;color:var(--ink-2);letter-spacing:-.005em;text-align:right;max-width:34ch}
.run-result.bad{color:var(--warn)}
.rerun2{flex-shrink:0}
.rerun2 svg{width:14px;height:14px}
.empty-runs{padding:26px;text-align:center;color:var(--ink-3);font-size:14px;border:1px dashed var(--line-2);border-radius:12px}
/* ===== shared additions (2026-06-10 polish) ===== */
/* honest pagination — replaces the fake page-number chips */
.pager{display:flex;align-items:center;gap:10px}
.pager .pg-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1px solid var(--line-2);
background:var(--paper);border-radius:8px;font-size:13px;color:var(--ink);letter-spacing:-.005em;cursor:pointer;font-weight:500}
.pager .pg-btn:hover{border-color:var(--ink-3)}
.pager .pg-btn[disabled]{color:var(--ink-4);border-color:var(--line);cursor:default}
.pager .pg-btn[disabled]:hover{border-color:var(--line)}
/* the reserved pink "unviewed result" signal — ring on a roster orb, dot on a run row.
The orb clips (overflow:hidden), so the ring is a sibling inside an .orb-wrap. */
.orb-wrap{position:relative;display:inline-flex;flex-shrink:0}
.orb-ring{position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--accent);opacity:.85;pointer-events:none}
.run-row2 .rdot2.ready{background:var(--accent)}
/* citation cross-highlight: cref click flashes its source row */
@keyframes citeFlash{0%{background:var(--accent-softer)}100%{background:transparent}}
.cite-item.flash{animation:citeFlash 1.6s ease-out both;border-radius:8px}
.cref.lit{background:var(--accent-softer);border-radius:4px}
.answer .cite{cursor:pointer;transition:background .15s,color .15s}
.answer .cite:hover{background:var(--accent-softer);color:var(--accent-deep)}
/* AI-draft provenance — tag + source chips under a composer */
.ai-tag{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--accent-deep);
letter-spacing:-.005em}
.ai-tag svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.draft-srcs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 2px 0}
.draft-srcs .lbl{font-size:12px;color:var(--ink-3);letter-spacing:-.005em}
/* quick-start agents on Home — compact row built on the qcard primitive */
.qcards.agents .qcard{flex-direction:row;align-items:center;gap:13px;padding:14px 16px}
.qcards.agents .qcard .ico{width:30px;height:30px;border-radius:8px;flex-shrink:0}
.qcards.agents .qcard .ico svg{width:16px;height:16px}
.qcards.agents .qcard .nm{font-size:13.5px}
.qcards.agents .qcard .ds{display:none}
/* run-config slide-over — the load-bearing input-confirmation panel */
.rcfg-backdrop{position:fixed;inset:0;background:rgba(31,42,64,.32);display:flex;justify-content:flex-end;
opacity:0;pointer-events:none;transition:opacity .2s;z-index:70}
.rcfg-backdrop.open{opacity:1;pointer-events:auto}
.rcfg{width:480px;max-width:92vw;height:100%;background:var(--paper);display:flex;flex-direction:column;
box-shadow:-12px 0 40px -16px rgba(31,42,64,.3);transform:translateX(28px);transition:transform .24s cubic-bezier(.2,.7,.2,1)}
.rcfg-backdrop.open .rcfg{transform:translateX(0)}
.rcfg-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:26px 28px 18px;border-bottom:1px solid var(--line)}
.rcfg-kicker{font-size:12px;color:var(--ink-3);letter-spacing:.03em;text-transform:uppercase;font-weight:600;margin-bottom:7px}
.rcfg-hd h2{margin:0;font-size:21px;font-weight:600;letter-spacing:-.018em;color:var(--ink)}
.rcfg-x{font-size:22px;color:var(--ink-3);line-height:1;padding:2px 6px}
.rcfg-x:hover{color:var(--ink)}
.rcfg-body{flex:1;overflow-y:auto;padding:24px 28px;display:flex;flex-direction:column;gap:18px}
.rcfg-divider{display:flex;align-items:center;gap:12px;margin:4px 0 0;color:var(--ink-3);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.rcfg-divider::before,.rcfg-divider::after{content:"";height:1px;background:var(--line);flex:1}
.rcfg-echo{padding:16px 28px;background:var(--bg-2);border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-2);line-height:1.55;letter-spacing:-.005em}
.rcfg-echo b{color:var(--ink);font-weight:600}
.rcfg-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 28px;border-top:1px solid var(--line)}
@media (max-width:560px){.rcfg{width:100%}}
/* ============================================================
CHAT PERFORMANCE — agent run artifact (chat-performance.html)
Type rule: 600 weight lives in card titles + stat values only.
Row content is 400; emphasis comes from color, never weight.
Deltas are plain colored text — no pills. Status is a dot.
============================================================ */
/* metric delta — plain colored text, coloured by OUTCOME not direction */
.mdelta{font-size:12.5px;font-weight:500;letter-spacing:-.005em;font-variant-numeric:tabular-nums}
.mdelta.good{color:var(--ok)}
.mdelta.bad{color:var(--warn)}
.mdelta.flat{color:var(--ink-3)}
/* ⓘ metric definition — hover tooltip, keyboard focusable */
.tipdot{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
margin-left:6px;border-radius:50%;border:1px solid var(--line-2);color:var(--ink-3);
font-size:9.5px;font-weight:600;font-style:normal;line-height:1;position:relative;
vertical-align:1px;cursor:default}
/* Tips carry a definition and its calculation, so they wrap. Unbounded nowrap here
pushed the whole document wider than the viewport as soon as a tip ran long. */
.tipdot::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:-2px;
background:var(--ink);color:#fff;font-size:12px;font-weight:400;letter-spacing:-.005em;
padding:7px 11px;border-radius:8px;width:max-content;max-width:280px;white-space:normal;
line-height:1.45;text-align:left;opacity:0;pointer-events:none;
transition:opacity .13s ease;z-index:20;box-shadow:var(--shadow-pop)}
.tipdot:hover::after,.tipdot:focus-visible::after{opacity:1}
.tipdot:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* notification row — one sentence, navy dot, action on the right */
/* trending topics — denser than the default .table; 10 rows should sit level with
the two stacked panels beside it rather than towering over them */
.topics-tbl td{padding:11px 18px 11px 0;font-size:13.5px}
.topics-tbl td.num{padding:11px 0 11px 18px}
.topics-tbl th{padding-bottom:10px}
.topics-tbl tbody tr:hover{background:transparent}
.topics-tbl tbody tr td:first-child{line-height:1.35}
/* trending topics — thread volume as a thin navy bar + count */
.vol{display:flex;align-items:center;gap:12px}
.vol .vtrack{flex:1 1 auto;min-width:40px;height:4px;border-radius:999px;background:var(--bg-2);overflow:hidden}
.vol .vfill{display:block;height:100%;background:var(--ink);border-radius:999px;opacity:.78}
.vol .vn{flex:0 0 auto;width:30px;text-align:right;font-size:13px;color:var(--ink-2);
font-variant-numeric:tabular-nums}
.escv{color:var(--ink-2);font-variant-numeric:tabular-nums}
.escv.watch{color:var(--ink);font-weight:500}
.escv .edot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn-dot);
margin-right:7px;vertical-align:1px}
.pencil-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
border-radius:7px;color:var(--ink-3);transition:color .14s ease,background .14s ease}
.pencil-btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none;
stroke-linecap:round;stroke-linejoin:round}
.pencil-btn:hover{color:var(--accent-deep);background:var(--accent-softer)}
.pencil-btn:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
/* messages per week — five bars, no axis furniture */
.wk{display:flex;align-items:flex-end;gap:12px;height:104px;margin-top:6px}
.wk .wcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;
justify-content:flex-end}
.wk .wbar{width:100%;max-width:26px;border-radius:3px;background:var(--ink);opacity:.86}
.wk .wcol.peak .wbar{opacity:1}
.wk .wcol span{font-size:10.5px;color:var(--ink-3);letter-spacing:.01em}
/* feedback — ONE segmented bar, one scale, then a legend */
.fbbar{display:flex;height:7px;border-radius:999px;overflow:hidden;margin:4px 0 16px}
.fbbar .fseg{height:100%}
.fseg.up,.fsw.up{background:var(--ok-dot)}
.fseg.down,.fsw.down{background:var(--warn)}
.fseg.none,.fsw.none{background:var(--ink-4)}
.fblegend{display:flex;flex-direction:column;gap:10px}
.fbline{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.fbline .fk{font-size:13.5px;color:var(--ink-2);display:inline-flex;align-items:center;
letter-spacing:-.005em}
.fbline .fv{font-size:13.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.fsw{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:9px;flex-shrink:0}
/* shared closing note under a panel */
.pnote{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;
color:var(--ink-2);line-height:1.55;letter-spacing:-.005em}
.pnote.bare{border-top:none;padding-top:0;margin-top:14px}
/* run provenance footer */
.runfoot{font-size:12.5px;color:var(--ink-3);letter-spacing:-.005em;display:flex;
align-items:center;gap:10px;flex-wrap:wrap}
.runfoot .sep{color:var(--ink-4)}
.runfoot a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px;
text-decoration-color:var(--ink-4)}
.runfoot a:hover{color:var(--ink)}
/* .grid-2.wide-left sets 1.55fr 1fr at (0,2,0) specificity, so the stacking rule
has to match it — a bare .cperf-lower loses and the grid never collapses. */
@media (max-width:1080px){
.grid-2.cperf-lower{grid-template-columns:1fr}
}
@media (max-width:720px){
.stats.four{grid-template-columns:1fr 1fr}
.stats.four .stat:nth-child(3){padding-left:0;border-left:none}
.stats.four .stat:nth-child(n+3){padding-top:20px;margin-top:20px;border-top:1px solid var(--line)}
}
/* ============================================================
CUSTOMIZATIONS — employee-app preview + edit panels
The leader edits two things: the always-on sidebar links and
the timely spotlights. Everything else in the preview is
skeleton chrome, so the outlined areas read as the only
editable surfaces.
============================================================ */
.cz-preview-lab{display:flex;align-items:center;gap:10px;padding:0 2px}
.cz-preview-lab h2{margin:0;font-size:13px;font-weight:600;color:var(--ink-3);
letter-spacing:.02em;text-transform:uppercase}
.cz-preview-lab .hint{font-size:12.5px;color:var(--ink-3);letter-spacing:-.005em}
.cz-stage{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.cz-stage.closed{grid-template-columns:minmax(0,1fr)}
/* the employee-app mock.
It scales into the height it is given rather than shrink-wrapping its content.
Before this, the mock was ~490px of a 720px viewport and the greeting sat 25px
from the top of a white card, so the thing this page exists to preview looked
nothing like employee-web-app.html — which opens with a left-aligned greeting
and real air above it. The clamp keeps it honest on a laptop and stops it
ballooning on a 27" display. */
.cz-frame{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:14px;
display:grid;grid-template-columns:210px minmax(0,1fr);gap:14px;box-shadow:var(--shadow-card);
min-height:clamp(440px, calc(100vh - 248px), 680px)}
/* The right column has to be a flex column or .cz-body cannot claim the height. */
.cz-main{display:flex;flex-direction:column;min-width:0}
/* an editable region: dashed until you pick it, solid + labelled while editing */
.cz-zone{position:relative;border:1.5px dashed var(--line-2);border-radius:12px;padding:12px;
cursor:pointer;transition:border-color .15s,background .15s}
.cz-zone:hover{border-color:var(--ink-3);background:rgba(31,42,64,.02)}
.cz-zone.editing{border-style:solid;border-color:var(--ink);background:var(--paper)}
.cz-zone .cz-tag{position:absolute;top:-10px;right:10px;display:none;background:var(--ink);color:#fff;
font-size:10.5px;font-weight:500;letter-spacing:-.002em;padding:2px 8px;border-radius:5px}
.cz-zone.editing .cz-tag{display:block}
.cz-lab{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
color:var(--ink-3);margin-bottom:10px}
/* sidebar-links column inside the mock */
.cz-links{display:flex;flex-direction:column}
.cz-link{display:grid;grid-template-columns:1fr 12px;gap:8px;align-items:center;padding:8px 2px;
border-top:1px solid var(--line)}
.cz-link:first-child{border-top:0}
.cz-link>span:first-child{min-width:0}
.cz-link .t{display:block;font-size:12.5px;font-weight:500;color:var(--ink);letter-spacing:-.008em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cz-link .s{display:block;font-size:10.5px;color:var(--ink-3);letter-spacing:-.002em;margin-top:1px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cz-link .x{font-size:11px;color:var(--ink-4)}
/* employee greeting + dead ask box inside the mock.
Left-aligned and generously spaced because that is what employee-web-app.html
actually does — the old centred, 19px, top-jammed greeting was a preview of a
screen that does not exist. */
.cz-body{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:12px;
padding:clamp(22px, 4.2vh, 40px) 26px 26px;display:flex;flex-direction:column;gap:18px}
.cz-hi{font-size:22px;font-weight:600;letter-spacing:-.022em;color:var(--ink);margin:0}
.cz-fauxask{display:flex;align-items:center;justify-content:space-between;gap:12px;
border:1px solid var(--line-2);border-radius:10px;padding:14px 14px;background:var(--bg);
font-size:12.5px;color:var(--ink-3);letter-spacing:-.005em}
.cz-fauxask .fab{width:20px;height:20px;border-radius:50%;background:var(--bg-2);flex-shrink:0}
/* spotlights block inside the mock */
.cz-spot-hd{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:var(--ink-3)}
.cz-spot-hd::before,.cz-spot-hd::after{content:"";height:1px;background:var(--line);flex:1}
.cz-spot-hd span{font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.cz-spot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start;padding:11px 0;
border-top:1px solid var(--line)}
.cz-spot:first-of-type{border-top:0}
.cz-spot .k{font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
display:block;margin-bottom:4px}
.cz-spot .t{font-size:13px;font-weight:600;letter-spacing:-.012em;color:var(--ink);display:block}
.cz-spot .s{font-size:11.5px;color:var(--ink-3);letter-spacing:-.004em;display:block;margin-top:3px;line-height:1.4}
.cz-spot .more{font-size:11.5px;color:var(--ink-2);letter-spacing:-.004em;white-space:nowrap;padding-top:12px}
/* skeleton bars stand in for chrome the leader cannot edit */
.cz-skel{display:flex;flex-direction:column;gap:7px;padding:14px 2px 2px}
.cz-skel i{display:block;height:7px;border-radius:4px;background:var(--bg-2)}
/* ---- the edit panel ---- */
.cz-panel{background:var(--paper);border:1px solid var(--line);border-radius:16px;
box-shadow:var(--shadow-card);display:flex;flex-direction:column;position:sticky;top:20px;
max-height:calc(100vh - 40px);overflow:hidden}
.cz-panel-hd{padding:20px 20px 16px;border-bottom:1px solid var(--line);position:relative}
.cz-panel-hd h2{margin:0 26px 0 0;font-size:15px;font-weight:600;letter-spacing:-.014em;color:var(--ink)}
.cz-panel-hd p{margin:7px 0 0;font-size:12.5px;color:var(--ink-3);letter-spacing:-.004em;line-height:1.5}
.cz-close{position:absolute;top:16px;right:16px;width:26px;height:26px;border-radius:7px;
display:grid;place-items:center;color:var(--ink-3)}
.cz-close:hover{background:var(--bg-2);color:var(--ink)}
.cz-close svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}
.cz-count{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:12px 20px;border-bottom:1px solid var(--line)}
.cz-count .n{font-size:12.5px;color:var(--ink-3);letter-spacing:-.004em}
.cz-add{font-size:12.5px;font-weight:500;color:var(--accent-deep);letter-spacing:-.004em;
display:inline-flex;align-items:center;gap:6px}
.cz-add:hover{color:var(--accent)}
.cz-add svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round}
.cz-items{flex:1;min-height:0;overflow-y:auto;padding:4px 20px 16px}
.cz-item{border-bottom:1px solid var(--line);padding:16px 0 18px;position:relative}
.cz-item:last-child{border-bottom:0}
.cz-item.dragging{opacity:.4}
.cz-item.drop-over{box-shadow:0 -2px 0 var(--accent)}
.cz-item-tools{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
color:var(--ink-4)}
.cz-grip{cursor:grab;display:inline-flex;padding:2px}
.cz-grip:active{cursor:grabbing}
.cz-grip svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round}
.cz-grip:hover{color:var(--ink-2)}
.cz-del{display:inline-flex;padding:2px}
.cz-del svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cz-del:hover{color:var(--warn)}
.cz-f{display:block;margin-bottom:10px}
.cz-f:last-child{margin-bottom:0}
.cz-f .fl{display:block;font-size:11.5px;font-weight:500;color:var(--ink-2);letter-spacing:-.002em;margin-bottom:5px}
.cz-f .fl em{font-style:normal;color:var(--accent);margin-left:2px}
.cz-f .fl small{font-weight:400;color:var(--ink-3);margin-left:4px}
.cz-f input{width:100%;border:1px solid var(--line-2);border-radius:8px;padding:8px 11px;
font:inherit;font-size:13px;color:var(--ink);background:var(--paper);letter-spacing:-.005em;outline:none}
.cz-f input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-softer)}
.cz-panel-ft{padding:14px 20px 16px;border-top:1px solid var(--line);background:var(--paper)}
.cz-panel-ft .btns{display:flex;align-items:center;gap:12px}
.cz-panel-ft .note{margin:10px 0 0;font-size:11.5px;color:var(--ink-3);letter-spacing:-.002em;text-align:right}
.cz-discard{font-size:13.5px;color:var(--ink-2);font-weight:500;letter-spacing:-.005em}
.cz-discard:hover{color:var(--ink)}
@media (max-width:1120px){
.cz-stage{grid-template-columns:minmax(0,1fr)}
.cz-panel{position:static;max-height:none}
}
@media (max-width:760px){
.cz-frame{grid-template-columns:minmax(0,1fr)}
}
/* ============================================================
EMPLOYEE WEB APP (employee-web-app.html)
The standalone benefits app an employee actually opens — full
window, own rail, own account menu. Slack and Teams keep the
narrow bot.js styling above; everything here is scoped to .ea
so those two are untouched.
============================================================ */
body.ea{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:var(--paper)}
/* ---- top bar ---- */
.ea-top{display:flex;align-items:center;gap:14px;padding:0 20px;height:58px;flex-shrink:0;
border-bottom:1px solid var(--line);background:var(--paper)}
.ea-top .spacer{flex:1}
.ea-brand{display:flex;align-items:center;gap:10px}
.ea-brand .mk{width:28px;height:28px;border-radius:8px;background:var(--ink);display:grid;place-items:center;flex-shrink:0}
.ea-brand .mk svg{width:17px;height:17px;display:block}
.ea-brand .nm{font-size:15px;color:var(--ink-2);letter-spacing:-.014em}
.ea-brand .nm b{font-weight:600;color:var(--ink)}
.ea-leader{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-3);letter-spacing:-.005em}
.ea-leader svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ea-leader:hover{color:var(--ink-2)}
.ea-acct{display:inline-flex;align-items:center;gap:9px;padding:6px 11px 6px 6px;border:1px solid var(--line);
border-radius:999px;background:var(--paper)}
.ea-acct:hover{border-color:var(--line-2);background:var(--bg)}
.ea-acct .av{width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;display:grid;
place-items:center;font-size:10px;font-weight:600;letter-spacing:.01em}
.ea-acct .who{font-size:13px;font-weight:500;color:var(--ink);letter-spacing:-.008em}
.ea-acct .chev{font-size:10px;color:var(--ink-3)}
.ea-menu{position:absolute;top:52px;right:20px;z-index:40;min-width:230px;background:var(--paper);
border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop);padding:6px;overflow:hidden}
.ea-menu .mh{padding:11px 12px 12px;display:flex;flex-direction:column;gap:3px;border-bottom:1px solid var(--line);margin-bottom:6px}
.ea-menu .mh b{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.ea-menu .mh span{font-size:11.5px;color:var(--ink-3);letter-spacing:-.004em}
.ea-menu button,.ea-menu a{display:block;width:100%;text-align:left;padding:8px 12px;border-radius:8px;
font-size:13.5px;color:var(--ink);letter-spacing:-.008em}
.ea-menu button:hover,.ea-menu a:hover{background:var(--bg-2)}
.ea-menu .ms{height:1px;background:var(--line);margin:6px 0}
/* ---- layout ---- */
.ea-body{flex:1;min-height:0;display:grid;grid-template-columns:250px minmax(0,1fr)}
/* ---- rail ---- */
.ea-rail{border-right:1px solid var(--line);background:var(--bg);overflow-y:auto;
display:flex;flex-direction:column;padding:12px 10px 0}
.ea-nav{display:flex;flex-direction:column;gap:1px}
.ea-nav-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 10px;
border-radius:9px;font-size:13.5px;color:var(--ink-2);letter-spacing:-.008em}
.ea-nav-row svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ea-nav-row:hover{background:var(--bg-2);color:var(--ink)}
.ea-nav-row.on{background:var(--sel);color:var(--ink);font-weight:500}
/* Navy, not pink (round 14): a count is a fact, pink is reserved for actions. */
.ea-badge{margin-left:auto;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--ink);
color:#fff;font-size:10.5px;font-weight:600;display:grid;place-items:center;letter-spacing:0}
.ea-sec{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
padding:20px 10px 8px}
.ea-links{display:flex;flex-direction:column;gap:1px}
.ea-link{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px}
.ea-link>span{min-width:0;flex:1}
.ea-link .t{display:block;font-size:13px;font-weight:500;color:var(--ink);letter-spacing:-.008em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ea-link .s{display:block;font-size:11px;color:var(--ink-3);letter-spacing:-.002em;margin-top:1px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ea-link svg{width:12px;height:12px;stroke:var(--ink-4);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ea-link:hover{background:var(--bg-2)}
.ea-link:hover svg{stroke:var(--ink-2)}
.ea-hist{display:flex;flex-direction:column;gap:1px;padding-bottom:8px}
.ea-hrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:7px 10px;border-radius:9px}
.ea-hrow .t{flex:1;min-width:0;font-size:13px;color:var(--ink-2);letter-spacing:-.008em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ea-hrow .w{font-size:11px;color:var(--ink-4);flex-shrink:0}
.ea-hrow:hover{background:var(--bg-2)}
.ea-hrow:hover .t{color:var(--ink)}
.ea-hrow.on{background:var(--sel)}
.ea-hrow.on .t{color:var(--ink);font-weight:500}
.ea-rail-ft{margin-top:auto;padding:10px 0 14px;border-top:1px solid var(--line)}
.ea-quiet{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:9px;
font-size:13px;color:var(--ink-3);letter-spacing:-.008em}
.ea-quiet svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ea-quiet:hover{background:var(--bg-2);color:var(--ink)}
/* ---- main ---- */
.ea-main{display:flex;flex-direction:column;min-height:0;background:var(--paper)}
.ea-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 32px}
/* 820px (round 14, was 720) — "still real narrow"; the greeting centres and
picks up the same date line the leader Home carries. */
.ea-home{max-width:820px;margin:0 auto;padding:52px 0 40px}
/* Round 15 (Michael): the home state centers vertically — greeting, date, ask
box and Recommended sit in the middle of the pane, the landing convention
chat products taught. Chatting state is untouched: the log still top-aligns
and scrolls. */
.ea-main:not(.chatting) .ea-scroll{display:flex;flex-direction:column}
.ea-main:not(.chatting) .ea-home{margin:auto;width:100%;padding:32px 0}
/* Round 16: the date moved ABOVE the greeting, so the two margins swapped —
the date now sits tight over the h1 (8px) and the h1 carries the gap down to
the ask box (26px). Flipping the markup without flipping these left the date
floating a full line-height off the greeting it belongs to. */
.ea-date{text-align:center;margin:0 0 8px;font-size:13.5px;color:var(--ink-3);
letter-spacing:-.005em;font-variant-numeric:tabular-nums}
.ea-home h1{margin:0 0 26px;text-align:center;font-size:var(--title-size);font-weight:600;
letter-spacing:var(--title-track);color:var(--ink)}
.ea-rec-hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
margin:34px 0 4px;font-size:13px;color:var(--ink-2);letter-spacing:-.005em}
.ea-rec-hd .dim{font-size:12px;color:var(--ink-3)}
.ea-spots{display:flex;flex-direction:column}
.ea-spot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;
padding:16px 2px;border-top:1px solid var(--line)}
.ea-spot .k{display:block;font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
color:var(--ink-3);margin-bottom:5px}
.ea-spot .t{display:block;font-size:15px;font-weight:600;letter-spacing:-.014em;color:var(--ink)}
.ea-spot .s{display:block;font-size:13px;color:var(--ink-3);letter-spacing:-.005em;margin-top:3px;line-height:1.45}
.ea-spot .go{font-size:13px;color:var(--ink-2);letter-spacing:-.005em;white-space:nowrap}
.ea-spot:hover .t{color:var(--accent-deep)}
.ea-spot:hover .go{color:var(--accent-deep)}
/* ---- the open enrollment banner (rendered by employee-app.js from oe-data.js) ----
A card, not a row: it is the one time-boxed thing on the page. Attention is
carried by weight and a navy edge, per the no-orange rule. */
.ea-oe{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;
margin:26px 0 0;padding:16px 20px;border:1px solid var(--line);border-left:3px solid var(--ink);
border-radius:12px;background:var(--paper);cursor:pointer;transition:border-color .15s}
.ea-oe:hover{border-color:var(--ink-3);border-left-color:var(--ink)}
.ea-oe .k{display:block;font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
color:var(--ink-3);margin-bottom:5px}
.ea-oe .t{display:block;font-size:15px;font-weight:600;letter-spacing:-.014em;color:var(--ink)}
.ea-oe .s{display:block;font-size:13px;color:var(--ink-3);letter-spacing:-.005em;margin-top:3px;line-height:1.45}
.ea-oe .go{font-size:13px;font-weight:500;color:var(--ink);letter-spacing:-.005em;white-space:nowrap}
/* ---- the ask box (hero and docked) ---- */
.ea-ask{border:1px solid var(--line-2);border-radius:16px;background:var(--paper);
box-shadow:var(--shadow-card);transition:border-color .15s,box-shadow .15s}
.ea-ask:focus-within{border-color:var(--ink-3)}
.ea-ask textarea{display:block;width:100%;border:0;background:none;resize:none;outline:none;font:inherit;
font-size:15.5px;color:var(--ink);letter-spacing:-.008em;line-height:1.5;padding:18px 20px 6px;
min-height:64px;max-height:200px}
.ea-ask textarea::placeholder{color:var(--ink-3)}
.ea-ask-ft{display:flex;align-items:center;gap:10px;padding:10px 12px 12px 16px}
.ea-chips{display:flex;gap:7px;flex-wrap:wrap;align-items:center;flex:1;min-width:0}
.ea-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--line);
border-radius:999px;background:var(--paper);font-size:12.5px;color:var(--ink-2);letter-spacing:-.005em}
.ea-chip:hover{border-color:var(--ink-3);color:var(--ink);background:var(--bg-2)}
.ea-chip.demo i{width:6px;height:6px;border-radius:50%;background:var(--ok-dot);flex-shrink:0}
.ea-chip.demo{border-color:var(--line-2);color:var(--ink)}
.ea-chip.demo:hover{border-color:var(--ok-dot);background:var(--ok-soft);color:var(--ok)}
.ea-hint{display:none;flex:1;font-size:11.5px;color:var(--ink-4);letter-spacing:-.002em}
.ea-send{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
background:var(--ink);color:#fff;font-size:13.5px;font-weight:500;letter-spacing:-.005em;flex-shrink:0}
.ea-send svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ea-send:hover{background:#152034}
.ea-dock{display:none;padding:6px 32px 0}
.ea-main.chatting .ea-dock{display:block}
.ea-main.chatting .ea-dock .ea-ask{max-width:820px;margin:0 auto}
.ea-main.chatting .ea-chips{display:none}
.ea-main.chatting .ea-hint{display:block}
.ea-legal{max-width:820px;margin:0 auto;padding:10px 32px 14px;font-size:11px;color:var(--ink-4);
letter-spacing:-.002em;line-height:1.45;text-align:center}
/* ---- the conversation ---- */
.ea-log{max-width:820px;margin:0 auto;padding:28px 0 8px}
.ea-log:empty{padding:0}
/* long answers read better as page text than as a bubble; only the employee's
own message gets a container, so the eye can tell who is speaking */
.ea .ea-log .bmsg{max-width:100%;margin-bottom:22px}
.ea .ea-log .bmsg .bmsg-av{display:none}
.ea .ea-log .bmsg.bot .bmsg-b{background:none;border:0;padding:0;font-size:14.5px;line-height:1.62}
.ea .ea-log .bmsg.me{margin-bottom:26px}
.ea .ea-log .bmsg.me .bmsg-b{background:var(--ink);color:#fff;border-color:var(--ink);
border-radius:14px;padding:11px 16px;max-width:78%;font-size:14.5px}
.ea .ea-log .bmsg-b p{margin:0 0 12px}
.ea .ea-log .bmsg-b .bmsg-h{font-weight:600;margin-bottom:8px}
.ea .ea-log .bmsg-b ul,.ea .ea-log .bmsg-b ol{margin:0 0 12px;padding-left:20px;display:flex;
flex-direction:column;gap:9px}
.ea .ea-log .bmsg-b li{padding-left:2px}
/* inline source chip */
.ea cite{display:inline-flex;align-items:center;margin:0 0 0 5px;padding:1px 7px;border-radius:5px;
background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2);font-size:11px;font-style:normal;
letter-spacing:-.002em;white-space:nowrap;vertical-align:baseline}
/* grounding markers: ✦ from your chats, * from your benefits record */
/* A superscript glyph is a 6px hit target, which is unusable with a mouse and
impossible on touch — the padding is what makes the marker actually openable. */
.ea mem,.ea rec{position:relative;display:inline-block;font-size:10px;line-height:1;
vertical-align:super;padding:2px 3px;margin-left:-1px;color:var(--ink-4);cursor:pointer}
.ea mem::before{content:"✦"}
.ea rec::before{content:"*"}
.ea mem:hover,.ea rec:hover,.ea mem:focus,.ea rec:focus{color:var(--accent);outline:none}
.ea dfn{position:relative;font-style:normal;border-bottom:1.5px dotted var(--ink-3);cursor:help}
.ea dfn:focus{outline:none;border-bottom-color:var(--accent)}
rec-s{font-style:normal;color:var(--ink-3)}
.ea-tip{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;z-index:20;
background:var(--paper);border:1px solid var(--line-2);border-radius:9px;box-shadow:var(--shadow-pop);
padding:8px 11px;font-size:12px;font-weight:400;line-height:1.45;color:var(--ink);letter-spacing:-.004em;
white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .12s;vertical-align:baseline;
text-align:left;font-style:normal}
.ea-tip.wide{white-space:normal;width:260px}
mem:hover>.ea-tip,rec:hover>.ea-tip,mem:focus>.ea-tip,rec:focus>.ea-tip,
dfn:hover>.ea-tip,dfn:focus>.ea-tip{opacity:1;visibility:visible}
.ea-tip .tip-b{color:var(--ink-3)}
.tip-a{font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.tip-a:hover{color:var(--accent-deep)}
/* ---- the agentic trace ---- */
.ea .trace-msg{margin-bottom:20px}
.ea .bmsg-b.trace{background:none;border:0;padding:0;width:100%}
.tr-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.tr-t{font-size:13.5px;font-weight:500;color:var(--ink-2);letter-spacing:-.005em}
.tr-el{font-size:12px;color:var(--ink-4)}
.tr-c{font-size:12px;color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.settled .tr-hd{cursor:pointer;margin-bottom:0}
.settled .tr-hd:hover .tr-c{color:var(--ink)}
.settled .tr-rows{display:none}
.settled .bmsg-b.open .tr-rows{display:block;margin-top:10px}
.tr-row{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:9px;align-items:center;padding:3px 0}
.tr-row .tr-x{font-size:12.5px;color:var(--ink-3);letter-spacing:-.004em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-row.lead{margin-top:5px}
.tr-row.lead .tr-x{color:var(--ink-2);font-weight:500}
.tr-row:not(.lead){padding-left:16px}
.tr-row .tr-a{font-size:11px;color:var(--ink-4);font-variant-numeric:tabular-nums}
/* The tick is centred by the grid, not by hand-tuned offsets. It used to be
absolutely positioned at left:3px/top:4.4px, which resolves against the padding
box — and because `*{box-sizing}` does not match pseudo-elements, the tick's own
borders made it 6.4×3.8 rather than 5×2.4. Net result: the check sat ~1.2px right
and ~1.3px low inside a 13px circle, which is what made the loading sequence look
off. place-items:center removes the arithmetic entirely. */
.tr-i{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--line-2);justify-self:center;
display:grid;place-items:center;flex-shrink:0}
.tr-row[data-done="0"] .tr-i{border-top-color:var(--ink-3);animation:trspin .7s linear infinite}
.tr-row[data-done="1"] .tr-i{border-color:var(--ok-dot);background:var(--ok-dot)}
.tr-row[data-done="1"] .tr-i::after{content:"";box-sizing:border-box;width:6.5px;height:4px;
border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;
/* place-items centres the tick's BOUNDING BOX, but an L-shape's ink is not centred
in its own box: for these dimensions the centroid lands 0.98px below the box
centre once rotated (and exactly on the vertical axis). translateY is listed
first so it applies last, in screen space — putting it after rotate() would
nudge along the rotated 45° axis and push the tick sideways. */
transform:translateY(-1px) rotate(-45deg)}
@keyframes trspin{to{transform:rotate(360deg)}}
/* ---- reactions ---- */
.bmsg-react{display:flex;gap:2px;margin:-12px 0 24px}
.bmsg-react button{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--ink-4)}
.bmsg-react button svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.bmsg-react button:hover{background:var(--bg-2);color:var(--ink-2)}
.bmsg-react button.on{color:var(--accent-deep)}
/* ---- overlays ---- */
.ea-ov{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px}
.ea-ov-bd{position:absolute;inset:0;background:rgba(31,42,64,.28);backdrop-filter:blur(2px)}
.ea-ov-x{position:absolute;top:16px;right:16px;width:28px;height:28px;border-radius:8px;display:grid;
place-items:center;color:var(--ink-3);z-index:2}
.ea-ov-x:hover{background:var(--bg-2);color:var(--ink)}
.ea-ov-x svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}
.ea-settings,.ea-msgs,.ea-search{position:relative;background:var(--paper);border-radius:18px;
box-shadow:var(--shadow-pop);overflow:hidden;width:100%}
.ea-settings{max-width:840px;height:min(620px,86vh);display:grid;grid-template-columns:250px minmax(0,1fr)}
.ea-set-rail{border-right:1px solid var(--line);background:var(--bg);padding:20px 12px;overflow-y:auto}
.ea-set-hd{padding:0 10px 16px}
.ea-set-hd b{display:block;font-size:16px;font-weight:600;letter-spacing:-.016em}
.ea-set-hd span{display:block;font-size:12px;color:var(--ink-3);margin-top:2px;letter-spacing:-.004em}
.ea-set-tab{display:block;width:100%;text-align:left;padding:9px 11px;border-radius:9px;margin-bottom:2px}
.ea-set-tab .t{display:block;font-size:13.5px;color:var(--ink-2);letter-spacing:-.008em}
.ea-set-tab .s{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px;letter-spacing:-.002em}
.ea-set-tab:hover{background:var(--bg-2)}
.ea-set-tab.on{background:var(--paper);box-shadow:var(--shadow-card)}
.ea-set-tab.on .t{color:var(--ink);font-weight:500}
.ea-set-pane{padding:30px 34px;overflow-y:auto}
.ea-set-pane h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.ea-set-pane .lead{margin:8px 0 0;font-size:13.5px;color:var(--ink-2);letter-spacing:-.005em;line-height:1.55;max-width:56ch}
.ea-toggle-row{display:flex;align-items:flex-start;gap:20px;margin:24px 0 4px;padding-bottom:22px;
border-bottom:1px solid var(--line)}
.ea-toggle-row .tt{font-size:13.5px;font-weight:500;color:var(--ink);letter-spacing:-.008em}
.ea-toggle-row .td{font-size:12.5px;color:var(--ink-3);letter-spacing:-.004em;line-height:1.5;margin-top:4px;max-width:52ch}
.ea-switch{width:40px;height:23px;border-radius:999px;background:var(--line-2);flex-shrink:0;
position:relative;transition:background .16s}
.ea-switch span{position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;
background:var(--paper);box-shadow:0 1px 3px rgba(31,42,64,.28);transition:transform .16s}
.ea-switch.on{background:var(--ink)}
.ea-switch.on span{transform:translateX(17px)}
.ea-mem-wrap[data-off]{opacity:.45;pointer-events:none}
.ea-sec2{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
margin:24px 0 4px}
.ea-mem{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0;
border-bottom:1px solid var(--line)}
.ea-mem .t{display:block;font-size:13.5px;color:var(--ink);letter-spacing:-.008em}
.ea-mem .w{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px}
.ea-forget{font-size:12.5px;color:var(--ink-3);letter-spacing:-.004em;flex-shrink:0}
.ea-forget:hover{color:var(--warn);text-decoration:underline;text-underline-offset:2px}
.ea-fade{margin:18px 0 0;font-size:12px;color:var(--ink-3);letter-spacing:-.002em;line-height:1.5}
.ea-danger{margin-top:18px;display:inline-flex;padding:8px 14px;border:1px solid var(--warn);border-radius:8px;
font-size:13px;font-weight:500;color:var(--warn);letter-spacing:-.005em}
.ea-danger:hover{background:#fdf1ef}
.ea-empty{margin:14px 0;font-size:13px;color:var(--ink-3);letter-spacing:-.004em}
.ea-kv{margin-top:22px;border-top:1px solid var(--line)}
.ea-kv>div{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:11px 0;
border-bottom:1px solid var(--line)}
.ea-kv span{font-size:13px;color:var(--ink-3);letter-spacing:-.005em}
.ea-kv b{font-size:13.5px;font-weight:500;color:var(--ink);letter-spacing:-.008em;text-align:right}
.ea-btnrow{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
/* ---- share this conversation (round 15) ----
Employee-side buttons are ink, not pink — pink is the leader side's action
color; the employee product wears Acme's quieter palette. */
.ea-share{position:relative;background:var(--paper);border-radius:18px;max-width:480px;width:100%;
padding:28px 28px 24px;box-shadow:var(--shadow-pop)}
.ea-share h2{margin:0 0 8px;font-size:19px;font-weight:600;letter-spacing:-.018em;color:var(--ink)}
.ea-share .lead{margin:0 0 20px;font-size:13.5px;color:var(--ink-2);letter-spacing:-.005em;line-height:1.55}
.ea-share-link{display:flex;gap:9px;margin:0 0 20px}
.ea-share-link input{flex:1;min-width:0;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-2);
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--ink);padding:10px 12px;outline:none}
.ea-share-acts{display:flex;align-items:center;gap:18px}
.ea-btn-ink{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 18px;
border-radius:10px;background:var(--ink);color:#fff;font-family:inherit;font-size:13.5px;font-weight:500;
letter-spacing:-.005em;cursor:pointer;border:0;transition:background .15s}
.ea-btn-ink:hover{background:#152034}
.ea-btn-line{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;
border-radius:10px;background:var(--paper);border:1px solid var(--line-2);color:var(--ink);
font-family:inherit;font-size:13.5px;font-weight:500;letter-spacing:-.005em;cursor:pointer;transition:border-color .15s}
.ea-btn-line:hover{border-color:var(--ink-3)}
.ea-share-manage{font-size:13.5px;font-weight:500;color:var(--ink);letter-spacing:-.005em;cursor:pointer;
background:none;border:0;padding:0;font-family:inherit}
.ea-share-manage:hover{text-decoration:underline;text-underline-offset:3px}
/* shared-links rows in Settings (cards, like production) */
.ea-shrow{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;
padding:14px 16px;margin-top:12px}
.ea-shrow .l{flex:1;min-width:0}
.ea-shrow .t{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.ea-shrow .w{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px}
.ea-shrow button{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--ink-3);
cursor:pointer;background:none;border:0}
.ea-shrow button:hover{background:var(--bg-2);color:var(--ink)}
.ea-shrow button svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none;
stroke-linecap:round;stroke-linejoin:round}
/* ---- messages ---- */
.ea-msgs{max-width:900px;height:min(640px,88vh);display:flex;flex-direction:column}
.ea-msg-hd{padding:20px 24px 16px;border-bottom:1px solid var(--line);position:relative;flex-shrink:0}
.ea-msg-hd b{display:block;font-size:17px;font-weight:600;letter-spacing:-.018em}
.ea-msg-hd span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px;letter-spacing:-.004em}
.ea-msg-body{flex:1;min-height:0;display:grid;grid-template-columns:284px minmax(0,1fr)}
.ea-msg-list{border-right:1px solid var(--line);overflow-y:auto;background:var(--bg)}
.ea-msg-tabs{display:flex;gap:20px;padding:12px 18px 0;border-bottom:1px solid var(--line)}
.ea-msg-tabs button{padding:0 0 10px;font-size:13px;color:var(--ink-3);letter-spacing:-.005em;
border-bottom:2px solid transparent;margin-bottom:-1px}
.ea-msg-tabs button.on{color:var(--ink);font-weight:500;border-bottom-color:var(--ink)}
.ea-msg-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:13px 18px;
border-bottom:1px solid var(--line)}
.ea-msg-row .ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
font-size:12px;color:var(--ink-3);border:1px dashed var(--line-2)}
.ea-msg-row .ic.ok{border:0;background:var(--ok-soft);color:var(--ok);font-size:11px}
.ea-msg-row .l{min-width:0;flex:1}
.ea-msg-row .t{display:block;font-size:13px;font-weight:500;color:var(--ink);letter-spacing:-.008em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ea-msg-row .s{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;letter-spacing:-.002em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ea-msg-row:hover{background:var(--bg-2)}
.ea-msg-row.on{background:var(--sel)}
.ea-msg-pane{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.ea-th-hd{padding:16px 22px 14px;border-bottom:1px solid var(--line);flex-shrink:0}
.ea-th-hd b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.012em}
.ea-th-hd span{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.ea-th-log{flex:1;min-height:0;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:14px}
.ea-th-m{max-width:82%;display:flex;flex-direction:column;gap:4px}
.ea-th-m .by{font-size:11px;color:var(--ink-3);letter-spacing:-.002em}
.ea-th-m .bd{font-size:13.5px;line-height:1.55;letter-spacing:-.005em;padding:10px 14px;border-radius:12px}
.ea-th-m .w{font-size:11px;color:var(--ink-4)}
.ea-th-m.me{align-self:flex-end;align-items:flex-end}
.ea-th-m.me .bd{background:var(--ink);color:#fff}
.ea-th-m.them .bd{background:var(--bg);border:1px solid var(--line);color:var(--ink)}
.ea-msg-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
color:var(--ink-3);padding:24px;text-align:center}
.ea-msg-empty svg{width:26px;height:26px;stroke:var(--ink-4);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.ea-msg-empty p{margin:0;font-size:13.5px;color:var(--ink-2);letter-spacing:-.005em}
.ea-msg-empty span{font-size:12px;color:var(--ink-3);max-width:38ch;line-height:1.5}
.ea-msg-composer{border-top:1px solid var(--line);padding:14px 22px 16px;flex-shrink:0;background:var(--paper)}
.ea-msg-composer textarea{width:100%;border:1px solid var(--line-2);border-radius:12px;padding:11px 13px;
font:inherit;font-size:13.5px;color:var(--ink);letter-spacing:-.005em;line-height:1.5;resize:none;outline:none;background:var(--bg)}
.ea-msg-composer textarea:focus{border-color:var(--ink-3);background:var(--paper)}
.ea-msg-ft{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:11px}
.ea-anon{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2);letter-spacing:-.004em}
.ea-anon small{color:var(--ink-3)}
.ea-anon .ea-switch{width:34px;height:20px}
.ea-anon .ea-switch span{width:15px;height:15px;top:2.5px;left:2.5px}
.ea-anon .ea-switch.on span{transform:translateX(14px)}
/* ---- search ---- */
.ea-search{max-width:560px;align-self:start;margin-top:8vh}
.ea-search-hd{display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid var(--line)}
.ea-search-hd svg{width:17px;height:17px;stroke:var(--ink-3);stroke-width:1.7;fill:none;stroke-linecap:round}
.ea-search-hd input{flex:1;border:0;outline:none;font:inherit;font-size:15px;color:var(--ink);
letter-spacing:-.008em;background:none}
.ea-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;
text-align:left;padding:11px 18px;border-bottom:1px solid var(--line)}
.ea-search-row .t{grid-column:1;font-size:13.5px;font-weight:500;color:var(--ink);letter-spacing:-.008em}
.ea-search-row .s{grid-column:1;font-size:12px;color:var(--ink-3);letter-spacing:-.004em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ea-search-row .w{grid-column:2;grid-row:1/3;font-size:11.5px;color:var(--ink-4)}
.ea-search-row:hover{background:var(--bg-2)}
.ea-search [data-search-rows]{max-height:min(420px,60vh);overflow-y:auto}
.ea-search .ea-empty{padding:16px 18px;margin:0}
@media (max-width:920px){
.ea-body{grid-template-columns:minmax(0,1fr)}
.ea-rail{display:none}
.ea-settings{grid-template-columns:minmax(0,1fr);height:min(700px,90vh)}
.ea-set-rail{border-right:0;border-bottom:1px solid var(--line);padding:16px 10px}
.ea-msg-body{grid-template-columns:minmax(0,1fr)}
.ea-msg-list{max-height:180px;border-right:0;border-bottom:1px solid var(--line)}
.ea-scroll,.ea-dock{padding-left:18px;padding-right:18px}
}
/* ---- escalation sheet (bot.js) ----
The one place an employee chooses whether their name travels with a question.
Shared by all four employee surfaces, so it has to work at 390px and at desk
width; it centres on both and caps its own width. */
.esk-back{position:fixed;inset:0;z-index:80;background:rgba(31,42,64,.34);
display:flex;align-items:flex-end;justify-content:center;padding:0;
opacity:0;transition:opacity .16s ease}
.esk-back.is-open{opacity:1}
.esk{width:100%;max-width:460px;background:var(--paper);border-radius:18px 18px 0 0;
padding:22px 22px 20px;box-shadow:var(--shadow-pop);box-sizing:border-box;
max-height:100%;overflow-y:auto;
transform:translateY(14px);transition:transform .16s ease}
.esk-back.is-open .esk{transform:translateY(0)}
/* Round 16 — the sheet mirrors production: a title row with a close, the
what-gets-shared paragraph, a REQUIRED note, the anonymity toggle, one send.
The old checkbox parts (.esk-opt / .esk-box / .esk-txt) went with the
rebuild — the toggle is the shared .ea-switch the Messages composer uses, so
the same control means the same thing on both employee surfaces. */
.esk-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px}
.esk-hd{flex:1;font-size:19px;font-weight:600;letter-spacing:-.018em;color:var(--ink)}
.esk-x{flex-shrink:0;margin:-4px -4px 0 0;width:28px;height:28px;border-radius:8px;display:grid;
place-items:center;background:none;border:0;cursor:pointer;color:var(--ink-3);transition:background .15s,color .15s}
.esk-x:hover{background:var(--bg-2);color:var(--ink)}
.esk-x svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}
.esk-sub{margin:0 0 18px;font-size:13.5px;color:var(--ink-2);line-height:1.55;letter-spacing:-.005em}
.esk-q{font-size:13.5px;color:var(--ink-2);line-height:1.5;letter-spacing:-.005em;
background:var(--bg-2);border-radius:10px;padding:11px 13px;margin-bottom:14px}
.esk-lb{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.008em;color:var(--ink);margin-bottom:8px}
/* The required marker. This is the one red in the employee product and it is a
form convention, not an alarm — it never appears outside a required label. */
.esk-req{color:var(--warn);font-weight:500}
.esk-ta{width:100%;box-sizing:border-box;font-family:inherit;font-size:14px;letter-spacing:-.005em;
line-height:1.5;color:var(--ink);background:var(--paper);border:1px solid var(--line-2);
border-radius:12px;padding:12px 13px;resize:vertical;min-height:84px;transition:border-color .15s}
.esk-ta::placeholder{color:var(--ink-4)}
.esk-ta:focus{outline:none;border-color:var(--ink-3)}
.esk-tog{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:13.5px;
color:var(--ink);letter-spacing:-.008em}
.esk-tog small{color:var(--ink-3);font-size:12.5px}
.esk-tog .ea-switch{cursor:pointer;border:0;padding:0}
.esk-ft{display:flex;gap:10px;margin-top:20px}
.esk-btn{flex:1;font-family:inherit;font-size:14px;font-weight:500;letter-spacing:-.005em;
padding:11px 16px;border-radius:10px;border:1px solid var(--line-2);background:var(--paper);
color:var(--ink-2);cursor:pointer;transition:background .15s,border-color .15s}
.esk-btn:hover{border-color:var(--ink-3);background:var(--bg-2);color:var(--ink)}
.esk-btn.is-go{background:var(--accent);border-color:var(--accent);color:#fff}
.esk-btn.is-go:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
/* Disabled until the note has content — the sheet's only validity rule. */
.esk-btn.is-go[disabled]{background:var(--ink-4);border-color:var(--ink-4);color:var(--paper);
cursor:default;opacity:.75}
.esk-btn.is-go[disabled]:hover{background:var(--ink-4);border-color:var(--ink-4)}
@media (min-width:560px){
.esk-back{align-items:center}
.esk{border-radius:18px}
}
/* Hosted inside a page's own chrome (the phone mock) rather than over the window. */
.esk-back.is-hosted{position:absolute;align-items:flex-end}
.esk-back.is-hosted .esk{max-width:100%;border-radius:18px 18px 0 0}
/* ============================ NOTIFICATIONS ============================
The notification row, shared by the Notification Center on Home and the full
queue on notifications.html. Lives here rather than in a page because it has
two consumers; open-items.js owns the markup that uses it.
Everything is `.nu-` prefixed: class collisions are the recurring bug in this
repo (.bar, .icard, .esc and .icon-btn have all collided) and this component
needs a table, a menu and a sheet — all names styles.css already uses.
── The rewrite, and what it was fixing ─────────────────────────────────────
This row used to be a card pretending to be a table row: the task text wrapped
to two or three lines, the source sat under it as a chip, the Due cell carried
a second explanatory line, and the right-hand actions were a chat icon, then a
verb whose width changed per row, then a ⋯. Nothing lined up vertically, so
nine rows read as nine objects rather than one list.
It is an inbox now. One line per task, source in its own column, and a fixed
right-hand rail: a fixed-width verb followed by exactly three icon slots. The
rail is the load-bearing part — every row's controls are in the same place, so
the eye travels down the task column and the hand knows where the actions are
without looking. Rows that cannot offer a control keep the empty slot.
The design job is still legibility, not density: nothing hides what an action
will do, and an archive row still reads as a sentence rather than a status
column. Nothing was truncated away, only folded into a tooltip. */
/* Filter chips. Same shape as the old Home to-do tabs so the control reads as
the same control it always was. */
.nu-chips{display:flex;gap:2px;flex-wrap:wrap}
/* display:flex would beat the UA's [hidden] rule — and a filter bar whose only
chip is "All" hides entirely (round 12), so the attribute must win. */
.nu-chips[hidden]{display:none}
.nu-chip{font-family:inherit;font-size:12.5px;letter-spacing:-.005em;color:var(--ink-3);
padding:5px 11px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
.nu-chip:hover{color:var(--ink-2);background:var(--bg-2)}
.nu-chip.is-on{background:var(--sel);color:var(--ink);font-weight:500}
/* table-layout:fixed is load-bearing, not a tidy-up. `text-overflow:ellipsis`
on the task line does nothing in an auto-layout table — the cell just grows to
fit the longest sentence and pushes the action rail off the right edge. Fixed
layout honours the px widths in the markup and hands Task whatever is left. */
.nu-tbl{table-layout:fixed}
/* Rows are one line tall, so cells centre rather than hang from the top —
that alignment is most of what makes the list read as an inbox. */
.nu-tbl td{vertical-align:middle;padding-top:13px;padding-bottom:13px}
.nu-tbl tbody tr:hover{background:rgba(31,42,64,.02)}
/* Task cell — dot, one line of text, and the returned marker when it applies.
One dot, one colour (round 14): the navy/grey split read as two row species.
Urgency is carried by order and by the dates in the sub line. */
.nu-task{display:flex;gap:13px;align-items:center;min-width:0}
.nu-dot{width:7px;height:7px;border-radius:50%;background:var(--ink);flex-shrink:0}
.nu-body{min-width:0;flex:1}
/* One line, ellipsised, full sentence on hover (open-items.js sets title). A
task that wraps is a task that makes its neighbours unscannable. */
.nu-txt{display:block;font-size:14px;color:var(--ink);letter-spacing:-.006em;line-height:1.5;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.nu-txt:hover{text-decoration:underline;text-underline-offset:2px}
/* Source column. Same chip as before, promoted out of the task cell. */
.nu-srcc{white-space:nowrap}
.nu-src{display:inline-flex;align-items:center;background:var(--bg-2);color:var(--ink-2);
border-radius:5px;padding:3px 8px;font-size:11px;font-weight:500;letter-spacing:.01em;white-space:nowrap}
/* Matches vendors.html / vendor-detail's .ph2 — marks the one row that needs
invoice data on top of the signed contract, so it says the same thing here.
It qualifies the SOURCE, which is why it rides in that cell. */
.nu-ph2{display:inline-block;margin-top:4px;font-size:10px;font-weight:500;letter-spacing:.04em;
text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line-2);
border-radius:5px;padding:1px 6px;white-space:nowrap}
.nu-srcc .nu-ph2{display:block;width:max-content}
/* The returned marker. This is the loop made visible: the response shipped, the
metric didn't move, so the item came back on its own and says why. It is the
single strongest piece of evidence on the page that the product works between
logins, so it gets a full sentence rather than a badge — but it is a quiet
inset now, not an amber block. No orange anywhere in this product. */
.nu-ret{margin-top:7px;font-size:12.5px;line-height:1.5;color:var(--ink-2);background:var(--bg-2);
border-left:2px solid var(--ink);border-radius:0 8px 8px 0;padding:8px 11px;
letter-spacing:-.004em;max-width:64ch;white-space:normal}
.nu-ret b{color:var(--ink);font-weight:600}
/* Archive rows read as a sentence — who, when, and what remains true. */
.nu-arch{margin-top:7px;font-size:12.5px;color:var(--ink-3);line-height:1.5;letter-spacing:-.004em;max-width:66ch}
.nu-arch b{color:var(--ink-2);font-weight:500}
.nu-due{white-space:nowrap;font-size:13px;color:var(--ink-3);letter-spacing:-.004em}
/* Assignee control — the avatar alone, or a dashed "+" when nobody owns it.
The name lives in the button's title and in the picker; spending a column on
"Dana" next to a "DO" badge is the kind of duplication that pushed the task
text down to twenty characters. */
.nu-as{position:relative}
.nu-asb{display:inline-grid;place-items:center;width:30px;height:30px;font-family:inherit;
background:none;border:0;padding:0;border-radius:50%;cursor:pointer;
transition:box-shadow .15s}
.nu-asb:hover,.nu-asb.is-open{box-shadow:0 0 0 2px var(--line-2)}
.nu-av{width:24px;height:24px;border-radius:50%;background:var(--paper);color:var(--ink);font-size:9.5px;
font-weight:600;letter-spacing:.02em;display:grid;place-items:center;flex-shrink:0;
box-shadow:inset 0 0 0 1px var(--line-2)}
/* White with navy initials and a hairline ring (round 28, Michael); it was a
solid navy disc, the heaviest mark in the row after the pink ›. The ring is
an inset shadow, not a border, so the 24px box and centring don't move. */
.nu-av.is-none{background:none;border:1px dashed var(--line-2);color:var(--ink-3);font-size:13px;font-weight:400}
/* The picker still shows an avatar per person, so the menu teaches which
initials belong to whom the first time it is opened. */
.nu-mi .nu-av{width:22px;height:22px}
/* ---- The action rail ----
One fixed-width verb, then exactly three icon slots: ask / snooze / dismiss.
Fixed width is the whole trick. "Decide" and "Review dental docs" are the same
button here, so the icon rail starts at the same x on every row and the right
edge of the table is a straight line instead of a ragged one. */
/* 2px — the same rhythm as inside the rail, so the › chevron sits with the
icons instead of floating 12px off them (round 14). The pane's owner avatar
keeps its own 8px of air below. */
.nu-act{display:flex;align-items:center;gap:2px;justify-content:flex-end}
.nu-act > .nu-as{margin-right:8px}
.nu-icons{display:flex;align-items:center;gap:2px;flex-shrink:0}
/* One icon treatment for the whole rail, so it reads as a set rather than
borrowed controls. --ink-2 at rest — round 12, Michael's call: at --ink-4
they read as decoration, and an action you cannot see is an action you do
not have. Hover confirms with ink + a fill. */
.nu-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;flex-shrink:0;
color:var(--ink-2);background:none;border:0;padding:0;font-family:inherit;cursor:pointer;
transition:background .15s,color .15s}
.nu-ico svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none;
stroke-linecap:round;stroke-linejoin:round}
.nu-ico:hover,.nu-ico.is-open{background:var(--bg-2);color:var(--ink)}
/* A row that cannot offer a control holds the slot rather than collapsing it —
otherwise the live-queue row's icons shift left and the rail stops being one. */
.nu-ico.is-off{pointer-events:none}
/* › — the affordance for "this row opens". It says at rest what the removed
Review button said in words, and keeps a keyboard-reachable way in. Pink
(round 14): opening the detail IS the row's action, and pink is the action
colour — while sitting in the rail's exact 30px/2px rhythm so it reads as
part of the set, not a stray. */
.nu-go{color:var(--accent)}
.nu-go:hover{color:var(--accent-deep);background:var(--accent-softer)}
/* Instant styled tooltips — the icons' hover explainer (round 12). Native
title balloons are slow and easy to miss; attr(data-tip), no JS. Anchored
right so the rail's outermost tips never leave the card. */
.nu-ico[data-tip]{position:relative}
.nu-ico[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);right:-2px;
background:var(--ink);color:var(--paper);font-size:11.5px;letter-spacing:-.004em;line-height:1;
padding:6px 9px;border-radius:7px;white-space:nowrap;opacity:0;transform:translateY(2px);
pointer-events:none;transition:opacity .12s ease .2s,transform .12s ease .2s;z-index:40}
.nu-ico[data-tip]:hover::after,.nu-ico[data-tip]:focus-visible::after{opacity:1;transform:translateY(0)}
/* vendor-detail: the recorded decision, shown against the contract it changed */
.vd-decided{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;
letter-spacing:-.004em;color:var(--ok);background:var(--ok-soft);border-radius:7px;padding:5px 11px}
.vd-decided::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok-dot);flex-shrink:0}
.vd-decided[hidden]{display:none}
/* Shared popup for the assignee picker and the snooze menu. */
.nu-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:232px;
background:var(--paper);border:1px solid var(--line-2);border-radius:12px;
box-shadow:var(--shadow-pop);padding:6px;display:flex;flex-direction:column;gap:1px}
.nu-mi{display:flex;align-items:center;gap:10px;width:100%;font-family:inherit;font-size:13px;
letter-spacing:-.005em;color:var(--ink);background:none;border:0;border-radius:8px;
padding:8px 9px;cursor:pointer;text-align:left}
.nu-mi:hover{background:var(--bg-2)}
.nu-mi .rl{margin-left:auto;font-size:11px;color:var(--ink-3)}
.nu-mi.is-sep{border-top:1px solid var(--line);border-radius:0;margin-top:4px;padding-top:11px}
.nu-mi.is-quiet{color:var(--ink-3)}
.nu-mh{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
color:var(--ink-4);padding:8px 9px 4px}
.nu-empty{padding:34px 0 12px;font-size:13.5px;color:var(--ink-3);text-align:center}
/* ---------- The detail surface (round 10) ----------
One anatomy for every notification: why this surfaced → what you can do →
discuss with chat. Rendered inside the Home drawer and the full queue's
right pane, from the same builder in open-items.js. */
/* The sub line — one quiet sentence under the task. Both lines ellipsise; the
full sentences live one click away behind Review. */
.nu-sub{font-size:12.5px;color:var(--ink-3);letter-spacing:-.004em;line-height:1.5;
margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Summary rows navigate (round 11) — the whole row is one click target, so it
says so, and on hover the title underlines like the link the row effectively
is (round 12: the second at-rest/hover guide beside the › chevron). */
tbody[data-oi="active"] .nu-row{cursor:pointer}
tbody[data-oi="active"] .nu-row:hover .nu-txt{text-decoration:underline;text-underline-offset:3px}
/* One column, always: the detail surface lives only in the queue's right pane
now, and the chat panel stacks under the actions there. The two-column
variant existed for the Home drawer, which round 11 removed. */
.nu-det-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.nu-det-main{min-width:0}
.nu-why-h{font-size:12.5px;font-weight:600;color:var(--ink-2);letter-spacing:-.005em;
margin:10px 0 8px}
.nu-why{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:6px}
.nu-why li{position:relative;padding-left:16px;font-size:13px;color:var(--ink-2);
letter-spacing:-.005em;line-height:1.55}
/* Navy, not pink (round 14): pink is reserved for actions, and evidence is a
fact. The bullets read as findings by their content, not their colour. */
.nu-why li::before{content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;
border-radius:50%;background:var(--ink-3)}
.nu-det-acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
/* The direction picker's lead-in. It exists to answer the question the old
buttons provoked — "if I click Don't renew, have I just cancelled a
contract?" — BEFORE the click rather than in a toast afterwards. Saying
"I'll draft it with you" is also the literal truth of what happens next, so
the labels underneath get to stay short. */
.nu-dirs{margin-top:16px}
.nu-dirs-h{font-size:13px;font-weight:500;color:var(--ink-2);letter-spacing:-.005em}
.nu-dirs .nu-det-acts{margin-top:9px}
/* Decision buttons are `.btn .btn-navy .btn-sm` — the escape hatch DESIGN-NOTES
reserved for a filled action that must not read as the page CTA, used here for
the first time. Two or three decisions sit side by side as peers; pink stays
THE primary CTA. `.btn` is an /