/* Foxx ERP — design tokens + base styles. Hand-written, no framework, no build step. */
:root{
  --bg:#f5f6f8; --surface:#ffffff; --surface-2:#f0f1f4;
  --text:#1c1d21; --muted:#6b7080; --border:#e2e3e8;
  --accent:#2f4a8a; --accent-hover:#26407c; --accent-text:#ffffff;
  --danger:#a02a2a; --danger-text:#ffffff; --ok:#2a6b3a;
  --radius:8px; --radius-sm:6px; --space:16px;
  --content-max:1440px; --sidebar-w:248px; --topbar-h:60px;
  --sidebar-bg:#fbfbfd; --sidebar-active:color-mix(in srgb,var(--accent) 12%,transparent);
  --font: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono: ui-monospace,"Cascadia Code","Segoe UI Mono",Menlo,Consolas,monospace;
  --shadow: 0 1px 2px rgba(20,22,30,.06), 0 1px 3px rgba(20,22,30,.05);
}
/* Dark theme — a deliberately designed cool-slate dark UI (not gray-inverted
   light). Neutral ramp carries a faint blue tint; surfaces step up in elevation
   (bg deepest → surface → surface-2 → topbar/sidebar) with borders that stay
   visible. The accent is a vivid indigo that glows against the dark surface,
   re-tuned away from the old flat washed-out blue. All status colors are
   brightened for dark; --muted-text/--text-muted/--lc are filled so feature
   blocks that read them don't fall back to a light value. Contrast verified
   ≥4.5:1 for body/muted/links/badge labels, ≥3:1 for large+disabled text. */
[data-theme="dark"]{
  --bg:#0e1014; --surface:#171a21; --surface-2:#1f232c;
  --text:#e9ecf2; --muted:#a3acbd; --border:#2c3140;
  --muted-text:#a3acbd; --text-muted:#a3acbd; --lc:#8b93a7;
  /* --accent stays bright for text/link/focus usages; solid fills use the
     deeper --accent-fill so WHITE button labels hit AA (owner: white text in
     buttons, 2026-06-05). */
  --accent:#7b93ff; --accent-hover:#93a6ff; --accent-text:#ffffff;
  --accent-fill:#5566e6; --accent-fill-hover:#4d5ed8;
  --danger:#ff7a85; --danger-text:#1a0a0c; --ok:#4ade80;
  --sidebar-bg:#13161d; --sidebar-active:color-mix(in srgb,var(--accent) 20%,transparent);
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1014; --surface:#171a21; --surface-2:#1f232c;
    --text:#e9ecf2; --muted:#a3acbd; --border:#2c3140;
    --muted-text:#a3acbd; --text-muted:#a3acbd; --lc:#8b93a7;
    --accent:#7b93ff; --accent-hover:#93a6ff; --accent-text:#ffffff;
    --accent-fill:#5566e6; --accent-fill-hover:#4d5ed8;
    --danger:#ff7a85; --danger-text:#1a0a0c; --ok:#4ade80;
    --sidebar-bg:#13161d; --sidebar-active:color-mix(in srgb,var(--accent) 20%,transparent);
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
  }
}

/* ── Dark-scoped polish ───────────────────────────────────────────────────
   These rules only apply in dark mode and exist because the token swap alone
   can't express dark-specific intent: surface elevation that reads as layers,
   a glowing focus ring, brighter status text on dark tints, and styled
   scrollbars. Light mode is never touched. Each block notes what it fixes. */
[data-theme="dark"]{
  /* Distinct elevation for the chrome: topbar/rail sit just above the
     page so the app frame reads as a layer, not a flat sheet. */
  --topbar-bg:#13161d; --input-bg:#10131a;
}
/* Topbar reads as elevated chrome (the base rule uses --surface, which now
   equals card surface — give it its own slightly-cooler tone + soft underline). */
[data-theme="dark"] .topbar{background:linear-gradient(180deg,#171b24,#13161d);
  border-bottom-color:#262b38;box-shadow:0 1px 0 rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.28)}
/* Inputs/selects: recess them below the card surface so fields read as wells
   (base .field-input uses --bg which is now the deepest tone — keep that, but
   also catch selects/textarea that inherit surface). */
[data-theme="dark"] .field-input,
[data-theme="dark"] select.field-input,
[data-theme="dark"] textarea.field-input{background:var(--input-bg)}
/* Focus ring: a brighter, slightly larger glow than light mode so focus is
   unmistakable on dark fields. */
[data-theme="dark"] .field-input:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 38%,transparent)}
/* Primary button: a subtle lift so it glows off the surface. */
[data-theme="dark"] .btn{box-shadow:0 1px 2px rgba(0,0,0,.4)}
[data-theme="dark"] .btn-ghost{box-shadow:none}
/* Cards get a hairline top highlight for a faint "lit-from-above" edge. */
[data-theme="dark"] .card,[data-theme="dark"] .board-col,
[data-theme="dark"] .entry-card{border-color:#2c3140}
/* Warm status text (the light-mode #9a5e10 is unreadable on dark): use a
   bright amber that meets contrast on the translucent tint. */
[data-theme="dark"] .badge-prio-high{color:#f0b35a;
  background:color-mix(in srgb,#f0b35a 18%,transparent)}
[data-theme="dark"] .badge-warn{color:#f0b35a;
  background:color-mix(in srgb,#f0b35a 16%,var(--surface));
  border-color:color-mix(in srgb,#f0b35a 35%,var(--border))}
[data-theme="dark"] .due-flag.soon{color:#f0b35a}
[data-theme="dark"] .forms-req{color:#ff8a93}
/* Reseller tier chip: the light-mode #7a4ec0 is too dark on a dark surface. */
[data-theme="dark"] .crm-tier-reseller{color:#b98bff;
  background:color-mix(in srgb,#b98bff 16%,transparent)}
/* CRM import warning rows: keep the amber readable on dark. */
[data-theme="dark"] .crm-imp-warn{
  background:color-mix(in srgb,#f0b35a 10%,var(--surface));
  border-color:color-mix(in srgb,#f0b35a 35%,var(--border))}
/* Bare <a> elements (e.g. the account link in a deal/contact aside) have no
   color rule, so they inherit the UA default link blue (#00e) — readable but
   harsh on dark. Give unclassed links the accent color in dark only. Every
   styled link (.navlink, .kv a, .crumbs a, …) sets its own color and wins on
   specificity, so this only catches the strays. Light mode keeps UA defaults
   exactly as before (no light a{} rule is added). */
[data-theme="dark"] a:not([class]){color:var(--accent)}
[data-theme="dark"] a:not([class]):hover{color:var(--accent-hover)}
/* .attach-chip is an <a> with no color rule, so it inherits the UA default
   link blue (#00e) — harsh on dark. Render chip links as theme text (matches
   how the chip already looks in light, which uses the same default but reads
   tolerably). Light mode is unchanged. */
[data-theme="dark"] a.attach-chip{color:var(--text);text-decoration:none}
[data-theme="dark"] a.attach-chip:hover{border-color:var(--accent);color:var(--accent)}
/* White button labels (owner request): solid accent fills deepen to
   --accent-fill so white text hits AA (4.7:1 rest, 5.4:1 hover); --accent
   itself stays bright because ghost buttons, active side-links, and links use
   it as TEXT on dark surfaces. The done-state milestone check keeps a dark
   glyph — white on the bright --ok green would vanish. */
[data-theme="dark"] .btn:not(.btn-ghost){background:var(--accent-fill);border-color:var(--accent-fill)}
[data-theme="dark"] .btn:not(.btn-ghost):hover{background:var(--accent-fill-hover);border-color:var(--accent-fill-hover)}
[data-theme="dark"] .brand-mark,
[data-theme="dark"] .btn-active,
[data-theme="dark"] .inbox-tab.is-active .inbox-tab-count,
[data-theme="dark"] .inbox-chip.is-active,
[data-theme="dark"] .inbox-count-badge{background:var(--accent-fill)}
[data-theme="dark"] .btn-active,
[data-theme="dark"] .inbox-chip.is-active{border-color:var(--accent-fill)}
[data-theme="dark"] .ms-item.is-done .ms-check{color:#0d1020}
/* Styled scrollbars so the boards/tables don't show a bright OS scrollbar. */
[data-theme="dark"] ::-webkit-scrollbar{width:11px;height:11px}
[data-theme="dark"] ::-webkit-scrollbar-track{background:transparent}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#363c4b;
  border-radius:8px;border:2px solid var(--bg)}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#454c5e}
[data-theme="dark"]{scrollbar-color:#363c4b transparent}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
  line-height:1.5;font-size:15px;-webkit-font-smoothing:antialiased}

/* ── App shell ───────────────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;
  height:var(--topbar-h);padding:0 16px;color:var(--text);
  background:linear-gradient(180deg,#ffffff,#fbfbfc);
  border-bottom:1px solid var(--border);box-shadow:0 1px 2px rgba(20,22,30,.045)}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:680;color:var(--text);
  text-decoration:none;letter-spacing:-.015em;white-space:nowrap;padding-right:2px}
.brand-mark{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;
  background:var(--accent);color:var(--accent-text);font-weight:700;font-size:.95rem}
.topbar-spacer{margin-left:auto}
/* Vertical hairline that separates the topbar's three zones (brand · rail ·
   actions) so the rail reads as a defined lane, not icons loose on a slab. */
.topbar-rule{flex:0 0 1px;align-self:stretch;width:1px;margin:14px 6px;background:var(--border)}
.who{color:var(--muted);font-size:.9rem}

.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-sm);
  border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;
  text-decoration:none;transition:background .12s,color .12s,border-color .12s}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.sb-burger{display:none}

/* Feature rail — the topbar's icon-per-feature navigation (replaces the old
   module-switcher dropdown). A uniform row of minimal glyphs that fills the
   middle zone; the current area is marked the way a top-level tab bar marks
   its current tab — an accent glyph plus a short accent underline flush to the
   topbar's bottom edge. Every label stays in the DOM (clipped) for screen
   readers, surfaced visually as a pure-CSS tooltip on hover; the page's own
   area heading carries the name, so the rail itself stays text-free and evenly
   weighted. Below the sidebar breakpoint the rail scrolls horizontally. */
.rail{display:flex;align-items:stretch;gap:0;min-width:0;flex:1 1 auto;
  justify-content:center;height:100%}
/* Each link is an equal-width, full-height target so the row keeps a steady
   rhythm across the bar (no single item balloons). The grow is capped so a
   feature-light tenant clusters in the centre instead of spreading thin. */
.rail-link{position:relative;display:inline-flex;align-items:center;justify-content:center;
  flex:1 1 0;max-width:84px;height:100%;color:var(--muted);text-decoration:none;
  transition:color .14s}
/* The glyph carries its own rounded hover/active chip (padded content-box) so
   the hit area stays generous without a heavy full-height button. */
.rail-link svg{display:block;width:20px;height:20px;box-sizing:content-box;padding:7px;
  border-radius:10px;transition:background .14s,color .14s}
.rail-link:hover{color:var(--text)}
.rail-link:hover svg{background:var(--surface-2)}
.rail-link.active{color:var(--accent)}
.rail-link.active svg{background:var(--sidebar-active)}
/* Current-tab underline, anchored to the very bottom of the topbar. */
.rail-link.active::before{content:"";position:absolute;left:50%;bottom:0;translate:-50% 0;
  width:24px;height:2.5px;border-radius:3px 3px 0 0;background:var(--accent)}
.rail-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}
.rail-div{flex:0 0 1px;align-self:center;height:22px;margin:0 7px;background:var(--border)}
/* Tooltip: the area's label, under the glyph after a beat (desktop hover only). */
.rail-link::after{content:attr(data-tip);position:absolute;top:calc(100% - 3px);left:50%;
  translate:-50% -2px;z-index:60;padding:4px 9px;border-radius:6px;background:var(--text);
  color:var(--bg);font-size:.72rem;font-weight:550;white-space:nowrap;pointer-events:none;
  opacity:0;visibility:hidden;box-shadow:0 4px 12px rgba(20,22,30,.18);
  transition:opacity .12s .3s,translate .12s .3s,visibility 0s .42s}
@media (hover:hover){
  .rail-link:hover::after{opacity:1;visibility:visible;translate:-50% 0;
    transition:opacity .12s .3s,translate .12s .3s,visibility 0s .3s}
}

.theme-toggle .i-moon{display:none}
[data-theme="dark"] .theme-toggle .i-sun{display:none}
[data-theme="dark"] .theme-toggle .i-moon{display:block}

/* Body: sidebar + fluid main */
.app-body{display:flex;align-items:flex-start}
.app-sidebar{flex:0 0 var(--sidebar-w);position:sticky;top:var(--topbar-h);
  height:calc(100dvh - var(--topbar-h));overflow-y:auto;padding:14px 12px;
  background:var(--sidebar-bg);border-right:1px solid var(--border)}
.app-sidebar:empty{display:none}
.app-main{flex:1 1 auto;min-width:0}
.container{max-width:var(--content-max);margin:28px auto;padding:0 28px}

/* Sidebar navigation */
.side{display:flex;flex-direction:column;height:100%}
.side-head{padding:4px 10px 12px;font-size:1rem;font-weight:650;letter-spacing:-.01em}
.side-section{margin-top:14px;padding:0 10px 6px;font-size:.7rem;font-weight:650;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.side-link{display:flex;align-items:center;gap:9px;padding:8px 10px;margin:1px 0;
  border-radius:var(--radius-sm);color:var(--text);text-decoration:none;font-size:.9rem;
  line-height:1.2;transition:background .1s,color .1s}
.side-link:hover{background:var(--surface-2)}
.side-link.active{background:var(--sidebar-active);color:var(--accent);font-weight:600}
.side-link svg{flex:0 0 auto;color:var(--muted)}
.side-link.active svg{color:var(--accent)}
.side-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--border)}
.side-user{display:flex;flex-direction:column;padding:4px 10px 10px;line-height:1.3}
.side-user .nm{font-weight:600;font-size:.9rem}
.side-user .rl{font-size:.78rem;color:var(--muted)}
.side-foot form{margin:0}
.side-foot .btn{width:100%}

/* Off-canvas sidebar on narrow screens */
.sb-scrim{display:none}
@media (max-width:960px){
  .sb-burger{display:inline-grid}
  /* The rail keeps cross-feature nav on small screens: icons only (the active
     pill drops its label), horizontally scrollable, scrollbar hidden. The
     overflow clip is also why tooltips are desktop-only — they'd be cut off. */
  /* justify flex-start so the leading icons stay at the scroll origin and
     remain reachable once the row overflows. */
  .rail{overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
  .rail-link{flex:0 0 auto;width:46px}
  .rail::-webkit-scrollbar{display:none}
  .rail-link::after{display:none}
  .topbar-rule{display:none}
  .app-sidebar{position:fixed;top:var(--topbar-h);left:0;z-index:45;width:280px;flex-basis:280px;
    transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 8px 30px rgba(0,0,0,.18)}
  .sb-checkbox:checked ~ .app-body .app-sidebar{transform:translateX(0)}
  .sb-checkbox:checked ~ .app-body .sb-scrim{display:block;position:fixed;inset:var(--topbar-h) 0 0 0;
    z-index:44;background:rgba(10,12,18,.42)}
  .container{padding:0 18px}
}
@media (prefers-reduced-motion:reduce){.app-sidebar{transition:none}.rail-link::after{transition:none}}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space)}
.page-head h1{margin:0}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;margin-bottom:var(--space);box-shadow:var(--shadow)}
.card.narrow{max-width:440px;margin-left:auto;margin-right:auto}
h1{font-size:1.45rem;margin:0 0 16px;letter-spacing:-.01em}
.lead{color:var(--muted);margin:0 0 20px}

.field{display:block;margin-bottom:16px}
.field-label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:5px}
.field-input{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg);color:var(--text);font:inherit;transition:border-color .12s,box-shadow .12s}
.field-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.fieldset{border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;margin:0 0 16px}
.fieldset legend{padding:0 6px;font-size:.82rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;
  border:1px solid var(--accent);border-radius:var(--radius-sm);background:var(--accent);
  color:var(--accent-text);font:inherit;font-weight:550;cursor:pointer;text-decoration:none;
  transition:background .12s,border-color .12s}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-sm{padding:6px 11px;font-size:.86rem}
.btn-ghost{background:transparent;color:var(--accent);border-color:var(--border)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--border)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:var(--danger-text)}
.btn-danger:hover{filter:brightness(.94)}

.actions{display:flex;gap:10px;align-items:center;margin-top:8px}

/* Wide tables scroll horizontally within their card instead of pushing the
   page off-screen. The wrapper is added around every table by a small script
   in base.html (so no per-page markup is needed); this rule is the fallback
   styling and also applies if a template wraps a table directly. */
.table-scroll{overflow-x:auto;max-width:100%}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
th{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
td.strong{font-weight:550}
.col-actions{text-align:right;white-space:nowrap}
.col-actions form{display:inline}
.col-actions .btn{margin-left:6px}
td.empty{color:var(--muted);text-align:center;padding:28px 12px}
code{font-family:var(--mono);font-size:.86em;background:var(--surface-2);padding:1px 6px;border-radius:4px}
.badge{display:inline-block;padding:2px 9px;font-size:.78rem;border-radius:999px;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}

.flash{padding:10px 14px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:.92rem}
.flash-error{background:color-mix(in srgb,var(--danger) 12%,var(--surface));
  color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 35%,var(--border))}
.flash-ok{background:color-mix(in srgb,var(--ok) 12%,var(--surface));
  color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 35%,var(--border))}

h2{font-size:1.1rem;margin:0 0 12px}
.muted{color:var(--muted)}
.navlink{color:var(--muted);text-decoration:none;font-size:.9rem}
.navlink:hover{color:var(--text)}
.badge-accent{background:color-mix(in srgb,var(--accent) 14%,var(--surface));
  color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}
.badge-ok{background:color-mix(in srgb,var(--ok) 14%,var(--surface));
  color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,var(--border))}
.badge-danger{background:color-mix(in srgb,var(--danger) 14%,var(--surface));
  color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,var(--border))}
.feature-row a{color:var(--accent);text-decoration:none;font-weight:550}
.feature-row a:hover{text-decoration:underline}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space)}
@media (max-width:640px){.grid-2{grid-template-columns:1fr}}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space)}
@media (max-width:760px){.grid-3{grid-template-columns:1fr}}
.stat .num{font-size:1.7rem;font-weight:650;letter-spacing:-.01em;margin:2px 0 0}
.stat .label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.card-link{display:block;text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s}
.card-link:hover{border-color:var(--accent)}
.check{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:.92rem;color:var(--muted)}
.inline-form{display:flex;gap:8px;align-items:center;margin-top:16px;flex-wrap:wrap}
.field-input.compact{width:auto;min-width:160px}
.feature-list{display:flex;flex-direction:column;gap:10px}
.feature-row{padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg)}
.attachments{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.attach-chip{display:inline-flex;align-items:center;gap:4px;font-size:.85rem;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:2px 8px}
.attach-x{border:none;background:none;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1;padding:0}
.attach-up{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.attach-up input[type=file]{min-width:0;max-width:100%;font-size:.85rem}
.labelchip{display:inline-block;padding:1px 8px;border-radius:10px;font-size:.78rem;color:#fff;white-space:nowrap}
.assignee-chip{display:inline-block;font-size:.78rem;color:var(--muted,#6b7280)}

/* ── Layout utilities for data-dense pages ───────────────────────────────── */
/* Responsive launchpad grid: cards flow to fill the width, 1→4 across. */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:var(--space)}
.card-grid .card{margin-bottom:0;height:100%}
.section-head{display:flex;align-items:baseline;gap:10px;margin:26px 0 12px}
.section-head:first-child{margin-top:0}
.section-head h2{margin:0}
.section-head .hint{font-size:.85rem;color:var(--muted)}

/* Two-column detail: primary content + sticky aside summary. */
.detail-2col{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space);align-items:start}
.detail-2col .aside{position:sticky;top:calc(var(--topbar-h) + 20px)}
@media (max-width:1024px){.detail-2col{grid-template-columns:1fr}.detail-2col .aside{position:static}}

/* Richer table cells: a bold primary value with a muted supporting line, so a
   row carries more without spending a whole column on each field. */
.cell-primary{font-weight:600}
.cell-sub{display:block;color:var(--muted);font-size:.82rem;margin-top:1px}
.cell-primary a{color:var(--accent);text-decoration:none}
.cell-primary a:hover{text-decoration:underline}

/* Compact key/value list for summary asides. */
.kv{display:flex;flex-direction:column;gap:12px}
.kv .field-label{margin-bottom:2px}
.kv p{margin:0}

/* ── Knowledge base (wiki) ───────────────────────────────────────────────── */
/* Breadcrumb trail above a page title. */
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:6px}
.crumbs a{color:var(--accent);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* Plain unstyled list used for recent pages / sub-pages / search results. */
.plain-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.plain-list a{color:var(--accent);text-decoration:none}
.plain-list a:hover{text-decoration:underline}

/* Page-tree indentation in a space view (depth-tagged rows). */
.kb-indent-1{padding-left:28px}
.kb-indent-2{padding-left:52px}
.kb-indent-3{padding-left:76px}
.kb-indent-4{padding-left:100px}
.kb-indent-5{padding-left:124px}
.kb-indent-6{padding-left:148px}

/* Rendered Markdown typography — readable prose inside a content card. */
.kb-content{line-height:1.6}
.kb-content > :first-child{margin-top:0}
.kb-content > :last-child{margin-bottom:0}
.kb-content h1,.kb-content h2,.kb-content h3,.kb-content h4{margin:1.2em 0 .5em;line-height:1.25}
.kb-content h1{font-size:1.5rem}
.kb-content h2{font-size:1.25rem;border-bottom:1px solid var(--border);padding-bottom:.2em}
.kb-content h3{font-size:1.08rem}
.kb-content p,.kb-content ul,.kb-content ol,.kb-content table,.kb-content pre,.kb-content blockquote{margin:.7em 0}
.kb-content ul,.kb-content ol{padding-left:1.5em}
.kb-content li{margin:.25em 0}
.kb-content a{color:var(--accent)}
.kb-content code{font-family:var(--mono);font-size:.9em;background:var(--surface-2);padding:.1em .35em;border-radius:4px}
.kb-content pre{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;overflow-x:auto}
.kb-content pre code{background:none;padding:0;font-size:.85rem}
.kb-content blockquote{border-left:3px solid var(--border);padding-left:1em;color:var(--muted);margin-left:0}
.kb-content table{border-collapse:collapse;width:auto}
.kb-content th,.kb-content td{border:1px solid var(--border);padding:6px 10px;text-align:left}
.kb-content th{background:var(--surface-2)}
.kb-content img{max-width:100%;height:auto}

/* Version diff: green additions, red deletions, monospace. */
.kb-diff{font-family:var(--mono);font-size:.82rem;white-space:pre-wrap;line-height:1.5;margin:0}
.kb-diff ins{background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok);text-decoration:none}
.kb-diff del{background:color-mix(in srgb,var(--danger) 20%,transparent);color:var(--danger);text-decoration:none}

/* ── Project tracker (Kanban board + issue chrome) ───────────────────────── */
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;align-items:flex-start}
.board-col{flex:0 0 280px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:10px}
.board-col-head{font-weight:600;font-size:.85rem;margin-bottom:8px;display:flex;justify-content:space-between}
.board-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:8px 10px;margin-bottom:8px;text-decoration:none;color:var(--text);box-shadow:var(--shadow)}
.board-card:hover{border-color:var(--accent)}
.board-card-key{display:flex;gap:6px;align-items:center;font-size:.8rem;margin-bottom:4px}
.board-card-summary{font-size:.9rem}
.board-empty{padding:6px;text-align:center;font-size:.85rem}
.badge-prio-low{background:var(--surface-2);color:var(--muted)}
.badge-prio-medium{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.badge-prio-high{background:color-mix(in srgb,#c47a1a 22%,transparent);color:#9a5e10}
.badge-prio-urgent{background:color-mix(in srgb,var(--danger) 20%,transparent);color:var(--danger)}
.comment{border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;margin-bottom:8px;background:var(--surface)}

/* ── KB modern page experience (A2) ──────────────────────────────────────── */
.kb-title{display:flex;align-items:center;gap:.5rem;margin:0}
.kb-page-icon{font-size:1.6rem;line-height:1}
.kb-meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;color:var(--muted);font-size:.82rem;margin:.1rem 0 1rem}
.kb-meta span{display:inline-flex;align-items:center}
.kb-badge{background:var(--surface-2);border:1px solid var(--border);border-radius:4px;padding:0 .4em;font-size:.72rem;font-weight:600;letter-spacing:.03em}
/* table of contents */
.kb-toc ul{list-style:none;margin:0;padding:0}
.kb-toc li{margin:.15rem 0}
.kb-toc a{color:var(--muted);text-decoration:none;font-size:.86rem;display:block;border-left:2px solid transparent;padding-left:.6rem}
.kb-toc a:hover{color:var(--accent);border-left-color:var(--accent)}
.kb-toc-l3{padding-left:.8rem}
.kb-content :is(h2,h3){scroll-margin-top:72px}
/* editor */
.kb-form-row{display:flex;gap:var(--space)}
.kb-icon-field{flex:0 0 5rem}
.kb-title-field{flex:1 1 auto}
.kb-fmt{margin-right:1rem;font-size:.9rem}
.kb-editor{position:relative;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.kb-toolbar{display:flex;flex-wrap:wrap;gap:2px;padding:6px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.kb-toolbar button{min-width:30px;height:28px;border:1px solid transparent;background:transparent;border-radius:var(--radius-sm);
  color:var(--text);cursor:pointer;font-size:.85rem;padding:0 6px}
.kb-toolbar button:hover{background:var(--surface);border-color:var(--border)}
.kb-split{display:grid;grid-template-columns:1fr 1fr}
.kb-source{border:0;border-radius:0;border-right:1px solid var(--border);resize:vertical;min-height:24rem;
  font-family:var(--mono);font-size:.88rem;line-height:1.55}
.kb-source:focus{outline:none;box-shadow:none}
.kb-source.kb-drag{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.kb-preview{padding:12px 16px;overflow-y:auto;max-height:32rem;background:var(--surface)}
.kb-preview:empty::before{content:"Preview";color:var(--muted);font-size:.85rem}
.kb-slash{position:absolute;z-index:20;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);padding:4px;display:flex;flex-direction:column;min-width:170px;left:8px;top:44px}
.kb-slash button{text-align:left;background:transparent;border:0;color:var(--text);padding:6px 10px;border-radius:4px;cursor:pointer;font-size:.88rem}
.kb-slash button:hover{background:var(--surface-2)}
@media (max-width:760px){.kb-split{grid-template-columns:1fr}.kb-source{border-right:0;border-bottom:1px solid var(--border)}.kb-form-row{flex-direction:column}}
/* left-nav: favourites / recent / tree */
.side-sub{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:.8rem 0 .25rem;padding:0 .2rem}
.side-pg{font-size:.86rem;padding-top:5px;padding-bottom:5px}
.kb-pg-ico{display:inline-block;width:1.2em;text-align:center;margin-right:.1rem;flex:0 0 auto}
.kb-tree-item{cursor:pointer}
.kb-tree-item[draggable=true]:active{opacity:.6}
.kb-tree-item.kb-drop{outline:2px dashed var(--accent);outline-offset:-2px;border-radius:var(--radius-sm)}
.kb-actions{display:inline-flex;gap:4px;align-items:center}
.kb-star-form{display:inline}
.kb-star-form button{font-size:1rem;line-height:1;color:var(--accent)}

/* Document Library */
.breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 16px;font-size:.95rem}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--text);text-decoration:underline}
.breadcrumb a:last-child{color:var(--text);font-weight:600}
.crumb-sep{color:var(--muted);opacity:.55}
.file-row-ico{vertical-align:-4px;margin-right:9px;color:var(--muted);flex:0 0 auto}
.files-table td.cell-primary a{display:inline-flex;align-items:center}
.row-actions{text-align:right;white-space:nowrap}
.btn-danger-text{color:var(--danger)}

/* File-manager header actions + popover menu (New folder) */
.head-actions{display:flex;align-items:center;gap:8px}
.head-actions .btn svg{margin-right:6px}
.popmenu{position:relative;display:inline-block}
.popmenu>summary{list-style:none;cursor:pointer}
.popmenu>summary::-webkit-details-marker{display:none}
.popmenu-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:260px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(20,22,30,.16);padding:10px;display:flex;gap:8px;align-items:center}

/* Upload dropzone + queue */
.file-upload{margin-bottom:var(--space)}
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:22px 16px;border:1.5px dashed var(--border);border-radius:var(--radius);
  background:var(--surface-2);color:var(--muted);text-align:center;cursor:pointer;
  transition:border-color .12s,background .12s,color .12s}
.dropzone:hover{border-color:var(--accent);color:var(--text)}
.dropzone svg{color:var(--accent)}
.dropzone.is-drag{border-color:var(--accent);border-style:solid;
  background:color-mix(in srgb,var(--accent) 10%,var(--surface));color:var(--text)}
.dz-text strong{color:var(--text)}
.dz-hint{font-size:.8rem}
.dz-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.upload-queue{margin-top:12px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:10px 12px}
.uq-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.uq-title{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.uq-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.uq-item{display:flex;align-items:flex-start;gap:10px;padding:6px 0}
.uq-ico{flex:0 0 auto;display:inline-flex;color:var(--muted);margin-top:1px}
.uq-done .uq-ico{color:var(--ok)}
.uq-failed .uq-ico{color:var(--danger)}
.uq-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.uq-name{font-size:.9rem;font-weight:550;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uq-meta{font-size:.8rem;color:var(--muted)}
.uq-failed .uq-status{color:var(--danger)}
.uq-done .uq-status{color:var(--ok)}
.uq-bar{display:block;height:5px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.uq-done .uq-bar,.uq-failed .uq-bar{display:none}
.uq-fill{display:block;height:100%;width:0;background:var(--accent);transition:width .15s ease}

/* KB linked documents (Confluence model: pages reference library files) */
.doclinks{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
/* two-line rows: name (+ unlink) on top, size · library beneath */
.doclinks li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;row-gap:1px}
.doclinks li>a{display:inline-flex;align-items:center;gap:7px;color:var(--accent);
  text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doclinks li>a:hover{text-decoration:underline}
.doclinks li>a svg{flex:0 0 auto;color:var(--muted)}
.doclink-meta{grid-column:1;color:var(--muted);font-size:.8rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;margin-left:23px}
.doclink-x{display:inline-flex;grid-row:1;grid-column:2}
.doclink-add{display:flex;gap:6px;align-items:center}
.doclink-add .field-input{flex:1;min-width:0}

/* Document detail page (preview + metadata + version history) */
.doc-labels{display:flex;flex-wrap:wrap;gap:6px;margin:-6px 0 14px}
.doc-label{font-size:.72rem}
.doc-preview{padding:0;overflow:hidden}
.doc-preview-frame{display:block;width:100%;height:72vh;border:0;background:var(--surface-2)}
.doc-preview-img{display:block;max-width:100%;margin:0 auto;padding:16px}
.doc-preview-md{padding:24px}
.doc-preview-text{margin:0;padding:20px 24px;font-family:var(--mono);font-size:.84rem;line-height:1.55;
  overflow:auto;max-height:72vh;white-space:pre-wrap;word-break:break-word}
.doc-preview-none{display:flex;flex-direction:column;align-items:center;gap:8px;padding:56px 24px;color:var(--muted)}
.doc-preview-none svg{opacity:.6}
.doc-preview-none p{margin:0}
/* DOCX preview: a paper-like rendering of the WordprocessingML body */
.docx-notice{margin:0;padding:9px 16px;font-size:.82rem;color:var(--muted);
  background:var(--surface-2);border-bottom:1px solid var(--border)}
.docx-view{padding:32px 40px;max-height:78vh;overflow:auto;line-height:1.5;
  font-size:.95rem;color:var(--text);word-wrap:break-word}
.docx-view h1,.docx-view h2,.docx-view h3,.docx-view h4,.docx-view h5,.docx-view h6{
  margin:1.1em 0 .5em;line-height:1.25;font-weight:600}
.docx-view h1{font-size:1.7rem}.docx-view h2{font-size:1.4rem}.docx-view h3{font-size:1.18rem}
.docx-view h4{font-size:1.05rem}.docx-view h5,.docx-view h6{font-size:.95rem}
.docx-view p{margin:0 0 .65em}
.docx-view ul,.docx-view ol{margin:0 0 .65em;padding-left:1.6em}
.docx-view li{margin:.15em 0}
.docx-view a{color:var(--accent)}
.docx-img{max-width:100%;height:auto}
.docx-img-ph{display:inline-block;padding:2px 8px;border:1px dashed var(--border);
  border-radius:var(--radius-sm);color:var(--muted);font-size:.85rem}
.docx-table{border-collapse:collapse;width:100%;margin:0 0 1em;font-size:.9rem}
.docx-table td{border:1px solid var(--border);padding:6px 9px;vertical-align:top}
.docx-table td>p:last-child{margin-bottom:0}
.docx-unsupported{margin:.5em 0;padding:6px 12px;font-size:.82rem;color:var(--muted);
  background:var(--surface-2);border:1px dashed var(--border);border-radius:var(--radius-sm)}
/* Basic Office editor — formatting ribbon */
.docx-editor-card{padding:0;overflow:hidden}
.docx-ribbon{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:7px 10px;
  background:linear-gradient(var(--surface-2),var(--surface));
  border-bottom:1px solid var(--border);position:sticky;top:var(--topbar-h);z-index:3}
.docx-grp{display:flex;align-items:center;gap:2px;padding:0 6px;
  border-right:1px solid var(--border)}
.docx-grp:last-child{border-right:0}
.docx-tb{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;
  padding:0 7px;border:1px solid transparent;border-radius:var(--radius-sm);
  background:transparent;color:var(--text);font-size:.92rem;cursor:pointer;line-height:1;transition:background .1s,border-color .1s}
.docx-tb:hover{background:var(--surface-2);border-color:var(--border)}
.docx-tb:active{transform:translateY(1px)}
.docx-tb.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.docx-tb-bold{font-weight:800}
.docx-tb-ital{font-style:italic;font-family:Georgia,serif}
.docx-tb-undr{text-decoration:underline}
.docx-tb-strk{text-decoration:line-through}
.docx-sel{height:30px;max-width:160px;padding:0 6px;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:.85rem;cursor:pointer}
.docx-sel-font{min-width:120px}
.docx-sel-size{width:64px}
.docx-color{display:inline-flex;align-items:center;justify-content:center;position:relative;
  width:30px;height:30px;border-radius:var(--radius-sm);cursor:pointer;color:var(--text)}
.docx-color:hover{background:var(--surface-2)}
.docx-color-ico{font-weight:700;font-size:.95rem;line-height:1}
.docx-color input[type=color]{position:absolute;left:3px;right:3px;bottom:3px;width:auto;height:5px;
  padding:0;border:0;background:none;cursor:pointer}
.docx-color input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.docx-color input[type=color]::-webkit-color-swatch{border:0;border-radius:1px}
.docx-edit{outline:none;min-height:60vh}
.docx-edit:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.docx-edit img{cursor:default}
/* Table of contents */
.docx-toc{margin:0 0 1.6em}
.docx-toc-row{display:flex;align-items:baseline;gap:8px;margin:3px 0;font-size:.92rem}
.docx-toc-l1{font-weight:600;margin-top:.5em}
.docx-toc-l2{padding-left:1.6em}
.docx-toc-l3{padding-left:3.2em;font-size:.88rem;color:var(--muted)}
.docx-toc-title{flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.docx-toc-dots{flex:1 1 auto;align-self:flex-end;border-bottom:1px dotted var(--border);
  margin-bottom:.28em;min-width:1.5em}
.docx-toc-page{flex:none;color:var(--muted);font-variant-numeric:tabular-nums}
.docx-edit .docx-toc{background:var(--surface-2);border:1px dashed var(--border);
  border-radius:var(--radius-sm);padding:12px 14px;position:relative}
.docx-edit .docx-toc::before{content:"Table of contents (auto-generated — kept intact)";
  display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);margin-bottom:6px}
.doc-desc{margin:0;white-space:pre-wrap}
.doc-meta{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0;font-size:.88rem}
.doc-meta dt{color:var(--muted)}
.doc-meta dd{margin:0;min-width:0;overflow-wrap:anywhere}
.narrow-wide{max-width:620px}
.form-actions{display:flex;gap:10px;margin-top:6px}

/* Library tags: chips, search/filter bar, sortable headers, manage panel */
.filter-bar{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--space)}
.search-form{display:flex;align-items:center;gap:8px}
.search-form svg{color:var(--muted);flex:0 0 auto}
.search-form .field-input{max-width:480px}
.tag-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tag-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;
  font-size:.78rem;text-decoration:none;color:var(--text);
  border:1px solid color-mix(in srgb,var(--lc,#6b7280) 45%,var(--border));
  background:color-mix(in srgb,var(--lc,#6b7280) 12%,var(--surface))}
.tag-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lc,#6b7280);flex:0 0 auto}
.tag-chip:hover{border-color:var(--lc,#6b7280)}
.tag-chip.active{background:color-mix(in srgb,var(--lc,#6b7280) 30%,var(--surface));border-color:var(--lc,#6b7280);font-weight:600}
.tag-chip.mini{padding:1px 8px;font-size:.7rem;gap:5px}
.tag-count{opacity:.65;font-size:.92em}
.tag-clear{color:var(--muted);font-size:.8rem;text-decoration:none;margin-left:4px}
.tag-clear:hover{color:var(--text)}
.sort-link{color:inherit;text-decoration:none;white-space:nowrap}
.sort-link:hover{color:var(--accent)}
.search-summary{margin:0 0 12px}
.tag-manage>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tag-manage>summary::-webkit-details-marker{display:none}
.tag-manage>summary h2{margin:0;font-size:1.05rem}
.tag-manage-body{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.tag-add{display:flex;gap:8px;align-items:center;max-width:480px}
.tag-add .btn{white-space:nowrap}
.tag-color{width:34px;height:34px;flex:0 0 auto;padding:2px;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--bg);cursor:pointer}
.tag-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tag-list li{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tag-edit{display:flex;gap:8px;align-items:center;flex:1;min-width:260px;max-width:480px}
.tag-edit .field-input{flex:1;min-width:0}
.tag-usage{white-space:nowrap;font-size:.8rem}
.label-picks{display:flex;flex-wrap:wrap;gap:8px}
.tag-pick{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.tag-pick input{position:absolute;opacity:0;pointer-events:none}
.tag-pick span{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;
  font-size:.8rem;border:1px solid var(--border);background:var(--surface-2);color:var(--text)}
.tag-pick span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lc,#6b7280)}
.tag-pick input:checked+span{background:color-mix(in srgb,var(--lc,#6b7280) 18%,var(--surface));
  border-color:var(--lc,#6b7280);font-weight:600}
.tag-pick input:focus-visible+span{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}

/* Inline row actions (no kebab menus) + inline rename row */
.icon-act{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:var(--radius-sm);
  border:none;background:transparent;color:var(--muted);cursor:pointer;text-decoration:none;
  vertical-align:middle;transition:background .1s,color .1s}
.icon-act:hover{background:var(--surface-2);color:var(--text)}
.icon-act-danger:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}
.icon-act-form{display:inline-block;margin:0;vertical-align:middle}
.inline-rename{display:flex;align-items:center;gap:8px}
.inline-rename .file-row-ico{margin-right:0}
.inline-rename .field-input{flex:1;min-width:0;max-width:400px;padding:6px 10px}

/* Library access settings */
.radio-row{display:flex;align-items:baseline;gap:8px;margin:6px 0;cursor:pointer}
.radio-row input{flex:0 0 auto}
.grant-add{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.grant-add select[name="principal"]{flex:1;min-width:220px}
.grant-add select[name="access"]{width:auto;min-width:130px}
.grant-add .btn{white-space:nowrap}
.field-hint{display:block;margin-top:5px;font-size:.8rem}

/* HRM forms + weekly timecards ───────────────────────────────────────────── */
/* Enterprise data-entry chrome for Human Resources: grouped multi-column form
   grids, a polished "add row" entry card, and a weekly-calendar timecard. All
   tokens reused from the design system above; append-only, no overrides. */

/* Multi-column form grid. Long records (charge code, position) read as a tidy
   two-column layout grouped into fieldsets instead of one endless stack. The
   .field children already carry their own bottom margin, which we zero so the
   grid gap controls rhythm. */
.hrm-form{max-width:760px}
.hrm-form .fieldset{margin-bottom:20px}
.hrm-form .fieldset:last-of-type{margin-bottom:16px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px}
.form-grid .field{margin-bottom:12px}
.form-grid .field-input{width:100%}
.field-span2{grid-column:1 / -1}
/* Money / count inputs shouldn't sprawl the full column width. */
.field-amount .field-input,.field-input.amount{max-width:200px}
.input-prefix{position:relative;display:block}
.input-prefix::before{content:"$";position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:.9rem;pointer-events:none}
.input-prefix .field-input{padding-left:22px}
@media (max-width:680px){.form-grid{grid-template-columns:1fr}}

/* Section legend with a touch more presence than the bare .fieldset legend. */
.hrm-form .fieldset legend{font-weight:650}

/* "Add a line" entry card — a self-contained panel that visually belongs to the
   record above it. A labelled header, a responsive field grid (so each input is
   captioned and sized to its content), and a right-aligned action footer. */
.entry-card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;margin-top:4px}
.entry-card-head{font-size:.74rem;font-weight:650;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin:0 0 14px}
.entry-grid{display:grid;gap:12px 16px;align-items:end}
.entry-grid .field{margin:0}
.entry-grid .field-input{width:100%;min-width:0}
/* Timecard add-row: date · charge code · hours · note. */
.entry-grid.tc{grid-template-columns:170px 1fr 110px 1fr}
/* Expense add-row: date · category · charge code · description · amount. */
.entry-grid.exp{grid-template-columns:160px 150px 1fr 1.4fr 150px}
.entry-foot{display:flex;justify-content:flex-end;gap:10px;align-items:center;margin-top:14px}
@media (max-width:880px){.entry-grid.tc,.entry-grid.exp{grid-template-columns:1fr 1fr}
  .entry-grid .field-span2{grid-column:1 / -1}}
@media (max-width:560px){.entry-grid.tc,.entry-grid.exp{grid-template-columns:1fr}}

/* A clear card footer for primary record actions (Submit, Approve). */
.card-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.card-foot .muted{margin:0}

/* Totals strip above a money/hours table. */
.totals-bar{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 0 12px}
.totals-bar .tot-val{font-size:1.35rem;font-weight:650;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.totals-bar .tot-lbl{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}

/* ── Weekly timecard calendar ─────────────────────────────────────────────── */
.week-nav{display:flex;align-items:center;gap:10px}
.week-nav .wk-range{font-weight:600;font-variant-numeric:tabular-nums}
.week-nav .icon-btn{border-color:var(--border)}
.week-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.wk-day{display:flex;flex-direction:column;min-height:150px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.wk-day-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px;
  padding:8px 10px;border-bottom:1px solid var(--border);background:var(--surface)}
.wk-dow{font-size:.7rem;font-weight:650;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.wk-date{font-size:1.05rem;font-weight:650;line-height:1;font-variant-numeric:tabular-nums}
.wk-day.is-today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.wk-day.is-today .wk-day-head{background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.wk-day.is-today .wk-dow{color:var(--accent)}
.wk-day.is-weekend .wk-day-head{background:var(--surface-2)}
.wk-entries{flex:1;display:flex;flex-direction:column;gap:6px;padding:8px}
.wk-entry{position:relative;background:var(--surface);border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:var(--radius-sm);padding:6px 8px;font-size:.82rem}
.wk-entry-hrs{font-weight:650;font-variant-numeric:tabular-nums}
.wk-entry-code{display:block;font-size:.74rem;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.wk-entry-note{display:block;font-size:.74rem;color:var(--muted);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-entry-x{position:absolute;top:3px;right:4px;border:none;background:none;color:var(--muted);
  cursor:pointer;font-size:.95rem;line-height:1;padding:0;opacity:.5;transition:opacity .1s,color .1s}
.wk-entry-x:hover{opacity:1;color:var(--danger)}
.wk-day-tot{margin-top:auto;padding:6px 10px;border-top:1px solid var(--border);
  font-size:.78rem;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.wk-day-tot strong{color:var(--text)}
.wk-empty{flex:1;display:grid;place-items:center;color:var(--muted);font-size:.78rem;padding:10px}
@media (max-width:1100px){.week-cal{grid-template-columns:repeat(4,1fr)}}
@media (max-width:760px){.week-cal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.week-cal{grid-template-columns:1fr}}

/* Notification center + topbar bell */
.bell{position:relative}
.bell-badge{position:absolute;top:3px;right:2px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--danger);color:var(--danger-text);
  font-size:.66rem;font-weight:700;line-height:16px;text-align:center}
.notif-card{padding:8px 0}
.notif-list{list-style:none;margin:0;padding:0}
.notif{display:flex;gap:12px;padding:14px 24px;border-bottom:1px solid var(--border)}
.notif:last-child{border-bottom:none}
.notif-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:transparent;margin-top:7px}
.notif-unread{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.notif-unread .notif-dot{background:var(--accent)}
.notif-body{min-width:0}
.notif-title{color:var(--text);font-weight:600;text-decoration:none}
.notif-title:hover{color:var(--accent)}
.notif-text{margin:3px 0 0;color:var(--muted);font-size:.88rem}
.notif-meta{display:block;margin-top:4px;color:var(--muted);font-size:.78rem}
.notif-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 24px;color:var(--muted)}
.notif-empty svg{opacity:.6}
.notif-empty p{margin:0}

/* Access denied page */
.denied-card{max-width:520px;margin:48px auto;text-align:center;padding:40px 36px}
.denied-card svg{color:var(--muted);opacity:.7}
.denied-card h1{margin:14px 0 8px;font-size:1.25rem}
.denied-card .lead{margin-bottom:22px}
.denied-actions{justify-content:center}
.denied-sent{display:inline-flex;align-items:center;gap:7px;color:var(--ok);font-weight:600;margin:0 0 18px}

/* HRM standard, second pass ──────────────────────────────────────────────── */
/* Bring the remaining HRM data-entry surfaces (evaluation skill lines, candidate
   intake, leave-balance set, manual onboarding, transfer/promote) onto the same
   captioned .entry-grid idiom as expense/timecard add-rows. Column templates
   only; all chrome reuses the first-pass .entry-card / .entry-foot rules. */
.entry-grid.eval{grid-template-columns:1.4fr 110px 110px 1.6fr}
.entry-grid.cand{grid-template-columns:1fr 1fr 1.4fr}
.entry-grid.bal{grid-template-columns:1.3fr 1.3fr 160px}
.entry-grid.start{grid-template-columns:minmax(220px,360px)}
.entry-grid.xfer{grid-template-columns:1.4fr 200px}
@media (max-width:880px){
  .entry-grid.eval,.entry-grid.cand,.entry-grid.bal,.entry-grid.xfer{grid-template-columns:1fr 1fr}}
@media (max-width:560px){
  .entry-grid.eval,.entry-grid.cand,.entry-grid.bal,.entry-grid.start,.entry-grid.xfer{grid-template-columns:1fr}}

/* Recycle bin + inline move */
.move-label{white-space:nowrap;color:var(--muted);font-size:.9rem}
.inline-rename select.field-input{flex:1;min-width:0;max-width:340px;padding:6px 10px}
.flash-inline{padding:12px 18px;color:var(--danger);font-size:.9rem;margin-bottom:var(--space)}
.trash-link-row{margin:0 0 var(--space)}
.trash-link{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:.85rem;text-decoration:none}
.trash-link:hover{color:var(--text)}

/* HRM profile overview ────────────────────────────────────────────────────── */
/* At-a-glance stat strip for the personal HR dashboard: a row of equal cards
   that each link to their HRM section. Reuses the existing .stat .num/.label
   type scale; tokens only, light + dark via var()s. */
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--space);margin-bottom:var(--space)}
.stat-card{display:flex;align-items:center;gap:12px;padding:14px 16px;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s}
.stat-card:hover{border-color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.stat-card .stat-ic{display:flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:var(--radius-sm);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.stat-card .stat-body{display:flex;flex-direction:column;min-width:0}
.stat-card .num{font-size:1.45rem;font-weight:650;letter-spacing:-.01em;line-height:1.1}
.stat-card .label{font-size:.74rem;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;margin-top:2px;line-height:1.25}

/* Smart sign-in: workspace chooser + tenant-login cross-link */
.org-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.org-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface-2);font-weight:600;text-decoration:none;color:inherit}
.org-list a:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--surface-2))}
.org-list a .muted{font-weight:400;font-size:.82rem}
.login-alt{margin:14px 0 0;font-size:.85rem;text-align:center}
.login-alt a{color:var(--muted)}
.login-alt a:hover{color:var(--accent)}
/* HRM standard: expenses + leave types entry cards ───────────────────────── */
/* Lift the "New report" and "New leave type" add-forms off the cramped narrow
   card and onto the captioned full-width .entry-card idiom used elsewhere in
   HRM. Column templates + responsive collapse only; all chrome reuses the
   first-pass .entry-card / .entry-grid / .entry-foot rules. */

/* New report: kind · title (wide) · destination · purpose · period start/end.
   Kind sits at a fixed width with the title beside it on the first row; the
   trip + period fields fall into two clean columns below. */
.entry-grid.exprep{grid-template-columns:160px 1fr 1fr}
.entry-grid.exprep .field-span2{grid-column:2 / -1}

/* Add leave type: code · label · accrual · affects-balance, in one row. */
.entry-grid.ltype{grid-template-columns:150px 1fr 180px minmax(200px,1fr)}

/* A grid cell whose control is a checkbox: caption on top like its siblings,
   the .check row sitting on the field baseline so it lines up with inputs. */
.entry-grid .check-field{gap:0}
.entry-grid .check-field .field-label{margin-bottom:8px}
.entry-grid .check-field .check{margin:0;min-height:38px;align-items:center}

@media (max-width:880px){
  .entry-grid.exprep,.entry-grid.ltype{grid-template-columns:1fr 1fr}
  .entry-grid.exprep .field-span2{grid-column:1 / -1}}
@media (max-width:560px){
  .entry-grid.exprep,.entry-grid.ltype{grid-template-columns:1fr}
  .entry-grid.exprep .field-span2{grid-column:auto}}
/* HRM goals overhaul ───────────────────────────────────────────────────────── */
/* Enterprise goal tracking: a status summary strip, progress-bar goal cards with
   due-date proximity tints, a two-column detail layout (milestone checklist +
   check-in timeline), and a status-coloured progress fill. All tokens reused;
   append-only, no overrides of earlier rules. */

/* New status chip: amber "at risk". (achieved/cancelled/behind reuse ok/—/danger
   badges; on-track reuses badge-accent.) */
.badge-warn{background:color-mix(in srgb,#c47a1a 16%,var(--surface));
  color:#9a5e10;border-color:color-mix(in srgb,#c47a1a 35%,var(--border))}
[data-theme="dark"] .badge-warn{color:#e0a64a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .badge-warn{color:#e0a64a}}

/* Status summary strip: a row of count tiles with a left accent rule per status. */
.goal-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:var(--space)}
.goal-sum{display:flex;flex-direction:column;gap:2px;background:var(--surface);
  border:1px solid var(--border);border-left:3px solid var(--border);
  border-radius:var(--radius);padding:12px 16px}
.goal-sum .gs-num{font-size:1.6rem;font-weight:650;letter-spacing:-.01em;line-height:1;
  font-variant-numeric:tabular-nums}
.goal-sum .gs-lbl{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.goal-sum.on_track{border-left-color:var(--accent)}
.goal-sum.at_risk{border-left-color:#c47a1a}
.goal-sum.behind{border-left-color:var(--danger)}
.goal-sum.achieved{border-left-color:var(--ok)}
@media (max-width:720px){.goal-summary{grid-template-columns:repeat(2,1fr)}}

/* Goal cards (list + team boards). */
.goal-list{display:flex;flex-direction:column;gap:12px}
.goal-group{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  margin:14px 0 2px}
.goal-group:first-child{margin-top:0}
.goal-card{display:block;text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;
  transition:border-color .12s,box-shadow .12s}
.goal-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));box-shadow:var(--shadow)}
.goal-card.is-overdue{border-left:3px solid var(--danger);
  background:color-mix(in srgb,var(--danger) 4%,var(--surface))}
.goal-card.is-soon{border-left:3px solid #c47a1a;
  background:color-mix(in srgb,#c47a1a 5%,var(--surface))}
.goal-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.goal-card-title{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
.goal-card-title .gc-name{font-weight:600;letter-spacing:-.01em}
.goal-owner{font-size:.78rem;font-weight:650;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted)}
.goal-cat{font-size:.72rem;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--border);border-radius:4px;padding:1px 7px;text-transform:lowercase}
.goal-card-meta{display:flex;align-items:center;gap:6px;flex-shrink:0}
.goal-card-desc{margin:8px 0 0;color:var(--muted);font-size:.9rem;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.goal-card-foot{display:flex;align-items:center;gap:14px;margin-top:12px;
  font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.goal-card-foot .gc-pct{font-weight:650;color:var(--text)}
.goal-card-foot .gc-due{margin-left:auto}
.due-flag{font-weight:600;font-size:.78rem}
.due-flag.overdue{color:var(--danger)}
.due-flag.soon{color:#9a5e10}
[data-theme="dark"] .due-flag.soon{color:#e0a64a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .due-flag.soon{color:#e0a64a}}

/* Progress bar (cards + detail). Fill colour follows status. */
.goal-progress{height:7px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin-top:12px}
.goal-progress.lg{height:11px;margin-top:16px}
.goal-progress-fill{height:100%;border-radius:999px;background:var(--accent);
  transition:width .2s ease}
.goal-progress-fill.st-on_track{background:var(--accent)}
.goal-progress-fill.st-at_risk{background:#c47a1a}
.goal-progress-fill.st-behind{background:var(--danger)}
.goal-progress-fill.st-achieved{background:var(--ok)}
.goal-progress-fill.st-cancelled{background:var(--muted)}

/* Goal detail header. */
.goal-detail-head{padding:22px 24px}
.goal-detail-head.is-overdue{border-left:3px solid var(--danger)}
.goal-detail-head.is-soon{border-left:3px solid #c47a1a}
.gdh-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.gdh-title{font-size:1.5rem;margin:0 0 10px;letter-spacing:-.02em}
.gdh-chips{display:flex;flex-wrap:wrap;gap:7px}
.gdh-pct{flex-shrink:0;text-align:right}
.gdh-pct-num{font-size:2.4rem;font-weight:650;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.gdh-pct-sign{font-size:1.1rem;color:var(--muted);margin-left:1px}
.gdh-desc{margin:14px 0 0;color:var(--muted)}
.gdh-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 18px;margin:20px 0 0}
.gdh-facts div{display:flex;flex-direction:column;gap:2px}
.gdh-facts dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.gdh-facts dd{margin:0;font-weight:550}
@media (max-width:680px){.gdh-facts{grid-template-columns:repeat(2,1fr)}
  .gdh-top{flex-direction:column}.gdh-pct{text-align:left}}

/* Two-column body: milestones (main) + check-in (side). */
.goal-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--space);margin-top:var(--space)}
@media (max-width:920px){.goal-cols{grid-template-columns:1fr}}
.goal-col-main,.goal-col-side{display:flex;flex-direction:column;gap:var(--space)}

/* Milestone checklist. */
.ms-list{list-style:none;margin:0 0 4px;padding:0}
.ms-item{display:flex;align-items:center;gap:11px;padding:9px 2px;border-bottom:1px solid var(--border)}
.ms-item:last-child{border-bottom:none}
.ms-check-form{margin:0;display:flex}
.ms-check{display:inline-grid;place-items:center;width:21px;height:21px;flex-shrink:0;
  border:1.5px solid var(--border);border-radius:6px;background:var(--surface);
  color:var(--accent-text);cursor:pointer;padding:0;transition:background .12s,border-color .12s}
.ms-check:hover{border-color:var(--accent)}
.ms-check.static{cursor:default}
.ms-item.is-done .ms-check{background:var(--ok);border-color:var(--ok)}
.ms-title{flex:1;min-width:0}
.ms-item.is-done .ms-title{color:var(--muted);text-decoration:line-through}
.ms-due{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;flex-shrink:0}
.ms-del-form{margin:0;display:flex}
.ms-del{width:30px;height:30px;color:var(--muted)}
.ms-del:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent)}
.ms-empty{color:var(--muted);padding:8px 2px;font-size:.9rem}
.entry-grid.ms{grid-template-columns:1fr 160px}
@media (max-width:520px){.entry-grid.ms{grid-template-columns:1fr}}

/* Check-in form: a native range slider with a live percentage output. */
.ci-range{width:100%;accent-color:var(--accent);cursor:pointer}
.ci-out{font-weight:650;color:var(--accent);font-variant-numeric:tabular-nums}

/* Check-in timeline. */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;
  background:var(--border)}
.tl-item{position:relative;padding:0 0 16px 22px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--accent);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--border)}
.tl-dot.st-at_risk{background:#c47a1a}
.tl-dot.st-behind{background:var(--danger)}
.tl-dot.st-achieved{background:var(--ok)}
.tl-dot.st-cancelled{background:var(--muted)}
.tl-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl-prog{font-weight:650;font-variant-numeric:tabular-nums}
.tl-delta{font-size:.78rem;font-weight:650;font-variant-numeric:tabular-nums}
.tl-delta.up{color:var(--ok)}
.tl-delta.down{color:var(--danger)}
.tl-note{margin:5px 0 0;font-size:.9rem}
.tl-meta{display:block;margin-top:4px;font-size:.78rem;color:var(--muted)}

/* Audit log viewer */
.audit-table{table-layout:auto}
.audit-time{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted)}
.audit-action{font-family:var(--mono);font-size:.82rem}
.audit-ip{font-family:var(--mono);font-size:.82rem;color:var(--muted);white-space:nowrap}
.audit-detail{color:var(--muted);font-size:.88rem;max-width:28ch;overflow:hidden;text-overflow:ellipsis}
.audit-pager{display:flex;align-items:center;gap:14px;margin-top:14px;justify-content:flex-end}
.btn-disabled{opacity:.45;pointer-events:none}

/* CRM: pipeline board + cards */
.crm-stats{margin-bottom:var(--space)}
.crm-stat{display:flex;flex-direction:column;gap:2px}
.crm-stat .field-label{margin-bottom:0}
.crm-stat-num{font-size:1.6rem;font-weight:700;margin:2px 0;color:var(--text)}
.crm-filterbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.crm-filterbar .field-input{width:auto;min-width:160px}
.crm-pipeline-switch{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.btn-active{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
.crm-board .crm-col{flex:0 0 280px}
.crm-col-head{align-items:center}
.crm-col-sum{font-size:.82rem;color:var(--muted);font-weight:600}
.crm-card-wrap{margin-bottom:8px}
.crm-dealcard{margin-bottom:0}
.crm-dealcard-title{font-weight:600;font-size:.9rem;line-height:1.25}
.crm-dealcard-acct{font-size:.8rem;margin-top:1px}
.crm-dealcard-meta{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:6px}
.crm-amount{font-weight:600;font-size:.88rem}
.crm-prob{font-size:.72rem}
.crm-dealcard-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px;font-size:.76rem}
.crm-chip{display:inline-block;padding:1px 7px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.crm-move-form{display:flex;gap:6px;align-items:center;margin-top:6px}
.crm-move-select{flex:1;padding:5px 8px;font-size:.82rem}

/* CRM P2: timeline, custom fields, labels */
.section-head{margin:22px 0 8px;font-size:1.05rem;font-weight:700;color:var(--text)}
.crm-timeline-card .crm-composer{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;
  padding-bottom:14px;border-bottom:1px solid var(--border)}
.crm-kinds{display:flex;gap:14px;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}
.crm-kinds label{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.crm-composer-extra{display:flex;gap:10px;flex-wrap:wrap}
.crm-composer-extra .field{flex:1;min-width:140px}
.crm-tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.crm-tl-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);position:relative}
.crm-tl-item:last-child{border-bottom:none}
.crm-tl-dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;margin-top:5px;
  background:var(--muted);box-shadow:0 0 0 3px color-mix(in srgb,var(--muted) 20%,transparent)}
.crm-tl-note .crm-tl-dot{background:#3b82f6;box-shadow:0 0 0 3px color-mix(in srgb,#3b82f6 20%,transparent)}
.crm-tl-call .crm-tl-dot{background:#10b981;box-shadow:0 0 0 3px color-mix(in srgb,#10b981 20%,transparent)}
.crm-tl-meeting .crm-tl-dot{background:#8b5cf6;box-shadow:0 0 0 3px color-mix(in srgb,#8b5cf6 20%,transparent)}
.crm-tl-task .crm-tl-dot{background:#f59e0b;box-shadow:0 0 0 3px color-mix(in srgb,#f59e0b 20%,transparent)}
.crm-tl-email .crm-tl-dot{background:#06b6d4;box-shadow:0 0 0 3px color-mix(in srgb,#06b6d4 20%,transparent)}
.crm-tl-system .crm-tl-dot{background:var(--border)}
.crm-tl-body{flex:1;min-width:0}
.crm-tl-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.crm-tl-kind{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:var(--muted)}
.crm-tl-time{margin-left:auto;font-size:.78rem;white-space:nowrap}
.crm-tl-text{margin:3px 0 0;white-space:pre-wrap;font-size:.9rem}
.crm-tl-meta{margin-top:3px;font-size:.78rem}
.crm-tl-system{opacity:.7}
.crm-tl-system .crm-tl-text{font-style:italic;color:var(--muted)}
.crm-tl-done{opacity:.6}
.crm-tasklist{list-style:none;margin:0;padding:0}
.crm-task{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border)}
.crm-task:last-child{border-bottom:none}
.crm-task-link{flex:1;min-width:0;font-weight:500}
.crm-task-due{font-size:.8rem;white-space:nowrap}
.crm-labelpick{display:flex;gap:10px;flex-wrap:wrap}
.crm-labelopt{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:.85rem}
.crm-labels{margin-top:10px}
.crm-labels>div{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.crm-rowlabels{display:inline-flex;gap:5px;flex-wrap:wrap;margin-left:8px;vertical-align:middle}
.crm-fieldrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crm-inline-check{display:inline-flex;align-items:center;gap:4px;font-size:.82rem;color:var(--muted);white-space:nowrap}

/* CRM P3a: quote bridge */
.crm-quote-builder{width:100%;border-collapse:collapse}
.crm-quote-builder th{text-align:left;font-size:.78rem;color:var(--muted);font-weight:600;padding:4px 6px}
.crm-quote-builder th.num,.crm-quote-builder td.num,.crm-quote-builder .field-input.num{text-align:right}
.crm-quote-builder td{padding:4px 6px;vertical-align:top}
.crm-quote-builder .field-input.num{max-width:7rem}

/* CRM P3c: partners + funnel */
.crm-tier-referral{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.crm-tier-reseller{background:color-mix(in srgb,#7a4ec0 16%,transparent);color:#7a4ec0}
.crm-tier-strategic{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.crm-tier-other{background:var(--surface-2);color:var(--muted)}
.crm-funnel h2{margin-top:0}
.crm-funnel-steps{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin:14px 0}
.crm-funnel-step{flex:1 1 120px;min-width:110px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius,8px);padding:14px 12px;text-align:center}
.crm-funnel-step-won{background:color-mix(in srgb,var(--ok) 12%,transparent);border-color:color-mix(in srgb,var(--ok) 35%,var(--border))}
.crm-funnel-count{font-size:1.9rem;font-weight:680;letter-spacing:-.02em;margin:0;line-height:1}
.crm-funnel-label{margin:6px 0 0;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.crm-funnel-arrow{display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--muted);
  font-size:.82rem;font-variant-numeric:tabular-nums;position:relative;padding:0 4px}
.crm-funnel-arrow span{background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:2px 8px;font-weight:600}
.crm-funnel-arrow::before{content:"→";position:absolute;color:var(--border);font-size:1.3rem;z-index:0}
.crm-funnel-summary{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.crm-stat{flex:1 1 130px;min-width:120px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius,8px);padding:12px 14px}
.crm-stat-accent{background:color-mix(in srgb,var(--accent) 10%,transparent);border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}
.crm-stat-num{font-size:1.4rem;font-weight:660;letter-spacing:-.01em;margin:0;line-height:1.1}
.crm-stat-label{margin:5px 0 0;font-size:.78rem;color:var(--muted)}
.crm-report-totals td{border-top:2px solid var(--border)}


/* CRM: deal aside layout — linked contacts + files live in the right rail */
.crm-aside-list{list-style:none;margin:0;padding:0}
.crm-aside-list li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}
.crm-aside-list li:last-child{border-bottom:none}
.crm-aside-list li a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.crm-aside-list li form{margin:0}
.crm-aside-form{margin-top:10px;display:flex;flex-direction:column;gap:8px}

/* CRM P4a: reports + forecast */
.crm-report-window{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.crm-report-window .field-label{margin:0}
.crm-report-windownote{font-size:.8rem;margin-left:4px}
.crm-report-section{margin-bottom:var(--space)}
.crm-report-section h2{margin-top:0}
.crm-report-h2note{font-weight:400;font-size:.85rem}
.crm-report-sechead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.crm-report-staleform{display:flex;align-items:center;gap:6px}
.crm-report-staleform .field-label{margin:0}
.crm-stale-input{max-width:5rem}
.crm-report-subhead{font-size:.92rem;margin:16px 0 8px}
.crm-forecast-table{width:100%;border-collapse:collapse}
.crm-forecast-table th.num,.crm-forecast-table td.num{text-align:right}
.crm-lossreasons{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-width:30rem}
.crm-lossreasons li{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius,8px)}
.crm-report-morelink{margin:12px 0 0}
/* Home forecast strip */
.crm-forecast-strip{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:var(--space);
  text-decoration:none;color:inherit;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));
  background:color-mix(in srgb,var(--accent) 6%,transparent)}
.crm-forecast-strip:hover{border-color:var(--accent)}
.crm-fstrip-lead{display:flex;flex-direction:column;gap:2px}
.crm-fstrip-lead .field-label{margin:0}
.crm-fstrip-num{font-size:1.5rem;font-weight:700;margin:2px 0;color:var(--text);line-height:1}
.crm-fstrip-cats{display:flex;gap:18px;flex-wrap:wrap}
.crm-fstrip-cat{display:flex;flex-direction:column;line-height:1.2}
.crm-fstrip-cat strong{font-size:1.02rem}
.crm-fstrip-cat .muted{font-size:.76rem;text-transform:uppercase;letter-spacing:.03em}
.crm-fstrip-link{margin-left:auto;color:var(--accent);font-weight:600;font-size:.85rem}

/* CRM P4b: import + merge */
.page-head-actions{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.crm-import{max-width:none}
.crm-sub{font-size:1rem;margin:0 0 .5rem}
.crm-import-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin:.25rem 0 .75rem}
.crm-import-chips .crm-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .7rem;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;white-space:normal}
.crm-import-chips .crm-chip:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.crm-map-table,.crm-preview-table,.crm-merge-table{width:100%;border-collapse:collapse}
.crm-map-table th,.crm-map-table td,.crm-preview-table th,.crm-preview-table td,.crm-merge-table th,.crm-merge-table td{padding:.45rem .55rem;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.crm-map-sample{color:var(--muted);font-size:.85rem}
.crm-map-cell{display:inline-block;margin-right:.4rem;padding:0 .3rem;background:var(--surface-2);border-radius:4px}
.crm-imp-stats{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:.5rem}
.crm-imp-stat{flex:1 1 130px;min-width:120px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem .8rem;display:flex;flex-direction:column;gap:2px}
.crm-imp-n{font-size:1.5rem;font-weight:700;line-height:1.1;color:var(--text)}
.crm-imp-l{font-size:.78rem;color:var(--muted)}
.crm-imp-ok{border-color:color-mix(in srgb,var(--ok) 35%,var(--border));background:color-mix(in srgb,var(--ok) 8%,var(--surface))}
.crm-imp-warn{border-color:color-mix(in srgb,#c47a1a 35%,var(--border));background:color-mix(in srgb,#c47a1a 8%,var(--surface))}
.crm-imp-bad{border-color:color-mix(in srgb,var(--danger) 35%,var(--border));background:color-mix(in srgb,var(--danger) 8%,var(--surface))}
.crm-row-warn{background:color-mix(in srgb,#c47a1a 7%,transparent)}
.crm-row-bad{background:color-mix(in srgb,var(--danger) 7%,transparent)}
.badge-bad{background:color-mix(in srgb,var(--danger) 14%,var(--surface));color:var(--danger)}
.crm-merge-survivor{display:flex;gap:.5rem;flex-wrap:wrap;margin:.25rem 0 .75rem}
.crm-merge-survivor .crm-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;white-space:normal}
.crm-merge-survivor .crm-chip:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.crm-merge-pick{display:flex;gap:.4rem;align-items:flex-start;cursor:pointer}

/* Setup wizard */
.setup-card{max-width:520px}
.setup-steps{display:flex;gap:.5rem;margin-bottom:1rem;font-size:.8rem}
.setup-step{padding:.25rem .6rem;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--muted)}
.setup-step.active{background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--accent);font-weight:600}
.setup-step.done{background:color-mix(in srgb,var(--ok) 14%,var(--surface));color:var(--ok)}
.setup-warn{padding:.6rem .8rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-size:.86rem;background:color-mix(in srgb,var(--danger) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--danger) 35%,var(--border))}
.setup-testresult{margin:.5rem 0 1rem}
.setup-fields{margin:.5rem 0 1rem;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem .75rem}
.setup-fields summary{cursor:pointer;color:var(--accent);font-size:.86rem}
.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 .75rem;margin-top:.75rem}
.setup-grid .field:nth-last-child(-n+2){grid-column:span 1}
.setting-row{display:flex;gap:1rem;align-items:flex-start;padding:.85rem 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.setting-row:last-child{border-bottom:none}
.setting-meta{flex:1 1 240px;min-width:0}
.setting-meta .field-label{margin-bottom:3px}
.setting-note{display:block;margin-top:4px;font-size:.78rem;color:var(--muted)}
.setting-control{flex:1 1 280px}
.setting-env{background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--accent)}
.setting-check{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem}

/* Sub-organizations */
.suborg-branch{color:var(--muted);font-weight:400;margin-right:.15rem}
tr.suborg-child td:first-child{padding-left:1.6rem}
.org-list li.org-child{padding-left:1.4rem}

/* Password policy meter */
.pwmeter{display:block}
.pwmeter-list{list-style:none;margin:.45rem 0 0;padding:0;font-size:.82rem;color:var(--muted)}
.pwmeter-item{display:flex;align-items:flex-start;gap:.45rem;flex-wrap:wrap;margin:.2rem 0;line-height:1.4}
.pwmeter-mark{flex:0 0 auto;width:1.05em;height:1.05em;margin-top:.05em;border-radius:50%;border:1.5px solid var(--border);position:relative;transition:background .12s,border-color .12s}
.pwmeter-item.met{color:var(--ok)}
.pwmeter-item.met .pwmeter-mark{background:var(--ok);border-color:var(--ok)}
.pwmeter-item.met .pwmeter-mark::after{content:"";position:absolute;left:32%;top:14%;width:26%;height:52%;border:solid var(--surface);border-width:0 2px 2px 0;transform:rotate(45deg)}
.pwmeter-classes{display:inline-flex;flex-wrap:wrap;gap:.3rem;margin-left:.15rem}
.pwmeter-class{display:inline-block;padding:.05rem .4rem;border-radius:var(--radius-sm);border:1px solid var(--border);font-size:.74rem;color:var(--muted);background:var(--surface-2)}
.pwmeter-class.met{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,var(--border));background:color-mix(in srgb,var(--ok) 14%,var(--surface))}

/* Type-to-confirm company deletion */
.confirm-delete{display:inline-flex;gap:6px;align-items:center}
.confirm-delete .confirm-slug{max-width:11rem;font-size:.8rem;padding:4px 8px}

/* Forms: builder + fill */
.filterbar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.filterbar .field{margin:0}
.filterbar .field-input{width:auto;min-width:150px}
.filterbar .check{margin:0 0 7px}
.form-card{max-width:640px}
.form-actions .btn{min-width:120px}
p.empty{color:var(--muted);text-align:center;padding:22px 12px;margin:0}
.btn-xs{padding:2px 8px;font-size:.8rem;line-height:1.2}
.forms-order{white-space:nowrap}
.forms-order form{display:inline}
.forms-order .btn{margin:0 1px}
.forms-section{margin:26px 0 6px;padding-bottom:6px;border-bottom:1px solid var(--border);font-size:1.1rem}
.forms-instruction{margin:0 0 18px;color:var(--text);line-height:1.5}
.forms-instruction p{margin:6px 0 0}
.forms-field{margin-bottom:18px}
.forms-field .field-label{font-weight:600;color:var(--text)}
.forms-help{margin:0 0 6px;font-size:.84rem}
.forms-req{color:#c0392b}
.forms-numwrap{display:flex;align-items:center;gap:8px}
.forms-numwrap .field-input{max-width:240px}
.forms-unit{color:var(--muted);font-size:.88rem;white-space:nowrap}
.forms-constraint{margin-top:4px}
.forms-checks{display:flex;flex-direction:column;gap:6px}
.forms-checks .check{margin:0}
.forms-ack{color:var(--text);font-weight:500;align-items:flex-start}
.forms-sig{font-family:"Segoe Script","Brush Script MT",cursive;font-size:1.1rem}
.forms-signbox{margin:20px 0;padding:16px 18px;border:1px dashed var(--border);border-radius:8px;background:var(--surface-2)}
.forms-banner{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;padding:14px 18px;border-radius:8px;
  background:color-mix(in srgb,var(--accent) 10%,var(--surface));border:1px solid var(--border);margin-bottom:20px}
.forms-banner strong{color:var(--text)}
.forms-banner .muted{font-size:.86rem}

/* Department management */
.dept-slug-note{margin:.2rem 0 .6rem;font-size:.82rem}
.dept-danger{border-color:color-mix(in srgb,var(--danger,#c0392b) 35%,var(--border))}
.dept-danger h2{color:var(--danger,#c0392b)}
.dept-blockers{margin:.4rem 0 0;padding-left:1.2rem}
.dept-blockers li{margin:.15rem 0}

/* Forms P2: assignments + tracking */
.forms-overdue-note{display:flex;align-items:center;gap:8px;margin:0 0 14px;color:var(--text)}
.row-overdue td{background:color-mix(in srgb,var(--danger) 7%,var(--surface))}
.forms-track-cards{margin-bottom:14px}
.forms-track-cards .card{text-align:center}
.forms-track-cards .card h2{margin:0;font-size:1.8rem}
.forms-track-cards .card .lead{margin:2px 0 0;color:var(--muted)}
.forms-assign-targets .check{display:block;font-weight:600;color:var(--text)}

/* Forms P4: import + reports */
.forms-import-paste{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem}
.forms-report-note{margin:0 0 14px;font-size:.86rem}
.forms-report-note strong{color:var(--text)}
td .mono,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem}

/* Forms P3 */
.forms-ack-doc .forms-help{margin:6px 0}
.forms-ackbox{margin:14px 0}
.forms-ackbox .forms-ack{font-weight:600;color:var(--text)}

/* List pagination */
.list-pager{display:flex;align-items:center;gap:14px;margin-top:14px;justify-content:flex-end}
.board-col-more{margin-top:8px;text-align:center;font-size:.85em}

/* ===== Forms polish ===== */
/* Enterprise design-elevation pass for Forms & Attestations. Reuses the global
   tokens (--accent / --surface / --border / --muted / --radius / --space / --ok
   / --danger) and the existing component scale (.card, .badge, .btn, .stat,
   .goal-summary). New classes are scoped fb-* (form-builder) / forms-* so they
   cannot collide. Append-only; no overrides of earlier rules. */

/* ---- Page intro: a lead paragraph under a page-head, plus a meta row of pills
   that summarise the template (kind · status · version · owner). Used on the
   builder / assign / tracking / report / fill headers. ---- */
.forms-intro{margin:-4px 0 18px;max-width:70ch}
.forms-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-2px 0 18px}
.forms-meta .badge{font-weight:600}
.forms-meta .forms-meta-sep{color:var(--border)}

/* Status pills tuned to the forms lifecycle. Draft reuses the neutral badge;
   published reuses badge-accent; archived stays neutral with muted text. */
.forms-badge-draft{background:var(--surface-2);color:var(--muted);
  border-color:var(--border)}
.forms-badge-pub{background:color-mix(in srgb,var(--ok) 14%,var(--surface));
  color:var(--ok);border-color:color-mix(in srgb,var(--ok) 38%,var(--border))}

/* ---- Stat strip: reuse the goal-summary tile grid for the forms dashboards.
   Each tile carries a status-coloured left rule and a tabular-numeric figure.
   Anchors (clickable filters) get the card-link hover. ---- */
.forms-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin-bottom:var(--space)}
.forms-stat{display:flex;flex-direction:column;gap:2px;background:var(--surface);
  border:1px solid var(--border);border-left:3px solid var(--border);
  border-radius:var(--radius);padding:13px 16px;text-decoration:none;color:inherit;
  transition:border-color .12s,box-shadow .12s}
a.forms-stat:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.forms-stat .fs-num{font-size:1.6rem;font-weight:650;letter-spacing:-.01em;
  line-height:1;font-variant-numeric:tabular-nums;color:var(--text)}
.forms-stat .fs-lbl{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted)}
.forms-stat .fs-sub{font-size:.78rem;color:var(--muted)}
.forms-stat.is-total{border-left-color:var(--accent)}
.forms-stat.is-done{border-left-color:var(--ok)}
.forms-stat.is-progress{border-left-color:#c47a1a}
.forms-stat.is-overdue{border-left-color:var(--danger)}
.forms-stat.is-overdue .fs-num{color:var(--danger)}

/* Completion meter: a wide tile that pairs a big % with a progress bar. */
.forms-meter{grid-column:span 2;justify-content:space-between}
@media (max-width:560px){.forms-meter{grid-column:auto}}
.forms-bar{height:8px;border-radius:999px;background:var(--surface-2);
  overflow:hidden;margin-top:8px}
.forms-bar > span{display:block;height:100%;border-radius:999px;
  background:var(--ok);transition:width .2s}

/* ---- Builder: the field designer. A clean field list where each row reads as a
   structured element — a drag-style order control, a type glyph, label + key,
   and required / display markers. No table chrome; rows are cards. ---- */
.fb-fields{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.fb-row{display:grid;grid-template-columns:auto 34px 1fr auto;align-items:center;
  gap:12px;padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface)}
.fb-row.is-display{background:var(--surface-2);border-style:dashed}
.fb-move{display:flex;flex-direction:column;gap:2px}
.fb-move form{display:block;margin:0;line-height:0}
.fb-move .btn{margin:0;width:24px;height:18px;padding:0;font-size:.7rem;line-height:1}
.fb-ic{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:var(--radius-sm);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.fb-row.is-display .fb-ic{color:var(--muted);
  background:color-mix(in srgb,var(--muted) 12%,var(--surface))}
.fb-ic svg{width:18px;height:18px}
.fb-main{min-width:0}
.fb-label{font-weight:600;color:var(--text);display:flex;align-items:center;
  gap:8px;flex-wrap:wrap}
.fb-label .forms-req{font-size:.85rem}
.fb-meta{display:flex;align-items:center;gap:10px;margin-top:3px;font-size:.8rem;
  color:var(--muted)}
.fb-type{text-transform:capitalize}
.fb-meta code{font-family:var(--mono);font-size:.8rem;background:var(--surface-2);
  border:1px solid var(--border);border-radius:4px;padding:0 5px}
.fb-actions{display:flex;align-items:center;gap:6px;white-space:nowrap}
.fb-actions form{display:inline;margin:0}
.fb-reqflag{font-size:.7rem;font-weight:650;text-transform:uppercase;
  letter-spacing:.04em;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border-radius:4px;padding:1px 6px}
@media (max-width:680px){
  .fb-row{grid-template-columns:auto 1fr;row-gap:8px}
  .fb-ic{display:none}
  .fb-actions{grid-column:1 / -1;justify-content:flex-end}}

/* "Add field" entry card: lift the add-field form onto the captioned entry-card
   idiom so it reads as a distinct create affordance, not a bare form. */
.fb-add{margin-top:var(--space)}
.fb-add .entry-grid{grid-template-columns:170px 1fr 1fr auto;align-items:end}
.fb-add .check{margin:0;min-height:38px}
@media (max-width:760px){.fb-add .entry-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fb-add .entry-grid{grid-template-columns:1fr}}

/* Type legend chips under the field list — a quick key of available field types. */
.fb-legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.fb-chip{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;
  color:var(--muted);background:var(--surface-2);border:1px solid var(--border);
  border-radius:999px;padding:2px 9px}
.fb-chip svg{width:13px;height:13px}

/* ---- Fill: the respondent experience. A single, generous reading column with
   a guided header, the document/acknowledgment framing, and a sticky-feeling
   action bar. ---- */
.forms-fill{max-width:720px}
.forms-fill .card{padding:24px 26px}
.forms-fillhead{margin-bottom:18px}
.forms-fillhead .lead{margin:6px 0 0}
.forms-pin{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;
  color:var(--muted);margin-top:10px}
.forms-pin svg{width:15px;height:15px}
.forms-doccard{display:flex;align-items:center;gap:14px;padding:16px 18px;
  border:1px solid var(--border);border-radius:var(--radius);
  background:color-mix(in srgb,var(--accent) 5%,var(--surface));margin-bottom:18px}
.forms-doccard .forms-docic{display:flex;align-items:center;justify-content:center;
  flex:none;width:44px;height:44px;border-radius:var(--radius-sm);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.forms-doccard .forms-docic svg{width:22px;height:22px}
.forms-docbody{min-width:0;flex:1}
.forms-docbody .forms-docname{font-weight:600;color:var(--text)}
.forms-docbody p{margin:2px 0 0;font-size:.85rem}
.forms-actionbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--border)}
.forms-actionbar .btn{min-width:130px}
.forms-actionbar .forms-finalnote{margin:0 0 0 auto;font-size:.82rem;color:var(--muted)}
@media (max-width:560px){.forms-actionbar .forms-finalnote{margin:6px 0 0;width:100%}}

/* Generous field rhythm inside the fill column. */
.forms-fill .forms-field{margin-bottom:22px}
.forms-fill .forms-field .field-input{padding:10px 13px}

/* ---- Acknowledgment read-and-sign block: a clearly framed certification box. */
.forms-attest{border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));
  border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 5%,var(--surface));
  padding:18px 20px;margin:20px 0}
.forms-attest-head{font-size:.74rem;font-weight:650;text-transform:uppercase;
  letter-spacing:.06em;color:var(--accent);margin:0 0 10px}

/* ---- List / dashboard refinements. The dashboard "quick links" row reuses
   card-link; here we add a small icon + count treatment. ---- */
.forms-quicklinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--space);margin-bottom:var(--space)}
.forms-ql{display:flex;align-items:flex-start;gap:14px;padding:16px 18px}
.forms-ql .forms-ql-ic{display:flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:var(--radius-sm);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.forms-ql .forms-ql-ic svg{width:20px;height:20px}
.forms-ql-body{min-width:0}
.forms-ql-body h2{margin:0;font-size:1.02rem}
.forms-ql-body .lead{margin:3px 0 0;font-size:.88rem}

/* Type chip used in lists/tables to label a template's kind. */
.forms-kind{display:inline-flex;align-items:center;gap:5px}
.forms-kind svg{width:14px;height:14px;color:var(--muted)}

/* Empty-state with an icon — warmer than a bare line of muted text. */
.forms-empty{display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;padding:34px 16px;color:var(--muted)}
.forms-empty .forms-empty-ic{display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.forms-empty .forms-empty-ic svg{width:24px;height:24px}
.forms-empty strong{color:var(--text);font-size:1rem}
.forms-empty p{margin:0;max-width:42ch}

/* Assign targets: lift radios onto bordered option rows so the choice reads
   like a real selector (still plain radios — no JS, no dropdown). */
.forms-targets{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.forms-target{border:1px solid var(--border);border-radius:var(--radius);
  padding:12px 14px;background:var(--surface)}
.forms-target > .check{margin:0;font-weight:600;color:var(--text)}
.forms-target .field{margin:8px 0 0}
.forms-target .field-input{max-width:380px}

/* ===== Benefits ===== */
.ben-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ben-strip-label{font-size:.74rem;font-weight:650;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.ben-strip-year{font-weight:650;font-size:1.05rem;color:var(--text)}
.empty-hint{color:var(--text-muted);font-size:.9rem}
.ben-section{margin-bottom:26px}
.section-head{display:flex;align-items:baseline;gap:12px;margin:0 0 10px}
.section-head h2{font-size:1.05rem;margin:0}
.crumb{font-size:.8rem;color:var(--text-muted);text-decoration:none}
.crumb:hover{text-decoration:underline}
.page-head-actions{display:flex;gap:10px;align-items:center}
.ben-offering{padding:14px 16px}
.ben-offering-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.ben-offering-head .badge{margin-left:6px}
.ben-offering-actions{display:flex;gap:8px}
.ben-offering-actions form{margin:0}
.ben-tier-preview{width:100%;font-size:.86rem}
.ben-no-tiers{margin:4px 0 0;font-size:.86rem}
.entry-grid.ben-year{grid-template-columns:1.4fr 1fr 1fr 140px}
.entry-grid.ben-offering-new{grid-template-columns:160px 1.4fr 1fr 150px 1fr}
.entry-grid.ben-window{grid-template-columns:1fr 1fr 1fr}
.entry-grid.tier{grid-template-columns:140px 1.4fr 1fr 1fr}
.ben-cost{width:110px}
@media (max-width:880px){.entry-grid.ben-year,.entry-grid.ben-offering-new,.entry-grid.ben-window,.entry-grid.tier{grid-template-columns:1fr 1fr}}
/* My Benefits — self-service */
.ben-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--surface-2);border:1px solid var(--accent);border-radius:var(--radius);padding:14px 16px;margin-bottom:18px}
.ben-banner-text strong{color:var(--text)}
.ben-totalcomp{display:flex;gap:24px;flex-wrap:wrap;padding:16px;margin-bottom:18px}
.ben-tc-item{display:flex;flex-direction:column;gap:2px}
.ben-tc-val{font-size:1.3rem;font-weight:650;color:var(--text)}
.ben-tc-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.ben-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.ben-card{padding:16px;display:flex;flex-direction:column;gap:8px}
.ben-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ben-card-type{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.ben-card-name{font-weight:650;color:var(--text)}
.ben-card-rows{display:flex;flex-direction:column;gap:4px;font-size:.88rem}
.ben-card-row{display:flex;justify-content:space-between;gap:10px}
.ben-card-row .muted{color:var(--text-muted)}
.ben-wizard-opts{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.ben-wiz-opt{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer}
.ben-wiz-opt:hover{border-color:var(--accent)}
.ben-wiz-cost{margin-left:auto;text-align:right;font-size:.86rem;color:var(--text-muted)}
.ben-review-line{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)}
.ben-steps{display:flex;gap:8px;font-size:.78rem;color:var(--text-muted);margin-bottom:14px}
.ben-steps .on{color:var(--accent);font-weight:650}
/* Department enrollment tracker */
.ben-track-row{display:grid;grid-template-columns:1fr 90px 90px 90px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.ben-track-bar{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.ben-track-bar>span{display:block;height:100%;background:var(--accent)}

/* ===== Skills ===== */
/* Skills, Certifications & Job Profiles overhaul (0062). All classes prefixed
   skill-/cert-/jp- and built on existing tokens + component classes. */
.skill-section{margin-bottom:22px}
.skill-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.skill-edit-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.field-inline{max-width:200px}
.skill-add-grid{grid-template-columns:repeat(3,1fr)}
.skill-current{display:flex;gap:32px;flex-wrap:wrap}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.cert-add-grid{grid-template-columns:repeat(3,1fr)}
.cert-summary{display:flex;gap:32px;flex-wrap:wrap}
.cert-superseded{opacity:.6}
.cert-hint{margin-top:6px}
.cert-stat-row{display:flex;gap:12px;margin-bottom:14px}
.cert-stat{flex:1;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.cert-stat-n{font-size:26px;font-weight:700}
.cert-stat-danger .cert-stat-n{color:var(--danger,#c0392b)}
.cert-swept{background:var(--surface-2);border-left:3px solid var(--accent)}
.jp-grid{grid-template-columns:repeat(2,1fr)}
/* P6: gap, staffing, matrix */
.jp-gap-summary{display:flex;gap:32px;flex-wrap:wrap}
.staffing-form{align-items:flex-end}
.matrix-wrap{overflow-x:auto}
.matrix th.matrix-col{writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;height:90px;vertical-align:bottom;font-weight:600}
.matrix-cell{text-align:center}
.matrix-v{color:var(--accent);margin-left:2px}

/* ===== Forms: import guide + centered fill/preview ===== */
/* Fill + preview are single-purpose reading surfaces; centering the capped
   column in the content area mirrors how the published form reads. */
.forms-fill{margin-left:auto;margin-right:auto}
/* Hand-authoring guide on the import page: two reference cards side by side,
   compact tables, and a code sample. Tokens only; collapses on small screens. */
.forms-guide{margin-top:34px}
.forms-guide .page-head h2{margin:0;font-size:1.15rem}
.forms-guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space);align-items:start}
.forms-guide-grid h3{margin:0 0 8px;font-size:.95rem}
.forms-guide-grid h3+ .forms-guide-table{margin-bottom:18px}
.forms-guide-table th,.forms-guide-table td{padding:7px 10px;font-size:.86rem}
.forms-guide-table td:first-child{white-space:nowrap}
.forms-guide-code{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:14px 16px;overflow-x:auto;font-family:var(--mono);font-size:.8rem;line-height:1.55;margin:0}
.forms-guide-code code{background:none;padding:0;font-size:inherit}
@media (max-width:880px){.forms-guide-grid{grid-template-columns:1fr}}


/* ===== Inbox ===== */
.inbox-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:0 0 20px}
.inbox-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;color:var(--muted);
  text-decoration:none;font-size:.92rem;font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}
.inbox-tab:hover{color:var(--text)}
.inbox-tab.is-active{color:var(--text);border-bottom-color:var(--accent)}
.inbox-tab-count{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--surface-2);color:var(--muted);font-size:.72rem;font-weight:700}
.inbox-tab.is-active .inbox-tab-count{background:var(--accent);color:var(--accent-text)}

.inbox-warn{display:flex;align-items:center;gap:8px;padding:10px 14px;margin:0 0 16px;
  border:1px solid var(--border);border-left:3px solid var(--danger);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);font-size:.9rem}
.inbox-warn svg{flex:0 0 auto;color:var(--danger)}

.inbox-stats{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.inbox-stat{flex:1 1 0;min-width:96px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.inbox-stat-n{font-size:1.5rem;font-weight:700;color:var(--text);line-height:1.1}
.inbox-stat-l{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.inbox-stat.is-overdue{border-color:var(--danger)}
.inbox-stat.is-overdue .inbox-stat-n{color:var(--danger)}

.inbox-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.inbox-chip{display:inline-flex;align-items:center;padding:5px 12px;border:1px solid var(--border);
  border-radius:999px;background:var(--surface);color:var(--muted);text-decoration:none;
  font-size:.84rem;font-weight:600}
.inbox-chip:hover{color:var(--text);border-color:var(--accent)}
.inbox-chip.is-active{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}

.inbox-group{margin:0 0 22px}
.inbox-group-head{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);margin:0 0 8px}
.inbox-list{list-style:none;margin:0;padding:0;overflow:hidden}
.inbox-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}
.inbox-row:last-child{border-bottom:none}
.inbox-kind{flex:0 0 auto;align-self:flex-start;margin-top:1px;padding:2px 8px;border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--muted);font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;white-space:nowrap}
.inbox-row-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.inbox-row-title{color:var(--text);text-decoration:none;font-weight:600;font-size:.94rem;
  overflow:hidden;text-overflow:ellipsis}
.inbox-row-title:hover{color:var(--accent);text-decoration:underline}
.inbox-row-sub{color:var(--muted);font-size:.82rem}
.inbox-count-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;
  border-radius:10px;background:var(--accent);color:var(--accent-text);font-size:.74rem;font-weight:700;
  vertical-align:middle}
.inbox-due{flex:0 0 auto;color:var(--muted);font-size:.82rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.inbox-due.is-overdue{color:var(--danger);font-weight:700}
.inbox-more{margin:8px 2px 0;font-size:.84rem}
.inbox-more a,.inbox-more{color:var(--muted)}

.inbox-clear{text-align:center;padding:56px 24px;color:var(--muted);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.inbox-clear svg{color:var(--ok);margin-bottom:10px}
.inbox-clear h2{margin:0 0 6px;color:var(--text);font-size:1.15rem}
.inbox-clear p{margin:0 auto;max-width:420px;font-size:.92rem}
.inbox-clear p+p{margin-top:8px}

/* ===== KB: search alignment + sibling reorder arrows ===== */
/* Home search: the input must FLEX beside its button, not span the row and
   push the button to a second line. */
.kb-search{margin:0 0 var(--space)}
.kb-search .field-input{width:auto;flex:1;max-width:560px}
/* Space tree ↑/↓ — same compact stacked-arrow chrome as the forms builder. */
.kb-reorder{display:inline-flex;gap:2px;opacity:.35}
tr:hover .kb-reorder,.kb-reorder:focus-within{opacity:1}
.kb-reorder form{display:inline;margin:0;line-height:0}
.kb-reorder .btn{margin:0;width:24px;height:20px;padding:0;font-size:.7rem;line-height:1}

/* ===== CRM email outreach ===== */
/* Compose page: a vertical entry-card stack with comfortable field spacing. The
   merge-field hint shows the literal tokens as inline code chips. */
.crm-compose .field{display:block;margin-top:var(--space)}
.crm-compose .field:first-of-type{margin-top:.5rem}
.crm-compose textarea.field-input{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);line-height:1.5;resize:vertical}
.crm-compose .field-hint code{font-size:.78rem;padding:1px 5px;border-radius:4px;
  background:color-mix(in srgb,var(--accent) 10%,var(--surface));border:1px solid var(--border)}
/* Per-recipient send log on the contact page and the batch results table. */
.crm-emaillog th,.crm-emaillog td{font-size:.86rem}
.crm-emaillog td:first-child{white-space:nowrap;color:var(--muted-text,inherit)}
/* Batch compose summary: recipient + exclusion counts as a compact stat row. */
.crm-batch-stats{display:flex;gap:var(--space);flex-wrap:wrap;margin:.25rem 0 .75rem}
.crm-batch-stats .stat{background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:.5rem .85rem;min-width:7rem}
.crm-batch-stats .stat b{display:block;font-size:1.25rem;line-height:1.1}
.crm-batch-stats .stat span{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;opacity:.75}
.crm-batch-results td:last-child,.crm-batch-results th:last-child{white-space:nowrap}

/* ===== Brand: fox mark (favicon SVG in the topbar, illustration on login) ===== */
.brand-fox{display:block;width:24px;height:24px}
.login-fox{display:block;margin:0 auto 6px}

/* ===================================================================== */
/* platform admin overhaul                                               */
/* ===================================================================== */

/* Suspended/archived workspace 403 page. */
.blocked-card{text-align:center;padding:2rem 1.75rem}
.blocked-icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;
  margin:0 auto 1rem;border-radius:50%}
.blocked-warning{color:#9a5e10;background:color-mix(in srgb,#c47a1a 18%,transparent)}
.blocked-muted{color:var(--muted);background:var(--surface-2)}
.blocked-card h1{margin:.25rem 0 .25rem}
.blocked-company{font-weight:600;margin:0 0 .75rem}
.blocked-msg{color:var(--muted-text,inherit);margin:0 0 1rem}
.blocked-reason{display:inline-block;text-align:left;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--radius);padding:.6rem .85rem;margin:0 0 1rem}
.blocked-reason-label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  opacity:.7;margin-bottom:.15rem}

/* Lifecycle status badges in the platform company list/dashboard. */
.badge-suspended{background:color-mix(in srgb,#c47a1a 22%,transparent);color:#9a5e10}
.badge-archived{background:var(--surface-2);color:var(--muted)}
[data-theme="dark"] .badge-suspended{color:#f0b35a;background:color-mix(in srgb,#c47a1a 28%,transparent)}

/* Platform overview + company dashboard stat tiles. */
.plat-stats{display:flex;gap:var(--space);flex-wrap:wrap;margin:.25rem 0 1rem}
.plat-stats .stat{background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:.6rem .9rem;min-width:7.5rem}
.plat-stats .stat b{display:block;font-size:1.4rem;line-height:1.15}
.plat-stats .stat span{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;opacity:.75}

/* Dashboard section grid + entitlement checkbox list. */
.plat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space)}
.plat-entitlements{list-style:none;margin:.25rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.35rem}
.plat-entitlements li label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;
  padding:.3rem .5rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.plat-danger-form{display:flex;gap:.5rem;align-items:flex-end;flex-wrap:wrap;margin-top:.5rem}
.plat-danger-form .field{flex:1;min-width:12rem}

/* Tenant announcement banner (read from the shell on tenant pages). */
.announce-banner{border-radius:var(--radius);padding:.6rem .9rem;margin:0 0 var(--space);
  border:1px solid var(--border);background:var(--surface-2)}
.announce-banner.lvl-warning{border-color:color-mix(in srgb,#c47a1a 45%,var(--border));
  background:color-mix(in srgb,#c47a1a 12%,var(--surface))}
.announce-banner .announce-title{font-weight:600}
.announce-banner .announce-body{font-size:.9rem;opacity:.9;margin-top:.1rem}

/* Read-only impersonation banner (platform operator viewing as a tenant user).
   A prominent full-width strip pinned above the app body so the operator can
   never lose track that the session is view-only. */
.imp-banner{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:.75rem;
  flex-wrap:wrap;padding:.5rem .9rem;font-size:.9rem;color:#fff;
  background:#7a1020;border-bottom:1px solid #a0263a}
.imp-banner .imp-badge{font-weight:700;letter-spacing:.04em;font-size:.72rem;
  padding:.1rem .45rem;border-radius:var(--radius);background:rgba(255,255,255,.18)}
.imp-banner .imp-text{flex:1 1 auto}
.imp-banner .imp-exit{margin:0}
.imp-banner .imp-exit .btn{background:#fff;color:#7a1020;border-color:#fff}
/* Dashboard "active view-only session" reminder — reuses the announce banner,
   just lays the resume/end controls out on the right. */
.imp-dash{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.imp-dash .imp-dash-actions{display:flex;gap:.5rem;align-items:center}

/* procurement */
/* Print-friendly PO: drop chrome and ink-saving surface tweaks when printing. The
   on-screen view reuses the standard card; @media print hides the app shell so the
   doc prints clean (no PDF renderer exists in the repo — this is the print path). */
.print-doc{max-width:760px}
.noprint{}
@media print{
  .app-sidebar,.app-header,.sb-scrim,.noprint{display:none !important}
  .app-main{padding:0}
  .print-doc{box-shadow:none;border:none}
}

/* time billing */
.tb-check{display:flex;align-items:center;gap:.5rem;font-size:.9rem;padding:.45rem 0}
.tb-rate-add{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap;margin-top:.75rem;
  padding-top:.75rem;border-top:1px solid var(--border)}
.tb-rate-add .field{margin:0}
.tb-billing,.tb-rates{margin-top:var(--space)}
.tb-filters{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:var(--space)}
.tb-filters .field{margin:0;min-width:9rem}
.tb-generate{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap}
.tb-generate .field{margin:0;min-width:10rem}
.tb-writeoff{display:flex;gap:.4rem;align-items:center}
.tb-writeoff input[type=text]{max-width:14rem}
.tb-proj{font-weight:600}
.tb-billed{font-size:.85rem;opacity:.85}

/* Expense pass-through billing (expense_billing) — queue tabs + source badges.
   Append-only feature block; mirrors the .tb-* time-billing styles above. */
.unbilled-tabs{display:flex;gap:.5rem;margin:0 0 1rem}
.exp-badge{display:inline-block;padding:.1rem .5rem;border-radius:999px;font-size:.78rem;font-weight:600;line-height:1.4}
.exp-badge-bill{background:#e8effb;color:#1d4ed8}
.exp-badge-line{background:#eaf7ee;color:#15803d}

/* Topbar user menu (usermenu) — moves the user identity + Sign out out of the
   sidebar footer into a CSS-only dropdown in the topbar. Native
   <details>/<summary>, no JS; the panel is a standard dropdown card but is
   right-anchored so it never overflows the viewport edge. Avatar uses
   --accent-fill (deeper, AA white text) with a fallback to --accent for light
   mode where --accent-fill isn't defined. Append-only block. */
.usermenu{position:relative;display:flex}
.usermenu summary{display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;list-style:none;user-select:none;border-radius:999px}
.usermenu summary::-webkit-details-marker{display:none}
.usermenu summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.usermenu-avatar{display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:999px;background:var(--accent-fill,var(--accent));
  color:var(--accent-text);font-size:.78rem;font-weight:700;letter-spacing:.02em;
  line-height:1;transition:filter .12s}
.usermenu summary:hover .usermenu-avatar{filter:brightness(1.08)}
.usermenu[open] .usermenu-avatar{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.usermenu-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;z-index:50;
  display:flex;flex-direction:column;padding:6px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(20,22,30,.14)}
.usermenu-id{display:flex;flex-direction:column;padding:8px 10px 10px;line-height:1.3}
.usermenu-id .nm{font-weight:600;font-size:.9rem;color:var(--text)}
.usermenu-id .rl{font-size:.78rem;color:var(--muted)}
.usermenu-menu a{padding:8px 10px;border-radius:var(--radius-sm);color:var(--text);
  text-decoration:none;font-size:.9rem}
.usermenu-menu a:hover{background:var(--surface-2)}
.usermenu-div{height:1px;margin:6px 4px;background:var(--border)}
.usermenu-menu form{margin:0}
.usermenu-signout{display:block;width:100%;text-align:left;padding:8px 10px;
  border:0;border-radius:var(--radius-sm);background:none;color:var(--text);
  font-size:.9rem;font-family:inherit;cursor:pointer}
.usermenu-signout:hover{background:var(--surface-2)}
.usermenu-signout:focus-visible,.usermenu-menu a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
[data-theme="dark"] .usermenu-menu{box-shadow:var(--shadow)}

/* User security core (user_security) — My Account, MFA enrollment, recovery
   codes, login step-up, admin security settings. Append-only feature block;
   styled for both themes (tokens resolve under [data-theme=dark] already). */
.acct-summary{display:grid;gap:.6rem;margin:0}
.acct-summary>div{display:flex;gap:1rem;align-items:baseline}
.acct-summary dt{flex:0 0 8.5rem;color:var(--muted);font-size:.88rem}
.acct-summary dd{margin:0;font-weight:500}
.role-chip{display:inline-block;padding:.1rem .55rem;border-radius:999px;font-size:.8rem;font-weight:600;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text)}
.acct-mfa-on{font-size:.95rem}
.acct-mfa-actions{display:flex;flex-direction:column;gap:.9rem;margin-top:.4rem}
.mfa-qr{display:flex;justify-content:center;margin:1rem 0;padding:14px;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius);width:max-content}
.mfa-manual{font-size:.9rem;color:var(--muted);text-align:center}
.mfa-secret{display:inline-block;margin-top:.3rem;padding:.3rem .6rem;font-size:1rem;letter-spacing:.06em;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);
  word-break:break-all;color:var(--text)}
.recovery-codes{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:1rem 0;padding:0}
.recovery-codes li{padding:0}
.recovery-codes code{display:block;padding:.5rem .7rem;font-size:1rem;letter-spacing:.08em;text-align:center;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text)}
/* flash variants used by the security flows; base .flash already sets padding. */
.flash-success{background:color-mix(in srgb,var(--ok) 12%,var(--surface));color:var(--ok);
  border:1px solid color-mix(in srgb,var(--ok) 40%,var(--surface))}
.flash-warn{background:color-mix(in srgb,#d98a00 14%,var(--surface));color:#9a6400;
  border:1px solid color-mix(in srgb,#d98a00 38%,var(--surface))}
[data-theme="dark"] .flash-warn{color:#f0c66b}
.mfa-confirm-actions .btn{white-space:nowrap}

/* ── Admin console (adm) ─────────────────────────────────────────────────
   The organization-admin design layer: a calm control room. Letterspaced
   kickers establish place, stat tiles give the room a pulse, rosters and
   dossiers replace button-wall tables, and every destructive action lives
   in a labeled action row with its consequence written next to it. Builds
   strictly on the existing tokens; both themes by construction. Append-only
   feature block. */
.adm-head{margin-bottom:calc(var(--space)*1.25)}
.adm-kicker{display:flex;align-items:center;gap:8px;margin-bottom:6px;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.adm-kicker::before{content:"";width:18px;height:2px;background:var(--accent);border-radius:1px}
.adm-head h1{margin:0;letter-spacing:-.01em}
.adm-head .adm-sub{margin:4px 0 0;color:var(--muted);font-size:.92rem;max-width:64ch}
.adm-headrow{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space)}
.adm-headrow .adm-actions{display:flex;gap:8px;flex-shrink:0;padding-bottom:2px}

.adm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space);
  margin-bottom:var(--space)}
.adm-stat{position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 16px 12px;box-shadow:var(--shadow);overflow:hidden}
.adm-stat::after{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--accent);opacity:.55}
.adm-stat .n{display:block;font-size:1.7rem;font-weight:650;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.15}
.adm-stat .l{display:block;margin-top:2px;font-size:.72rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.adm-stat .d{display:block;margin-top:2px;font-size:.78rem;color:var(--muted)}
.adm-stat.good::after{background:var(--ok)}
.adm-stat.warn::after{background:#c77d2e}
.adm-stat a{color:inherit;text-decoration:none}

/* Roster — people/things lists. Keeps <table> semantics, reads as rows. */
.adm-roster td{vertical-align:middle}
.adm-roster tr{transition:background .1s}
.adm-roster tbody tr:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.adm-who{display:flex;align-items:center;gap:11px;min-width:0}
.adm-avatar{flex:0 0 36px;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:999px;color:#fff;font-size:.8rem;font-weight:700;letter-spacing:.02em;
  background:linear-gradient(135deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 55%,#7b93ff) 100%)}
[data-theme="dark"] .adm-avatar{background:linear-gradient(135deg,var(--accent-fill) 0%,#7b93ff 100%)}
.adm-avatar-lg{flex-basis:56px;width:56px;height:56px;font-size:1.15rem}
.adm-who .nm{display:block;font-weight:600;line-height:1.25}
.adm-who .nm a{color:inherit;text-decoration:none}
.adm-who .nm a:hover{color:var(--accent)}
.adm-who .em{display:block;color:var(--muted);font-size:.82rem}
.adm-dot{display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--ok);
  margin-right:6px;vertical-align:1px}
.adm-dot.off{background:color-mix(in srgb,var(--muted) 55%,transparent)}
.adm-go{color:var(--muted);text-align:right;white-space:nowrap}
.adm-go a{color:var(--muted);text-decoration:none;font-size:1.05rem;padding:4px 8px;border-radius:var(--radius-sm)}
.adm-go a:hover{color:var(--accent);background:var(--surface-2)}
.tnum{font-variant-numeric:tabular-nums}

/* Search/filter bar above rosters: a quiet inline GET form. */
.adm-bar{display:flex;align-items:center;gap:10px;margin-bottom:var(--space);flex-wrap:wrap}
.adm-bar input[type=search],.adm-bar input[type=text]{min-width:230px}
.adm-bar .count{color:var(--muted);font-size:.85rem;margin-left:auto;font-variant-numeric:tabular-nums}

/* Dossier header — one entity's identity card. */
.adm-id{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:var(--space)}
.adm-id .who{min-width:0}
.adm-id h1{margin:0 0 2px;letter-spacing:-.01em}
.adm-id .em{color:var(--muted)}
.adm-id .chips{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto;align-self:flex-start;padding-top:6px}
.adm-meta{display:flex;flex-wrap:wrap;gap:0 28px;padding:12px 16px;margin-bottom:var(--space);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.adm-meta .m{display:flex;flex-direction:column;gap:1px;padding:4px 0}
.adm-meta .k{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.adm-meta .v{font-size:.92rem;font-weight:550;font-variant-numeric:tabular-nums}

/* Sections + action rows — settings with their consequences attached. */
.adm-section{padding:0}
.adm-section .sh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:14px 18px 12px;border-bottom:1px solid var(--border)}
.adm-section .sh h2{margin:0;font-size:1.02rem}
.adm-section .sh .sd{color:var(--muted);font-size:.85rem}
.adm-actrow{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 18px}
.adm-actrow + .adm-actrow{border-top:1px solid var(--border)}
.adm-actrow .t{font-weight:600;font-size:.93rem}
.adm-actrow .c{display:block;color:var(--muted);font-size:.83rem;margin-top:1px;max-width:58ch}
.adm-actrow form{flex-shrink:0;margin:0}
.adm-actrow.danger .t{color:var(--danger)}
.adm-actrow .btn-danger{background:transparent;color:var(--danger);border:1px solid
  color-mix(in srgb,var(--danger) 45%,var(--border))}
.adm-actrow .btn-danger:hover{background:color-mix(in srgb,var(--danger) 10%,transparent)}

/* Grant rows — the access matrix, one labeled toggle per area. */
.adm-grants{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.adm-grant{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 18px;border-top:1px solid var(--border)}
.adm-grant .gl{font-size:.92rem;font-weight:550;display:flex;align-items:center;gap:8px}
.adm-grant .gl .on{width:7px;height:7px;border-radius:999px;background:var(--ok);flex-shrink:0}
.adm-grant .gl .off{width:7px;height:7px;border-radius:999px;border:1.5px solid var(--muted);
  opacity:.6;flex-shrink:0}
.adm-grant form{margin:0}

/* Activity feed — recent audit lines on the overview + dossiers. */
.adm-feed{margin:0;padding:0;list-style:none}
.adm-feed li{display:flex;align-items:baseline;gap:12px;padding:9px 18px;font-size:.88rem}
.adm-feed li + li{border-top:1px solid var(--border)}
.adm-feed .at{flex:0 0 86px;color:var(--muted);font-family:var(--mono);font-size:.76rem;
  font-variant-numeric:tabular-nums}
.adm-feed .who{font-weight:600;white-space:nowrap}
.adm-feed .act{font-family:var(--mono);font-size:.76rem;background:var(--surface-2);
  border:1px solid var(--border);border-radius:4px;padding:1px 7px;white-space:nowrap}
.adm-feed .tgt{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Empty states — quiet, instructive, never a bare table row. */
.adm-empty{padding:36px 20px;text-align:center;color:var(--muted)}
.adm-empty .big{display:block;font-size:1.5rem;margin-bottom:4px;opacity:.5}
.adm-empty a{color:var(--accent)}

/* Overview destination cards: icon + name + line, tighter than feature cards. */
.adm-nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:var(--space)}
.adm-nav a{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  color:inherit;text-decoration:none;transition:border-color .12s,transform .12s}
.adm-nav a:hover{border-color:var(--accent);transform:translateY(-1px)}
.adm-nav svg{flex-shrink:0;margin-top:2px;color:var(--accent);width:20px;height:20px}
.adm-nav .t{font-weight:600;font-size:.95rem}
.adm-nav .d{display:block;color:var(--muted);font-size:.82rem;margin-top:1px}
.adm-bar input[type=search]{flex:0 1 320px;width:auto}

/* ── Knowledge base (kbx) ────────────────────────────────────────────────
   Reading-first layer for the KB, built on the adm-* language. Adds only what
   articles and labels need beyond it: quiet tinted label chips with a hash
   glyph, a measured article column, a meta strip, refined tree rows with muted
   reorder arrows, a version timeline, and home/space cards. Tokens only; both
   themes by construction. Append-only feature block. */

/* Label chips — the headline fix. Quiet tinted pill, hash glyph, count tail. */
.kbx-label{display:inline-flex;align-items:center;gap:.25em;text-decoration:none;
  font-size:.82rem;font-weight:550;line-height:1;padding:4px 9px;border-radius:999px;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  transition:background .12s,border-color .12s}
.kbx-label:hover{background:color-mix(in srgb,var(--accent) 16%,transparent);
  border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.kbx-label .h{font-weight:700;opacity:.6}
.kbx-label .n{font-variant-numeric:tabular-nums;font-weight:600;font-size:.74rem;opacity:.7;
  margin-left:.15em;padding-left:.4em;border-left:1px solid color-mix(in srgb,var(--accent) 28%,transparent)}
.kbx-label-lg{font-size:.9rem;padding:6px 13px}
.kbx-label-xl{font-size:1.05rem;padding:7px 15px;font-weight:600}
.kbx-labelcloud{display:flex;flex-wrap:wrap;gap:8px}
.kbx-labelrow{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 var(--space)}
.kbx-labelrow-form{margin:0 0 8px}
.kbx-labelhead{margin:0}

/* Space chip — small contextual pill linking back to a space (search/label rows). */
.kbx-spacechip{display:inline-flex;align-items:center;text-decoration:none;font-size:.76rem;
  font-weight:550;line-height:1;padding:3px 8px;border-radius:var(--radius-sm);
  color:var(--muted);background:var(--surface-2);border:1px solid var(--border)}
.kbx-spacechip:hover{color:var(--accent);border-color:var(--accent)}
.kbx-spacekey{display:inline-block;font-family:var(--mono);font-size:.7rem;font-weight:600;
  letter-spacing:.04em;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:1px 7px;vertical-align:middle}

/* Page rows — icon + title, used in label/tree/search lists. */
.kbx-pgrow{display:flex;align-items:center;gap:9px;min-width:0}
.kbx-pgrow a{color:inherit;text-decoration:none;font-weight:550}
.kbx-pgrow a:hover{color:var(--accent)}
.kbx-pgico{flex:0 0 1.2em;text-align:center;color:var(--muted);font-size:.95em}
.kbx-lock{font-size:.8em;opacity:.7}

/* Home space cell — mono key + name + description, tight. */
.kbx-spacecell{display:flex;align-items:flex-start;gap:12px;min-width:0}
.kbx-spaceid{min-width:0}
.kbx-spaceid .nm{display:block;font-weight:600;line-height:1.25}
.kbx-spaceid .nm a{color:inherit;text-decoration:none}
.kbx-spaceid .nm a:hover{color:var(--accent)}
.kbx-spaceid .em{display:block;color:var(--muted);font-size:.82rem;max-width:54ch;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Aside cards — recently updated / sub-pages / labels in the right column. */
.kbx-aside{padding:0}
.kbx-asidehead{display:flex;align-items:baseline;justify-content:space-between;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding:13px 16px 10px;border-bottom:1px solid var(--border)}
.kbx-asidelink{font-weight:600;letter-spacing:0;text-transform:none;color:var(--accent);text-decoration:none}
.kbx-recent{list-style:none;margin:0;padding:6px 0}
.kbx-recent li{display:flex;align-items:center;gap:8px;padding:6px 16px;font-size:.88rem}
.kbx-recent a{color:inherit;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kbx-recent a:hover{color:var(--accent)}
.kbx-recent .when{margin-left:auto;color:var(--muted);font-size:.76rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.kbx-labelcloud{padding:13px 16px}

/* Space tree — muted reorder arrows that no longer shout. */
.kbx-tree .kbx-reordercol{width:1px;white-space:nowrap;text-align:right}
.kbx-reorder{display:inline-flex;gap:2px;opacity:0;transition:opacity .12s}
.kbx-tree tr:hover .kbx-reorder,.kbx-reorder:focus-within{opacity:1}
.kbx-reorder form{margin:0;display:inline}
.kbx-arrow{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;background:transparent;color:var(--muted);border-radius:var(--radius-sm);
  cursor:pointer;font-size:.9rem;line-height:1;padding:0}
.kbx-arrow:hover{color:var(--accent);background:var(--surface-2);border-color:var(--border)}

/* Article column — a measured reading width and a touch more air. */
.kbx-pagehead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space);
  margin:2px 0 10px}
.kbx-pagehead .kb-title{letter-spacing:-.01em}
.kbx-crumbs .sep{color:var(--muted);opacity:.6;margin:0 2px}
.kbx-metastrip{display:flex;flex-wrap:wrap;gap:0 26px;padding:11px 16px;margin-bottom:var(--space);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.kbx-metastrip .m{display:flex;flex-direction:column;gap:1px;padding:3px 0}
.kbx-metastrip .k{font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.kbx-metastrip .v{font-size:.88rem;font-weight:500}
.kbx-metastrip .v a{color:var(--accent);text-decoration:none}
.kbx-article{max-width:74ch;font-size:1rem;line-height:1.68;padding:26px 30px}
.kbx-historical{background:color-mix(in srgb,#c77d2e 5%,var(--surface));
  border-color:color-mix(in srgb,#c77d2e 28%,var(--border))}
.kbx-vertag{font-family:var(--mono);font-size:.8rem;font-weight:600;color:#c77d2e;
  background:color-mix(in srgb,#c77d2e 12%,transparent);border:1px solid color-mix(in srgb,#c77d2e 32%,transparent);
  border-radius:var(--radius-sm);padding:1px 8px;vertical-align:middle}

/* Search hits — title, space chip, snippet. */
.kbx-hits{list-style:none;margin:0;padding:0}
.kbx-hits > li{padding:13px 18px}
.kbx-hits > li + li{border-top:1px solid var(--border)}
.kbx-hit-title{font-weight:600;font-size:1rem;color:var(--text);text-decoration:none;margin-right:9px}
.kbx-hit-title:hover{color:var(--accent)}
.kbx-snippet{color:var(--muted);font-size:.86rem;margin-top:4px;line-height:1.5}
.kbx-snippet b{color:var(--text);font-weight:650;background:color-mix(in srgb,var(--accent) 14%,transparent);
  border-radius:3px;padding:0 2px}

/* Version timeline — a quiet vertical history. */
.kbx-timeline{list-style:none;margin:0;padding:6px 0}
.kbx-timeline > li{position:relative;display:flex;gap:14px;padding:10px 18px 10px 22px}
.kbx-timeline > li::before{content:"";position:absolute;left:27px;top:0;bottom:0;width:1px;background:var(--border)}
.kbx-timeline > li:first-child::before{top:18px}
.kbx-timeline > li:last-child::before{bottom:auto;height:18px}
.kbx-tl-dot{position:relative;z-index:1;flex:0 0 9px;width:9px;height:9px;margin-top:6px;
  border-radius:999px;background:var(--accent);box-shadow:0 0 0 3px var(--surface)}
.kbx-tl-body{min-width:0;flex:1}
.kbx-tl-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.kbx-tl-head form{margin:0}
.kbx-tl-ver{font-weight:600;color:var(--text);text-decoration:none}
.kbx-tl-ver:hover{color:var(--accent)}
.kbx-tl-meta{color:var(--muted);font-size:.84rem;margin-top:2px}

/* Settings forms — radios stacked, grant adder reuses adm-bar. */
.kbx-radio{display:block;margin:6px 0;font-size:.92rem}
.kbx-grantadd{margin:14px 0 4px}

@media (max-width:760px){.kbx-article{padding:18px 18px}.kbx-pagehead{flex-direction:column}}

/* ── Project tracker (trk) ───────────────────────────────────────────────
   The tracker's own feature layer, built on the adm design language: it
   reuses adm kickers, stat tiles, rosters, meta strips, action rows and
   empty states directly, and adds only what a tracker needs beyond them —
   one chip taxonomy (status by workflow category, priority, type), board
   lanes that read as quiet columns with a consistent card anatomy, a
   project roster row, and a comment timeline. Tokens only; both themes by
   construction. Append-only feature block. */

/* Chip taxonomy — the single source of truth. A trk-chip is a small,
   neutral pill; the modifier carries the meaning. Never style a status,
   priority or type two ways: reuse these everywhere. */
.trk-chip{display:inline-flex;align-items:center;gap:5px;padding:1px 9px;border-radius:999px;
  font-size:.74rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--border);vertical-align:1px}
.trk-chip .dot{width:7px;height:7px;border-radius:999px;background:currentColor;flex:0 0 auto;opacity:.9}
/* Status chips keyed by workflow category. */
.trk-st-backlog{color:var(--muted)}
.trk-st-todo{color:#5b76c4;border-color:color-mix(in srgb,#5b76c4 35%,var(--border));
  background:color-mix(in srgb,#5b76c4 10%,var(--surface))}
.trk-st-in_progress{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,var(--border));
  background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.trk-st-done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,var(--border));
  background:color-mix(in srgb,var(--ok) 10%,var(--surface))}
.trk-st-cancelled{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
[data-theme="dark"] .trk-st-todo{color:#9fb4ee}
/* Priority chips — reuse the established badge-prio palette but as trk-chips. */
.trk-pri-low{color:var(--muted)}
.trk-pri-medium{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,var(--border));
  background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.trk-pri-high{color:#9a5e10;border-color:color-mix(in srgb,#c47a1a 40%,var(--border));
  background:color-mix(in srgb,#c47a1a 14%,var(--surface))}
.trk-pri-urgent{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--border));
  background:color-mix(in srgb,var(--danger) 12%,var(--surface))}
[data-theme="dark"] .trk-pri-high{color:#e0a64a}
/* Type chip — neutral, with a leading mark. */
.trk-ty{color:var(--text);background:var(--surface-2)}
.trk-ty .dot{background:var(--accent);opacity:.75}
/* Mono key chip — issue/project key. */
.trk-key{font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.01em;
  background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:1px 7px;
  color:var(--muted);white-space:nowrap}
a .trk-key,.trk-key a{color:inherit;text-decoration:none}

/* Small initials avatar for assignees — a compact sibling of adm-avatar. */
.trk-av{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:24px;height:24px;border-radius:999px;color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.02em;
  background:linear-gradient(135deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 55%,#7b93ff) 100%)}
[data-theme="dark"] .trk-av{background:linear-gradient(135deg,var(--accent-fill) 0%,#7b93ff 100%)}
.trk-av-stack{display:inline-flex;align-items:center}
.trk-av-stack .trk-av + .trk-av{margin-left:-7px;box-shadow:0 0 0 2px var(--surface)}
.trk-assignee{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--muted)}

/* Board — lanes read as quiet columns; cards share one anatomy. */
.trk-board{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.trk-lane{flex:0 0 290px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:10px 10px 4px}
.trk-lane-head{display:flex;align-items:center;gap:8px;padding:2px 4px 10px;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.trk-lane-head .n{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:650;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:0 7px;letter-spacing:0}
.trk-lane-head .cat{width:7px;height:7px;border-radius:999px;background:var(--muted);flex:0 0 auto}
.trk-lane-head .cat.todo{background:#5b76c4}
.trk-lane-head .cat.in_progress{background:var(--accent)}
.trk-lane-head .cat.done{background:var(--ok)}
.trk-card{display:block;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:9px 11px;margin-bottom:8px;text-decoration:none;color:var(--text);
  box-shadow:var(--shadow);transition:border-color .12s,transform .12s}
.trk-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.trk-card-top{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.trk-card-sum{font-size:.9rem;line-height:1.35;font-weight:550}
.trk-card-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px}
.trk-card-foot .spacer{margin-left:auto}
.trk-labels{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.trk-lane-empty{padding:14px 6px;text-align:center;color:var(--muted);font-size:.82rem;opacity:.7}

/* Roster rows for projects/issues that aren't a board — list table sugar. */
.trk-roster td{vertical-align:middle}
.trk-roster tr{transition:background .1s}
.trk-roster tbody tr:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.trk-roster .nm{font-weight:600}
.trk-roster .nm a{color:inherit;text-decoration:none}
.trk-roster .nm a:hover{color:var(--accent)}
.trk-roster .sub{display:block;color:var(--muted);font-size:.82rem;margin-top:1px}
.trk-chips-cell{display:flex;align-items:center;gap:5px;flex-wrap:wrap}

/* Issue dossier identity header — title + key + chips on one line. */
.trk-id{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:var(--space)}
.trk-id .who{min-width:0;flex:1}
.trk-id h1{margin:0 0 4px;letter-spacing:-.01em;font-size:1.5rem;line-height:1.25}
.trk-id .chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:4px}

/* Comment / activity timeline — a quiet rail of events. */
.trk-timeline{margin:0;padding:0;list-style:none;position:relative}
.trk-timeline li{position:relative;padding:0 0 14px 22px}
.trk-timeline li::before{content:"";position:absolute;left:4px;top:5px;width:8px;height:8px;
  border-radius:999px;background:var(--surface);border:2px solid var(--accent)}
.trk-timeline li::after{content:"";position:absolute;left:7px;top:13px;bottom:-2px;width:2px;
  background:var(--border)}
.trk-timeline li:last-child::after{display:none}
.trk-timeline .ev-meta{font-size:.82rem;color:var(--muted)}
.trk-timeline .ev-meta strong{color:var(--text)}
.trk-act{display:inline-block;font-family:var(--mono);font-size:.74rem;background:var(--surface-2);
  border:1px solid var(--border);border-radius:4px;padding:1px 7px;color:var(--muted)}

/* Comment block on the dossier — author line + body. */
.trk-comment{border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:10px 13px;margin-bottom:10px;background:var(--surface)}
.trk-comment-head{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.trk-comment-head .nm{font-weight:600;font-size:.88rem}
.trk-comment-head .at{color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}
.trk-replies{margin:8px 0 0 14px;border-left:2px solid var(--border);padding-left:12px}

/* Progress meter — cycle/module/analytics completion. */
.trk-prog{background:var(--surface-2);border-radius:999px;height:8px;overflow:hidden;margin:6px 0}
.trk-prog .fill{height:100%;border-radius:999px;background:var(--ok)}

/* Project request-catalog destination cards reuse adm-nav; description cards
   on cycles/modules use a quiet meta line. */
.trk-meta-line{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--muted);font-size:.83rem;
  font-variant-numeric:tabular-nums;margin:2px 0}

/* ── Finance (fnx) ───────────────────────────────────────────────────────
   Documents layer on top of the adm-* language. Finance is paper: invoices,
   quotes, bills, credit notes. It needs a strong number hierarchy, a single
   status-chip taxonomy across every document, crisp right-aligned money
   columns on line tables, an anchored totals block, and aging heat. Reuses
   adm-head/adm-kicker/adm-stat/adm-roster/adm-meta/adm-empty/tnum directly;
   this block adds only the finance-specific document chrome. Tokens only;
   both themes by construction. Append-only feature block. */

/* Status chips — ONE taxonomy for every finance document. Quiet tinted pill
   with a leading dot; semantics map to a state, not a document type. */
.fnx-chip{display:inline-flex;align-items:center;gap:.4em;font-size:.72rem;font-weight:600;
  letter-spacing:.02em;padding:2px 9px;border-radius:999px;line-height:1.5;white-space:nowrap;
  border:1px solid var(--border);background:var(--surface-2);color:var(--muted)}
.fnx-chip::before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor;
  flex-shrink:0;opacity:.85}
/* Neutral / in-progress / settled / attention — built from existing tokens. */
.fnx-chip.draft{color:var(--muted)}
.fnx-chip.sent,.fnx-chip.accepted,.fnx-chip.issued{color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 35%,var(--border));
  background:color-mix(in srgb,var(--accent) 9%,transparent)}
.fnx-chip.paid,.fnx-chip.converted,.fnx-chip.applied,.fnx-chip.active{color:var(--ok);
  border-color:color-mix(in srgb,var(--ok) 35%,var(--border));
  background:color-mix(in srgb,var(--ok) 10%,transparent)}
.fnx-chip.partial{color:#c77d2e;border-color:color-mix(in srgb,#c77d2e 38%,var(--border));
  background:color-mix(in srgb,#c77d2e 10%,transparent)}
.fnx-chip.overdue,.fnx-chip.unpaid{color:var(--danger);
  border-color:color-mix(in srgb,var(--danger) 38%,var(--border));
  background:color-mix(in srgb,var(--danger) 9%,transparent)}
.fnx-chip.void,.fnx-chip.declined,.fnx-chip.paused{color:var(--muted);opacity:.7}
.fnx-chip.role{border-color:color-mix(in srgb,var(--accent) 30%,var(--border));color:var(--accent)}
.fnx-chip.role::before{display:none}

/* Document number as a mono chip in rosters — reads as a reference. */
.fnx-num{display:inline-block;font-family:var(--mono);font-size:.82rem;font-weight:600;
  letter-spacing:-.01em;color:inherit;text-decoration:none}
a.fnx-num:hover{color:var(--accent)}
.fnx-sub{display:block;color:var(--muted);font-size:.82rem;margin-top:1px}
.fnx-code{font-family:var(--mono);font-size:.78rem;background:var(--surface-2);
  border:1px solid var(--border);border-radius:4px;padding:1px 6px;color:var(--muted)}

/* Money column — right-aligned tabular figures everywhere. */
.fnx-money{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Document dossier header — number kicker, party identity, status chips. */
.fnx-doc-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:var(--space)}
.fnx-doc-head .who{min-width:0;flex:1}
.fnx-doc-head h1{margin:0;letter-spacing:-.01em;font-family:var(--mono);font-weight:650;
  font-size:1.5rem;line-height:1.2}
.fnx-doc-head .party{display:block;margin-top:3px;color:var(--muted);font-size:.95rem}
.fnx-doc-head .chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-left:auto;
  padding-top:4px}

/* Meta strip — reuses adm-meta; lets a money cell stand out, due date warn. */
.fnx-meta .v.amt{font-size:1rem;font-weight:650}
.fnx-meta .v.due{color:var(--danger)}

/* Line-items table — crisp paper rows, money hard right, anchored totals. */
.fnx-lines th.num,.fnx-lines td.num{text-align:right;font-variant-numeric:tabular-nums}
.fnx-lines tbody td{vertical-align:top}
.fnx-lines td.amt{font-weight:600}
.fnx-lines tfoot th,.fnx-lines tfoot td{font-variant-numeric:tabular-nums;text-align:right}
.fnx-lines tfoot .sub th,.fnx-lines tfoot .sub td{color:var(--muted);font-weight:550}
.fnx-lines tfoot .grand th,.fnx-lines tfoot .grand td{font-size:1.05rem;font-weight:700}

/* Aging heat — older buckets tint warmer; total column anchored. */
.fnx-aging td.b30{background:color-mix(in srgb,#c77d2e 5%,transparent)}
.fnx-aging td.b60{background:color-mix(in srgb,#c77d2e 9%,transparent)}
.fnx-aging td.b90{background:color-mix(in srgb,var(--danger) 8%,transparent)}
.fnx-aging td.b90p{background:color-mix(in srgb,var(--danger) 14%,transparent);font-weight:600}
.fnx-aging td.tot,.fnx-aging th.tot{font-weight:650;border-left:1px solid var(--border)}
.fnx-aging tfoot th{font-weight:700;border-top:2px solid var(--border);font-variant-numeric:tabular-nums}

/* Tab pair (unbilled time / expenses) — segmented, reads as tabs. */
.fnx-tabs{display:inline-flex;gap:2px;padding:3px;margin-bottom:var(--space);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius)}
.fnx-tabs a{padding:5px 14px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:550;
  color:var(--muted);text-decoration:none;transition:background .1s,color .1s}
.fnx-tabs a:hover{color:var(--text)}
.fnx-tabs a.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}

/* ── Human Resources (hrx) ───────────────────────────────────────────────
   HRM's feature layer, built on the adm design language: it reuses adm
   kickers, stat tiles, rosters, dossier identity headers, meta strips,
   action rows, destination cards and empty states directly, and adds only
   what people/time/leave/expense surfaces need beyond them — one status-chip
   taxonomy shared across timecards, leave, expenses, goals and evaluations;
   leave-balance meters; a quiet timecard entry-grid chrome; right-aligned
   money cells; and a small initials avatar for roster person cells. Tokens
   only; both themes by construction. Append-only feature block. */

/* Status chips — the single source of truth for workflow state across HRM.
   A .hrx-chip is a small neutral pill; the modifier carries the meaning.
   Never style a state two ways: reuse these via the status partials. */
.hrx-chip{display:inline-flex;align-items:center;gap:5px;padding:1px 9px;border-radius:999px;
  font-size:.74rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;vertical-align:1px;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}
.hrx-chip .dot{width:7px;height:7px;border-radius:999px;background:currentColor;flex:0 0 auto;opacity:.9}
.hrx-st-draft{color:var(--muted)}
.hrx-st-submitted,.hrx-st-pending{color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 35%,var(--border));
  background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.hrx-st-approved,.hrx-st-paid,.hrx-st-ok{color:var(--ok);
  border-color:color-mix(in srgb,var(--ok) 35%,var(--border));
  background:color-mix(in srgb,var(--ok) 10%,var(--surface))}
.hrx-st-rejected{color:var(--danger);
  border-color:color-mix(in srgb,var(--danger) 40%,var(--border));
  background:color-mix(in srgb,var(--danger) 12%,var(--surface))}
.hrx-st-warn{color:#9a5e10;border-color:color-mix(in srgb,#c47a1a 40%,var(--border));
  background:color-mix(in srgb,#c47a1a 14%,var(--surface))}
[data-theme="dark"] .hrx-st-warn{color:#e0a64a}

/* Kind/neutral tag — expense kind, leave type, reason. */
.hrx-tag{display:inline-flex;align-items:center;font-size:.74rem;font-weight:600;line-height:1;
  padding:2px 8px;border-radius:999px;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--border);white-space:nowrap;vertical-align:1px}

/* Small initials avatar for roster person cells — a compact sibling of
   adm-avatar (matches trk-av). */
.hrx-av{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:30px;height:30px;border-radius:999px;color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.02em;
  background:linear-gradient(135deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 55%,#7b93ff) 100%)}
[data-theme="dark"] .hrx-av{background:linear-gradient(135deg,var(--accent-fill) 0%,#7b93ff 100%)}

/* Money cell — right-aligned tabular figures, the HRM money idiom. */
.hrx-money{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
th.hrx-money{text-align:right}

/* Leave-balance meters — a labeled row with a quiet fill bar. */
.hrx-meters{display:grid;gap:13px}
.hrx-meter .top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:5px}
.hrx-meter .nm{font-weight:600;font-size:.92rem}
.hrx-meter .bal{font-variant-numeric:tabular-nums;font-weight:650;font-size:.92rem}
.hrx-meter .bal .u{font-size:.78rem;font-weight:500;color:var(--muted);margin-left:3px}
.hrx-bar{background:var(--surface-2);border:1px solid var(--border);border-radius:999px;height:9px;overflow:hidden}
.hrx-bar .fill{height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 60%,#7b93ff) 100%)}
[data-theme="dark"] .hrx-bar .fill{background:linear-gradient(90deg,var(--accent-fill) 0%,#7b93ff 100%)}
.hrx-meter .sub{display:flex;justify-content:space-between;gap:12px;margin-top:4px;
  font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* Timecard entry-grid chrome — the entry forms keep their structure; this
   only quiets the surrounding card and aligns the daily hour cells. */
.hrx-tcgrid input[type=number]{text-align:right;font-variant-numeric:tabular-nums}
.hrx-tctotal{font-variant-numeric:tabular-nums;font-weight:650}

/* Dossier section list — a person's goals/cards rows without table chrome. */
.hrx-linelist{margin:0;padding:0;list-style:none}
.hrx-linelist li{display:flex;align-items:center;gap:11px;padding:11px 18px}
.hrx-linelist li + li{border-top:1px solid var(--border)}
.hrx-linelist .nm{font-weight:600}
.hrx-linelist .nm a{color:inherit;text-decoration:none}
.hrx-linelist .nm a:hover{color:var(--accent)}
.hrx-linelist .sub{display:block;color:var(--muted);font-size:.82rem;margin-top:1px}
.hrx-linelist .spacer{margin-left:auto}

/* Score pill for evaluations — a tabular rating mark. */
.hrx-score{font-variant-numeric:tabular-nums;font-weight:650;font-size:.92rem}
.hrx-score .max{color:var(--muted);font-weight:500;font-size:.82rem}

/* ── CRM & Sales (crx) ───────────────────────────────────────────────────
   The CRM's feature layer on the adm/trk design language. It reuses adm
   kickers, stat tiles, rosters, dossier identity headers, meta strips, action
   rows, empty states, the trk chip + avatar primitives and the trk timeline
   directly; it adds only what selling needs beyond them — a deal pipeline
   board whose lanes carry a stage value alongside the count, a deal card with
   the value emphasized, one stage/status/lifecycle chip taxonomy, a tier
   chip, a weighted-forecast strip and a partner conversion funnel. Money is
   always server-rendered and tabular. Tokens only; both themes by
   construction. Append-only feature block. */

/* Chip taxonomy — built on .trk-chip. Deal status by lifecycle of the deal. */
.crx-st-open{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,var(--border));
  background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.crx-st-won{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,var(--border));
  background:color-mix(in srgb,var(--ok) 10%,var(--surface))}
.crx-st-lost{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
/* Lifecycle stages — quiet by default, the qualified/customer ends earn colour. */
.crx-lc-lead{color:#9a5e10;border-color:color-mix(in srgb,#c47a1a 40%,var(--border));
  background:color-mix(in srgb,#c47a1a 13%,var(--surface))}
.crx-lc-sql,.crx-lc-mql,.crx-lc-opportunity{color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 35%,var(--border));
  background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.crx-lc-customer{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,var(--border));
  background:color-mix(in srgb,var(--ok) 10%,var(--surface))}
[data-theme="dark"] .crx-lc-lead{color:#e0a64a}
/* Partner tier chip — neutral pill with a leading mark, reuses crm-tier-* colours. */
.crx-tier{display:inline-flex;align-items:center;gap:5px;padding:1px 9px;border-radius:999px;
  font-size:.74rem;font-weight:600;white-space:nowrap;background:var(--surface-2);
  border:1px solid var(--border);color:var(--muted);vertical-align:1px}

/* Pipeline board — lanes read as quiet columns; one deal-card anatomy. The
   lane header carries a count and the stage value, right-aligned and tabular. */
.crx-board{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.crx-lane{flex:0 0 286px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:10px 10px 4px}
.crx-lane-head{display:flex;align-items:center;gap:8px;padding:2px 4px 10px;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.crx-lane-head .cat{width:7px;height:7px;border-radius:999px;background:var(--accent);flex:0 0 auto;opacity:.8}
.crx-lane-head .n{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:650;letter-spacing:0;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:0 7px}
.crx-lane-head .sum{font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--text);font-size:.8rem;white-space:nowrap}
.crx-lane-empty{padding:14px 6px;text-align:center;color:var(--muted);font-size:.82rem;opacity:.7}
.crx-lane-more{padding:2px 0 8px;text-align:center}
.crx-card-wrap{margin-bottom:8px}
.crx-card{display:block;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:9px 11px;text-decoration:none;color:var(--text);
  box-shadow:var(--shadow);transition:border-color .12s,transform .12s}
.crx-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.crx-card-title{font-weight:600;font-size:.9rem;line-height:1.3}
.crx-card-acct{color:var(--muted);font-size:.8rem;margin-top:1px}
.crx-card-meta{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-top:7px}
.crx-value{font-weight:650;font-size:.95rem;letter-spacing:-.01em;color:var(--text)}
.crx-prob{font-size:.74rem;font-weight:600;color:var(--muted)}
.crx-card-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px}
.crx-card-foot .spacer{margin-left:auto}

/* Weighted-forecast strip — the headline number on the CRM home. */
.crx-forecast{display:flex;align-items:center;gap:24px;flex-wrap:wrap;text-decoration:none;color:inherit;
  margin-bottom:var(--space);position:relative;overflow:hidden}
.crx-forecast::after{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--accent);opacity:.55}
.crx-forecast:hover{border-color:var(--accent)}
.crx-forecast-lead{display:flex;flex-direction:column;gap:1px}
.crx-forecast-lead .l{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.crx-forecast-lead .n{font-size:1.7rem;font-weight:650;letter-spacing:-.02em;line-height:1.15}
.crx-forecast-cats{display:flex;gap:22px;flex-wrap:wrap}
.crx-forecast-cat{display:flex;flex-direction:column;gap:1px}
.crx-forecast-cat strong{font-size:1rem;font-weight:600}
.crx-forecast-cat .muted{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.crx-forecast-go{margin-left:auto;color:var(--accent);font-weight:600;font-size:.9rem;white-space:nowrap}

/* Dossier identity header — entity name + chips on one line (account/contact/deal/partner). */
.crx-id{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:var(--space)}
.crx-id .who{min-width:0;flex:1}
.crx-id h1{margin:0 0 4px;letter-spacing:-.01em;line-height:1.2}
.crx-id .chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:4px}
.crx-id .adm-actions{display:flex;gap:8px;flex-wrap:wrap;align-self:flex-start;padding-top:2px}

/* Partner conversion funnel — quiet step counts with conversion arrows. */
.crx-funnel-steps{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.crx-funnel-step{flex:1;min-width:120px;text-align:center;padding:14px 12px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--radius)}
.crx-funnel-step .c{display:block;font-size:1.6rem;font-weight:650;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.crx-funnel-step .l{display:block;margin-top:3px;font-size:.72rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.crx-funnel-step.won{border-color:color-mix(in srgb,var(--ok) 45%,var(--border));
  background:color-mix(in srgb,var(--ok) 8%,var(--surface))}
.crx-funnel-arrow{display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--muted);
  font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums}
.crx-funnel-arrow::before{content:"→";margin-right:5px;opacity:.5}

@media (max-width:760px){.crx-forecast-go{margin-left:0}.crx-funnel-arrow{transform:rotate(90deg);padding:4px 0}}

/* ── Forms & Attestations (fmx) ──────────────────────────────────────────
   Forms is paperwork made calm: a builder, a fill surface, completion
   tracking and a defensible attestation record. This layer sits on the
   adm-* language (adm-kicker/head/stats/roster/who/empty/tnum) and the
   trk chip taxonomy, adding only the forms-specific chrome — assignment
   status chips, a measured fill reading column, an emphasized attestation
   block, builder field rows, and a completion meter. Tokens only; both
   themes by construction. Append-only feature block. */

/* Status chips — one taxonomy across My forms, tracking and reports.
   A neutral pill whose modifier carries the meaning, sibling of trk-chip. */
.fmx-chip{display:inline-flex;align-items:center;gap:5px;padding:1px 9px;border-radius:999px;
  font-size:.74rem;font-weight:600;letter-spacing:.01em;white-space:nowrap;vertical-align:1px;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}
.fmx-chip .dot{width:7px;height:7px;border-radius:999px;background:currentColor;flex:0 0 auto;opacity:.9}
.fmx-chip.submitted,.fmx-chip.signed,.fmx-chip.active,.fmx-chip.done{color:var(--ok);
  border-color:color-mix(in srgb,var(--ok) 35%,var(--border));background:color-mix(in srgb,var(--ok) 10%,var(--surface))}
.fmx-chip.pending,.fmx-chip.outstanding{color:#9a5e10;
  border-color:color-mix(in srgb,#c47a1a 40%,var(--border));background:color-mix(in srgb,#c47a1a 12%,var(--surface))}
[data-theme="dark"] .fmx-chip.pending,[data-theme="dark"] .fmx-chip.outstanding{color:#e0a64a}
.fmx-chip.overdue{color:var(--danger);
  border-color:color-mix(in srgb,var(--danger) 40%,var(--border));background:color-mix(in srgb,var(--danger) 12%,var(--surface))}
.fmx-chip.draft,.fmx-chip.inactive,.fmx-chip.archived{color:var(--muted)}
.fmx-chip.published{color:var(--ok);
  border-color:color-mix(in srgb,var(--ok) 35%,var(--border));background:color-mix(in srgb,var(--ok) 10%,var(--surface))}
.fmx-chip.kind{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}
.fmx-chip.kind svg{width:13px;height:13px}
.fmx-chip.kind .dot{display:none}
.fmx-chip.ver{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.fmx-chip.ver .dot{display:none}

/* Quicklinks on the dashboard — destination cards in the adm-nav idiom but
   wider, with a tinted glyph well. */
.fmx-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space);
  margin-bottom:var(--space)}
.fmx-quick a{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  color:inherit;text-decoration:none;transition:border-color .12s,transform .12s}
.fmx-quick a:hover{border-color:var(--accent);transform:translateY(-1px)}
.fmx-quick .ic{flex:0 0 40px;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent)}
.fmx-quick .ic svg{width:21px;height:21px}
.fmx-quick .t{font-weight:650;font-size:1rem;display:flex;align-items:center;gap:8px}
.fmx-quick .d{display:block;color:var(--muted);font-size:.85rem;margin-top:2px}

/* Roster name cells reuse trk-roster sugar; this adds the form-title block. */
.fmx-roster td{vertical-align:middle}
.fmx-roster tr{transition:background .1s}
.fmx-roster tbody tr:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.fmx-roster tr.row-overdue td:first-child{box-shadow:inset 3px 0 0 var(--danger)}
.fmx-name{font-weight:600}
.fmx-name a{color:inherit;text-decoration:none}
.fmx-name a:hover{color:var(--accent)}
.fmx-sub{display:block;color:var(--muted);font-size:.82rem;margin-top:1px}
.fmx-chips-cell{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.fmx-when{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.85rem;white-space:nowrap}

/* Fill surface — a measured reading column, like the KB article column. */
.fmx-fill{max-width:760px}
.fmx-fillhead{margin-bottom:var(--space)}
.fmx-fillhead .lead{margin:0 0 10px;color:var(--text);font-size:1rem;line-height:1.55;max-width:64ch}
.fmx-pin{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px 12px}
.fmx-pin svg{width:14px;height:14px;flex:0 0 auto;opacity:.8}
.fmx-pin strong{color:var(--text)}

/* The acknowledgment document card — read-this-before-you-sign. */
.fmx-doccard{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:var(--space);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.fmx-doccard .ic{flex:0 0 40px;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent)}
.fmx-doccard .ic svg{width:21px;height:21px}
.fmx-doccard .bd{min-width:0;flex:1}
.fmx-doccard .nm{font-weight:650;display:block}
.fmx-doccard .nm a{color:inherit;text-decoration:none}
.fmx-doccard .nm a:hover{color:var(--accent)}
.fmx-doccard p{margin:1px 0 0;color:var(--muted);font-size:.85rem}
.fmx-doccard form{margin:0;flex:0 0 auto}

/* The fill body — the card holding the user-authored fields, plus the
   emphasized attestation / signature block. */
.fmx-fillbody{padding:20px 22px}
.fmx-attest{margin:18px 0 0;padding:16px 18px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border));
  border-left:3px solid var(--accent);border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.fmx-attest + .fmx-attest{margin-top:14px}
.fmx-attest-head{margin:0 0 8px;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.fmx-attest p{margin:0 0 8px;color:var(--muted);font-size:.86rem;line-height:1.5}
.fmx-attest .check{font-weight:550;color:var(--text);align-items:flex-start}
.fmx-actionbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--border)}
.fmx-actionbar .note{color:var(--muted);font-size:.82rem;margin-left:auto}

/* Submitted banner — the final, version-pinned receipt. */
.fmx-receipt{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:13px 18px;margin-bottom:var(--space);
  background:color-mix(in srgb,var(--ok) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--ok) 32%,var(--border));
  border-radius:var(--radius)}
.fmx-receipt .lead-chip{display:inline-flex;align-items:center;gap:6px;font-weight:650;color:var(--ok)}
.fmx-receipt .lead-chip svg{width:16px;height:16px}
.fmx-receipt .m{color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}
.fmx-receipt .m strong{color:var(--text)}

/* Completion meter — the headline tile on tracking/report. Reuses adm-stat. */
.fmx-meter{grid-column:span 2;display:flex;flex-direction:column;justify-content:center;gap:8px}
@media (max-width:560px){.fmx-meter{grid-column:auto}}
.fmx-meter .top{display:flex;align-items:baseline;gap:8px}
.fmx-meter .bar{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.fmx-meter .bar > span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--ok))}

/* Responses page — per-question aggregate cards. */
.fmx-agg .sh h2{display:flex;align-items:center;gap:8px}
.fmx-agg .sh h2 .fb-ic{display:inline-flex;color:var(--accent)}
.fmx-agg .sh h2 .fb-ic svg{width:16px;height:16px}
.fmx-aggbody{padding:4px 18px 16px}
.fmx-aggstats{margin:6px 0 0}
.fmx-aggbars{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.fmx-aggbar{display:grid;grid-template-columns:minmax(120px,220px) 1fr auto;align-items:center;gap:12px}
.fmx-aggbar .lbl{font-size:.9rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fmx-aggbar .bar{height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.fmx-aggbar .bar > span{display:block;height:100%;border-radius:999px;min-width:2px;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,var(--ok)))}
.fmx-aggbar .ct{font-size:.82rem;color:var(--muted);white-space:nowrap}
@media (max-width:560px){.fmx-aggbar{grid-template-columns:1fr auto}.fmx-aggbar .bar{grid-column:1/-1}}
.fmx-aggsamples{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.fmx-aggsamples li{padding:7px 12px;border:1px solid var(--border);border-radius:8px;
  background:var(--surface-2);font-size:.9rem;color:var(--text);overflow-wrap:anywhere}
.fmx-aggrange{margin:8px 0 0;color:var(--text)}

/* Forms two-column shells. fmx-formcols pairs fieldsets side by side on the
   create/edit/import pages; fb-layout is the builder's fields-left /
   add-panel-right split; fb-edit2col renders the shared field form as
   type-picker | settings. All collapse to one column on narrow screens. */
.fmx-formcols{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;align-items:start}
.fmx-formcols .fieldset{margin-top:0}
@media (max-width:860px){.fmx-formcols{grid-template-columns:1fr}}
.fb-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(360px,1fr);gap:18px;align-items:start}
.fb-layout .fb-main-col{min-width:0}
.fb-layout .fb-side-col{position:sticky;top:74px;min-width:0}
.fb-layout .fb-side-col .adm-section{margin-top:0}
@media (max-width:1100px){.fb-layout{grid-template-columns:1fr}.fb-layout .fb-side-col{position:static}}

/* Field form (shared add/edit partial): type card grid + contextual config. */
.ff-coltitle{margin:0 0 8px;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ff-settings .field{margin-bottom:12px}
.ff-settings .fieldset{margin-top:14px}
.fb-edit2col .ff-cols{display:grid;grid-template-columns:minmax(300px,400px) 1fr;gap:24px;align-items:start}
@media (max-width:980px){.fb-edit2col .ff-cols{grid-template-columns:1fr}}
.fb-side-col .ff-type{margin-bottom:14px}
.fb-typegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:560px){.fb-typegrid{grid-template-columns:1fr}}
.fb-typecard{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border:1px solid var(--border);
  border-radius:9px;background:var(--surface);cursor:pointer;transition:border-color .12s,background .12s}
.fb-typecard:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.fb-typecard input{position:absolute;opacity:0;pointer-events:none}
.fb-typecard .ic{flex:0 0 auto;display:inline-flex;color:var(--muted);margin-top:2px}
.fb-typecard .ic svg{width:16px;height:16px}
.fb-typecard .bd{display:flex;flex-direction:column;gap:1px;min-width:0}
.fb-typecard .bd strong{font-size:.84rem;color:var(--text);line-height:1.25}
.fb-typecard .bd small{font-size:.72rem;color:var(--muted);line-height:1.3}
.fb-typecard:has(input:checked){border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 9%,var(--surface));box-shadow:0 0 0 1px var(--accent) inset}
.fb-typecard:has(input:checked) .ic{color:var(--accent)}
.fb-typecard:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.fb-cfg[hidden]{display:none}
.fb-numgrid{grid-template-columns:1fr 1fr 1fr}
@media (max-width:720px){.fb-numgrid{grid-template-columns:1fr}}

/* Template settings lifecycle rows (duplicate / archive / restore). */
.fmx-lifecycle{display:flex;flex-direction:column;gap:10px}
.fmx-liferow{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 14px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2)}
.fmx-liferow .bd strong{font-size:.92rem}
.fmx-liferow .bd p{margin:2px 0 0;font-size:.84rem}
.fmx-liferow form{flex:0 0 auto}

/* Field-list rows: option preview chips under the meta line. */
.fb-opts{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.fb-opt{font-size:.74rem;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--border);border-radius:999px;padding:1px 9px;max-width:180px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-opt.more{border-style:dashed}

/* Builder field rows — tidy list rows in the adm-section idiom. Keeps the
   existing fb-* machinery; this only refreshes the row shell so it reads as
   part of the house language. */
.fmx-fieldlist{padding:6px 0}
.fmx-legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.fmx-legend .fb-chip{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:2px 10px}
.fmx-legend .fb-chip svg{width:14px;height:14px}

/* Import / definition guide — quiet reference tables. */
.fmx-guide{margin-top:calc(var(--space)*1.5)}
.fmx-guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space)}
.fmx-guide h3{margin:0 0 8px;font-size:.95rem}
.fmx-guide h3 + table{margin-bottom:18px}
.fmx-code{margin:0;padding:14px 16px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);overflow:auto;font-family:var(--mono);font-size:.82rem;line-height:1.5}

/* ── Inventory & Assets (invx) ───────────────────────────────────────────
   Stock, assets and subscriptions on top of the adm-* language. Reuses
   adm-head/kicker/sub, adm-stat tiles, adm-nav cards, adm-roster, adm-who/
   avatar, adm-meta, adm-section, adm-feed, adm-empty and tnum directly. Adds
   only what this domain needs beyond them: one status-chip taxonomy across
   items / asset units / subscriptions / locations, a SKU mono chip, a kind
   chip, a quiet location tag, a low-stock tint + on-hand emphasis, and a
   renewal-urgency chip. Quantities and costs are stock-ledger data: rendered
   server-side, never recomputed. Tokens only; both themes by construction.
   Append-only feature block. */

/* Status chip — neutral tinted pill, leading dot, the modifier carries the
   meaning. Mirrors fnx-chip/trk-chip so the whole app reads as one taxonomy. */
.invx-chip{display:inline-flex;align-items:center;gap:.4em;font-size:.72rem;font-weight:600;
  letter-spacing:.02em;padding:2px 9px;border-radius:999px;line-height:1.5;white-space:nowrap;
  border:1px solid var(--border);background:var(--surface-2);color:var(--muted)}
.invx-chip::before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor;
  flex-shrink:0;opacity:.85}
/* Settled / in-service / active — the steady-state green. */
.invx-chip.active,.invx-chip.assigned,.invx-chip.open{color:var(--ok);
  border-color:color-mix(in srgb,var(--ok) 35%,var(--border));
  background:color-mix(in srgb,var(--ok) 10%,transparent)}
/* In motion / available — accent. */
.invx-chip.in_stock,.invx-chip.in-stock{color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 35%,var(--border));
  background:color-mix(in srgb,var(--accent) 9%,transparent)}
/* Attention / transient — warm amber. */
.invx-chip.in_repair,.invx-chip.in-repair{color:#c77d2e;
  border-color:color-mix(in srgb,#c77d2e 38%,var(--border));
  background:color-mix(in srgb,#c77d2e 10%,transparent)}
[data-theme="dark"] .invx-chip.in_repair,[data-theme="dark"] .invx-chip.in-repair{color:#e0a64a}
/* End-of-life / dormant — muted, no fanfare. */
.invx-chip.retired,.invx-chip.archived,.invx-chip.closed,.invx-chip.cancelled,
.invx-chip.disposed,.invx-chip.paused{color:var(--muted);opacity:.75}
/* Kind chip — what a catalog row IS (stock/service/asset/subscription). Neutral
   with a leading mark, like trk-ty; type is a fact, not a state. */
.invx-kind{color:var(--text);background:var(--surface-2);border:1px solid var(--border)}
.invx-kind::before{background:var(--accent);opacity:.7}

/* SKU mono chip — reads as a reference, like fnx-num. */
.invx-sku{display:inline-block;font-family:var(--mono);font-size:.82rem;font-weight:600;
  letter-spacing:-.01em;color:inherit;text-decoration:none}
a.invx-sku:hover{color:var(--accent)}
.invx-sub{display:block;color:var(--muted);font-size:.82rem;margin-top:1px}

/* Location tag — small contextual pill, sibling of kbx-spacechip. */
.invx-loc{display:inline-flex;align-items:center;gap:.35em;font-size:.76rem;font-weight:550;
  line-height:1;padding:3px 8px;border-radius:var(--radius-sm);color:var(--muted);
  background:var(--surface-2);border:1px solid var(--border);white-space:nowrap}
.invx-loc::before{content:"";width:6px;height:6px;border-radius:1px;background:var(--muted);
  opacity:.6;flex-shrink:0}

/* Quantity column — on-hand reads bold-ish, hard right, tabular. */
.invx-qty{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.invx-money{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Renewal-urgency chip — a subscription renewing soon. Warm, like low-stock. */
.invx-soon{display:inline-flex;align-items:center;font-size:.7rem;font-weight:600;letter-spacing:.02em;
  padding:1px 7px;border-radius:999px;white-space:nowrap;color:#9a5e10;
  border:1px solid color-mix(in srgb,#c77d2e 38%,var(--border));
  background:color-mix(in srgb,#c77d2e 10%,transparent);margin-left:6px}
[data-theme="dark"] .invx-soon{color:#e0a64a}

/* Dossier identity header — entity name + chips on one line (item/asset/sub). */
.invx-id{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:var(--space)}
.invx-id .who{min-width:0;flex:1}
.invx-id h1{margin:0 0 4px;letter-spacing:-.01em;line-height:1.2}
.invx-id .sub{display:block;color:var(--muted);font-size:.92rem}
.invx-id .chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:4px}
.invx-id .adm-actions{display:flex;gap:8px;flex-wrap:wrap;align-self:flex-start;padding-top:2px}

/* Meta strip emphasis — a value cell that should read as money/quantity. */
.invx-meta .v.amt{font-size:1rem;font-weight:650}

/* ── hrx (continued) — benefits / certs / skills / onboarding ─────────────
   Wave-B extension of the Human Resources feature layer. Builds strictly on
   the adm/hrx primitives already defined above; adds only the few idioms the
   benefits, certification, skill-matrix and onboarding surfaces need beyond
   them — a clickable stat tile (banner/active-year link), an expiry-urgency
   chip pair, a skill proficiency level chip, a skill-matrix heat cell, a
   compact readiness/summary strip, and a checklist progress meter. Tokens
   only; both themes by construction. Append-only. */

/* Clickable stat tile — reuses .adm-stat as a destination (enrollment banner,
   active plan year). Stacks its label/number/desc and lifts on hover. */
a.adm-stat.ben-banner-link{display:flex;flex-direction:column;gap:1px;text-decoration:none;color:inherit;
  margin-bottom:var(--space);transition:border-color .12s,transform .12s}
a.adm-stat.ben-banner-link:hover{border-color:var(--accent);transform:translateY(-1px)}
a.adm-stat.ben-banner-link .n{font-size:1.3rem;margin-top:2px}

/* Certification expiry urgency — a warmer/danger chip pair on top of hrx-chip,
   the single source of truth for cert lifecycle. */
.hrx-st-expiring{color:#9a5e10;border-color:color-mix(in srgb,#c47a1a 40%,var(--border));
  background:color-mix(in srgb,#c47a1a 14%,var(--surface))}
[data-theme="dark"] .hrx-st-expiring{color:#e0a64a}
.hrx-st-expired{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--border));
  background:color-mix(in srgb,var(--danger) 12%,var(--surface))}
.hrx-st-superseded{color:var(--muted);opacity:.8}

/* Skill proficiency level chip — a small tabular rank mark. */
.hrx-lvl{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:600;
  padding:1px 8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);
  color:var(--text);white-space:nowrap;vertical-align:1px;font-variant-numeric:tabular-nums}
.hrx-lvl .rk{color:var(--accent);font-weight:700}
.hrx-lvl.met{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,var(--border));
  background:color-mix(in srgb,var(--ok) 10%,var(--surface))}
.hrx-lvl.below{color:#9a5e10;border-color:color-mix(in srgb,#c47a1a 40%,var(--border));
  background:color-mix(in srgb,#c47a1a 14%,var(--surface))}
.hrx-lvl.missing{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,var(--border));
  background:color-mix(in srgb,var(--danger) 10%,var(--surface))}
[data-theme="dark"] .hrx-lvl.below{color:#e0a64a}

/* Readiness / summary strip — reuses adm-meta semantics: a labeled figure row. */
.hrx-summary{display:flex;flex-wrap:wrap;gap:0 30px;padding:13px 18px;margin-bottom:var(--space);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.hrx-summary .m{display:flex;flex-direction:column;gap:1px;padding:4px 0}
.hrx-summary .k{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hrx-summary .v{font-size:1.05rem;font-weight:650;font-variant-numeric:tabular-nums}
.hrx-summary .v.sub{font-size:.92rem;font-weight:550}

/* Skill-matrix heat cell — quietly tints a competency grid by level. */
.hrx-matrix td.lvl{text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.hrx-matrix td.l1{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.hrx-matrix td.l2{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.hrx-matrix td.l3{background:color-mix(in srgb,var(--accent) 19%,transparent)}
.hrx-matrix td.l4{background:color-mix(in srgb,var(--accent) 27%,transparent)}
.hrx-matrix td.l5{background:color-mix(in srgb,var(--accent) 36%,transparent)}
.hrx-matrix .v{color:var(--ok);font-weight:700;margin-left:2px}

/* Checklist progress meter — onboarding/offboarding "X / Y" with a quiet bar. */
.hrx-prog{display:flex;align-items:center;gap:10px;min-width:160px}
.hrx-prog .bar{flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;
  height:8px;overflow:hidden}
.hrx-prog .bar span{display:block;height:100%;border-radius:999px;background:var(--ok)}
.hrx-prog .bar.partial span{background:linear-gradient(90deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 60%,#7b93ff) 100%)}
.hrx-prog .lbl{font-variant-numeric:tabular-nums;font-weight:600;font-size:.85rem;white-space:nowrap}

/* Checklist dossier — onboarding/offboarding task rows with a done state. */
.hrx-tasks{margin:0;padding:0;list-style:none}
.hrx-tasks li{display:flex;align-items:center;gap:13px;padding:12px 18px}
.hrx-tasks li + li{border-top:1px solid var(--border)}
.hrx-tasks .tk{min-width:0;flex:1}
.hrx-tasks .tk .nm{font-weight:600}
.hrx-tasks .tk .nm a{color:inherit;text-decoration:none}
.hrx-tasks .tk .nm a:hover{color:var(--accent)}
.hrx-tasks li.done .tk .nm{color:var(--muted);font-weight:500}
.hrx-tasks .mark{flex:0 0 26px;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:999px;border:1.5px solid var(--border);color:var(--muted);font-size:.85rem}
.hrx-tasks li.done .mark{border-color:color-mix(in srgb,var(--ok) 50%,var(--border));color:var(--ok);
  background:color-mix(in srgb,var(--ok) 10%,transparent)}
.hrx-tasks form{margin:0;flex:0 0 auto}
.hrx-tasks .spacer{margin-left:auto}
.hrx-tasks .tk .hrx-tag,.hrx-tasks .tk .hrx-chip{margin-left:6px}

/* ── Files, Procurement & Platform (msx) ─────────────────────────────────
   The final feature layer on the adm design language. It reuses adm
   kickers, stat tiles, rosters, dossier identity headers, meta strips,
   action rows, destination cards and empty states directly; it adds only
   what these three territories need beyond them — library destination
   cards with a type icon, a purchase-order status chip taxonomy and a
   three-way match panel, and a "platform" accent so the control plane
   reads as distinct from a tenant. Tokens only; both themes by
   construction. Append-only feature block. */

/* Library destination cards — icon + name + type tag, a calm roster of
   shared libraries and personal drives. Reuses the .card surface. */
.msx-libgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space)}
.msx-libcard{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;
  transition:border-color .12s,transform .12s}
.msx-libcard:hover{border-color:var(--accent);transform:translateY(-1px)}
.msx-libicon{flex:0 0 42px;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 10%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));color:var(--accent)}
.msx-libbody{min-width:0;flex:1}
.msx-libname{display:block;font-weight:600;font-size:.98rem;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msx-libsub{display:block;color:var(--muted);font-size:.82rem;margin-top:1px}
.msx-libtags{flex:0 0 auto;display:flex;gap:5px;align-items:center}

/* Purchase-order status chips — ONE taxonomy across procurement, built like
   the fnx/hrx chips. The modifier carries the meaning. */
.msx-chip{display:inline-flex;align-items:center;gap:.4em;font-size:.72rem;font-weight:600;
  letter-spacing:.02em;padding:2px 9px;border-radius:999px;line-height:1.5;white-space:nowrap;
  border:1px solid var(--border);background:var(--surface-2);color:var(--muted);vertical-align:1px}
.msx-chip::before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor;
  flex-shrink:0;opacity:.85}
.msx-chip.draft,.msx-chip.cancelled,.msx-chip.closed{color:var(--muted)}
.msx-chip.cancelled{text-decoration:line-through;text-decoration-thickness:1px}
.msx-chip.submitted,.msx-chip.pending,.msx-chip.ordered,.msx-chip.sent{color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 35%,var(--border));
  background:color-mix(in srgb,var(--accent) 9%,transparent)}
.msx-chip.approved,.msx-chip.received,.msx-chip.billed,.msx-chip.paid,.msx-chip.complete{color:var(--ok);
  border-color:color-mix(in srgb,var(--ok) 35%,var(--border));
  background:color-mix(in srgb,var(--ok) 10%,transparent)}
.msx-chip.partial,.msx-chip.partially_received{color:#c77d2e;
  border-color:color-mix(in srgb,#c77d2e 38%,var(--border));
  background:color-mix(in srgb,#c77d2e 10%,transparent)}
.msx-chip.rejected,.msx-chip.overdue{color:var(--danger);
  border-color:color-mix(in srgb,var(--danger) 38%,var(--border));
  background:color-mix(in srgb,var(--danger) 9%,transparent)}

/* Mono document number chip — reads as a reference (PO/REQ numbers). */
.msx-num{display:inline-block;font-family:var(--mono);font-size:.82rem;font-weight:600;
  letter-spacing:-.01em;color:inherit;text-decoration:none}
a.msx-num:hover{color:var(--accent)}
.msx-sub{display:block;color:var(--muted);font-size:.82rem;margin-top:1px}

/* Money cell — right-aligned tabular figures everywhere in procurement. */
.msx-money{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
th.msx-money{text-align:right}

/* PO dossier header — number kicker, vendor identity, status chips. */
.msx-doc-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:var(--space)}
.msx-doc-head .who{min-width:0;flex:1}
.msx-doc-head h1{margin:0;letter-spacing:-.01em;font-family:var(--mono);font-weight:650;
  font-size:1.5rem;line-height:1.2}
.msx-doc-head .party{display:block;margin-top:3px;color:var(--muted);font-size:.95rem}
.msx-doc-head .chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-left:auto;padding-top:4px}

/* Line-items table — crisp rows, money hard right, anchored totals. */
.msx-lines th.num,.msx-lines td.num{text-align:right;font-variant-numeric:tabular-nums}
.msx-lines tbody td{vertical-align:top}
.msx-lines td.amt{font-weight:600}
.msx-lines tfoot th,.msx-lines tfoot td{font-variant-numeric:tabular-nums;text-align:right}
.msx-lines tfoot .sub th,.msx-lines tfoot .sub td{color:var(--muted);font-weight:550}
.msx-lines tfoot .grand th,.msx-lines tfoot .grand td{font-size:1.05rem;font-weight:700}

/* Three-way match panel — ordered / received / billed at a glance. Each
   leg is a labeled tabular figure; the panel tints when fully matched. */
.msx-match{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;margin-bottom:var(--space)}
.msx-match-leg{padding:14px 16px;position:relative}
.msx-match-leg + .msx-match-leg{border-left:1px solid var(--border)}
.msx-match-leg .l{display:block;font-size:.7rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.msx-match-leg .n{display:block;margin-top:3px;font-size:1.35rem;font-weight:650;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.msx-match-leg .d{display:block;margin-top:2px;font-size:.78rem;color:var(--muted);
  font-variant-numeric:tabular-nums}
.msx-match-leg.ok{background:color-mix(in srgb,var(--ok) 6%,var(--surface))}
.msx-match-leg.ok .n{color:var(--ok)}
.msx-match-leg.warn{background:color-mix(in srgb,#c77d2e 6%,var(--surface))}
.msx-match-leg.warn .n{color:#c77d2e}
[data-theme="dark"] .msx-match-leg.warn .n{color:#e0a64a}

/* Platform control plane — a distinct accent so the room reads as "platform"
   not "tenant". The kicker keeps the adm form; this only colours its rule and
   tints the stat tiles' edge a deeper indigo. */
.msx-plat .adm-kicker::before{background:#6d5bd0}
.msx-plat .adm-stat::after{background:#6d5bd0}
.msx-plat-badge{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#6d5bd0;
  background:color-mix(in srgb,#6d5bd0 12%,transparent);
  border:1px solid color-mix(in srgb,#6d5bd0 30%,transparent);border-radius:999px;padding:2px 9px}
[data-theme="dark"] .msx-plat .adm-kicker::before,[data-theme="dark"] .msx-plat .adm-stat::after{background:#9384e8}
[data-theme="dark"] .msx-plat-badge{color:#b3a8f0;border-color:color-mix(in srgb,#9384e8 40%,transparent)}

@media (max-width:760px){.msx-match-leg + .msx-match-leg{border-left:none;border-top:1px solid var(--border)}}

/* ---- Help & guides (hlp-) — built-in product guidance pages -------------- */
.hlp-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space);align-items:start}
.hlp-list{display:flex;flex-direction:column;gap:2px}
.hlp-item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--radius-sm);text-decoration:none;border:1px solid transparent}
.hlp-item:hover{background:var(--bg);border-color:var(--border)}
.hlp-item .t{font-weight:600;color:var(--text)}
.hlp-item .d{font-size:.85rem;color:var(--muted)}
.hlp-read{display:grid;grid-template-columns:minmax(0,46rem) 15rem;gap:var(--space);align-items:start}
.hlp-article{padding:26px 32px}
.hlp-article h1:first-child{margin-top:0}
.hlp-nav{display:flex;flex-direction:column;gap:2px}
.hlp-nav a{padding:6px 10px;border-radius:var(--radius-sm);text-decoration:none;color:var(--text);font-size:.88rem}
.hlp-nav a:hover{background:var(--bg)}
.hlp-nav a.on{background:var(--bg);font-weight:600}
.helphint{font-size:.85rem;color:var(--muted)}
.helphint a{color:inherit;text-decoration:underline}
@media (max-width:900px){.hlp-grid,.hlp-read{grid-template-columns:1fr}}

/* ===== Chat ===== */
/* Slack-style messaging. Two-pane comes free from the page nav (channel list)
   plus the main column. House tokens only; no new framework. */
.chat-hash{color:var(--muted);font-weight:600;margin-right:1px}
.side-link.chat-ch{display:flex;align-items:center;gap:6px}
.side-link.chat-ch .chat-ch-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-link.chat-ch-arch .chat-ch-name{color:var(--muted);font-style:italic}
.chat-badge{display:inline-block;min-width:18px;padding:0 5px;border-radius:999px;background:var(--accent);
  color:var(--accent-text);font-size:.72rem;font-weight:700;line-height:18px;text-align:center}
.chat-pane{padding:0;display:flex;flex-direction:column;max-height:62vh;overflow-y:auto}
.chat-older{padding:8px 16px;text-align:center;border-bottom:1px solid var(--border)}
.chat-stream{display:flex;flex-direction:column;padding:8px 0}
.chat-day-divider{display:flex;align-items:center;gap:10px;margin:10px 16px;color:var(--muted);font-size:.78rem}
.chat-day-divider::before,.chat-day-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.chat-msg{display:flex;gap:10px;padding:6px 16px;align-items:flex-start}
.chat-msg:hover{background:var(--surface-2)}
.chat-msg:target{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.chat-avatar{flex:none;width:32px;height:32px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:var(--muted)}
.chat-body{flex:1;min-width:0}
.chat-meta{display:flex;align-items:baseline;gap:8px;line-height:1.2}
.chat-author{font-weight:600;color:var(--text)}
.chat-time{font-size:.75rem;color:var(--muted)}
.chat-edited{font-size:.72rem;color:var(--muted)}
.chat-text{margin-top:2px;color:var(--text);overflow-wrap:anywhere}
.chat-text p{margin:.2em 0}
.chat-text p:first-child{margin-top:0}
.chat-text p:last-child{margin-bottom:0}
.chat-msg-actions{margin-top:3px;display:flex;gap:10px;align-items:center}
.chat-act{font-size:.78rem;color:var(--muted);background:none;border:none;cursor:pointer;padding:0;text-decoration:underline}
.chat-act:hover{color:var(--text)}
.chat-act-danger:hover{color:var(--danger,#b3261e)}
.chat-edit{display:inline}
.chat-edit>summary{list-style:none;display:inline;cursor:pointer}
.chat-edit>summary::-webkit-details-marker{display:none}
.chat-edit-form{margin-top:6px}
.chat-edit-form textarea{width:100%}
.chat-composer{margin-top:var(--space);padding:12px 16px}
.chat-composer .chat-input{width:100%;resize:vertical}
.chat-composer .actions{margin-top:8px}

/* ===== Chat: @mention picker (sprinkle, 2026-06-06) ===== */
.chat-composer{position:relative}
.chat-mention-menu{position:absolute;bottom:calc(100% - 6px);left:16px;min-width:260px;max-width:90%;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.12);padding:4px;z-index:30;max-height:280px;overflow-y:auto}
.chat-mention-item{display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;border:0;background:none;padding:6px 10px;border-radius:6px;cursor:pointer;font:inherit;color:var(--text)}
.chat-mention-item .h{font-weight:600;white-space:nowrap}
.chat-mention-item .n{color:var(--muted);font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-mention-item.active,.chat-mention-item:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}

/* ===== Chat: enterprise polish (2026-06-07) =====
   "Calm operations deck": Slack-grade ergonomics (grouped runs, identity hues,
   hover actions, sticky day rails) in the house .adm- voice. Overrides earlier
   .chat-* rules where noted; tokens + color-mix only, dark-mode safe. */

/* channel header */
.chat-chanhead .chat-topic{max-width:64ch}

/* pane: taller, calmer scroll field */
.chat-pane{max-height:none;height:calc(100vh - 340px);min-height:340px;scroll-behavior:smooth}

/* sticky day rail */
.chat-day-divider{position:sticky;top:8px;z-index:6;margin:14px 16px 6px}
.chat-day-divider::before,.chat-day-divider::after{background:color-mix(in srgb,var(--border) 70%,transparent)}
.chat-day-pill{background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:2px 12px;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);box-shadow:0 1px 4px rgba(0,0,0,.05)}

/* message rows: fixed gutter, grouped runs, hover-revealed timestamps */
.chat-msg{position:relative;gap:12px;padding:7px 16px 6px;border-radius:0}
.chat-msg-compact{padding-top:1px;padding-bottom:1px}
.chat-gutter{flex:none;width:36px;display:flex;justify-content:center}
.chat-avatar{width:34px;height:34px;font-size:.74rem;border:none;color:#fff}
.chat-gutter-time{visibility:hidden;font-size:.66rem;color:var(--muted);line-height:1.6rem;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.chat-msg:hover .chat-gutter-time{visibility:visible}
.chat-meta{gap:8px;margin-bottom:1px}
.chat-author{letter-spacing:-.005em}
.chat-time{font-variant-numeric:tabular-nums}

/* identity hues: deterministic per author, white initials on a saturated disc */
.chat-av-h0{background:#5b6ee1}.chat-av-h1{background:#2f9e8f}.chat-av-h2{background:#c2703e}
.chat-av-h3{background:#9061c2}.chat-av-h4{background:#3d8bd4}.chat-av-h5{background:#c25d7e}
.chat-av-h6{background:#6d9e3f}.chat-av-h7{background:#b58a2e}

/* mention chip */
.chat-mention{background:color-mix(in srgb,var(--accent) 14%,transparent);
  color:var(--accent);font-weight:600;border-radius:4px;padding:0 3px}

/* hover actions: quiet until the row is touched */
.chat-msg-actions{position:absolute;top:-10px;right:16px;margin:0;gap:2px;
  background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:2px 4px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);opacity:0;pointer-events:none;transition:opacity .12s ease}
.chat-msg:hover .chat-msg-actions,.chat-msg:focus-within .chat-msg-actions{opacity:1;pointer-events:auto}
.chat-msg-actions .chat-act{text-decoration:none;padding:3px 8px;border-radius:5px;font-size:.76rem}
.chat-msg-actions .chat-act:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.chat-msg-actions .chat-act-danger:hover{background:color-mix(in srgb,#b3261e 12%,transparent)}
.chat-edit[open] .chat-edit-form{position:relative;z-index:7}
.chat-edit[open]{display:block}

/* target pulse: bell deep-links land here */
.chat-msg:target{animation:chatTargetFade 2.4s ease forwards}
@keyframes chatTargetFade{
  0%,55%{background:color-mix(in srgb,var(--accent) 16%,transparent)}
  100%{background:transparent}}

/* empty state */
.chat-empty .big{color:color-mix(in srgb,var(--accent) 45%,var(--muted));font-weight:700}

/* composer: framed shell, hint rail, focus lift */
.chat-composer{padding:10px 16px 12px}
.chat-composer-shell{border:1px solid var(--border);border-radius:10px;overflow:hidden;
  transition:border-color .12s ease,box-shadow .12s ease}
.chat-composer-shell:focus-within{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.chat-composer-shell .chat-input{border:none;outline:none;box-shadow:none;border-radius:0;
  padding:10px 12px;background:transparent;display:block}
.chat-composer-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 8px 6px 12px;border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
.chat-composer-hint{font-size:.74rem;color:var(--muted)}
.chat-composer-hint strong{color:var(--text);font-weight:600}
.chat-composer-off{text-align:center}

/* sidebar: unread channels speak up */
.side-link.chat-ch-unread .chat-ch-name{font-weight:700;color:var(--text)}

/* directory rows */
.chat-dir{padding:6px}
.chat-dir-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:8px;
  text-decoration:none;color:var(--text)}
.chat-dir-row:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.chat-dir-row+.chat-dir-row{border-top:1px solid color-mix(in srgb,var(--border) 55%,transparent)}
.chat-dir-hash{flex:none;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent);font-weight:700}
.chat-dir-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.chat-dir-name{font-weight:600}
.chat-dir-topic{font-size:.82rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-dir-arch .chat-dir-name{color:var(--muted);font-style:italic}
.chat-dir-go{color:var(--muted)}
.chat-dir-row:hover .chat-dir-go{color:var(--accent)}

/* create-channel form: two-column field grid on wide screens */
.chat-create-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media (max-width:760px){.chat-create-grid{grid-template-columns:1fr}}

/* mention picker inherits the polish */
.chat-mention-menu{border-radius:10px;box-shadow:0 10px 32px rgba(0,0,0,.16)}
.chat-msg-actions .chat-edit-form{width:min(480px,62vw)}
.chat-stream{margin-top:auto} /* sparse conversations anchor to the bottom, like any chat */

/* ===== Chat: full-height channel layout (2026-06-11) =====
   A real messaging surface instead of a tall card floating in the scroll
   document: the channel column fills the viewport below the topbar, the
   message stream is the only thing that scrolls, and the composer is pinned
   to the bottom so it's always reachable — no page scroll to find the input.
   :has() lets the chat page opt the shared .app-main/.container out of their
   centred-card margins without a per-page body class. */
.app-main:has(.chatx){height:calc(100dvh - var(--topbar-h));overflow:hidden}
.app-main:has(.chatx)>.container{margin:0;max-width:none;padding:0;height:100%;
  display:flex;flex-direction:column;min-height:0}
.chatx{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;background:var(--bg)}

/* compact single-row header: name · scope · topic, with Settings pushed right.
   Replaces the old kicker+H1+description hero that pushed the input off-screen. */
.chatx-head{flex:none;display:flex;align-items:center;gap:9px;padding:0 18px;
  height:52px;background:var(--surface);border-bottom:1px solid var(--border)}
.chatx-title{margin:0;font-size:1.05rem;font-weight:680;letter-spacing:-.015em;
  white-space:nowrap;display:inline-flex;align-items:center;gap:2px}
.chatx-title .chat-hash{font-size:1.05rem}
.chatx-scope{flex:none;font-size:.7rem;font-weight:650;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);background:var(--surface-2);border-radius:999px;padding:3px 9px}
.chatx-topic{min-width:0;flex:0 1 auto;color:var(--muted);font-size:.86rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding-left:11px;margin-left:2px;border-left:1px solid var(--border)}
.chatx-settings{flex:none;margin-left:auto}

/* the stream fills all remaining height and is the sole scroll region */
.chatx>.chat-pane{flex:1 1 auto;height:auto;max-height:none;min-height:0;
  border:none;border-radius:0;background:transparent;box-shadow:none}

/* composer pinned at the foot of the column */
.chatx>.chat-composer{flex:none;margin:0;padding:12px 18px 14px;
  background:var(--surface);border-top:1px solid var(--border)}
.chatx>.chat-composer.chat-composer-off{padding:14px 18px}
/* the day-rail sticks to the top of the stream, which now starts at y=0 */
.chatx .chat-day-divider{top:6px}

/* ===========================================================================
   People layer (Wave 1) — shared identity primitives + directory/profile.
   Tokens + color-mix only; dark-mode safe (inherits surface/border/text).
   The .chat-av-h{n} hue backgrounds are reused for fallback initials tiles.
   =========================================================================== */

/* Circular photo + initials tile share a footprint so they're interchangeable. */
.avatar-img{border-radius:999px;object-fit:cover;background:var(--surface-2);
  display:inline-block;flex:0 0 auto}
.avatar-tile{display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;color:#fff;font-weight:700;line-height:1;letter-spacing:.02em;
  flex:0 0 auto;text-transform:uppercase}

/* userbadge partial: avatar + linked name (+ optional title). */
.ubadge{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  color:inherit;max-width:100%}
.ubadge:hover .ubadge-name{text-decoration:underline}
.ubadge-av{width:40px;height:40px;font-size:.82rem}
.ubadge-text{display:flex;flex-direction:column;min-width:0}
.ubadge-name{font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ubadge-title{font-size:.8rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* userchip partial: compact inline avatar + linked name. */
.uchip{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--text)}
.uchip:hover .uchip-name{text-decoration:underline}
.uchip-av{width:24px;height:24px;font-size:.62rem}
.uchip-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Directory search bar. */
.ppl-search{display:flex;gap:8px;align-items:center;margin:0 0 18px}
.ppl-search .field-input{max-width:360px}

/* Directory card grid. */
.ppl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.ppl-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  padding:20px 14px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s}
.ppl-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));
  box-shadow:0 2px 10px color-mix(in srgb,var(--text) 8%,transparent)}
.ppl-card-av{width:64px;height:64px;font-size:1.2rem}
.ppl-card-name{font-weight:600;color:var(--text)}
.ppl-card-title{font-size:.82rem;color:var(--text-muted)}
.ppl-empty{padding:28px;text-align:center;color:var(--text-muted)}

/* Profile hero. */
.ppl-hero{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ppl-hero-av{width:96px;height:96px;font-size:1.9rem}
.ppl-hero-id{flex:1 1 240px;min-width:0}
.ppl-hero-name{margin:0;font-size:1.5rem}
.ppl-pronouns{font-size:.95rem;font-weight:400;color:var(--text-muted)}
.ppl-hero-title{margin-top:2px;color:var(--text);font-weight:500}
.ppl-hero-meta{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--text-muted);font-size:.88rem}
.ppl-hero-meta .ppl-meta-item{position:relative}
.ppl-hero-meta .ppl-meta-item+.ppl-meta-item::before{content:"·";margin-right:14px;
  color:color-mix(in srgb,var(--text-muted) 60%,transparent)}
.ppl-hero-edit{align-self:flex-start}

/* Profile bio + reporting + owner-only HR block. */
.ppl-bio{color:var(--text)}
.ppl-report-block{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.ppl-report-block{grid-template-columns:1fr}}
.ppl-report-h{margin:0 0 8px;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.ppl-report-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ppl-hr-tag,.ppl-hr .ppl-hr-tag{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-muted);border:1px solid var(--border);border-radius:999px;padding:1px 8px;margin-left:8px;vertical-align:middle}

/* Self-edit photo controls. */
.ppl-edit-photo{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}
.ppl-edit-av{width:80px;height:80px;font-size:1.6rem}
.ppl-edit-photo-controls{flex:1 1 240px;min-width:0}
.ppl-edit-remove{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:var(--text);margin-top:4px}

/* ===========================================================================
   Chat × people layer (Wave 2) — the message-row author identity is now the
   shared people.Badge: the group-leader avatar can be an uploaded photo, and
   the avatar + author name link to the profile. Reuses .avatar-img and the
   existing .chat-av-h{n} hues; only adds what the linked/photo variants need.
   Tokens only, dark-mode safe. =========================================== */
.chat-avatar-link{text-decoration:none;overflow:hidden;padding:0}
.chat-avatar-img{width:100%;height:100%;border-radius:50%}
.chat-author{text-decoration:none;color:var(--text)}
.chat-author:hover{text-decoration:underline}

/* KB article pages: utilize the full width. The article previously capped at a
   74ch reading measure, which left dead space between the text and the right
   "On this page" rail on wide viewports. Drop the cap so the article fills its
   grid column edge-to-edge (the rail keeps its place at the right). KB-only —
   .kbx-article is the KB reading card; other .detail-2col pages are unaffected. */
.kbx-article{max-width:none}

/* KB page discussion (flat comment log under the article). */
.kb-comments{margin-top:var(--space);padding:20px 24px}
.kb-comments-head{display:flex;align-items:center;gap:10px;margin:0 0 4px}
.kb-comments-head h2{margin:0;font-size:1.15rem}
.kb-comments-n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  padding:0 7px;border-radius:999px;background:color-mix(in srgb,var(--accent) 14%,transparent);
  color:var(--accent);font-size:.78rem;font-weight:600}
.kb-comments-empty{margin:10px 0 18px}
.kb-comment-list{list-style:none;margin:14px 0 18px;padding:0;display:flex;flex-direction:column;gap:18px}
.kb-comment{padding-bottom:16px;border-bottom:1px solid var(--border)}
.kb-comment:last-child{border-bottom:none;padding-bottom:0}
.kb-comment-meta{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.kb-comment-time{color:var(--text-muted);font-size:.82rem}
.kb-comment-body{line-height:1.6}
.kb-comment-body > :first-child{margin-top:0}
.kb-comment-body > :last-child{margin-bottom:0}
.kb-comment-actions{display:flex;align-items:center;gap:14px;margin-top:8px}
.kb-comment-act{background:none;border:none;padding:0;cursor:pointer;color:var(--text-muted);
  font-size:.82rem;font-family:inherit}
.kb-comment-act:hover{color:var(--text);text-decoration:underline}
.kb-comment-act-danger:hover{color:var(--danger)}
.kb-comment-edit{display:inline}
.kb-comment-edit summary{list-style:none}
.kb-comment-edit summary::-webkit-details-marker{display:none}
.kb-comment-editform{margin-top:10px}
.kb-comment-form{margin-top:6px}
.kb-comment-form textarea,.kb-comment-editform textarea{width:100%;resize:vertical}

/* DOCX editor layout fix — pin the ribbon under the topbar without overlapping
   the document. The earlier rules made the card an overflow:hidden box AND gave
   the editing surface its own 78vh scroller, so the page-sticky ribbon floated
   over the inner-scrolled body (it sliced through the first lines). Here the
   page is the single scroller: the card lets the sticky ribbon escape, and the
   surface grows so its content scrolls cleanly *under* the pinned ribbon. */
.docx-editor-card{overflow:visible}
.docx-ribbon{border-radius:var(--radius) var(--radius) 0 0}
.docx-edit{min-height:60vh;max-height:none;overflow:visible}
.docx-tb-sup,.docx-tb-sub{font-size:.82rem}
.docx-tb-sup sup,.docx-tb-sub sub{font-size:.62rem}

/* Page break — a labelled separator between pages, in both the viewer and the
   editor (where it is a non-editable, deletable marker). */
.docx-pagebreak{position:relative;height:0;margin:24px 0;border-top:2px dashed var(--border);
  user-select:none}
.docx-pagebreak::after{content:"Page break";position:absolute;top:-0.72em;left:50%;
  transform:translateX(-50%);background:var(--surface);padding:0 10px;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.docx-edit .docx-pagebreak{cursor:default}

/* ── Paper view ──────────────────────────────────────────────────────────────
   Render documents as a page-width sheet (the doc's real size + margins, via
   the --pg-*/--m* custom properties) sitting on a grey "desk". The desk is the
   scroller; the ribbon is a static header above it (this supersedes the earlier
   sticky-ribbon-over-a-single-page-scroller approach). Used by both the viewer
   (.docx-view.docx-desk) and the editor (.docx-desk wrapping the surface). */
.docx-desk{background:var(--bg);overflow:auto;padding:18px;max-height:74vh}
.docx-paper{background:var(--surface);color:var(--text);
  width:var(--pg-w,8.5in);max-width:100%;margin:0 auto;
  padding:var(--mt,1in) var(--mr,1in) var(--mb,1in) var(--ml,1in);
  box-sizing:border-box;border:1px solid var(--border);box-shadow:0 1px 10px rgba(20,22,30,.16)}
.docx-edit.docx-paper{min-height:var(--pg-h,11in);max-height:none;overflow:visible}
/* the surface no longer scrolls itself — the desk does */
.docx-editor-card{overflow:hidden}
.docx-ribbon{position:static;top:auto;z-index:auto;border-radius:0}
/* Full-screen: card is a flex column, the desk fills + scrolls. */
.docx-edit-wrap-full .docx-editor-card{display:flex;flex-direction:column}
.docx-edit-wrap-full .docx-desk{flex:1 1 auto;min-height:0;max-height:none}
.docx-edit-wrap-full .docx-edit{flex:none;overflow:visible}
/* Auto-pagination guides: page-boundary lines drawn over the sheet (docx_pages.js).
   The overlay is a sibling of the page sheet, so it never blocks editing nor is
   saved. A solid line marks a manual page break; a dashed line an automatic one. */
.docx-pgguides{position:absolute;top:0;height:0;pointer-events:none;z-index:2}
.docx-pgline{position:absolute;left:0;right:0;
  border-top:1px dashed color-mix(in srgb,var(--muted) 50%,transparent)}
.docx-pgline.is-manual{border-top-style:solid;
  border-top-color:color-mix(in srgb,var(--muted) 70%,transparent)}
.docx-pgline::after{content:attr(data-label);position:absolute;right:2px;top:3px;
  font-size:.62rem;letter-spacing:.03em;color:var(--muted);
  background:var(--bg);padding:0 5px;border-radius:3px}

/* ── Header / footer ─────────────────────────────────────────────────────────
   The page sheet holds three regions: a header in the top margin, the body in
   the content area, and a footer in the bottom margin. Header/footer are
   absolutely positioned within the margin bands; the body flows in the padding
   box. In the editor each region is its own contenteditable. */
.docx-paper{position:relative;min-height:var(--pg-h,11in)}
.docx-view.docx-body,.docx-view.docx-region{padding:0;max-height:none;overflow:visible}
.docx-region{outline:none}
.docx-body{min-height:calc(var(--pg-h,11in) - var(--mt,1in) - var(--mb,1in))}
.docx-hdr,.docx-ftr{position:absolute;left:var(--ml,1in);right:var(--mr,1in);
  display:flex;flex-direction:column;justify-content:center;color:var(--text)}
.docx-hdr{top:0;height:var(--mt,1in)}
.docx-ftr{bottom:0;height:var(--mb,1in)}
.docx-hdr>:first-child{margin-top:0}.docx-ftr>:last-child{margin-bottom:0}
/* editor affordances: dashed margin guides + an empty-region placeholder */
.docx-region.docx-hdr{border-bottom:1px dashed color-mix(in srgb,var(--border) 85%,transparent)}
.docx-region.docx-ftr{border-top:1px dashed color-mix(in srgb,var(--border) 85%,transparent)}
.docx-region:empty::before{content:attr(data-ph);color:var(--muted);opacity:.55;pointer-events:none}
/* a field chip (page number, etc.) */
.docx-field{color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent);
  border-radius:3px;padding:0 3px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Paginated viewer — real page sheets built by docx_paginate.js. Each sheet is a
   fixed-size page with the header/footer repeated in its margins and the body
   blocks for that page in between. Sizes are set inline from the page geometry. */
.docx-pages{display:flex;flex-direction:column;align-items:center;gap:20px;padding:18px 0}
.docx-page{position:relative;box-sizing:border-box;background:var(--surface);color:var(--text);
  border:1px solid var(--border);box-shadow:0 1px 12px rgba(20,22,30,.18);
  display:flex;flex-direction:column}
.docx-page-hdr,.docx-page-ftr{flex:none;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;color:var(--muted)}
.docx-page-hdr>:first-child,.docx-page-ftr>:first-child{margin-top:0}
.docx-page-hdr>:last-child,.docx-page-ftr>:last-child{margin-bottom:0}
.docx-page-body{flex:none;overflow:hidden}
.docx-page-body>:first-child{margin-top:0}
/* a paginated field (resolved page number) reads as plain text, not a chip */
.docx-page .docx-field{background:none;color:inherit;padding:0}

/* Full-screen Office editor — a chromeless tab (pageData.Bare) where the editor
   fills the whole viewport. The wrapper is a flex column: the header and notice
   stay put while the editor card flexes to fill, its ribbon a static header and
   the writing surface the only scroller — maximum writing space. */
.app-main-bare{padding:0;max-width:none;height:100dvh;overflow:hidden}
.docx-edit-wrap-full{display:flex;flex-direction:column;height:100dvh;gap:8px;
  padding:10px 16px 12px;box-sizing:border-box}
.docx-edit-wrap-full .docx-edit-head{margin:0;flex:0 0 auto;align-items:center}
.docx-edit-wrap-full .docx-edit-head h1{font-size:1.15rem;margin:0}
.docx-edit-wrap-full .docx-editor-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.docx-edit-wrap-full .docx-ribbon{position:static;top:auto;flex:0 0 auto;border-radius:0}
.docx-edit-wrap-full .docx-edit{flex:1 1 auto;min-height:0;max-height:none;overflow:auto}

/* ---- Training (LMS): printable completion certificate ---- */
.lms-cert-wrap{max-width:880px;margin:32px auto;padding:0 16px}
.lms-cert-actions{display:flex;justify-content:space-between;margin-bottom:16px}
.lms-cert{border:3px double var(--border);border-radius:8px;padding:56px 48px;text-align:center;background:var(--surface-1)}
.lms-cert-co{font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.lms-cert-kicker{font-size:26px;font-weight:650;margin-top:18px}
.lms-cert-name{font-size:34px;font-weight:700;margin-top:34px}
.lms-cert-line{margin-top:14px;color:var(--muted)}
.lms-cert-course{font-size:22px;font-weight:650;margin-top:10px}
.lms-cert-meta{display:flex;justify-content:center;gap:32px;margin-top:40px;color:var(--muted);font-size:14px}
@media print{
  .noprint{display:none !important}
  .lms-cert-wrap{margin:0;max-width:none}
  .lms-cert{border-color:#888}
  body.bare{background:#fff}
}

/* Training (LMS) — in-course table-of-contents sidebar (Percipio-style).
   Appended 2026-06-10; tokens only. The TOC reuses .side/.side-link/.side-
   section; these rules add the course-title link, the compact progress block,
   done ticks, and multi-line lesson names. */
.lms-toc-title{display:block;text-decoration:none;color:inherit;line-height:1.3}
.lms-toc-title:hover{color:var(--accent)}
.lms-toc-title.active{color:var(--accent)}
.lms-toc-progress{padding:2px 10px 6px}
.lms-toc-count{display:block;margin-top:5px;font-size:.74rem;color:var(--muted)}
.side-link.lms-toc-lesson{font-size:.84rem;padding:6px 10px;align-items:flex-start}
.side-link.lms-toc-lesson svg{margin-top:2px}
.lms-toc-name{white-space:normal;line-height:1.35}
.side-link svg.lms-toc-tick{flex:0 0 auto;color:var(--accent)}
.side-link.lms-toc-lesson.done:not(.active){color:var(--muted)}
.side-link.lms-toc-lesson.done .lms-toc-name{text-decoration:none}

/* ---- tracker: Plane-style state settings (workflow polish wave) ---- */
.trk-stategroups{display:flex;flex-direction:column;gap:16px;margin:12px 0 14px}
.trk-sg-head{display:flex;align-items:center;gap:8px;padding-bottom:6px;border-bottom:1px solid var(--border);
  font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.trk-sg-n{font-weight:650;font-variant-numeric:tabular-nums}
.trk-sg-add{margin-left:auto;font-size:.8rem;font-weight:600;letter-spacing:0;text-transform:none;text-decoration:none}
.trk-sg-add:hover{text-decoration:underline}
.trk-staterow{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px dashed var(--border)}
.trk-staterow:last-child{border-bottom:0}
.trk-sdot{display:inline-block;width:10px;height:10px;border-radius:999px;flex:0 0 auto}
td>.trk-sdot{vertical-align:middle;margin-right:2px}
.trk-sname{font-weight:600}
.trk-scount{font-size:.8rem}
.trk-sdefault{font-size:.7rem}
.trk-sactions{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.trk-sg-empty{font-size:.85rem;padding:6px 4px}
.trk-stateform .field-input{flex:1;min-width:140px}
.trk-colorpick{height:30px;width:40px;padding:2px;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;background:none;flex:0 0 auto}
.trk-stateshelp{font-size:.82rem;line-height:1.5;margin-top:4px}
.trk-h2-note{font-size:.72rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;margin-left:6px}
.trk-movebar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.trk-movebar select{max-width:220px}

/* ---- Finance CSV import (.fnx-imp-*) — hub format docs + preview tables.
   Appended by the finance import build; everything namespaced .fnx-imp-. ---- */
.fnx-imp-doc{padding:10px 18px 4px;font-size:.88rem}
.fnx-imp-doc p{margin:4px 0 8px}
.fnx-imp-rules{margin:6px 0;padding-left:20px}
.fnx-imp-rules li{margin:3px 0}
.fnx-imp-cols{border-collapse:collapse;margin:6px 0 10px;font-size:.84rem}
.fnx-imp-cols th,.fnx-imp-cols td{border:1px solid var(--border);padding:4px 10px;text-align:left}
.fnx-imp-cols th{background:var(--surface-2,rgba(0,0,0,.03));font-weight:600}
.fnx-imp-example{background:var(--surface-2,rgba(0,0,0,.04));border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 12px;font-size:.8rem;overflow-x:auto;margin:4px 0 10px}
.fnx-imp-upload{padding:4px 18px 14px}
.fnx-imp-upload .field{max-width:420px}
.fnx-imp-status{border:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:.88rem}
.fnx-imp-status label{display:flex;align-items:center;gap:6px}
.fnx-imp-badge{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.03em;padding:2px 8px;border-radius:999px;border:1px solid var(--border);vertical-align:middle}
.fnx-imp-badge.good{color:var(--ok,#15803d);border-color:currentColor}
.fnx-imp-badge.bad{color:var(--danger,#b91c1c);border-color:currentColor}
.fnx-imp-badge.plain{color:var(--muted,#6b7280)}
.fnx-imp-errcard{border-color:var(--danger,#b91c1c)}
.fnx-imp-errtable td{color:var(--danger,#b91c1c)}
.fnx-imp-errtable td.fnx-imp-lineno{font-weight:600;white-space:nowrap}
.fnx-imp-fixnote{padding:6px 18px;font-size:.88rem}
.fnx-imp-lineno{width:1%;white-space:nowrap;color:var(--muted,#6b7280)}
.fnx-imp-invhead td{background:var(--surface-2,rgba(0,0,0,.03));border-top:2px solid var(--border)}
.fnx-imp-line .fnx-imp-desc{padding-left:24px}

/* Voided finance documents (vendor bills): struck + greyed so a cancelled bill
   reads as inert in the list and on its detail head. Append-only, .fnx-* namespace. */
.fnx-voided{opacity:.6}
tr.fnx-voided td .nm,tr.fnx-voided td a.nm{text-decoration:line-through}
.fnx-doc-head.fnx-voided .who h1{text-decoration:line-through;color:var(--muted)}

/* ---- KB wiki layer: wikilinks, properties, table view ---- */
/* Unresolved wikilinks point at the jump/create route (/f/kb/w/…), resolved
   ones at the page itself — so link state is styled by href shape alone. */
.kb-content a[href*="/f/kb/w/"]{color:var(--danger,#b54545);text-decoration-style:dashed;text-underline-offset:3px}
.kb-props{padding:10px 14px}
.kb-props-table{width:100%;border-collapse:collapse;font-size:.9rem}
.kb-props-table td{padding:3px 8px;vertical-align:top}
.kb-props-table td.kb-props-k{width:160px;color:var(--muted);font-weight:600;white-space:nowrap}
.kb-props-table tr + tr td{border-top:1px solid var(--border)}
.kb-tablewrap{overflow-x:auto}
.kb-proptable td,.kb-proptable th{white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.kb-proptable td.cell-primary{white-space:normal}
.kb-tablefilter .adm-filterrow{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.kb-tablefilter .field{margin:0;min-width:200px}
.kb-import code{font-size:.85em}