/* Face Attendance admin panel - shared theme v3 ("clean light").
   Loaded after modernist.css and overrides its tokens. White navigation, floating top bar, white cards with soft
   shadows and small radii, tinted labels. Brand colour follows the product default (spec 14.2); a licence swaps --brand-*. */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- Brand -------------------------------------------------------------
     A licence supplies three brand steps: --brand, --brand-d, --brand-l.
     Everything else on this block derives from them, so a brand swap carries
     through tints, focus rings, shadows and gradients with no further edits.
     Three steps rather than one because the licence generator already previews
     and contrast-checks the palette (spec 21.4), so it is the right place to
     compute them; deriving them here with color-mix drifts off the hand-picked
     values and changes the product default. */
  --brand:#7C6AE6;
  --brand-d:#6553D6;
  --brand-l:#9C8DF0;

  /* Derived from --brand. Older engines keep the literal on the line above. */
  --brand-t:rgba(124,106,230,.12);
  --brand-t:color-mix(in srgb, var(--brand) 12%, transparent);
  --brand-t2:rgba(124,106,230,.2);
  --brand-t2:color-mix(in srgb, var(--brand) 20%, transparent);
  --brand-t3:rgba(124,106,230,.3);
  --brand-t3:color-mix(in srgb, var(--brand) 30%, transparent);
  --brand-sh:0 3px 10px -2px rgba(124,106,230,.45);
  --brand-sh:0 3px 10px -2px color-mix(in srgb, var(--brand) 45%, transparent);
  --brand-ring:0 2px 6px rgba(124,106,230,.3);
  --brand-ring:0 2px 6px color-mix(in srgb, var(--brand) 30%, transparent);
  --grad-brand:linear-gradient(72deg,var(--brand) 22%,var(--brand-l) 100%);
  --shadow-brand:var(--brand-sh);
  /* Text and icons sitting on a brand fill. Stays light in both themes,
     because a brand fill is dark in both. */
  --on-brand:#fff;
  /* Pure white on --brand measures 4.15:1, under the 4.5 AA needs for body
     text, so a brand fill that carries text uses --brand-solid instead
     (5.5:1). And --brand as *text* on white is 4.15:1 too, so text in the
     brand colour uses --brand-ink. Both derive, so a licence swap keeps the
     guarantee. */
  --brand-solid:#6553D6;
  --brand-solid:color-mix(in srgb, var(--brand) 84%, #000);
  --brand-ink:#5B4BC4;
  --brand-ink:color-mix(in srgb, var(--brand) 78%, #000);

  /* ---- Secondary accent, for charts and the cool gradient ---------------- */
  --accent2:#00A9BF;
  --accent2-l:#33CDE0;
  --accent2-t:rgba(0,169,191,.14);
  --accent2-t:color-mix(in srgb, var(--accent2) 14%, transparent);
  --grad-cool:linear-gradient(72deg,var(--accent2) 22%,var(--accent2-l) 100%);

  /* ---- Category colours -------------------------------------------------
     Categorical, not brand: they distinguish one report or tile from another.
     A licence deliberately does not set these, for the same reason it does not
     set the semantic colours (spec 21.3) - they carry meaning, not identity. */
  --cat-1:#8B7BD8; --cat-1-d:#5A4AAE;
  --cat-2:#2F9FD4; --cat-2-d:#1C6FA8;
  --cat-3:#F3A3B8; --cat-3-d:#D4607E;
  --cat-4:#F6C27A; --cat-4-d:#D98A2B;
  --cat-5:#6FD1B0; --cat-5-d:#2E9C79;
  --grad-cat-1:linear-gradient(135deg,var(--cat-1),var(--cat-1-d));
  --grad-cat-2:linear-gradient(135deg,var(--cat-2),var(--cat-2-d));
  --grad-cat-3:linear-gradient(135deg,var(--cat-3),var(--cat-3-d));
  --grad-cat-4:linear-gradient(135deg,var(--cat-4),var(--cat-4-d));
  --grad-cat-5:linear-gradient(135deg,var(--cat-5),var(--cat-5-d));

  /* ---- Surfaces and ink ------------------------------------------------- */
  --color-bg:#F7F7FA; --color-surface:#FFFFFF; --color-text:#2F2B3D;
  --color-accent:var(--brand); --color-divider:#E6E5EB;
  --grad-soft:#F8F8FA;
  --color-neutral-100:#F8F8FA; --color-neutral-200:#F1F0F4; --color-neutral-300:#E3E2E8; --color-neutral-400:#C9C7D1;
  --color-neutral-500:#A5A2B2; --color-neutral-600:#817D92; --color-neutral-700:#5F5B72; --color-neutral-800:#443F57; --color-neutral-900:#2F2B3D;
  --color-accent-100:#F1EFFD; --color-accent-200:#E3DEFB; --color-accent-300:#C8BFF7; --color-accent-400:#A99CF1; --color-accent-500:#7C6AE6;
  --color-accent-600:#6553D6; --color-accent-700:#5341B8; --color-accent-800:#3F3190; --color-accent-900:#2A2066;
  --ink:#2F2B3D; --head:#3D3953; --muted:#635F78; --faint:#6E6A82;
  --rule:#E6E5EB; --rule-soft:#EFEEF3; --paper:#fff;
  --hairline:#111; --hairline-soft:#ccc;

  /* ---- Type and shape --------------------------------------------------- */
  --font-heading:"Figtree",system-ui,sans-serif; --font-heading-weight:700; --font-body:"Figtree",system-ui,sans-serif;
  --radius-sm:4px; --radius-md:6px; --radius-lg:10px;
  --shadow-sm:0 1px 4px rgba(47,43,61,.08);
  --shadow-md:0 3px 12px rgba(47,43,61,.10);
  --shadow-lg:0 8px 28px rgba(47,43,61,.16);
  --shadow-side:0 0 16px rgba(47,43,61,.08);

  /* ---- Semantic. Fixed for every customer (spec 21.3) ------------------- */
  --ok:#136B46;   --ok-bg:rgba(40,199,111,.14);   --ok-base:#28C76F; --ok-deep:#0E6B41;
  --warn:#8F5708; --warn-bg:rgba(255,159,67,.16); --warn-base:#FF9F43; --warn-deep:#8A5306;
  --err:#B02229;  --err-bg:rgba(255,76,81,.13);   --err-base:#FF4C51; --err-deep:#A8262C; --err-mid:#BF2A31;
  --err-sh:rgba(214,54,61,.45);
  --info:#0B7180; --info-bg:rgba(0,186,209,.14);  --info-base:#00BAD1;
  /* Soft tinted panels. Semantic, so a licence does not reach them. */
  --grad-warn-soft:linear-gradient(135deg,#FFF4E2,#FBE3BD); --warn-edge:#F4DDB6;
  --grad-err-soft:linear-gradient(135deg,#FDEBEE,#FBDDE3);
  --grad-ok-soft:linear-gradient(135deg,#E9F8F0,#CFEFDF);
  /* Neutral chip, alpha inks and solid-callout inks. Alpha inks derive from
     --ink, so they invert with the theme automatically. */
  --neu:#5F626C; --neu-bg:rgba(128,131,144,.14);
  --ink-a06:rgba(47,43,61,.06); --ink-a06:color-mix(in srgb, var(--ink) 6%, transparent);
  --ink-a12:rgba(47,43,61,.12); --ink-a12:color-mix(in srgb, var(--ink) 12%, transparent);
  --ink-a20:rgba(47,43,61,.2);  --ink-a20:color-mix(in srgb, var(--ink) 20%, transparent);
  --ink-a25:rgba(47,43,61,.25); --ink-a25:color-mix(in srgb, var(--ink) 25%, transparent);
  --warn-a07:rgba(255,159,67,.07); --warn-a07:color-mix(in srgb, var(--warn-base) 7%, transparent);
  --ok-deeper:#137448;
  --on-brand-a88:rgba(255,255,255,.88); --on-brand-a20:rgba(255,255,255,.2);
  --scrim:rgba(47,43,61,.42);
  --glass:rgba(255,255,255,.92);
}

/* ---- Dark theme ---------------------------------------------------------
   Three states, because the viewer's setting has three: an explicit choice
   sets data-theme, and "system" sets nothing, so prefers-color-scheme is the
   only signal for most people. Only tokens are redefined; no component rule
   carries a colour that reads in one theme alone. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --color-bg:#141220; --color-surface:#1C1930; --color-text:#E9E7F2;
  --color-divider:#2E2A44; --grad-soft:#1C1930;
  --color-neutral-100:#1C1930; --color-neutral-200:#242038; --color-neutral-300:#2E2A44; --color-neutral-400:#3D3857;
  --color-neutral-500:#736F8A; --color-neutral-600:#938FA8; --color-neutral-700:#B4B0C6; --color-neutral-800:#D2CFE0; --color-neutral-900:#E9E7F2;
  --color-accent-100:#221C3A; --color-accent-200:#2C2450; --color-accent-300:#3F3474; --color-accent-400:#6553D6; --color-accent-500:#8B7BD8;
  --color-accent-600:#9C8DF0; --color-accent-700:#B4A8F5; --color-accent-800:#CDC5F9; --color-accent-900:#E6E1FC;
  --ink:#E9E7F2; --head:#F4F2FA; --muted:#A8A4BE; --faint:#948FAD;
  --rule:#2E2A44; --rule-soft:#262239; --paper:#1C1930;
  --hairline:#E9E7F2; --hairline-soft:#3D3857;
  --brand-l:#B4A8F5; --brand-ink:#C9C0FA; --brand-ink:color-mix(in srgb, var(--brand) 45%, #fff);
  
  --shadow-sm:0 1px 4px rgba(0,0,0,.4);
  --shadow-md:0 3px 12px rgba(0,0,0,.48);
  --shadow-lg:0 8px 28px rgba(0,0,0,.56);
  --shadow-side:0 0 16px rgba(0,0,0,.42);
  --ok:#4FD198; --warn:#F0B056; --err:#FF7A7F; --info:#43D3E5;
  --ok-deep:#A7EBC9; --warn-deep:#F7D3A0; --err-deep:#FFC0C3;
  --grad-warn-soft:linear-gradient(135deg,#2E2415,#3A2C17); --warn-edge:#4A3A1E;
  --grad-err-soft:linear-gradient(135deg,#2E1A1D,#3A1F24);
  --grad-ok-soft:linear-gradient(135deg,#152A22,#1B372C);
  --neu:#A8ABB8; --ok-deeper:#7FE0B4;
  --scrim:rgba(0,0,0,.6);
  --glass:rgba(28,25,48,.92);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --color-bg:#141220; --color-surface:#1C1930; --color-text:#E9E7F2;
  --color-divider:#2E2A44; --grad-soft:#1C1930;
  --color-neutral-100:#1C1930; --color-neutral-200:#242038; --color-neutral-300:#2E2A44; --color-neutral-400:#3D3857;
  --color-neutral-500:#736F8A; --color-neutral-600:#938FA8; --color-neutral-700:#B4B0C6; --color-neutral-800:#D2CFE0; --color-neutral-900:#E9E7F2;
  --color-accent-100:#221C3A; --color-accent-200:#2C2450; --color-accent-300:#3F3474; --color-accent-400:#6553D6; --color-accent-500:#8B7BD8;
  --color-accent-600:#9C8DF0; --color-accent-700:#B4A8F5; --color-accent-800:#CDC5F9; --color-accent-900:#E6E1FC;
  --ink:#E9E7F2; --head:#F4F2FA; --muted:#A8A4BE; --faint:#948FAD;
  --rule:#2E2A44; --rule-soft:#262239; --paper:#1C1930;
  --hairline:#E9E7F2; --hairline-soft:#3D3857;
  --brand-l:#B4A8F5; --brand-ink:#C9C0FA; --brand-ink:color-mix(in srgb, var(--brand) 45%, #fff);
  
  --shadow-sm:0 1px 4px rgba(0,0,0,.4);
  --shadow-md:0 3px 12px rgba(0,0,0,.48);
  --shadow-lg:0 8px 28px rgba(0,0,0,.56);
  --shadow-side:0 0 16px rgba(0,0,0,.42);
  --ok:#4FD198; --warn:#F0B056; --err:#FF7A7F; --info:#43D3E5;
  --ok-deep:#A7EBC9; --warn-deep:#F7D3A0; --err-deep:#FFC0C3;
  --grad-warn-soft:linear-gradient(135deg,#2E2415,#3A2C17); --warn-edge:#4A3A1E;
  --grad-err-soft:linear-gradient(135deg,#2E1A1D,#3A1F24);
  --grad-ok-soft:linear-gradient(135deg,#152A22,#1B372C);
  --neu:#A8ABB8; --ok-deeper:#7FE0B4;
  --scrim:rgba(0,0,0,.6);
  --glass:rgba(28,25,48,.92);
  color-scheme:dark;
}

/* Border-box everywhere. Without it, any element with width:100% plus side
   padding overflows its parent by exactly that padding, which is what put
   the bare-layout pages into horizontal scroll on a phone. */
*,*::before,*::after{box-sizing:border-box}

/* Elevation utility, previously supplied by the deleted modernist sheet. */
.elev-sm{box-shadow:var(--shadow-sm)}
.elev-md{box-shadow:var(--shadow-md)}
.elev-lg{box-shadow:var(--shadow-lg)}

/* Category tiles. Replaces the inline gradients that a brand swap could not
   reach, and keeps the gradient treatment the design asked for. */
.theme-btn{color:var(--muted);flex:none}
.theme-btn:hover{color:var(--brand-ink);background:var(--brand-t)}
.tile{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:var(--on-brand);box-shadow:var(--shadow-md);margin-bottom:6px;flex:none}
.tile-lg{width:44px;height:44px}
.tile-brand{background:var(--grad-brand)}
.tile-cool{background:var(--grad-cool)}
.tile-1{background:var(--grad-cat-1)}
.tile-2{background:var(--grad-cat-2)}
.tile-3{background:var(--grad-cat-3)}
.tile-4{background:var(--grad-cat-4)}
.tile-5{background:var(--grad-cat-5)}

/* A table cell or field with no value. The project bans the em dash, so the
   marker is a plain hyphen carried by CSS rather than typed into 39 cells. */
.nil{color:var(--faint)}
.nil::before{content:"-"}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

html{background:var(--color-bg)}
body{font-family:var(--font-body);font-size:14.5px;line-height:1.5;color:var(--muted);background:var(--color-bg);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:var(--font-heading);font-weight:700;color:var(--head);letter-spacing:-.01em}
b,strong{color:var(--head);font-weight:600}
a{color:var(--brand-ink);text-decoration:none}
a:hover{color:var(--brand-ink);text-decoration:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.lucide{width:18px;height:18px;stroke-width:1.9;flex:none}
.muted{color:var(--muted)}
.strong{font-weight:600;color:var(--head)}
small{font-size:12.5px}

/* shell */
.app{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;background:var(--paper);box-shadow:var(--shadow-side);padding:0 14px;z-index:6}
.side::-webkit-scrollbar{width:0}
.side-logo{height:72px;flex:none;padding:0 8px;display:flex;align-items:center;color:var(--head);text-decoration:none}
.side-logo:hover{color:var(--head)}
.logo-slot{max-width:200px;max-height:44px;display:flex;align-items:center;gap:10px}
.logo-mark{width:36px;height:36px;flex:none;display:block}
.logo-word{font-weight:800;font-size:17px;line-height:1.1;color:var(--head);letter-spacing:-.015em}
.logo-word span{display:block;font-size:11.5px;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:2px}
.side-nav{display:flex;flex-direction:column;gap:2px;padding-bottom:12px}
.side-group{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:18px 12px 6px;display:flex;align-items:center;gap:10px}
.side-group::after{content:"";flex:1;height:1px;background:var(--rule-soft)}
.side-nav>a{display:flex;align-items:center;gap:12px;padding:9px 14px;border-radius:6px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;transition:background .15s}
.side-nav>a .lucide{width:20px;height:20px;color:var(--ink)}
.side-nav>a .chev{margin-left:auto;width:16px;height:16px;color:var(--faint);transition:transform .2s}
.side-nav>a:hover{background:var(--color-neutral-200);color:var(--ink)}
.side-nav>a.on{background:linear-gradient(72deg,var(--brand) 22%,var(--brand-l) 100%);color:var(--on-brand);box-shadow:var(--brand-sh)}
.side-nav>a.on .lucide{color:var(--on-brand)}
.side-nav>a.on .chev{transform:rotate(90deg);color:var(--on-brand)}
.side-sub{display:flex;flex-direction:column;gap:1px;padding:4px 0 6px}
.side-sub a{display:flex;align-items:center;gap:14px;padding:7px 14px 7px 22px;font-size:14.5px;color:var(--ink);text-decoration:none;border-radius:6px}
.side-sub a::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid var(--color-neutral-500);flex:none;margin-right:6px}
.side-sub a:hover{background:var(--color-neutral-200);color:var(--ink)}
.side-sub a.on{background:var(--brand-t);color:var(--brand-ink);font-weight:600}
.side-sub a.on::before{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-t2)}
.side-foot{margin:auto -14px 0;padding:14px 22px;font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--rule-soft)}
.frame{display:flex;flex-direction:column;min-width:0;padding:0 24px}
.top{height:62px;display:flex;align-items:center;gap:12px;padding:0 20px;position:sticky;top:12px;z-index:5;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:8px;box-shadow:var(--shadow-md);margin:12px 0 0;order:-1}
.search{flex:1;max-width:560px;position:relative}
.search .lucide{position:absolute;left:0;top:10px;color:var(--ink)}
.search .input{padding-left:30px;padding-right:34px;border:0;box-shadow:none;background:transparent;font-size:15px}
.search .input:focus{box-shadow:none}
.search kbd{position:absolute;right:6px;top:9px;font:inherit;font-size:11.5px;padding:1px 7px;border-radius:4px;border:1px solid var(--rule);color:var(--faint)}
.top-sp{flex:1}
/* the customer's logo and name, from their licence, at the start of the top bar */
.top-client{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto}
.client-logo,.lic-logo{flex:none;display:block;object-fit:contain;border-radius:8px;background:#fff;box-shadow:0 0 0 1px var(--rule)}
.client-logo{width:36px;height:36px}
.lic-logo{width:40px;height:40px}
.client-name{font-weight:700;font-size:15px;color:var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:640px){.top-client.has-logo .client-name{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
.top-alert{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 10px;border-radius:6px;color:var(--ink);font-weight:500;font-size:14px;position:relative}
.top-alert:hover{background:var(--color-neutral-200);color:var(--ink)}
.top-alert b{background:var(--err);color:var(--on-brand);padding:1px 7px;border-radius:999px;font-size:11.5px;font-weight:600}
.acct{display:flex;align-items:center;gap:10px;color:var(--ink);padding:4px 8px 4px 4px;border-radius:6px}
.acct:hover{background:var(--color-neutral-200);color:var(--ink)}
.acct .av{border-radius:50%;box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ok)}
.acct div{display:flex;flex-direction:column;line-height:1.25}
.acct b{font-size:13.5px}
.acct small{color:var(--muted);font-size:12px}
.banner{display:flex;align-items:center;gap:12px;margin:16px 0 0;padding:12px 16px;border-radius:6px;font-size:14px;font-weight:500}
.banner.acc{background:var(--brand-t);color:var(--brand-ink)}
.banner.warn{background:var(--warn-bg);color:var(--warn-deep)}
.banner.ink{background:var(--head);color:var(--on-brand)}
.banner a{margin-left:auto;font-weight:600;white-space:nowrap;color:inherit;text-decoration:underline;text-underline-offset:3px}
.banner.ink a{color:var(--on-brand)}
.banner .x{cursor:pointer;opacity:.6}
.main{padding:24px 0 80px;display:flex;flex-direction:column;gap:24px;min-width:0;max-width:1480px;width:100%}

/* page header */
.ph{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.ph-t{flex:1;min-width:300px}
.code{display:inline-flex;gap:8px;align-items:center;font-size:12px;font-weight:600;color:var(--muted)}
.code::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand)}
.code span{background:var(--brand-t);color:var(--brand-ink);padding:1px 8px;border-radius:4px;font-size:11.5px}
.ph h1{font-size:26px;margin:4px 0 4px;line-height:1.25;text-wrap:balance}
.ph .sub{color:var(--muted);font-size:14.5px;margin:0;max-width:84ch;text-wrap:pretty}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* buttons */
/* A row, which the gap between a label and its icon relies on. Borderless, because a button element
   otherwise keeps the browser's own border. */
.btn{display:inline-flex;align-items:center;border:0;cursor:pointer;white-space:nowrap;min-height:38px;padding:8px 18px;border-radius:6px;font-family:var(--font-body);font-weight:500;font-size:14.5px;justify-content:flex-start;gap:8px;text-decoration:none;transition:background .15s,box-shadow .15s,transform .1s;letter-spacing:.01em}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-primary{background:var(--brand-solid);color:var(--on-brand);box-shadow:var(--brand-sh)}
.btn-primary:hover{background:var(--brand-d);color:var(--on-brand)}
a.btn-primary,a.btn-primary:hover{color:var(--on-brand)}
.btn-secondary{background:var(--color-neutral-200);color:var(--ink);border:0}
.btn-secondary:hover{background:var(--color-neutral-300);color:var(--ink)}
a.btn-secondary,a.btn-secondary:hover{color:var(--ink)}
.btn-ghost{color:var(--brand-ink);background:transparent}
.btn-ghost:hover{background:var(--brand-t)}
.btn-danger{background:var(--err);color:var(--on-brand);box-shadow:0 3px 10px -2px var(--err-sh)}
.btn-danger:hover{background:var(--err-mid);color:var(--on-brand)}
.btn-sm{min-height:30px;padding:4px 12px;font-size:13px;border-radius:4px}
.btn .lucide{width:16px;height:16px}
.btn-icon{min-height:32px;width:32px;height:32px;padding:0;justify-content:center;border-radius:50%;color:var(--muted);background:transparent}
.btn-icon:hover{background:var(--color-neutral-200);color:var(--ink)}
.btn-icon .lucide{width:18px;height:18px}

/* cards */
.sec{display:flex;flex-direction:column;gap:16px;min-width:0;background:var(--paper);border-radius:10px;box-shadow:var(--shadow-md);padding:22px 24px}
.sec .sec{box-shadow:none;border:1px solid var(--rule);padding:16px}
.sec-h{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap}
.sec-h h2{font-size:18px;margin:0;font-weight:600;text-transform:none;letter-spacing:0}
.sec-h .muted{font-size:13.5px}
.sec>p,.lede{max-width:78ch;margin:0;text-wrap:pretty}
.split{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:24px;align-items:start}
.split.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.stack{display:flex;flex-direction:column;gap:24px;min-width:0}
.cells{display:grid;gap:24px}
.cells>*{background:var(--paper);border-radius:10px;box-shadow:var(--shadow-md);padding:20px 22px;min-width:0;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}
.sec .cells,.state .cells{gap:12px}
.sec .cells>*,.state .cells>*{box-shadow:none;border:1px solid var(--rule);padding:14px 16px}
.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.c4{grid-template-columns:repeat(4,minmax(0,1fr))}.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
a.cell{text-decoration:none;color:var(--muted);transition:box-shadow .2s,transform .2s}
a.cell:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);color:var(--muted)}
.main>.cells>*{border-bottom:3px solid transparent}
.main>.cells>*:nth-child(1){border-bottom-color:var(--brand)}
.main>.cells>*:nth-child(2){border-bottom-color:var(--ok-base)}
.main>.cells>*:nth-child(3){border-bottom-color:var(--warn-base)}
.main>.cells>*:nth-child(4){border-bottom-color:var(--info-base)}
.main>.cells>*:nth-child(5){border-bottom-color:var(--err-base)}
.main>.cells>*:hover{border-bottom-width:3px}
.lbl{font-size:13.5px;font-weight:500;color:var(--muted)}
.stat{font-family:var(--font-heading);font-size:34px;font-weight:700;color:var(--head);line-height:1.1;letter-spacing:-.02em}
.stat.xl{font-size:64px;letter-spacing:-.03em}
.stat.md{font-size:24px}
.stat.acc{color:var(--brand-ink)}
.delta{font-size:13.5px;color:var(--muted)}
.delta b{color:var(--ok)}

/* labels */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:500;line-height:1.35;padding:2px 9px;white-space:nowrap;border-radius:4px;border:0}
.badge .lucide{width:14px;height:14px}
.b-ok{background:var(--ok-bg);color:var(--ok)}
.b-warn{background:var(--warn-bg);color:var(--warn)}
.b-err{background:var(--err-bg);color:var(--err)}
.b-neu{background:var(--neu-bg);color:var(--neu)}
.b-ink{background:var(--head);color:var(--on-brand)}
.b-line{background:var(--info-bg);color:var(--info)}
.b-acc{background:var(--brand-solid);color:var(--on-brand)}
.pill{font-size:12px;font-weight:500;padding:1px 8px;border-radius:4px;background:var(--brand-t);color:var(--brand-ink);white-space:nowrap}
.pill.danger{background:var(--err-bg);color:var(--err)}

/* initials avatar - round, tinted, tone from name hash */
.av{width:36px;height:36px;display:inline-grid;place-items:center;font-size:13.5px;font-weight:600;flex:none;border-radius:50%;letter-spacing:.01em}
.av.sm{width:30px;height:30px;font-size:12px}
.av.lg{width:64px;height:64px;font-size:22px;border-radius:10px}
.av.xl{width:100px;height:100px;font-size:34px;border-radius:10px}
.av.t0{background:var(--brand-t);color:var(--brand-ink)}
.av.t1{background:var(--ok-bg);color:var(--ok)}
.av.t2{background:var(--err-bg);color:var(--err)}
.av.t3{background:var(--warn-bg);color:var(--warn)}
.av.t4{background:var(--info-bg);color:var(--info)}
.av.t5{background:var(--neu-bg);color:var(--neu)}
.who{display:flex;align-items:center;gap:12px;min-width:0}
.who>div{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.who a,.who b{font-weight:600;color:var(--head);text-decoration:none}
.who a:hover{color:var(--brand-ink)}
.who small{color:var(--muted);font-size:13px}

/* tables */
.tbl-wrap{overflow-x:auto;background:var(--paper);border-radius:10px;box-shadow:var(--shadow-md)}
.sec .tbl-wrap,.state .tbl-wrap,.dialog .tbl-wrap{box-shadow:none;border:1px solid var(--rule);border-radius:6px}
.table{font-size:14.5px;border-collapse:collapse}
.table th{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--head);padding:14px 16px;border-bottom:1px solid var(--rule);white-space:nowrap;background:var(--paper)}
.table td{padding:12px 16px;vertical-align:middle;border-bottom:1px solid var(--rule-soft);color:var(--muted)}
.table td b,.table td .strong{color:var(--head)}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--color-neutral-100)}
.table td small{display:block;color:var(--faint)}
.table .num{text-align:right}
.table tr.sel td{background:var(--brand-t)}
.table tr.adj td{background:var(--warn-a07)}
.table tr.dim td{color:var(--faint)}
.table tfoot td{font-weight:700;color:var(--head);border-top:1px solid var(--rule);background:var(--color-neutral-100)}
.table tr.grp td{background:var(--color-neutral-100);font-weight:600;color:var(--head);font-size:13.5px}
.row-acts{display:flex;gap:0;justify-content:flex-end}
.tbl-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.pager{display:flex;gap:4px}
.pager span{min-width:34px;height:34px;display:grid;place-items:center;border-radius:6px;background:var(--color-neutral-200);color:var(--ink);font-size:13.5px}
.pager span.on{background:var(--brand-solid);color:var(--on-brand);box-shadow:var(--brand-sh)}

/* filters */
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.toolbar .search{max-width:320px;min-width:220px}
.toolbar .search .lucide{left:12px;top:10px;color:var(--faint)}
.toolbar .search .input{padding-left:38px;border:1px solid var(--color-neutral-400);background:var(--paper);font-size:14.5px}
.toolbar .search .input:focus{border-color:var(--brand);box-shadow:var(--brand-ring)}
.toolbar .input,.toolbar select.input{width:auto;min-width:140px}
.input{border-radius:6px;background:var(--paper);border:1px solid var(--color-neutral-400);min-height:38px;padding:7px 14px;font-family:var(--font-body);font-size:14.5px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.input::placeholder{color:var(--faint)}
.input:hover{border-color:var(--color-neutral-500)}
.input:focus,.input:focus-visible{border:2px solid var(--brand);padding:6px 13px;box-shadow:var(--brand-ring);outline:none}
select.input{appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%236D6982' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13.5px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:2px 6px 2px 10px;border-radius:4px;background:var(--color-neutral-200);color:var(--ink)}
.chip .lucide{width:14px;height:14px;cursor:pointer;color:var(--muted)}
.bulk{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:6px;background:var(--brand-t);color:var(--brand-ink);font-size:14px;flex-wrap:wrap}
.bulk b{margin-right:8px;color:var(--brand-ink)}
.bulk .btn{background:var(--paper);color:var(--brand-ink);min-height:30px;padding:4px 12px;font-size:13px;box-shadow:var(--shadow-sm)}
.bulk .btn:hover{background:var(--brand-solid);color:var(--on-brand)}
.seg{border-radius:6px;border:1px solid var(--color-neutral-400);overflow:hidden;background:var(--paper)}
.seg-opt{font-size:14px;padding:7px 14px;color:var(--ink)}
.seg-opt+.seg-opt{border-left:1px solid var(--color-neutral-400)}
.seg-opt:has(input:checked){background:var(--brand-solid);color:var(--on-brand)}

/* forms */
.form{display:flex;flex-direction:column;gap:18px;max-width:820px;background:var(--paper);border-radius:10px;box-shadow:var(--shadow-md);padding:24px}
.sec .form,.state .form,.stage .form{background:none;box-shadow:none;padding:0}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.fgrid .wide{grid-column:1/-1}
.field{display:flex;flex-direction:column;min-width:0}
.field>label{font-weight:400;color:var(--ink);font-size:13.5px;margin-bottom:5px}
.field>label em{font-style:normal;color:var(--err);margin-left:2px}
.field>label i{font-style:normal;color:var(--faint);margin-left:4px}
.hint{font-size:13px;color:var(--muted);margin-top:5px;display:flex;gap:6px;align-items:flex-start;text-wrap:pretty}
.hint .lucide{width:15px;height:15px;margin-top:1px}
.hint.warn{color:var(--warn-deep)}
.hint.warn .lucide{color:var(--warn)}
.hint.err{color:var(--err)}
.hint.ok{color:var(--ok)}
.input.is-err{border:2px solid var(--err);padding:6px 13px}
.input.is-warn{border:2px solid var(--warn-base);padding:6px 13px}
.fs{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:18px}
.fs-h{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--rule-soft)}
.fs-h h3{font-size:16.5px;margin:0;font-weight:600}
.fs-h .n{width:32px;height:32px;border-radius:6px;display:grid;place-items:center;background:var(--brand-t);color:var(--brand-ink);font-weight:700;font-size:13px}
.fs-h .muted{margin-left:auto;font-size:13px}
.tog{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink);cursor:pointer;user-select:none}
.tog .sw{width:38px;height:22px;border-radius:999px;background:var(--color-neutral-300);position:relative;flex:none;transition:background .2s;box-shadow:inset 0 1px 3px var(--ink-a12)}
.tog .sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--paper);box-shadow:0 1px 3px var(--ink-a25);transition:left .2s}
.tog.on .sw{background:var(--brand);box-shadow:var(--brand-sh)}
.tog.on .sw::after{left:19px}
.tog.dis{opacity:.45;cursor:not-allowed}
.check{display:inline-flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--ink);cursor:pointer;user-select:none;line-height:1.45}
.check .box{width:18px;height:18px;border:1.5px solid var(--color-neutral-500);border-radius:4px;flex:none;margin-top:1px;position:relative;background:var(--paper)}
.check.on .box{background:var(--brand);border-color:var(--brand);box-shadow:var(--brand-sh)}
.check.on .box::after,.check.locked .box::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg)}
.check.locked .box{background:var(--color-accent-300);border-color:var(--color-accent-300)}
.check.dis{opacity:.4;cursor:not-allowed}
.radios{display:flex;flex-direction:column;gap:10px}
.optcard{display:flex;gap:12px;padding:14px 16px;border:1px solid var(--color-neutral-400);border-radius:6px;cursor:pointer;align-items:flex-start;background:var(--paper)}
.optcard.on{border:2px solid var(--brand);padding:13px 15px}
.radio .dot{border-color:var(--color-neutral-500)}
.radio input:checked+.dot{border-color:var(--brand);background:var(--brand);box-shadow:inset 0 0 0 4px var(--paper)}
.drop{border:2px dashed var(--color-neutral-400);border-radius:10px;padding:44px 28px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;background:var(--paper)}
.drop>.lucide{width:48px;height:48px;padding:12px;border-radius:6px;background:var(--color-neutral-200);color:var(--ink)}
.form-foot{display:flex;gap:12px;align-items:center;padding-top:18px;border-top:1px solid var(--rule-soft);flex-wrap:wrap}
.form-foot .sp{flex:1}
.consent-box{max-height:180px;overflow-y:auto;border:1px solid var(--rule);border-radius:6px;background:var(--color-neutral-100);padding:16px 18px;font-size:14px;line-height:1.65;color:var(--ink)}
.consent-box p{margin:0 0 10px}
.readonly-v{font-size:14.5px;padding:8px 14px;border-radius:6px;background:var(--color-neutral-200);color:var(--ink)}

/* setting with recommendation */
.setting{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;padding:20px 0;border-bottom:1px solid var(--rule-soft)}
.setting:last-of-type{border-bottom:0}
.setting h4{font-size:15.5px;margin:0 0 4px;font-weight:600}
.setting p{margin:0;font-size:14px;color:var(--muted);max-width:56ch}
.setting .ctl{display:flex;flex-direction:column;gap:10px}
.range{position:relative;height:30px;margin:4px 0 0}
.range .track{position:absolute;left:0;right:0;top:12px;height:6px;border-radius:999px;background:var(--brand-t2)}
.range .fill{position:absolute;left:0;top:12px;height:6px;border-radius:999px;background:var(--brand)}
.range .thumb{position:absolute;top:5px;width:20px;height:20px;border-radius:50%;background:var(--paper);border:4px solid var(--brand);transform:translateX(-50%);box-shadow:0 2px 6px var(--ink-a20)}
.range .rec{position:absolute;top:0;height:30px;border-left:2px dashed var(--ok)}
.range-scale{display:flex;justify-content:space-between;font-size:12.5px;color:var(--faint)}
.range-val{display:flex;align-items:center;gap:10px}
.range-val b{font-size:22px;font-weight:700}
.cost{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cost>div{padding:10px 12px;font-size:13px;color:var(--muted);background:var(--color-neutral-100);border-radius:6px}
.cost b{display:block;font-size:12.5px;margin-bottom:2px}
.inherit{font-size:13px;display:inline-flex;gap:6px;align-items:center;color:var(--muted)}
.inherit .lucide{width:15px;height:15px;color:var(--brand-ink)}

/* alerts (callouts) */
.callout{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:6px;background:var(--color-neutral-200)}
.callout>.lucide{width:34px;height:34px;padding:8px;border-radius:6px;background:var(--paper);color:var(--ink);flex:none;box-shadow:var(--shadow-sm)}
.callout h4{font-size:15px;margin:0 0 3px;line-height:1.4;font-weight:600}
.callout p{margin:0;font-size:14px;max-width:84ch;text-wrap:pretty}
.callout p+p{margin-top:6px}
.callout .actions{margin-top:12px}
.callout.acc{background:var(--brand-t)} .callout.acc h4{color:var(--brand-ink)} .callout.acc>.lucide{background:var(--brand-solid);color:var(--on-brand);box-shadow:var(--brand-sh)}
.callout.warn{background:var(--warn-bg)} .callout.warn h4{color:var(--warn-deep)} .callout.warn>.lucide{background:var(--warn-base);color:var(--on-brand)}
.callout.ok{background:var(--ok-bg)} .callout.ok h4{color:var(--ok-deeper)} .callout.ok>.lucide{background:var(--ok-base);color:var(--on-brand)}
.callout.solid{background:var(--brand-solid);color:var(--on-brand);box-shadow:var(--brand-sh)} .callout.solid h4,.callout.solid b{color:var(--on-brand)} .callout.solid p{color:var(--on-brand-a88)} .callout.solid>.lucide{background:var(--on-brand-a20);color:var(--on-brand);box-shadow:none} .callout.solid a{color:var(--on-brand)}
.callout.solid .btn-secondary{background:color-mix(in srgb,#000 26%,transparent);color:var(--on-brand);border:0}
.callout.solid .btn-secondary:hover{background:color-mix(in srgb,#000 38%,transparent);color:var(--on-brand)}
.callout.plain{background:var(--paper);border:1px solid var(--rule)} .callout.plain>.lucide{background:var(--color-neutral-200);box-shadow:none}

/* ranked list, feed, timeline */
.alerts{display:flex;flex-direction:column}
.alert{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--rule-soft)}
.alert:last-child{border-bottom:0}
.alert .rank{width:38px;height:38px;border-radius:6px;display:grid;place-items:center;font-weight:600;font-size:13px;color:var(--warn);background:var(--warn-bg)}
.alert h4{font-size:15px;margin:0 0 1px;font-weight:600;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.alert p{margin:0;font-size:13.5px;color:var(--muted)}
.alert.crit .rank{background:var(--err-bg);color:var(--err)}
.feed{display:flex;flex-direction:column}
.feed-i{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rule-soft);font-size:14px}
.feed-i:last-child{border-bottom:0}
.feed-i time{color:var(--faint);font-size:13px}
.feed-i.new{background:linear-gradient(90deg,var(--brand-t),transparent 70%);margin:0 -10px;padding:10px;border-radius:6px}
.live{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--ok);background:var(--ok-bg);padding:2px 10px;border-radius:4px}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok-base);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}
.timeline{display:flex;flex-direction:column;position:relative;padding-left:4px}
.tl{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:14px;padding:0 0 18px;font-size:14px;position:relative}
.tl::before{content:"";grid-column:1;grid-row:1;width:12px;height:12px;border-radius:50%;background:var(--brand);margin-top:4px;box-shadow:0 0 0 4px var(--brand-t2)}
.tl::after{content:"";position:absolute;left:5px;top:22px;bottom:0;border-left:1px dashed var(--rule)}
.tl:last-child::after{display:none}
.tl>time{grid-column:3;grid-row:1;color:var(--faint);font-size:12.5px;white-space:nowrap}
.tl>div{grid-column:2;grid-row:1}
.tl small{display:block;color:var(--muted);font-size:13.5px}

/* key / value */
.kv{display:grid;grid-template-columns:minmax(90px,190px) minmax(0,1fr);margin:0;row-gap:0}
.kv dt,.kv dd{padding:8px 0;margin:0;font-size:14.5px}
.kv dt{color:var(--muted)}
.kv dd{color:var(--head);font-weight:500}
.kv dd small{color:var(--faint);margin-left:6px;font-weight:400}

/* stepper */
.steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;padding:18px 22px;border-radius:10px;background:var(--paper);box-shadow:var(--shadow-md);align-items:center}
.step{display:flex;gap:12px;align-items:center;font-size:15px;font-weight:600;color:var(--head);position:relative}
.step:not(:last-child)::after{content:"";flex:1;height:0;border-top:1px dashed var(--color-neutral-400);margin:0 18px}
.step .n{width:38px;height:38px;border-radius:6px;display:grid;place-items:center;font-size:14px;font-weight:600;background:var(--color-neutral-200);color:var(--muted);flex:none}
.step small{display:block;color:var(--muted);font-size:13px;font-weight:400}
.step.done .n{background:var(--brand-t);color:var(--brand-ink)}
.step.on .n{background:var(--brand-solid);color:var(--on-brand);box-shadow:var(--brand-sh)}

/* bars & charts */
.bar{height:8px;border-radius:999px;background:var(--brand-t2);display:flex;overflow:hidden}
.bar>span{background:var(--brand);height:100%}
.bar>span.acc{background:var(--err)}
.bar>span.warn{background:var(--warn-base)}
.bar.lg{height:12px}
.chart{display:flex;align-items:flex-end;gap:16px;height:190px;padding-top:8px}
.chart>div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px;min-width:0}
.chart>div>i{display:block;width:100%;max-width:44px;border-radius:6px;background:var(--brand-t2)}
.chart>div>i.acc{background:var(--brand);box-shadow:var(--brand-sh)}
.chart>div>i.soft{background:var(--color-neutral-200)}
.chart>div>b{font-size:12.5px;font-weight:500;color:var(--muted)}
.chart-x{display:flex;gap:16px}
.chart-x span{flex:1;font-size:13px;color:var(--faint);text-align:center;min-width:0}
.legend{display:flex;gap:16px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.legend span{display:inline-flex;gap:6px;align-items:center}
.legend i{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--brand-t2)}

/* coverage matrix */
.matrix{border-collapse:separate;border-spacing:4px;font-size:14px}
.matrix th{font-size:13px;font-weight:600;text-align:left;padding:6px 8px;color:var(--head);vertical-align:bottom;white-space:nowrap}
.matrix th.dv{writing-mode:vertical-rl;transform:rotate(180deg);height:150px;padding:8px 6px}
.matrix td{padding:0;text-align:center}
.matrix td.nm{padding:4px 16px 4px 0;text-align:left;white-space:nowrap}
.mc{width:36px;height:32px;display:grid;place-items:center;border-radius:6px}
.mc.y{background:var(--brand)}
.mc.g{background:var(--err-bg)}
.mc.g::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--err)}
.mc.x{background:var(--color-neutral-200)}
.mc.o{background:var(--warn-base)}
.mkey{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.mkey span{display:inline-flex;gap:8px;align-items:center}
.mkey .mc{width:20px;height:18px;border-radius:4px}
.mkey .mc.g::after{width:5px;height:5px}

/* states, dialogs, misc */
.states{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}
.state{display:flex;flex-direction:column;gap:10px;min-width:0;padding:16px;border-radius:10px;background:var(--paper);border:1px dashed var(--color-neutral-400)}
.state-l{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.stage{background:var(--color-neutral-200);padding:24px;border-radius:8px;display:grid;place-items:center}
.stage .dialog{width:100%;max-width:470px;background:var(--paper);border-radius:10px;padding:24px;box-shadow:var(--shadow-lg)}
.dialog-title{font-family:var(--font-heading);font-weight:700;font-size:19px;color:var(--head)}
.dialog.wide{max-width:640px}
.dialog-body{opacity:1;color:var(--muted);font-size:14.5px}
.dialog-body p{margin:0 0 8px}
.dialog-body ul{margin:6px 0 8px;padding-left:18px}
.dialog-actions{justify-content:flex-start;gap:12px}
.empty{border-radius:10px;padding:32px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;background:var(--paper);box-shadow:var(--shadow-md)}
.state .empty,.sec .empty{box-shadow:none;border:1px solid var(--rule)}
.empty>.lucide{width:52px;height:52px;padding:13px;border-radius:6px;background:var(--brand-t);color:var(--brand-ink)}
.empty h4{font-size:18px;margin:0}
.empty p{margin:0;color:var(--muted);max-width:60ch}
.paper{background:var(--paper);border-radius:6px;box-shadow:var(--shadow-lg);padding:36px 40px;color:var(--hairline)}
.paper b{color:var(--hairline)}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tabs a{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:6px;font-weight:500;font-size:14.5px;color:var(--ink)}
.tabs a:hover{background:var(--brand-t);color:var(--brand-ink)}
.tabs a.on{background:var(--brand-solid);color:var(--on-brand);box-shadow:var(--brand-sh)}
.qr{width:300px;height:300px;background:var(--paper);image-rendering:pixelated;display:block;padding:14px;border-radius:10px;box-shadow:var(--shadow-lg)}
.qr.sm{width:112px;height:112px;padding:6px;border-radius:6px;box-shadow:none;border:1px solid var(--rule)}
.pin{font-family:var(--font-heading);font-size:52px;font-weight:800;letter-spacing:.06em;line-height:1;color:var(--head)}
.digits{display:flex;gap:10px}
.digits span{width:50px;height:54px;border-radius:6px;border:1px solid var(--color-neutral-400);display:grid;place-items:center;font-size:24px;font-weight:600;color:var(--head);background:var(--paper)}
.digits span.empty-d:nth-child(4){border:2px solid var(--brand);box-shadow:var(--brand-ring)}
.tree{display:flex;flex-direction:column;border-radius:10px}
.sec .tree,.state 
.tree-i{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:6px;font-size:14.5px;color:var(--ink)}
.tree-i:hover{background:var(--color-neutral-100)}
.tree-i>.lucide{color:var(--muted)}
.tree-i.l0{padding-left:12px}
.l1{padding-left:36px}.tree-i.l2{padding-left:60px}
.tree-i .sp{flex:1}
.tree-i.on{background:var(--brand-t)} .tree-i.on>.lucide,.tree-i.on b{color:var(--brand-ink)}
.diff .from{text-decoration:line-through;color:var(--faint)}
.diff .to{font-weight:600;color:var(--brand-ink)}
.mini{border-radius:8px;display:grid;grid-template-columns:72px 1fr;height:196px;background:var(--color-bg);overflow:hidden;font-size:9px;border:1px solid var(--rule)}
.mini .ms{background:var(--paper);display:flex;flex-direction:column;padding-top:8px;box-shadow:2px 0 6px var(--ink-a06)}
.mini .ms i{display:block;height:9px;margin:5px 8px;border-radius:3px;background:var(--color-neutral-200)}
.mini .ms i.on{background:var(--grad-brand,var(--brand))}
.mini .mh{height:26px;margin:6px 8px 0;border-radius:4px;display:flex;align-items:center;padding:0 10px;font-weight:700;font-size:10px;background:var(--paper);box-shadow:var(--shadow-sm);color:var(--head)}
.mini .mb{padding:10px;display:flex;flex-direction:column;gap:7px}
.mini .mb i{display:block;height:9px;border-radius:3px;background:var(--color-neutral-300)}
.swatches{display:flex;border-radius:6px;overflow:hidden;border:1px solid var(--rule)}
.swatches>div{flex:1;padding:10px;font-size:12px;min-height:70px;display:flex;flex-direction:column;justify-content:flex-end}
.swatches>div b{color:inherit}
.perm th,.perm td{text-align:center}
.perm th:first-child,.perm td:first-child{text-align:left}
.perm td{padding:8px 12px}
.perm .na{color:var(--color-neutral-400)}
.perm .na::before{content:"-"}
.perm tr.grp td{text-align:left}
.perm .check{justify-content:center}
.navprev{display:flex;flex-direction:column;border-radius:8px;background:var(--paper);border:1px solid var(--rule);font-size:14px;padding:8px;color:var(--ink)}
.navprev div{padding:8px 12px;border-radius:6px;display:flex;gap:10px;align-items:center}
.navprev div:first-child{background:var(--brand-solid);color:var(--on-brand);box-shadow:var(--brand-sh)}

/* auth */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.auth-r{order:-1;position:relative;overflow:hidden;margin:24px;border-radius:14px;padding:48px 56px;display:flex;flex-direction:column;justify-content:space-between;color:var(--head);background:radial-gradient(500px 360px at 80% 20%,color-mix(in srgb, var(--brand) 22%, transparent),transparent 65%),radial-gradient(400px 300px at 15% 85%,var(--accent2-t),transparent 65%),var(--color-accent-100)}
.auth-r::after{content:"";position:absolute;right:48px;bottom:48px;width:260px;height:260px;border-radius:24px;background:var(--paper);box-shadow:var(--shadow-lg);transform:rotate(-8deg);opacity:.75}
.auth-r .lbl{color:var(--brand-ink)!important;font-weight:600}
.auth-r h2{font-size:48px;line-height:1.1;letter-spacing:-.03em;max-width:12ch;margin:0;font-weight:800;position:relative;z-index:1}
.auth-r p{max-width:44ch;font-size:16px;margin:0;color:var(--muted);position:relative;z-index:1}
.auth-l{display:flex;flex-direction:column;padding:40px 56px;gap:32px;background:var(--paper)}
.auth-l>.logo-word{display:flex;align-items:center;gap:10px;font-size:18px}
.auth-l>.logo-word span{display:none}
.auth-form{max-width:420px;width:100%;display:flex;flex-direction:column;gap:18px;margin:auto 0}
.auth-form h1{font-size:26px;margin:0}
.auth-form .btn-block{justify-content:center;min-height:42px;font-size:15px;margin-top:4px}
.auth-foot{font-size:13px;color:var(--faint);display:flex;flex-wrap:wrap;gap:4px 16px}
.powered a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* what Face Attendance keeps on a device, under its health */
.store{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--rule-soft);min-width:0}
.store-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14.5px;color:var(--muted)}
.store-h b{color:var(--head);font-weight:600;white-space:nowrap}
.store-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.store-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-width:0}
.store-list li span{color:var(--muted);min-width:0;overflow-wrap:anywhere}
.store-list li b{color:var(--head);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.store-later{margin:0;font-size:13.5px}
@media (max-width:760px){.store{border-top:0;padding-top:4px}}

/* licence */
.top-lic{gap:6px}
.lic-lead{margin:0;font-size:16px;color:var(--ink)}
.lic-lead b{color:var(--head)}
.lic-id{display:flex;flex-direction:column;gap:6px;min-width:0}
.lic-id>.muted{font-size:14.5px}
.lic-code{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lic-code code{font-size:17px;letter-spacing:.05em;white-space:nowrap;color:var(--head)}
.lic-pick{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.lic-pick label{position:relative;overflow:hidden;cursor:pointer}
.lic-pick label:focus-within{outline:2px solid var(--brand-ink);outline-offset:2px}
.lic-pick input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.lic-text{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.lic-activate{gap:20px}
.lic-activate .lic-id{padding:14px 16px;border-radius:8px;background:var(--color-neutral-100)}
.lic-history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.lic-history li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--rule-soft);font-size:14.5px;min-width:0;overflow-wrap:anywhere}
.lic-history li:last-child{border-bottom:0}
.lic-history li>div:first-child{display:flex;gap:4px 10px;flex-wrap:wrap;align-items:baseline;color:var(--head)}
.lic-history .muted{font-size:13.5px}
@media (max-width:760px){.top-lic span{display:none}}
.powered a:hover{color:var(--brand-ink)}
body[data-layout=auth] .main{padding:0;max-width:none;display:block}
body[data-layout=bare] .main{max-width:1280px;margin:0 auto;padding:32px 24px 80px}
body[data-layout=bare] .logo-word{display:flex;align-items:center;gap:10px}
body[data-layout=bare] .logo-word::before{content:"";width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--brand-l),var(--brand-d));box-shadow:var(--brand-sh)}
body[data-layout=bare] .logo-word span{display:none}
.auth-states{padding:24px 56px 80px;background:var(--color-bg)}
.err-region{display:flex;gap:10px;padding:12px 14px;border-radius:6px;background:var(--err-bg);font-size:14px;color:var(--err-deep)}
.err-region b{color:var(--err-deep)}
.err-region .lucide{color:var(--err)}
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.meter i{height:6px;border-radius:999px;background:var(--color-neutral-200)}
.meter i.on{background:var(--ok)}
.rules{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px;font-size:13.5px}
.rules li{display:flex;gap:8px;align-items:center;color:var(--ink)}
.rules li.ok .lucide{color:var(--ok)}
.rules li.no{color:var(--faint)}

/* index */
.index-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.index-g a{display:flex;gap:12px;align-items:center;padding:11px 14px;border-radius:6px;border:1px solid var(--rule);color:var(--ink);font-size:14.5px;transition:border-color .15s,box-shadow .15s}
.index-g a:hover{border-color:var(--brand);box-shadow:0 2px 6px color-mix(in srgb, var(--brand) 25%, transparent);color:var(--brand-ink)}
.index-g a .c{font-size:12px;font-weight:600;color:var(--brand-ink);width:60px;flex:none}
.index-g a .pill{margin-left:auto}

@media (min-width:1201px){.c4.wide-first{grid-template-columns:1.5fr repeat(3,minmax(0,1fr))}.c5.wide-first{grid-template-columns:1.3fr repeat(4,minmax(0,1fr))}}
@media (max-width:1200px){
  .split{grid-template-columns:minmax(0,1fr)}
  .c5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .setting{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:1101px){.menu-btn,.side-close,.side-scrim{display:none}}
/* tablet: navigation becomes an off-canvas drawer */
@media (max-width:1100px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;bottom:0;width:280px;max-width:86vw;transform:translateX(-105%);transition:transform .25s ease;z-index:30;box-shadow:var(--shadow-lg)}
  .nav-open .side{transform:none}
  .side-close{position:absolute;right:10px;top:20px}
  .side-scrim{position:fixed;inset:0;background:var(--scrim);z-index:25;opacity:0;pointer-events:none;transition:opacity .25s}
  .nav-open .side-scrim{opacity:1;pointer-events:auto}
  /* The class sits on body in the static template and on the layout in the app; either locks the page behind the drawer. */
  body.nav-open,body:has(.nav-open){overflow:hidden}
  .menu-btn{flex:none;color:var(--ink)}
  .frame{padding:0 16px}
  .top{padding:0 10px 0 6px;gap:6px}
  .search kbd{display:none}
  .acct div{display:none}
  .c4,.c3,.c5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .auth{grid-template-columns:minmax(0,1fr)}
  .auth-r{display:none}
  .stat.xl{font-size:52px}
  .main{gap:20px}
}
/* mobile */
@media (max-width:760px){
  body{font-size:14px}
  .frame{padding:0 10px}
  .top{top:8px;margin-top:8px;height:56px}
  .top-alert span{display:none}
  .top-alert{padding:0 8px}
  .acct>.lucide{display:none}
  .banner{flex-wrap:wrap;gap:8px;padding:10px 12px;font-size:13px}
  .banner a{margin-left:0}
  .main{padding:16px 0 64px;gap:16px}
  .ph{gap:12px}
  .ph-t{min-width:0;flex-basis:100%;flex-wrap:wrap}
  .ph h1{font-size:22px}
  .ph .sub{font-size:13.5px}
  .ph .actions{width:100%}
  .ph .actions>.btn,.ph .actions>select{flex:1 1 auto}
  .av.xl{width:64px;height:64px;font-size:22px}
  .sec{padding:16px;gap:14px;border-radius:8px}
  .sec-h h2{font-size:16px}
  .cells{gap:12px}
  .cells>*{padding:14px 16px}
  .c2,.c3{grid-template-columns:minmax(0,1fr)}
  .c4,.c5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{font-size:26px}.stat.md{font-size:20px}.stat.xl{font-size:44px}
  .split,.split.even,.stack{gap:16px}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .form{padding:16px}
  .form-foot .btn{flex:1 1 auto}
  .toolbar{gap:8px}
  .toolbar .search{min-width:0;max-width:none;flex:1 1 100%}
  .toolbar>select.input,.toolbar>.input{flex:1 1 calc(50% - 4px);min-width:0}
  .tbl-wrap>.table{min-width:680px}
  table.perm{min-width:760px}
  .tbl-foot{flex-direction:column;align-items:flex-start}
  .bulk{overflow-x:auto;flex-wrap:nowrap}
  .bulk>*{flex:none}
  .kv{grid-template-columns:minmax(0,1fr)}
  .kv dt{padding-bottom:0;font-size:12.5px}
  .kv dd{padding-top:2px;border-bottom:1px solid var(--rule-soft)}
  .setting{padding:16px 0;gap:12px}
  .cost{grid-template-columns:minmax(0,1fr)}
  .alert{grid-template-columns:34px minmax(0,1fr)}
  .alert>.btn,.alert>a{grid-column:2;justify-self:start}
  .alert .rank{width:34px;height:34px}
  .feed-i{grid-template-columns:50px minmax(0,1fr);row-gap:4px}
  .feed-i>:nth-child(3){grid-column:2}
  .tl{grid-template-columns:16px minmax(0,1fr)}
  .tl>time{grid-column:2;grid-row:2}
  .states{grid-template-columns:minmax(0,1fr)}
  .state{padding:12px}
  .stage{padding:12px}
  .stage .dialog{padding:18px}
  .dialog-actions{flex-wrap:wrap}
  .dialog-actions .btn{flex:1 1 auto}
  .tabs{flex-wrap:nowrap;overflow-x:auto}
  .tabs a{white-space:nowrap}
  .steps{grid-auto-flow:row;gap:12px;padding:14px}
  .step::after{display:none}
  .qr{width:min(280px,100%);height:auto;aspect-ratio:1}
  .pin{font-size:38px}
  .digits{gap:6px}
  .digits span{width:42px;height:48px;font-size:20px}
  .paper{padding:18px}
  .paper [style*="grid-template-columns"]{grid-template-columns:24px minmax(0,1fr) auto!important;font-size:15px!important}
  .paper [style*="grid-template-columns"]>:last-child{display:none}
  .matrix th.dv{height:110px}
  .mc{width:30px;height:28px}
  .empty{padding:20px}
  .auth-l{padding:24px 20px;gap:24px}
  .auth-form h1{font-size:24px}
  .auth-states{padding:16px 20px 60px}
  .index-g{grid-template-columns:minmax(0,1fr)}
  .chart{gap:8px;height:150px}.chart-x{gap:8px}
  .swatches{flex-wrap:wrap}.swatches>div{flex:1 1 33%}
  body[data-layout=bare] .main{padding:20px 12px 60px}
}
@media (max-width:420px){
  .c4,.c5{grid-template-columns:minmax(0,1fr)}
  .toolbar>select.input,.toolbar>.input{flex-basis:100%}
  .acct{padding:2px}
}
@media print{
  .side,.top,.banner{display:none}
  .app{display:block}
  .frame{padding:0}
  body{background:var(--paper)}
}

/* ------------------------------------------------------------------ *
 * Responsive corrections.                                            *
 * 1. The top bar could not shrink: the search had flex-basis 100%,   *
 *    so the row's min-content exceeded a phone and pushed 48 pages   *
 *    into horizontal scroll. It now shrinks instead.                 *
 * 2. Dialogs kept a fixed max-width narrower than the phone.         *
 * 3. Pages with data-layout="bare" sit outside .frame, so they never *
 *    picked up its side padding.                                     *
 * ------------------------------------------------------------------ */
@media (max-width:760px){
  .top{gap:6px;flex-wrap:nowrap}
  .top:has(.search) .top-sp{display:none}
  .search{flex:1 1 auto;min-width:0;max-width:none}
  .search .input{min-width:0;width:100%}
  /* place-items:center sizes a grid child to max-content, so a dialog holding
     a 680px table ignored its own max-width. Stretch it and let the table
     scroll inside its wrapper instead. */
  .stage{padding:8px;place-items:stretch;justify-items:stretch}
  .stage>*{min-width:0;max-width:100%;width:100%}
  .dialog,.dialog.wide,.stage .dialog,.stage .dialog.wide{max-width:100%;min-width:0}
  .ph-t{min-width:0}
  .index-g{grid-template-columns:minmax(0,1fr)}
  /* A long button label with white-space:nowrap cannot shrink, so on a phone
     it forced its flex parent wider than the screen. Let labels wrap and let
     actions stack full width, which is the conventional mobile treatment. */
  .btn{white-space:normal}
  .actions>.btn{flex:1 1 100%}
}

/* Flex and grid children default to min-width:auto, so they refuse to shrink
   below their content's minimum and push the page sideways. These are the
   containers where that actually bit. */
.callout>*,.empty>*,.stack>*,.state>*,.tl>*{min-width:0}
/* In a narrow sidebar column the value cell can be ~100px, and a nowrap
   badge inside it overflowed the page. Let badges wrap in a kv list. */
.kv dd{min-width:0}
.kv dd .badge{white-space:normal}

p,h1,h2,h3,h4,h5,li,dd,dt,td,th{overflow-wrap:break-word}
@media (max-width:420px){
  .top{gap:4px;padding:0 8px}
}