/* =====================================================================
   MALTIRA APP — one design system, two products

   Visual authority: claude/approved-ui-2026-10-04/ (founder approved
   4 October 2026). Product authority: the code and the V1 register.

   Two shells share these components and nothing else:

     STAFF     Maltira's own software. Deep navy, Geologica, a global
               top bar and a client sidebar. It never wears a client's
               colours; their brand appears only inside previews.

     CUSTOMER  The customer's own software. Built from their colour
               roles (presentation.js -> applyLook sets the tokens on
               <html>), light by default, Arial unless Staff chose a
               face with real brand evidence. Status colours are fixed
               per light/dark scheme so a brand cannot repaint a
               warning into something that reads as fine.

   Rules the approved design holds every screen to: one raised object
   per screen, everything else on hairlines; radius 4 to 8px; nothing
   readable below 13.5px and nothing read repeatedly below 14px; sentence case; no tracked uppercase; mono
   only where it marks function; one primary action per region.
   ===================================================================== */

/* ---------------------------------------------------------------
   TOKENS
   --------------------------------------------------------------- */
:root{
  /* Staff navy is the base; the customer shell overrides below. */
  --ground:#030B1A; --nav:#061226; --surface:#0B1930; --raised:#10203B; --sunk:#071223;
  --border:#1D304C; --border-soft:#15243B;
  --ink:#F3F6FA; --ink-2:#D6DCE7; --ink-3:#A9B6CA; --ink-4:#8D9BB2;
  --accent:#1E63B8; --accent-2:#2A72C8; --accent-text:#6FB0EE; --accent-dim:#12305A;
  --good:#86D9A9; --attention:#F0C072; --critical:#F4A3A0; --idle:#7D8BA1;
  --good-bg:#0F2A22; --attention-bg:#2E2410; --critical-bg:#3A1618; --info-bg:#10243F; --info:#9CC6F2;
  --topbar-h:56px; --stafftop-h:60px;

  /* Type scale. Every size is a size times --ts so Larger text scales
     the whole page and the layout reflows; nothing is zoomed. */
  --t-hero:calc(32px*var(--ts,1)); --t-page:calc(28px*var(--ts,1)); --t-major:calc(18px*var(--ts,1));
  --t-sect:calc(16.5px*var(--ts,1)); --t-body:calc(15.5px*var(--ts,1)); --t-meta:calc(14px*var(--ts,1));
  --t-micro:calc(13.5px*var(--ts,1)); --t-fig:calc(30px*var(--ts,1));
  --lh-tight:1.15; --lh-head:1.25; --lh-body:1.5;

  /* Restrained geometry: 4 to 8px. */
  --r-xs:4px; --r-sm:5px; --r-md:6px; --r-lg:8px; --r:6px;
  --sidebar:248px; --clientnav:232px;

  /* Motion: one curve, the approved durations. */
  --ease:cubic-bezier(.2,.7,.2,1);
  --m-fast:120ms; --m-base:180ms; --m-pane:220ms; --m-slow:280ms;

  /* Spacing a workspace's layout family may change (presentation.js). */
  --gap:16px; --card-pad-y:16px; --card-pad-x:18px; --card-gap:12px; --row-pad:10px;
  --ts:1;
}
/* Fixed meaning colours for a light scheme (approved: waiting #9A5800,
   connected #2E6B3B, failed #B3261E). Each passes 4.5:1 on white and
   on a light page. */
html[data-scheme="light"]{
  --good:#2E6B3B; --attention:#9A5800; --critical:#B3261E; --idle:#7A7266; --info:#1F4E8C;
  --good-bg:#E5F0E7; --attention-bg:#F6E7C8; --critical-bg:#F8E1DF; --info-bg:#E3ECF6;
}

/* The customer's neutral baseline: what a workspace with no Staff look
   gets. Warm paper, white working surfaces, Maltira blue for action.
   A saved look replaces every one of these inline on <html>. */
html[data-shell="customer"]{
  --ground:#F6F4F0; --nav:#EEEBE5; --surface:#FFFFFF; --raised:#FAF8F5; --sunk:#F2EFEA;
  --border:#DCD5CA; --border-soft:#ECE6DD;
  --ink:#1D1A16; --ink-2:#2D2924; --ink-3:#5E574D; --ink-4:#685F54;
  --accent:#00509D; --accent-2:#00427F; --accent-text:#00509D; --accent-dim:#E3ECF6;
  --display:Arial,Helvetica,sans-serif; --text:Arial,Helvetica,sans-serif;
  --fw-shift:0; --fw-shift-display:0;
  --t-hero:calc(34px*var(--ts,1)); --t-page:calc(32px*var(--ts,1)); --t-major:calc(20px*var(--ts,1));
  --t-sect:calc(17px*var(--ts,1)); --t-body:calc(16px*var(--ts,1)); --t-meta:calc(14px*var(--ts,1));
  --t-micro:calc(13.5px*var(--ts,1)); --t-fig:calc(30px*var(--ts,1)); --topbar-h:60px;
  color-scheme:light;
}
html[data-shell="customer"][data-scheme="dark"]{color-scheme:dark}
html[data-shell="staff"]{color-scheme:dark}

*{box-sizing:border-box}
html{background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink-2);font-family:var(--text);
     font-size:var(--t-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;
     transition:background-color var(--m-slow) ease,color var(--m-slow) ease}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0;text-wrap:balance;
     font-weight:calc(700 + var(--fw-shift-display));line-height:var(--lh-head);letter-spacing:-.005em}
html[data-shell="staff"] h1,html[data-shell="staff"] h2,html[data-shell="staff"] h3{font-weight:calc(600 + var(--fw-shift-display) + 100)}
button{font-family:var(--text)}
a{color:var(--accent-text)}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-radius:var(--r-xs)}
html[data-scheme="light"] :focus-visible{outline-color:var(--accent)}
.mono{font-family:var(--font-code);font-size:max(.92em,var(--t-micro))}
small{font-size:var(--t-micro)}
.vis-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------
   MOTION, AND TURNING IT OFF
   Reduced motion swaps every movement for an instant change. Nothing
   on screen depends on animation to be understood.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html:not([data-motion="on"]) *{transition:none!important;animation:none!important}
}
html[data-motion="off"] *{transition:none!important;animation:none!important;scroll-behavior:auto!important}

/* ---------------------------------------------------------------
   ACCESSIBILITY & DISPLAY (SRC-A11Y-005…009)
   High contrast redefines the tokens with !important so a workspace's
   own palette cannot bring a low-contrast pairing back.
   --------------------------------------------------------------- */
html[data-text="large"]{--ts:1.15}
html[data-text="larger"]{--ts:1.3}
html[data-contrast="high"]{
  --ground:#000000!important; --nav:#000000!important; --surface:#050A12!important; --raised:#0B1422!important; --sunk:#000000!important;
  --border:#A9B8CC!important; --border-soft:#7F90A8!important;
  --ink:#FFFFFF!important; --ink-2:#FFFFFF!important; --ink-3:#E8EDF4!important; --ink-4:#D0D8E3!important;
  --accent-text:#A8D0F7!important; --good:#63F0AA!important; --attention:#FFC24D!important; --critical:#FF8A8E!important;
  --good-bg:#000!important; --attention-bg:#000!important; --critical-bg:#000!important; --info-bg:#000!important; --info:#A8D0F7!important;
  --accent-dim:#0B2A4D!important; color-scheme:dark;
}
html[data-contrast="high"] :focus-visible{outline:3px solid #FFD84D!important;outline-offset:3px}
html[data-contrast="high"] .chip{border:1px solid currentColor}
html[data-contrast="high"] a{text-decoration:underline}
html[data-contrast="high"] .btn{border-color:#E8EDF4}
@media (prefers-contrast:more){
  html[data-contrast="system"]{
    --ground:#000000!important; --nav:#000000!important; --surface:#050A12!important; --raised:#0B1422!important; --sunk:#000000!important;
    --border:#A9B8CC!important; --border-soft:#7F90A8!important;
    --ink:#FFFFFF!important; --ink-2:#FFFFFF!important; --ink-3:#E8EDF4!important; --ink-4:#D0D8E3!important;
    --accent-text:#A8D0F7!important; --good:#63F0AA!important; --attention:#FFC24D!important; --critical:#FF8A8E!important;
    --good-bg:#000!important; --attention-bg:#000!important; --critical-bg:#000!important; --info-bg:#000!important; --info:#A8D0F7!important;
    --accent-dim:#0B2A4D!important; color-scheme:dark;
  }
  html[data-contrast="system"] :focus-visible{outline:3px solid #FFD84D!important;outline-offset:3px}
  html[data-contrast="system"] .chip{border:1px solid currentColor}
}
.dispopts{display:grid;gap:8px;margin:0 0 18px;border:0;padding:0}
.dispopts legend{font-weight:calc(700 + var(--fw-shift));color:var(--ink);margin:0 0 6px;padding:0;font-size:var(--t-sect)}
.dispopts .opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;min-height:44px;background:var(--surface)}
.dispopts .opt input{margin-top:3px;width:18px;height:18px;flex:none}
.dispopts .opt small{display:block;color:var(--ink-3)}
.dispsample{border:1px dashed var(--border);border-radius:var(--r-md);padding:12px 14px;margin:0 0 16px}

/* ===============================================================
   THE SHELLS
   =============================================================== */
.app{display:flex;min-height:100vh}
.main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative;isolation:isolate}
.content{padding:22px 36px 64px;width:100%;position:relative;z-index:1}

/* ---------- ambient layers (public/ambient.js) ----------
   Decoration only: aria-hidden, no pointer events, behind the work.
   The customer band sits behind the page header and fades out before
   any working surface; Staff ribbons live in the global top bar. */
.ambient{position:absolute;left:0;right:0;top:0;height:230px;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 45%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.7) 45%,transparent 100%)}
.ambient[hidden]{display:none}
.ambient canvas,.ambient svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ambient[data-intensity="subtle"]{opacity:.55}
.ambient[data-intensity="standard"]{opacity:.9}
.topbar,.content{position:relative;z-index:1}

/* ---------- View as customer: a Staff-owned frame ---------- */
.pvbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#00509D;color:#fff;
  padding:8px 18px;font-family:var(--font-brand);font-size:calc(15px*var(--ts,1));min-height:48px;position:relative;z-index:9}
.pvbar[hidden]{display:none}
.pvbar strong{color:#fff}
.pvbar .pv-life{padding:3px 8px;border-radius:var(--r-xs);background:#F0C072;color:#1A1405;font-size:var(--t-micro);font-weight:600}
.pvbar .pv-life.live{background:#86D9A9;color:#06210F}
.pvbar .pv-life.concept{background:#9CC6F2;color:#061A33}
.pvbar .pv-who{color:#DCE8F6}
.pvbar select.wsel{width:auto;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;font-weight:600;min-height:32px;padding:4px 8px}
.pvbar select.wsel option{color:#000}
.pvbar .btn{border-color:rgba(255,255,255,.6);color:#fff;background:transparent;margin-left:auto}
.pvbar .btn:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}

/* ---------- the sidebar ---------- */
.side{width:var(--sidebar);flex:none;background:var(--nav);border-right:1px solid var(--border-soft);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:6;
  transition:background-color var(--m-slow) ease}
.bizid{display:flex;align-items:center;gap:10px;padding:18px 18px 14px;min-width:0}
.bizid .avatar{flex:none;display:grid;place-items:center;overflow:hidden;border-radius:var(--r-xs);
  min-width:36px;height:36px;background:var(--accent);color:#fff}
/* A genuine logo keeps its own shape and transparency: fitted, never
   stretched or cropped, and never put on a coloured tile. */
.bizid .avatar.has-logo{background:transparent;min-width:0;width:auto;max-width:132px;height:40px;border-radius:0}
.bizid .avatar img{display:block;max-width:132px;max-height:40px;width:auto;height:auto;object-fit:contain}
.bizid .avatar .initials{font-family:var(--display);font-weight:700;font-size:calc(16px*var(--ts,1));color:#fff}
.bizid .avatar.maltira-mark{background:transparent;min-width:0;width:30px;height:30px;border-radius:0}
.bizid .avatar.maltira-mark img{max-width:30px;max-height:30px}
.bizid .bn{display:block;font-family:var(--display);font-weight:700;color:var(--ink);font-size:calc(15.5px*var(--ts,1));
  line-height:1.2;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bizid .bm{display:block;font-size:var(--t-micro);color:var(--ink-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bizid .avatar.maltira-mark + span .bn{font-family:var(--font-brand);font-weight:500;letter-spacing:-.02em;font-size:calc(16.5px*var(--ts,1))}
.modelabel{margin:0 10px 10px;padding:7px 10px;border-radius:var(--r-sm);background:#F6E7C8;color:#5A3D00;
  font-size:var(--t-meta);font-weight:700;line-height:1.3}
.modelabel[hidden]{display:none}
.modelabel.concept{background:#E3ECF6;color:#0E2F57}
.wswrap{padding:0 12px 10px}
.wswrap[hidden]{display:none}
.wsel{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--ink-2);
  font-family:var(--text);font-size:var(--t-meta);padding:7px 9px;border-radius:var(--r-sm);cursor:pointer}
.navlabel{font-size:var(--t-micro);color:var(--ink-4);padding:10px 10px 4px;font-weight:600}
nav#nav{display:flex;flex-direction:column;gap:2px;position:relative;padding:0 10px 10px;flex:1}
.navgroup{display:flex;flex-direction:column;gap:2px}
.navmark{display:none}

.navitem{display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;border:0;border-radius:var(--r-md);
  background:none;color:var(--ink-2);text-align:left;font-size:calc(15px*var(--ts,1));cursor:pointer;min-height:40px;
  transition:background var(--m-fast) var(--ease),color var(--m-fast) var(--ease)}
.navitem svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.navitem:hover{background:color-mix(in srgb,var(--surface) 70%,transparent);color:var(--ink)}
.navitem[aria-current="true"]{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:0 1px 0 var(--border)}
.navitem .tail{margin-left:auto;font-size:var(--t-micro);font-weight:700;color:var(--accent-text);font-variant-numeric:tabular-nums}
.navitem .tail.warn{color:var(--attention)}
/* Home and Dashboard are the two strong primary rows. */
.navitem.primary{font-size:calc(16.5px*var(--ts,1));font-weight:700;color:var(--ink);padding:9px 10px;min-height:40px}
.navitem.primary svg{width:20px;height:20px}
.customer-more{display:none}

/* Dashboard's areas hang off it on a visible guide line. */
.navtree{margin:4px 0 0 18px;padding-left:12px;border-left:1px solid var(--border);display:flex;flex-direction:column}
.navarea{display:flex;flex-direction:column;gap:1px;padding:5px 0 3px}
.navarea-head{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:9px;width:100%;
  padding:7px 8px;border-radius:var(--r-sm);font-size:calc(14.5px*var(--ts,1));font-weight:700;color:var(--ink-3);min-height:38px}
.navarea-head:hover{background:color-mix(in srgb,var(--surface) 70%,transparent);color:var(--ink)}
.navarea-head:focus-visible{outline:2px solid var(--accent-text);outline-offset:1px}
.navarea-head svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.navarea-head .chev{width:12px;height:12px;margin-left:auto;transition:transform var(--m-base) var(--ease)}
.navarea-head[aria-expanded="true"] .chev{transform:rotate(90deg)}
.navarea.here>.navarea-head{color:var(--accent-text)}
.navarea-items{display:flex;flex-direction:column;gap:1px;animation:fade-in var(--m-fast) ease}
.navarea-items[hidden]{display:none}
.navarea-items .navitem{padding:7px 8px;min-height:38px;font-size:calc(15px*var(--ts,1))}
.navarea-items .navitem svg{width:18px;height:18px}
.navarea .navitem.arealink{font-size:calc(14.5px*var(--ts,1));font-weight:700;color:var(--ink-3);padding:5px 8px}
.navarea .navitem.arealink[aria-current="true"]{color:var(--ink)}
.customer-utility{margin-top:auto;padding:10px 0 0;border-top:1px solid var(--border-soft)}
.customer-utility .navitem{color:var(--ink-3);font-size:calc(15px*var(--ts,1))}
.sidefoot{padding:10px 18px 14px;font-size:var(--t-micro);color:var(--ink-4)}
.sidefoot a{color:var(--accent-text)}
.madeby{display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--border-soft);margin-top:4px}
.madeby img{width:18px;height:auto;flex:none}
.madeby .wordmark{color:var(--ink-3);font-size:calc(14px*var(--ts,1))}
.installbtn{width:100%;margin-bottom:10px;background:transparent;border:1px solid var(--border);color:var(--ink-2);
  font-size:var(--t-micro);padding:7px 10px;border-radius:var(--r-sm);cursor:pointer}
.installbtn:hover{border-color:var(--accent-text);color:var(--ink)}
.installbtn[hidden]{display:none}

/* ---------- the top bar (inside .main) ---------- */
.topbar{position:sticky;top:0;z-index:5;min-height:var(--topbar-h);display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:8px 36px;border-bottom:1px solid var(--border-soft);
  background:color-mix(in srgb,var(--ground) 92%,transparent)}
.biz{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto}
.crumbs{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:calc(15px*var(--ts,1));color:var(--ink-3);min-width:0}
.crumbs .sep{color:var(--ink-4)}
.crumbs .linkish{appearance:none;background:none;border:0;padding:2px 0;color:var(--ink-3);font:inherit;cursor:pointer}
.crumbs .linkish:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.biz h1{font-size:calc(15.5px*var(--ts,1));font-weight:700;color:var(--ink);overflow-wrap:anywhere;font-family:var(--text)}
.biz p{margin:0;font-size:var(--t-micro);color:var(--ink-4)}
.biz p:empty{display:none}
.topacts{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.topacts .btn{border-color:transparent;background:transparent;color:var(--ink);font-weight:500}
.topacts .btn:hover{background:var(--raised);border-color:transparent}
.navtoggle,.btn.navtoggle{display:none}
.navtoggle svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
.sidetoggle{display:none}

/* Healthy is quiet: one word and a dot. */
.livebar{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-meta);font-weight:700;color:var(--good);padding:0 6px;white-space:nowrap}
.livebar[hidden]{display:none}
.livebar .dot{width:8px;height:8px;border-radius:50%;background:var(--good);flex:none}
.livebar.demo{color:var(--attention)}
.livebar.demo .dot{background:var(--attention)}

/* ---------- My account ---------- */
.acct{position:relative}
.acctbtn svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7}
.acctbtn .acctinit{width:28px;height:28px;border-radius:50%;background:var(--sunk);border:1px solid var(--border);display:grid;place-items:center;
  font-size:var(--t-micro);font-weight:700;color:var(--ink)}
.acctbtn[aria-expanded="true"]{background:var(--raised)}
.acctmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:260px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:6px;box-shadow:0 18px 44px -14px rgba(0,0,0,.45);
  display:flex;flex-direction:column;gap:1px;animation:region-in var(--m-fast) var(--ease)}
.acctmenu[hidden]{display:none}
.acctwho{display:flex;flex-direction:column;gap:2px;padding:9px 11px 11px;border-bottom:1px solid var(--border-soft);margin-bottom:4px}
.acctwho .em{color:var(--ink);font-weight:700;font-size:var(--t-meta);overflow-wrap:anywhere}
.acctwho .rl{color:var(--ink-3);font-size:var(--t-micro)}
.acctitem{display:flex;align-items:center;width:100%;min-height:38px;padding:8px 11px;background:none;border:0;border-radius:var(--r-sm);
  color:var(--ink-2);text-align:left;font-family:var(--text);font-size:var(--t-body);cursor:pointer}
.acctitem:hover,.acctitem:focus-visible{background:var(--raised);color:var(--ink)}
.acctitem.danger{color:var(--critical)}
.acctitem[hidden],.acctwho[hidden]{display:none}

/* ---------- Concept / Demo data banner ----------
   Explicit colours, not tokens: a customer's look must never be able
   to make the warning quiet. Both pairs pass AA on their own. */
.datamode{flex:0 0 calc(100% + 72px);display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;
  margin:4px -36px -8px;padding:8px 36px;background:#FFE3A6;color:#2B1A00;border-top:1px solid #C98F1A;font-size:var(--t-meta);line-height:1.4}
.datamode[hidden]{display:none}
.dm-main{margin:0;flex:1 1 280px;min-width:0}
.dm-label{font-weight:700;margin-right:4px}
.dm-live{display:inline-flex;flex-wrap:wrap;gap:4px;margin-right:6px;vertical-align:1px}
.dm-live .dmflag{border:1px solid #1C7A4C}
.dm-acts{display:flex;gap:8px;flex-wrap:wrap}
.datamode .dm-btn{border-color:#8A5A00;color:#2B1A00;background:rgba(255,255,255,.6);min-height:32px}
.datamode .dm-btn:hover{border-color:#2B1A00;color:#000}
.datamode .dm-btn:focus-visible{outline:3px solid #2B1A00;outline-offset:2px}
.cell{position:relative}
.datatag{position:absolute;top:-9px;right:14px;z-index:1;font-size:var(--t-micro);font-weight:700;padding:1px 8px;border-radius:var(--r-xs);line-height:1.5;pointer-events:none}
.datatag.sample{background:#FFE3A6;color:#2B1A00;border:1px solid #B97800}
.datatag.live{background:#CDEFDB;color:#06351F;border:1px solid #1C7A4C}
.datatag.mixed{background:#FFFFFF;color:#2B1A00;border:1px solid #B97800}
.dmrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--border-soft)}
.dmrow:last-child{border-bottom:0}
.dmrow .who{flex:1 1 200px;min-width:0}
.dmrow .who small{display:block;color:var(--ink-3)}
.dmflag{font-size:var(--t-micro);font-weight:700;padding:1px 8px;border-radius:var(--r-xs)}
.dmflag.sample{background:#FFE3A6;color:#2B1A00}
.dmflag.live{background:#CDEFDB;color:#06351F}
ul.dmpoints{margin:8px 0 12px;padding-left:20px}
ul.dmpoints li{margin:0 0 6px}

/* ---------- local tabs: an area's own pages ---------- */
.localtabs,.work-siblings{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;margin:-22px -36px 22px;padding:12px 36px 0;
  border-bottom:1px solid var(--border-soft);background:color-mix(in srgb,var(--surface) 45%,transparent)}
.localtabs .lt-area{font-family:var(--display);font-size:calc(20px*var(--ts,1));font-weight:700;color:var(--ink);padding-bottom:11px;margin-right:6px}
.localtabs .btn,.work-siblings .btn{border:0;background:none;border-radius:0;padding:0 0 11px;min-height:36px;color:var(--ink-3);
  font-size:calc(16px*var(--ts,1));font-weight:500;box-shadow:none}
.localtabs .btn:hover,.work-siblings .btn:hover{color:var(--ink);background:none}
.localtabs .btn[aria-current="page"],.work-siblings .btn[aria-current="page"],.work-siblings .btn.primary{color:var(--ink);font-weight:700;background:none;
  box-shadow:inset 0 -3px 0 var(--accent)}
html[data-shell="staff"] .work-siblings{margin:0 0 18px;padding:0;background:none}
html[data-shell="staff"] .work-siblings .btn[aria-current="page"],html[data-shell="staff"] .work-siblings .btn.primary{box-shadow:inset 0 -2px 0 var(--accent-text)}

/* ===============================================================
   STAFF SHELL: global top bar + contextual client sidebar
   =============================================================== */
.stafftop{display:none}
html[data-shell="staff"] .stafftop{display:flex;position:sticky;top:0;z-index:20;height:var(--stafftop-h);align-items:center;gap:6px;
  padding:0 20px 0 22px;background:#020814;border-bottom:1px solid #15243B;color:#F3F6FA;font-family:var(--font-brand);overflow:visible;isolation:isolate}
.stafftop .st-ambient{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:.7}
.stafftop .st-ambient canvas{width:100%;height:100%;display:block}
.stafftop .st-brand{display:flex;align-items:center;gap:10px;margin-right:22px;flex:none;color:#F3F6FA;text-decoration:none;background:none;border:0;cursor:pointer;padding:4px}
.stafftop .st-brand img{width:32px;height:32px;object-fit:contain}
.stafftop .st-brand span{font-size:16px;font-weight:600;letter-spacing:-.02em}
.stafftop nav{display:flex;align-items:stretch;height:100%;gap:2px;min-width:0}
.stafftop .st-link{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:8px;padding:0 14px;height:100%;
  color:#D6DCE7;font-size:calc(15px*var(--ts,1));font-weight:500;white-space:nowrap}
.stafftop .st-link:hover{color:#fff}
.stafftop .st-link:focus-visible{outline:2px solid #6FB0EE;outline-offset:-4px}
.stafftop .st-link[aria-current="true"]{color:#fff;font-weight:600;box-shadow:inset 0 -2px 0 #5EA3E4}
.stafftop .st-link .tail{font-size:var(--t-micro);font-weight:600;color:#F0C072}
.stafftop .st-search{margin-left:auto;width:clamp(190px,18vw,320px);flex:0 1 auto;display:flex;align-items:center;gap:10px;padding:6px 12px;border:1px solid #1D304C;border-radius:var(--r-sm);
  background:#0B1930;color:#B3C0D3;font-size:calc(15px*var(--ts,1));cursor:pointer;font-family:inherit;min-height:40px;text-align:left;white-space:nowrap;overflow:hidden}
.stafftop .st-search:hover{border-color:#2A3D5C;color:#D6DCE7}
.stafftop .st-search kbd{margin-left:auto;font-family:var(--font-code);font-size:13.5px;color:#8D9BB2}
.stafftop .topacts{margin-left:10px;flex-wrap:nowrap}
.stafftop .topacts .btn{color:#D6DCE7;min-height:40px;font-size:calc(15px*var(--ts,1));border-color:transparent;background:transparent}
.stafftop .topacts .btn:hover{background:#0B1930;color:#fff}
html[data-shell="staff"] .app{min-height:calc(100vh - var(--stafftop-h))}
html[data-shell="staff"] .side{width:var(--clientnav);top:var(--stafftop-h);height:calc(100vh - var(--stafftop-h));transition:margin-left var(--m-pane) var(--ease)}
html[data-shell="staff"][data-client="none"] .side{display:none}
html[data-shell="staff"][data-sidenav="hidden"] .side{margin-left:calc(-1 * var(--clientnav));visibility:hidden}
html[data-shell="staff"] .bizid{display:none}
html[data-shell="staff"] .staff-global{display:none}
.clientid{margin:14px 10px 6px;padding:12px 10px 8px;display:flex;flex-direction:column;gap:6px}
.clientid .ci-label{font-size:var(--t-micro);color:var(--ink-3)}
.clientid .ci-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.clientid .ci-name{font-size:calc(15px*var(--ts,1));font-weight:600;line-height:1.25;color:var(--ink);overflow-wrap:anywhere}
html[data-shell="staff"] .navlabel{color:#8D9BB2;padding:10px 10px 3px}
html[data-shell="staff"] .navitem{font-size:calc(15px*var(--ts,1));color:#D6DCE7;min-height:38px;padding:7px 10px}
html[data-shell="staff"] .navitem.sub{padding-left:18px}
html[data-shell="staff"] .navitem:hover{background:#0E2140;color:#fff}
html[data-shell="staff"] .navitem[aria-current="true"]{background:#12305A;color:#fff;font-weight:600;box-shadow:none}
html[data-shell="staff"] .navitem[data-client-area="documents"]{padding-left:30px}
html[data-shell="staff"] .clientnav{margin-top:2px}
html[data-shell="staff"] .side .sidefoot{display:none}
.switchclient{margin:auto 20px 16px;background:none;border:0;padding:4px 0;color:#6FB0EE;font-size:calc(14.5px*var(--ts,1));cursor:pointer;text-align:left;font-family:inherit}
html[data-shell="staff"] .topbar{min-height:52px;padding:6px 24px 6px 14px;background:color-mix(in srgb,#030B1A 92%,transparent)}
html[data-shell="staff"][data-client="none"] .topbar{display:none}
html[data-shell="staff"] .sidetoggle{display:inline-flex;font-size:var(--t-meta);color:#D6DCE7;border:1px solid #1D304C;padding:5px 10px;min-height:32px;border-radius:var(--r-sm);background:transparent;cursor:pointer;font-family:inherit}
html[data-shell="staff"] .sidetoggle:hover{background:#0B1930;color:#fff}
html[data-shell="staff"] .content{padding:22px 28px 64px}
html[data-shell="staff"] .main{background:radial-gradient(900px 380px at 75% -8%,rgba(30,99,184,.14),transparent 70%),var(--ground)}
html[data-shell="staff"] .crumbs{font-size:calc(15px*var(--ts,1))}
html[data-shell="staff"] .crumbs [aria-current="page"]{color:var(--ink);font-weight:600}
.crumb{display:none}

/* Command (optional, closed by default). */
.cmdk{position:fixed;inset:0;z-index:70;display:grid;justify-items:center;align-items:start;padding-top:14vh;background:rgba(1,5,14,.62);animation:fade-in 120ms ease}
.cmdk[hidden]{display:none}
.cmdk .cmd-box{width:min(640px,calc(100vw - 32px));background:#0B1930;border:1px solid #2A3D5C;border-radius:var(--r-lg);box-shadow:0 40px 100px rgba(0,0,0,.6);
  font-family:var(--font-brand);color:#F3F6FA;display:flex;flex-direction:column;animation:cmd-in 160ms var(--ease);max-height:70vh}
.cmdk input{all:unset;box-sizing:border-box;width:100%;padding:15px 18px;border-bottom:1px solid #1D304C;font-size:calc(16px*var(--ts,1));color:#F3F6FA}
.cmdk input::placeholder{color:#8D9BB2}
.cmdk .cmd-list{overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:1px}
.cmdk .cmd-group{padding:8px 10px 4px;font-size:var(--t-micro);color:#8D9BB2}
.cmdk .cmd-item{all:unset;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:var(--r-md);font-size:calc(15.5px*var(--ts,1))}
.cmdk .cmd-item small{color:#A9B6CA;font-size:var(--t-meta)}
.cmdk .cmd-item[aria-selected="true"],.cmdk .cmd-item:hover{background:#12305A}
.cmdk .cmd-foot{padding:9px 18px;border-top:1px solid #1D304C;display:flex;gap:18px;font-size:var(--t-micro);color:#8D9BB2}
.cmdk .cmd-foot kbd{font-family:var(--font-code)}
.cmdk .cmd-empty{padding:16px 10px;color:#A9B6CA;font-size:var(--t-meta)}
@keyframes cmd-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}

/* ===============================================================
   COMPONENTS
   =============================================================== */
.btn{border:1px solid var(--border);background:var(--surface);color:var(--ink);padding:8px 15px;border-radius:var(--r-sm);
  font-size:calc(15px*var(--ts,1));font-weight:600;text-decoration:none;cursor:pointer;min-height:40px;display:inline-flex;
  align-items:center;justify-content:center;gap:7px;line-height:1.2;
  transition:border-color var(--m-fast) var(--ease),color var(--m-fast) var(--ease),background var(--m-fast) var(--ease)}
.btn:hover{border-color:var(--ink-4);color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2);color:#fff}
.btn.sm{padding:6px 12px;font-size:calc(14.5px*var(--ts,1));min-height:36px}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-3)}
.btn.ghost:hover{color:var(--ink);background:var(--raised)}
.btn.danger{color:var(--critical);border-color:color-mix(in srgb,var(--critical) 40%,transparent);background:transparent}
.btn.linkbtn{border:0;background:none;padding:0;min-height:0;color:var(--accent-text);font-weight:600}
.btn.linkbtn:hover{text-decoration:underline;text-underline-offset:3px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn[hidden]{display:none}
html[data-shell="staff"] .btn{font-size:calc(15px*var(--ts,1));background:transparent;border-color:#1D304C;color:#E6EBF2}
html[data-shell="staff"] .btn:hover{background:#0B1930;border-color:#2A3D5C;color:#fff}
html[data-shell="staff"] .btn.primary{background:#1E63B8;border-color:#1E63B8;color:#fff;font-weight:600}
html[data-shell="staff"] .btn.primary:hover{background:#2A72C8;border-color:#2A72C8}
html[data-shell="staff"] .btn.ghost{border-color:transparent;color:var(--ink-3)}
html[data-shell="staff"] .btn.danger{color:var(--critical)}
.btn .count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:2px;border-radius:10px;
  background:var(--accent);color:#fff;font-size:var(--t-micro);font-weight:700;font-variant-numeric:tabular-nums}
.btn.has-unread{color:var(--ink)}

/* A chip states one thing in words; the dot repeats it, never alone. */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-micro);font-weight:600;padding:2px 8px;border-radius:var(--r-xs);
  background:var(--sunk);color:var(--ink-3);white-space:nowrap;line-height:1.5;border:1px solid transparent}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--idle);flex:none}
.chip.good{color:var(--good);background:var(--good-bg)} .chip.good::before{background:var(--good)}
.chip.attn{color:var(--attention);background:var(--attention-bg)} .chip.attn::before{background:var(--attention)}
.chip.bad{color:var(--critical);background:var(--critical-bg)} .chip.bad::before{background:var(--critical)}
.chip.off{color:var(--ink-3);background:transparent;border-color:var(--border)} .chip.off::before{background:transparent;border:1.5px solid var(--ink-4);width:5px;height:5px}
.chip.life-concept{background:var(--info-bg);color:var(--info)} .chip.life-concept::before{display:none}
.chip.life-demo{background:var(--attention-bg);color:var(--attention)} .chip.life-demo::before{display:none}
.chip.life-live{background:var(--good-bg);color:var(--good)} .chip.life-live::before{display:none}

/* Panels: a surface and a hairline. Not the default container. */
.card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-lg);
  padding:var(--card-pad-y) var(--card-pad-x);display:flex;flex-direction:column;gap:var(--card-gap);min-width:0}
html[data-scheme="light"] .card{border-color:var(--border)}
.card>header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--border-soft);margin-bottom:0}
.card h3{font-size:var(--t-sect);font-weight:700}
html[data-shell="staff"] .card{background:var(--nav);border-color:#15243B}
html[data-shell="staff"] .card h3{font-size:calc(15.5px*var(--ts,1));font-weight:600}
.card header .chip,.card header .btn{margin-left:auto}
.card header .chip + .chip,.card header .chip + .btn,.card header .btn + .btn{margin-left:0}
.card p{margin:0}
.card p.lede{font-size:var(--t-meta);color:var(--ink-3)}
.card.prose{max-width:760px}
.plain-list{margin:6px 0 0;padding-left:20px;color:var(--ink-2);display:grid;gap:6px}

.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(262px,1fr))}
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.card>.actions{margin-top:auto}
.card>header .actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.areaactions{margin:0 0 16px}

/* Page heading: the page names itself once. */
.vhead{margin-bottom:20px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 16px}
.vhead h2{font-size:var(--t-page);flex:1 1 auto;min-width:0}
.vhead p{margin:0;flex:1 1 100%;order:3;font-size:var(--t-body);color:var(--ink-3);max-width:none}
.vhead .actions{order:2;margin:0}
html[data-shell="staff"] .vhead h2{font-size:calc(24px*var(--ts,1));font-weight:600}
html[data-shell="staff"] .vhead p{font-size:var(--t-meta)}
.subhead{font-size:var(--t-meta);font-weight:700;color:var(--ink-3);margin:6px 0 0}
.eyebrow{font-size:var(--t-micro);font-weight:600;color:var(--ink-3)}
.hint{font-size:var(--t-meta);color:var(--ink-3);margin:0;line-height:1.5}
.calm{max-width:1120px}

/* ---------- rows: the primitive ---------- */
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:14px;padding:var(--row-pad) 0;border-top:1px solid var(--border-soft);min-height:44px;
  font-size:var(--t-body);width:100%;text-align:left;background:none;border-left:0;border-right:0;border-bottom:0;color:inherit;font-family:inherit;position:relative}
.rows>.row:first-child,.card>.row:first-of-type{border-top:0}
.row>span:first-child{flex:1;min-width:0}
.row .t{color:var(--ink);min-width:0;flex:1;overflow-wrap:anywhere}
.row .t small,.row .t .s{display:block;color:var(--ink-3);font-size:var(--t-meta);margin-top:2px;overflow-wrap:anywhere;white-space:normal}
.row .s{display:block;color:var(--ink-3);font-size:calc(15px*var(--ts,1));margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .r{color:var(--ink-3);font-size:var(--t-meta);white-space:nowrap;font-variant-numeric:tabular-nums}
.row .r.actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;white-space:normal}
.row .r.actions select{width:auto;min-width:96px;min-height:32px}
.row .ic{width:30px;height:30px;border-radius:var(--r-sm);flex:none;background:var(--sunk);display:grid;place-items:center}
.row .ic svg{width:18px;height:18px;stroke:var(--ink-3);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.row .age{font-size:var(--t-meta);color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.row .age.late{color:var(--attention);font-weight:700}
.row .chev,.erow .chev{stroke:var(--ink-4);fill:none;stroke-width:1.8;width:16px;height:16px;flex:none;stroke-linecap:round;stroke-linejoin:round;opacity:.6;
  transition:transform var(--m-fast) var(--ease),opacity var(--m-fast)}
.row span.chev{width:auto;height:auto;color:var(--ink-4)}
/* Whole rows open records; they lift to the reader, never shout. */
button.row,.row.clickable{cursor:pointer;margin:0 -12px;padding:10px 12px;width:calc(100% + 24px);border-radius:var(--r-md);border-top-color:var(--border-soft);
  transition:background var(--m-fast) var(--ease)}
button.row:hover,.row.clickable:hover{background:var(--raised)}
button.row:hover .chev,.row.clickable:hover .chev{opacity:1;transform:translateX(2px)}
button.row .t{font-weight:700}
button.row.late .t::after{content:none}
.row.mine{background:var(--accent-dim);border-radius:var(--r-md);padding-left:10px;padding-right:10px}
.row.stockrow,.row.adsrow{flex-wrap:wrap;gap:8px 12px;cursor:default}
.row.stockrow .t,.row.adsrow .t{flex:1 1 210px}
.rowtail{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.rowtail .btn{white-space:nowrap}

/* ---------- figures ---------- */
.figures{display:flex;flex-wrap:wrap;gap:14px 30px;padding:6px 0 2px}
.fig .n{font-family:var(--display);font-size:var(--t-fig);font-weight:700;color:var(--ink);line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.fig .l{font-size:var(--t-meta);color:var(--ink-3);margin-top:3px}
.strip{display:flex;flex-wrap:wrap;margin-bottom:22px;border-top:1px solid var(--border);border-bottom:1px solid var(--border-soft)}
.tile{flex:1 1 160px;min-width:0;padding:14px 20px 14px 0;display:flex;flex-direction:column;gap:3px;position:relative}
.tile + .tile{padding-left:20px;border-left:1px solid var(--border-soft)}
.tile .k{font-size:var(--t-meta);color:var(--ink-3);order:2}
.tile .v{font-family:var(--display);font-size:var(--t-fig);color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.05;overflow-wrap:anywhere;order:1}
.tile .v.ok{color:var(--good)} .tile .v.warn{color:var(--attention)}
.tile .m{font-size:var(--t-micro);color:var(--ink-3);overflow-wrap:anywhere;order:3}
.figstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:16px;border:1px solid var(--border-soft);border-radius:var(--r-lg);overflow:hidden;background:var(--nav)}
.figstrip .fig{padding:12px 16px;display:flex;flex-direction:column;gap:3px}
.figstrip .fig + .fig{border-left:1px solid var(--border-soft)}
.figstrip .v{font-size:calc(22px*var(--ts,1));font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.figstrip .l{font-size:var(--t-micro);color:var(--ink-3)}
.big{font-family:var(--display);font-size:calc(26px*var(--ts,1));color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.delta{font-size:var(--t-micro);color:var(--good)} .delta.down{color:var(--attention)} .delta.flat{color:var(--ink-3)}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 24px}
.field{border-top:1px solid var(--border-soft);padding:10px 0}
.field .k{font-size:var(--t-meta);color:var(--ink-3)}
.field .v{color:var(--ink);margin-top:3px;overflow-wrap:anywhere}

/* ---------- charts ---------- */
.chartbox{position:relative}
.plot{width:100%;height:96px;display:block;overflow:visible;touch-action:none}
.plot .grid line{stroke:var(--border-soft);stroke-width:1}
.plot .hit{fill:transparent;cursor:crosshair}
.plot .cursor{stroke:var(--accent-text);stroke-width:1;opacity:0;stroke-dasharray:3 3}
.plot .dot{fill:var(--accent-text);stroke:var(--surface);stroke-width:2;opacity:0}
.plot .bars{fill:var(--accent);fill-opacity:.85}
.tip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-118%);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:6px 9px;font-size:var(--t-micro);color:var(--ink);white-space:nowrap;z-index:3;box-shadow:0 6px 20px rgba(0,0,0,.25);font-variant-numeric:tabular-nums;transition:opacity .1s}
.tip small{display:block;color:var(--ink-3);font-size:var(--t-micro)}
.anacontrols{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 16px}
.anacontrols .seg{margin-bottom:0}
.chart-range{display:flex;justify-content:space-between;gap:12px;font-size:var(--t-micro);color:var(--ink-3)}
details.figs{margin-top:8px}
details.figs summary{cursor:pointer;color:var(--ink-3);font-size:var(--t-meta);min-height:24px;padding:2px 0}
details.figs .tablewrap{margin-top:8px}
table.anatable{min-width:0}
table.anatable tbody th{font-size:var(--t-body);font-weight:400;color:var(--ink-2)}
.readout{background:var(--sunk);border-left:2px solid var(--accent-text);border-radius:0 var(--r-md) var(--r-md) 0;padding:11px 14px;font-size:var(--t-meta);color:var(--ink-2);line-height:1.6}
.readout b{color:var(--ink)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;max-width:100%}
table{border-collapse:collapse;width:100%;min-width:380px;font-size:var(--t-body)}
th,td{text-align:left;padding:10px 14px 10px 0;border-bottom:1px solid var(--border-soft)}
th{font-size:var(--t-micro);color:var(--ink-3);font-weight:600}
td{color:var(--ink-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;padding-right:0}
table.dt{min-width:0;font-size:calc(15px*var(--ts,1))}
table.dt th,table.dt td{padding:10px 10px;border-top:1px solid var(--border-soft);border-bottom:0;vertical-align:middle}
table.dt thead th{border-top:0;font-size:var(--t-micro);font-weight:500;color:var(--ink-4);padding-bottom:8px}
table.dt tbody th{font-weight:600;font-size:calc(15.5px*var(--ts,1));color:var(--ink)}
table.dt tbody th small{display:block;color:var(--ink-3);font-weight:400;font-size:var(--t-micro);margin-top:2px}
table.dt td.r{text-align:right}
table.dt tbody tr:hover{background:var(--raised)}
table.dt td{overflow-wrap:anywhere}
table.dt .muted{color:var(--ink-3)}
table.dt .attn-text{color:var(--attention)}
table.dt td.num{font-variant-numeric:tabular-nums;color:var(--ink-3);white-space:nowrap}
table.dt.clients tbody tr{cursor:pointer}
table.dt.clients tbody tr[aria-selected="true"]{background:#10284A}
table.dt.clients tbody tr:focus-visible{outline:2px solid var(--accent-text);outline-offset:-2px}
.dt small.sub{display:block;font-size:var(--t-meta);color:var(--ink-3);font-weight:400;margin-top:2px}

/* ---------- forms ---------- */
.fgroup{display:flex;flex-direction:column;gap:6px}
.fgroup[hidden]{display:none}
.fgroup>label{font-size:calc(14.5px*var(--ts,1));font-weight:700;color:var(--ink-2)}
html[data-shell="staff"] .fgroup>label{font-weight:600}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),textarea,select{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--ink);
  border-radius:var(--r-sm);padding:9px 12px;font-size:calc(16px*var(--ts,1));font-family:var(--text);line-height:1.45;min-height:44px;
  transition:border-color var(--m-fast) var(--ease)}
html[data-shell="staff"] input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]),html[data-shell="staff"] textarea,html[data-shell="staff"] select{background:#061226;border-color:#1D304C}
input::placeholder,textarea::placeholder{color:var(--ink-4)}
textarea{resize:vertical;min-height:96px}
textarea.short{min-height:62px}
input:focus,textarea:focus,select:focus{border-color:var(--accent-text);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-text) 22%,transparent)}
.check{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.check input[type=checkbox]{width:18px;height:18px;min-height:18px;flex:none;accent-color:var(--accent)}
.check .lbl{min-width:0;overflow-wrap:break-word}
label.check{display:flex;align-items:flex-start;gap:10px;min-height:40px;padding:6px 0;font-size:var(--t-body);color:var(--ink-2);font-weight:400}
label.check input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--accent)}
label.check small.sub{color:var(--ink-3)}
.checks{display:grid;grid-template-columns:1fr;gap:4px;margin:6px 0}
.checks.two{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));column-gap:16px}
fieldset.bare{border:0;padding:0;margin:0;min-width:0}
fieldset.fgroup{border:0;padding:0;margin:0 0 16px}
fieldset.fgroup legend{font-weight:700;color:var(--ink-2);margin-bottom:6px;padding:0}
ul.plain{margin:8px 0 0;padding-left:18px}
.opts{display:flex;flex-direction:column;gap:6px}
.opt{display:flex;gap:12px;align-items:flex-start;padding:11px 13px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);cursor:pointer;
  transition:border-color var(--m-fast) var(--ease),background var(--m-fast)}
.opt:hover{border-color:var(--ink-4)}
.opt:has(input:checked){border-color:var(--accent-text);background:var(--accent-dim)}
.opt input{accent-color:var(--accent);margin:3px 0 0;width:18px;height:18px;flex:none}
.opt .ob{display:flex;flex-direction:column;gap:2px;min-width:0}
.opt .ol{color:var(--ink);font-weight:700}
.opt .oh{color:var(--ink-3);font-size:var(--t-meta);line-height:1.45}
.counter{font-size:var(--t-micro);color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}
.counter.over{color:var(--critical)}
.editrow{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.editrow input[type=text]{flex:1}
.editrow select{width:auto;flex:none}
.del{background:none;border:1px solid var(--border);color:var(--ink-3);border-radius:var(--r-sm);width:34px;height:36px;flex:none;cursor:pointer;font-size:calc(16px*var(--ts,1))}
.del:hover{color:var(--critical);border-color:var(--critical)}

/* Segmented control: one object, several views. */
.seg{display:inline-flex;flex-wrap:wrap;max-width:100%;width:fit-content;align-self:flex-start;background:var(--sunk);border-radius:var(--r-md);padding:3px;gap:2px;margin-bottom:6px}
html[data-shell="staff"] .seg{background:#0B1930;border:1px solid #1D304C}
.segb{border:0;background:none;color:var(--ink-3);font-family:var(--text);font-size:calc(15px*var(--ts,1));font-weight:500;padding:6px 14px;border-radius:var(--r-xs);cursor:pointer;min-height:32px;
  transition:background var(--m-fast) var(--ease),color var(--m-fast)}
.segb:hover{color:var(--ink)}
.segb[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.12)}
html[data-shell="staff"] .segb[aria-pressed="true"]{background:#12305A;color:#fff;font-weight:600;box-shadow:none}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px}
.filters select{width:auto;max-width:100%;min-height:36px}

/* ---------- empty, notice, placeholder ---------- */
.placeholder{padding:18px 0;color:var(--ink-3);font-size:var(--t-meta);text-align:left}
.placeholder strong{display:block;color:var(--ink);font-family:var(--display);font-size:var(--t-sect);margin-bottom:4px;font-weight:700}
.placeholder.ok strong{color:var(--good)}
.placeholder code{display:inline-block;margin-top:8px;background:var(--sunk);border:1px solid var(--border);border-radius:var(--r-sm);padding:6px 9px;font-size:var(--t-micro);color:var(--ink-3);word-break:break-all}
.notice{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--ink-4);border-radius:var(--r-md);padding:12px 15px;margin-bottom:16px;font-size:calc(15px*var(--ts,1));color:var(--ink-2)}
.notice strong{color:var(--ink)}
.notice.warn{border-left-color:var(--attention);background:color-mix(in srgb,var(--attention-bg) 70%,var(--surface))}
.notice p{margin:4px 0 0}
.notice .linkish{appearance:none;background:none;border:0;padding:0;margin-left:6px;color:var(--accent-text);font:inherit;cursor:pointer;text-decoration:underline}
.previewbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px;padding:10px 14px;border:1px solid var(--accent-text);border-radius:var(--r-md);background:var(--accent-dim)}
.previewbar strong{color:var(--ink)}
.truth-state > span{display:block}
.truth-state .actions{justify-content:center;flex-wrap:wrap}
.recovery .hint{margin:8px 0;max-width:70ch}
.quote{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 15px;font-size:calc(16px*var(--ts,1));color:var(--ink-2);overflow-wrap:anywhere;line-height:1.55;max-width:680px}
.quote small{display:block;color:var(--ink-3);font-size:var(--t-meta);margin-top:6px}
.quote.mine{background:var(--accent-dim);border-color:transparent;margin-left:auto}
.quote + .quote{margin-top:10px}
.msgtext{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;background:var(--sunk);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;margin:10px 0;max-width:100%}
ol.steps{margin:6px 0 10px;padding-left:22px;line-height:1.7}
.mailnote{margin:0 0 14px;padding:9px 12px;border:1px dashed var(--border);border-radius:var(--r-md);font-size:var(--t-micro);color:var(--ink-3)}
.mailnote.on{border-style:solid;color:var(--ink-2)}

/* ---------- disclosures ---------- */
details.later{margin-top:14px}
details.later summary{display:inline-flex;align-items:center;gap:9px;cursor:pointer;list-style:none;font-size:var(--t-meta);font-weight:700;color:var(--ink-2);
  padding:6px 0;min-height:32px}
details.later summary::-webkit-details-marker{display:none}
details.later summary::after{content:"";width:7px;height:7px;flex:none;margin-top:-3px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg);transition:transform var(--m-fast) var(--ease)}
details.later[open] summary::after{transform:rotate(-135deg);margin-top:3px}
details.later summary:hover{color:var(--ink)}
details.later[open] summary{margin-bottom:8px}
ul.actlist{margin:0;padding:0;list-style:none}
ul.actlist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:9px 0;border-bottom:1px solid var(--border-soft);font-size:calc(15.5px*var(--ts,1));color:var(--ink-2)}
ul.actlist .when{font-size:var(--t-meta);color:var(--ink-3);white-space:nowrap}
.adv summary,.resetbox summary{cursor:pointer;font-size:var(--t-meta);color:var(--ink-3);padding:6px 0}
.adv[open] summary{color:var(--ink-2)}

/* ---------- overflow menu ---------- */
.rowmenu{position:relative;display:inline-block}
.rowmenu summary{list-style:none;cursor:pointer;min-width:34px;height:32px;padding:0 8px;line-height:30px;text-align:center;border:1px solid transparent;border-radius:var(--r-sm);color:var(--ink-3);font-size:var(--t-meta);font-weight:700}
.rowmenu summary::-webkit-details-marker{display:none}
.rowmenu summary:hover{background:var(--raised);color:var(--ink)}
.rowmenupanel{position:absolute;right:0;top:calc(100% + 6px);z-index:12;min-width:220px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:1px}
.rowmenupanel .btn{justify-content:flex-start;border-color:transparent;background:transparent}

/* ---------- dialogs and toasts ---------- */
.navscrim{display:none}
.scrim{position:fixed;inset:0;background:rgba(10,12,16,.5);z-index:50;display:grid;place-items:center;padding:20px;animation:fade-in var(--m-fast) linear}
html[data-shell="staff"] .scrim{background:rgba(1,5,14,.62)}
.scrim[hidden]{display:none}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);width:min(640px,100%);max-height:90vh;display:flex;flex-direction:column;
  box-shadow:0 30px 80px rgba(0,0,0,.35);animation:modal-in var(--m-base) var(--ease)}
html[data-shell="staff"] .modal{background:#0B1930;border-color:#2A3D5C}
.modal>header{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--border-soft)}
.modal>header h3{font-size:calc(19px*var(--ts,1));flex:1}
.modal .x{background:none;border:0;color:var(--ink-3);font-size:calc(22px*var(--ts,1));line-height:1;cursor:pointer;padding:4px 8px;border-radius:var(--r-sm);min-width:36px;min-height:36px}
.modal .x:hover{color:var(--ink);background:var(--raised)}
.mbody{padding:20px 22px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.modal>footer{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--border-soft);flex-wrap:wrap}
.toasts{position:fixed;bottom:20px;right:20px;z-index:80;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.toast{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--good);border-radius:var(--r-md);padding:10px 14px;font-size:calc(15px*var(--ts,1));color:var(--ink);
  box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:340px;animation:tin .18s ease-out}
.toast.info{border-left-color:var(--accent-text)} .toast.bad{border-left-color:var(--critical)} .toast.attn{border-left-color:var(--attention)}

/* ---------- motion vocabulary ---------- */
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes screen-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes pane-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
@keyframes region-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes tin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#content.arriving{animation:screen-in var(--m-base) var(--ease)}
.previewbar,.notice{animation:region-in var(--m-base) var(--ease)}
.recpane{animation:pane-in var(--m-pane) var(--ease)}
@media (prefers-reduced-motion:reduce){
  html:not([data-motion="on"]) #content.arriving,html:not([data-motion="on"]) .recpane{animation:fade-in 80ms linear!important}
}
html[data-shell="staff"] .localtabs{margin:0 0 18px;padding:0;background:none;border-bottom-color:#15243B}
html[data-shell="staff"] .localtabs .btn{border:0;background:none;color:#A9B6CA;font-size:calc(15px*var(--ts,1))}
html[data-shell="staff"] .localtabs .btn:hover{color:#fff;background:none}
html[data-shell="staff"] .localtabs .btn[aria-current="page"]{color:#fff;font-weight:600;box-shadow:inset 0 -2px 0 #5EA3E4}
.conceptband .lb-next input{min-height:34px;font-size:var(--t-meta)}

/* ===============================================================
   VISUAL CORRECTION (founder-approved 5 October 2026)
   Width follows the job; groups stay together; short related
   fields pair; long fields keep the width; read order never jumps.
   =============================================================== */
.modal[data-size="small"]{width:min(460px,100%)}
.modal[data-size="wide"]{width:min(960px,100%)}
.modal[data-size="wider"]{width:min(1040px,100%)}
.form09{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 36px;align-items:start}
.form09.grid4{gap:26px 36px}
.fsec{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:14px}
.fsec>legend{padding:0 0 10px;margin:0 0 2px;width:100%;border-bottom:1px solid var(--border-soft);font-family:var(--display);
  font-size:var(--t-sect);font-weight:700;color:var(--ink)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fsec .counter,.fgroup .counter,.fgroup .help{font-size:var(--t-meta);color:var(--ink-3);text-align:left;line-height:1.45}
.fsec .span2{grid-column:1/-1}
@media (max-width:1099px){ .form09{grid-template-columns:minmax(0,1fr)} }
@media (max-width:420px){ .pair{grid-template-columns:minmax(0,1fr)} }
/* Phone: a full-screen sheet with the actions pinned at the foot. */
@media (max-width:699px){
  .scrim{padding:0;place-items:stretch}
  .modal,.modal[data-size]{width:100%;max-height:100dvh;height:100dvh;border-radius:0;border:0}
  .modal>footer{position:sticky;bottom:0;background:inherit}
}
/* Platform marks: identity, beside a written state, never folded into it. */
.pmark{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px}
.row .ic{color:var(--ink-2)}
.connrow h3{display:flex;align-items:center;gap:10px}
/* The top bar stays one row from a large desktop down to a small laptop:
   the search box gives way first, then the spacing; labels never wrap. */
.stafftop .topacts .btn,.stafftop .st-brand span{white-space:nowrap}
@media (max-width:1439px){
  .stafftop .st-link{padding:0 10px}
  .stafftop .st-brand{margin-right:12px}
  .stafftop .st-search{width:clamp(150px,13vw,210px)}
  .stafftop .topacts{margin-left:6px}
  .stafftop .topacts .btn{padding:6px 10px}
}
@media (max-width:1259px){
  .stafftop .st-link{padding:0 8px}
  .stafftop .st-search kbd{display:none}
  .stafftop .st-search{width:150px}
}
/* The example-data banner stays a compact strip on a phone at the larger type. */
.datamode .btn.dm-btn{min-height:32px;padding-top:4px;padding-bottom:4px}
@media (max-width:499px){.datamode{padding-top:6px;padding-bottom:6px;gap:6px 12px;line-height:1.35}}