/* 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 .1875rem .625rem -.125rem rgba(124,106,230,.45);
  --brand-sh:0 .1875rem .625rem -.125rem color-mix(in srgb, var(--brand) 45%, transparent);
  --brand-ring:0 .125rem .375rem rgba(124,106,230,.3);
  --brand-ring:0 .125rem .375rem 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:.25rem; --radius-md:.375rem; --radius-lg:.625rem;
  --shadow-sm:0 .0625rem .25rem rgba(47,43,61,.08);
  --shadow-md:0 .1875rem .75rem rgba(47,43,61,.10);
  --shadow-lg:0 .5rem 1.75rem rgba(47,43,61,.16);
  --shadow-side:0 0 1rem 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 .0625rem .25rem rgba(0,0,0,.4);
  --shadow-md:0 .1875rem .75rem rgba(0,0,0,.48);
  --shadow-lg:0 .5rem 1.75rem rgba(0,0,0,.56);
  --shadow-side:0 0 1rem 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 .0625rem .25rem rgba(0,0,0,.4);
  --shadow-md:0 .1875rem .75rem rgba(0,0,0,.48);
  --shadow-lg:0 .5rem 1.75rem rgba(0,0,0,.56);
  --shadow-side:0 0 1rem 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:2.625rem;height:2.625rem;border-radius:.875rem;display:grid;place-items:center;color:var(--on-brand);box-shadow:var(--shadow-md);margin-bottom:.375rem;flex:none}
.tile-lg{width:2.75rem;height:2.75rem}
.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}
}

/* One rule makes the panel fit a screen larger than full HD. Every size in these stylesheets is
   written in rem. Up to a screen 1920 pixels wide the rem is sixteen pixels, and the panel is laid
   out as it always was. On a larger screen the root grows with the screen: its width over 120,
   held back by its height over 60 so that a wide, low window is not blown up. The whole panel is
   then the full HD panel made larger, and fills the screen it used to sit in a corner of. Media
   queries stay in pixels: they ask about the screen, not about the panel. */
html{background:var(--color-bg);font-size:max(16px,min(calc(100vw / 120),calc(100vh / 60)))}
body{font-family:var(--font-body);font-size:.90625rem;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:.125rem solid var(--brand);outline-offset:.125rem;border-radius:.25rem}
.lucide{width:1.125rem;height:1.125rem;stroke-width:1.9;flex:none}
.muted{color:var(--muted)}
.strong{font-weight:600;color:var(--head)}
small{font-size:.78125rem}

/* shell */
.app{display:grid;grid-template-columns:16.25rem 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 .875rem;z-index:6}
.side::-webkit-scrollbar{width:0}
.side-logo{height:4.5rem;flex:none;padding:0 .5rem;display:flex;align-items:center;color:var(--head);text-decoration:none}
.side-logo:hover{color:var(--head)}
.logo-slot{max-width:12.5rem;max-height:2.75rem;display:flex;align-items:center;gap:.625rem}
.logo-mark{width:2.25rem;height:2.25rem;flex:none;display:block}
.logo-word{font-weight:800;font-size:1.0625rem;line-height:1.1;color:var(--head);letter-spacing:-.015em}
.logo-word span{display:block;font-size:.71875rem;font-weight:500;color:var(--muted);letter-spacing:0;margin-top:.125rem}
.side-nav{display:flex;flex-direction:column;gap:.125rem;padding-bottom:.75rem}
.side-group{font-size:.75rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:1.125rem .75rem .375rem;display:flex;align-items:center;gap:.625rem}
.side-group::after{content:"";flex:1;height:.0625rem;background:var(--rule-soft)}
.side-nav>a{display:flex;align-items:center;gap:.75rem;padding:.5625rem .875rem;border-radius:.375rem;font-size:.9375rem;font-weight:500;color:var(--ink);text-decoration:none;transition:background .15s}
.side-nav>a .lucide{width:1.25rem;height:1.25rem;color:var(--ink)}
.side-nav>a .chev{margin-left:auto;width:1rem;height:1rem;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:.0625rem;padding:.25rem 0 .375rem}
.side-sub a{display:flex;align-items:center;gap:.875rem;padding:.4375rem .875rem .4375rem 1.375rem;font-size:.90625rem;color:var(--ink);text-decoration:none;border-radius:.375rem}
.side-sub a::before{content:"";width:.4375rem;height:.4375rem;border-radius:50%;border:.09375rem solid var(--color-neutral-500);flex:none;margin-right:.375rem}
.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 .1875rem var(--brand-t2)}
.side-foot{margin:auto -.875rem 0;padding:.875rem 1.375rem;font-size:.75rem;color:var(--muted);display:flex;flex-direction:column;gap:.125rem;border-top:.0625rem solid var(--rule-soft)}
/* The page takes the width beside the navigation. Only on a screen far wider than it is high is
   it held, to 150rem, and then it stands in the middle of what is left. */
.frame{display:flex;flex-direction:column;min-width:0;padding:0 max(1.5rem,calc((100% - 150rem) / 2))}
.top{height:3.875rem;display:flex;align-items:center;gap:.75rem;padding:0 1.25rem;position:sticky;top:.75rem;z-index:5;background:var(--glass);backdrop-filter:blur(.5rem);-webkit-backdrop-filter:blur(.5rem);border-radius:.5rem;box-shadow:var(--shadow-md);margin:.75rem 0 0;order:-1}
.search{flex:1;max-width:35rem;position:relative}
.search .lucide{position:absolute;left:0;top:.625rem;color:var(--ink)}
.search .input{padding-left:1.875rem;padding-right:2.125rem;border:0;box-shadow:none;background:transparent;font-size:.9375rem}
.search .input:focus{box-shadow:none}
.search kbd{position:absolute;right:.375rem;top:.5625rem;font:inherit;font-size:.71875rem;padding:.0625rem .4375rem;border-radius:.25rem;border:.0625rem 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:.625rem;min-width:0;flex:0 1 auto}
.client-logo,.lic-logo{flex:none;display:block;object-fit:contain;border-radius:.5rem;background:#fff;box-shadow:0 0 0 .0625rem var(--rule)}
.client-logo{width:2.25rem;height:2.25rem}
.lic-logo{width:2.5rem;height:2.5rem}
.client-name{font-weight:700;font-size:.9375rem;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:.0625rem;height:.0625rem;margin:-.0625rem;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
.top-alert{white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem;height:2.375rem;padding:0 .625rem;border-radius:.375rem;color:var(--ink);font-weight:500;font-size:.875rem;position:relative}
.top-alert:hover{background:var(--color-neutral-200);color:var(--ink)}
.top-alert b{background:var(--err);color:var(--on-brand);padding:.0625rem .4375rem;border-radius:62.4375rem;font-size:.71875rem;font-weight:600}
.acct{display:flex;align-items:center;gap:.625rem;color:var(--ink);padding:.25rem .5rem .25rem .25rem;border-radius:.375rem}
.acct:hover{background:var(--color-neutral-200);color:var(--ink)}
.acct .av{border-radius:50%;box-shadow:0 0 0 .125rem var(--paper),0 0 0 .1875rem var(--ok)}
.acct div{display:flex;flex-direction:column;line-height:1.25}
.acct b{font-size:.84375rem}
.acct small{color:var(--muted);font-size:.75rem}
.banner{display:flex;align-items:center;gap:.75rem;margin:1rem 0 0;padding:.75rem 1rem;border-radius:.375rem;font-size:.875rem;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:.1875rem}
.banner.ink a{color:var(--on-brand)}
.banner .x{cursor:pointer;opacity:.6}
.main{padding:1.5rem 0 5rem;display:flex;flex-direction:column;gap:1.5rem;min-width:0;width:100%}

/* page header */
.ph{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.ph-t{flex:1;min-width:18.75rem}
.code{display:inline-flex;gap:.5rem;align-items:center;font-size:.75rem;font-weight:600;color:var(--muted)}
.code::before{content:"";width:.375rem;height:.375rem;border-radius:50%;background:var(--brand)}
.code span{background:var(--brand-t);color:var(--brand-ink);padding:.0625rem .5rem;border-radius:.25rem;font-size:.71875rem}
.ph h1{font-size:1.625rem;margin:.25rem 0 .25rem;line-height:1.25;text-wrap:balance}
.ph .sub{color:var(--muted);font-size:.90625rem;margin:0;max-width:84ch;text-wrap:pretty}
.actions{display:flex;gap:.5rem;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:2.375rem;padding:.5rem 1.125rem;border-radius:.375rem;font-family:var(--font-body);font-weight:500;font-size:.90625rem;justify-content:flex-start;gap:.5rem;text-decoration:none;transition:background .15s,box-shadow .15s,transform .1s;letter-spacing:.01em}
.btn:active{transform:translateY(.0625rem)}
.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 .1875rem .625rem -.125rem var(--err-sh)}
.btn-danger:hover{background:var(--err-mid);color:var(--on-brand)}
.btn-sm{min-height:1.875rem;padding:.25rem .75rem;font-size:.8125rem;border-radius:.25rem}
.btn .lucide{width:1rem;height:1rem}
.btn-icon{min-height:2rem;width:2rem;height:2rem;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:1.125rem;height:1.125rem}

/* cards */
.sec{display:flex;flex-direction:column;gap:1rem;min-width:0;background:var(--paper);border-radius:.625rem;box-shadow:var(--shadow-md);padding:1.375rem 1.5rem}
.sec .sec{box-shadow:none;border:.0625rem solid var(--rule);padding:1rem}
.sec-h{display:flex;align-items:center;gap:.875rem;justify-content:space-between;flex-wrap:wrap}
.sec-h h2{font-size:1.125rem;margin:0;font-weight:600;text-transform:none;letter-spacing:0}
.sec-h .muted{font-size:.84375rem}
.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:1.5rem;align-items:start}
.split.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.stack{display:flex;flex-direction:column;gap:1.5rem;min-width:0}
.cells{display:grid;gap:1.5rem}
.cells>*{background:var(--paper);border-radius:.625rem;box-shadow:var(--shadow-md);padding:1.25rem 1.375rem;min-width:0;display:flex;flex-direction:column;gap:.375rem;position:relative;overflow:hidden}
.sec .cells,.state .cells{gap:.75rem}
.sec .cells>*,.state .cells>*{box-shadow:none;border:.0625rem solid var(--rule);padding:.875rem 1rem}
.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(-.125rem);color:var(--muted)}
.main>.cells>*{border-bottom:.1875rem 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:.1875rem}
.lbl{font-size:.84375rem;font-weight:500;color:var(--muted)}
.stat{font-family:var(--font-heading);font-size:2.125rem;font-weight:700;color:var(--head);line-height:1.1;letter-spacing:-.02em}
.stat.xl{font-size:4rem;letter-spacing:-.03em}
.stat.md{font-size:1.5rem}
.stat.acc{color:var(--brand-ink)}
.delta{font-size:.84375rem;color:var(--muted)}
.delta b{color:var(--ok)}

/* labels */
.badge{display:inline-flex;align-items:center;gap:.3125rem;font-size:.8125rem;font-weight:500;line-height:1.35;padding:.125rem .5625rem;white-space:nowrap;border-radius:.25rem;border:0}
.badge .lucide{width:.875rem;height:.875rem}
.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:.75rem;font-weight:500;padding:.0625rem .5rem;border-radius:.25rem;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:2.25rem;height:2.25rem;display:inline-grid;place-items:center;font-size:.84375rem;font-weight:600;flex:none;border-radius:50%;letter-spacing:.01em}
.av.sm{width:1.875rem;height:1.875rem;font-size:.75rem}
.av.lg{width:4rem;height:4rem;font-size:1.375rem;border-radius:.625rem}
.av.xl{width:6.25rem;height:6.25rem;font-size:2.125rem;border-radius:.625rem}
.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:.75rem;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:.8125rem}

/* tables */
.tbl-wrap{overflow-x:auto;background:var(--paper);border-radius:.625rem;box-shadow:var(--shadow-md)}
.sec .tbl-wrap,.state .tbl-wrap,.dialog .tbl-wrap{box-shadow:none;border:.0625rem solid var(--rule);border-radius:.375rem}
.table{font-size:.90625rem;border-collapse:collapse}
.table th{font-size:.8125rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--head);padding:.875rem 1rem;border-bottom:.0625rem solid var(--rule);white-space:nowrap;background:var(--paper)}
.table td{padding:.75rem 1rem;vertical-align:middle;border-bottom:.0625rem 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:.0625rem 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:.84375rem}
.row-acts{display:flex;gap:0;justify-content:flex-end}
.tbl-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.84375rem;color:var(--muted)}
.pager{display:flex;gap:.25rem}
.pager span{min-width:2.125rem;height:2.125rem;display:grid;place-items:center;border-radius:.375rem;background:var(--color-neutral-200);color:var(--ink);font-size:.84375rem}
.pager span.on{background:var(--brand-solid);color:var(--on-brand);box-shadow:var(--brand-sh)}

/* filters */
.toolbar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.toolbar .search{max-width:20rem;min-width:13.75rem}
.toolbar .search .lucide{left:.75rem;top:.625rem;color:var(--faint)}
.toolbar .search .input{padding-left:2.375rem;border:.0625rem solid var(--color-neutral-400);background:var(--paper);font-size:.90625rem}
.toolbar .search .input:focus{border-color:var(--brand);box-shadow:var(--brand-ring)}
.toolbar .input,.toolbar select.input{width:auto;min-width:8.75rem}
.input{border-radius:.375rem;background:var(--paper);border:.0625rem solid var(--color-neutral-400);min-height:2.375rem;padding:.4375rem .875rem;font-family:var(--font-body);font-size:.90625rem;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:.125rem solid var(--brand);padding:.375rem .8125rem;box-shadow:var(--brand-ring);outline:none}
select.input{appearance:none;padding-right:2.25rem;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 .75rem center;background-repeat:no-repeat;background-size:1.125rem}
.chips{display:flex;flex-wrap:wrap;gap:.375rem;align-items:center;font-size:.84375rem}
.chip{display:inline-flex;align-items:center;gap:.375rem;font-size:.8125rem;font-weight:500;padding:.125rem .375rem .125rem .625rem;border-radius:.25rem;background:var(--color-neutral-200);color:var(--ink)}
.chip .lucide{width:.875rem;height:.875rem;cursor:pointer;color:var(--muted)}
.bulk{display:flex;align-items:center;gap:.5rem;padding:.625rem 1rem;border-radius:.375rem;background:var(--brand-t);color:var(--brand-ink);font-size:.875rem;flex-wrap:wrap}
.bulk b{margin-right:.5rem;color:var(--brand-ink)}
.bulk .btn{background:var(--paper);color:var(--brand-ink);min-height:1.875rem;padding:.25rem .75rem;font-size:.8125rem;box-shadow:var(--shadow-sm)}
.bulk .btn:hover{background:var(--brand-solid);color:var(--on-brand)}
.seg{border-radius:.375rem;border:.0625rem solid var(--color-neutral-400);overflow:hidden;background:var(--paper)}
.seg-opt{font-size:.875rem;padding:.4375rem .875rem;color:var(--ink)}
.seg-opt+.seg-opt{border-left:.0625rem 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:1.125rem;max-width:51.25rem;background:var(--paper);border-radius:.625rem;box-shadow:var(--shadow-md);padding:1.5rem}
.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:1.125rem 1.25rem}
.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:.84375rem;margin-bottom:.3125rem}
.field>label em{font-style:normal;color:var(--err);margin-left:.125rem}
.field>label i{font-style:normal;color:var(--faint);margin-left:.25rem}
.hint{font-size:.8125rem;color:var(--muted);margin-top:.3125rem;display:flex;gap:.375rem;align-items:flex-start;text-wrap:pretty}
.hint .lucide{width:.9375rem;height:.9375rem;margin-top:.0625rem}
.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:.125rem solid var(--err);padding:.375rem .8125rem}
.input.is-warn{border:.125rem solid var(--warn-base);padding:.375rem .8125rem}
.fs{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:1.125rem}
.fs-h{display:flex;align-items:center;gap:.75rem;padding-bottom:.625rem;border-bottom:.0625rem solid var(--rule-soft)}
.fs-h h3{font-size:1.03125rem;margin:0;font-weight:600}
.fs-h .n{width:2rem;height:2rem;border-radius:.375rem;display:grid;place-items:center;background:var(--brand-t);color:var(--brand-ink);font-weight:700;font-size:.8125rem}
.fs-h .muted{margin-left:auto;font-size:.8125rem}
.tog{display:inline-flex;align-items:center;gap:.625rem;font-size:.90625rem;color:var(--ink);cursor:pointer;user-select:none}
.tog .sw{width:2.375rem;height:1.375rem;border-radius:62.4375rem;background:var(--color-neutral-300);position:relative;flex:none;transition:background .2s;box-shadow:inset 0 .0625rem .1875rem var(--ink-a12)}
.tog .sw::after{content:"";position:absolute;top:.1875rem;left:.1875rem;width:1rem;height:1rem;border-radius:50%;background:var(--paper);box-shadow:0 .0625rem .1875rem var(--ink-a25);transition:left .2s}
.tog.on .sw{background:var(--brand);box-shadow:var(--brand-sh)}
.tog.on .sw::after{left:1.1875rem}
.tog.dis{opacity:.45;cursor:not-allowed}
.check{display:inline-flex;align-items:flex-start;gap:.625rem;font-size:.90625rem;color:var(--ink);cursor:pointer;user-select:none;line-height:1.45}
.check .box{width:1.125rem;height:1.125rem;border:.09375rem solid var(--color-neutral-500);border-radius:.25rem;flex:none;margin-top:.0625rem;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:.3125rem;top:.0625rem;width:.3125rem;height:.625rem;border:solid var(--paper);border-width:0 .125rem .125rem 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:.625rem}
.optcard{display:flex;gap:.75rem;padding:.875rem 1rem;border:.0625rem solid var(--color-neutral-400);border-radius:.375rem;cursor:pointer;align-items:flex-start;background:var(--paper)}
.optcard.on{border:.125rem solid var(--brand);padding:.8125rem .9375rem}
.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 .25rem var(--paper)}
.drop{border:.125rem dashed var(--color-neutral-400);border-radius:.625rem;padding:2.75rem 1.75rem;display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;background:var(--paper)}
.drop>.lucide{width:3rem;height:3rem;padding:.75rem;border-radius:.375rem;background:var(--color-neutral-200);color:var(--ink)}
.form-foot{display:flex;gap:.75rem;align-items:center;padding-top:1.125rem;border-top:.0625rem solid var(--rule-soft);flex-wrap:wrap}
.form-foot .sp{flex:1}
.consent-box{max-height:11.25rem;overflow-y:auto;border:.0625rem solid var(--rule);border-radius:.375rem;background:var(--color-neutral-100);padding:1rem 1.125rem;font-size:.875rem;line-height:1.65;color:var(--ink)}
.consent-box p{margin:0 0 .625rem}
.readonly-v{font-size:.90625rem;padding:.5rem .875rem;border-radius:.375rem;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:1.75rem;padding:1.25rem 0;border-bottom:.0625rem solid var(--rule-soft)}
.setting:last-of-type{border-bottom:0}
.setting h4{font-size:.96875rem;margin:0 0 .25rem;font-weight:600}
.setting p{margin:0;font-size:.875rem;color:var(--muted);max-width:56ch}
.setting .ctl{display:flex;flex-direction:column;gap:.625rem}
.range{position:relative;height:1.875rem;margin:.25rem 0 0}
.range .track{position:absolute;left:0;right:0;top:.75rem;height:.375rem;border-radius:62.4375rem;background:var(--brand-t2)}
.range .fill{position:absolute;left:0;top:.75rem;height:.375rem;border-radius:62.4375rem;background:var(--brand)}
.range .thumb{position:absolute;top:.3125rem;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--paper);border:.25rem solid var(--brand);transform:translateX(-50%);box-shadow:0 .125rem .375rem var(--ink-a20)}
.range .rec{position:absolute;top:0;height:1.875rem;border-left:.125rem dashed var(--ok)}
.range-scale{display:flex;justify-content:space-between;font-size:.78125rem;color:var(--faint)}
.range-val{display:flex;align-items:center;gap:.625rem}
.range-val b{font-size:1.375rem;font-weight:700}
.cost{display:grid;grid-template-columns:1fr 1fr;gap:.625rem}
.cost>div{padding:.625rem .75rem;font-size:.8125rem;color:var(--muted);background:var(--color-neutral-100);border-radius:.375rem}
.cost b{display:block;font-size:.78125rem;margin-bottom:.125rem}
.inherit{font-size:.8125rem;display:inline-flex;gap:.375rem;align-items:center;color:var(--muted)}
.inherit .lucide{width:.9375rem;height:.9375rem;color:var(--brand-ink)}

/* alerts (callouts) */
.callout{display:flex;gap:.875rem;align-items:flex-start;padding:.875rem 1rem;border-radius:.375rem;background:var(--color-neutral-200)}
.callout>.lucide{width:2.125rem;height:2.125rem;padding:.5rem;border-radius:.375rem;background:var(--paper);color:var(--ink);flex:none;box-shadow:var(--shadow-sm)}
.callout h4{font-size:.9375rem;margin:0 0 .1875rem;line-height:1.4;font-weight:600}
.callout p{margin:0;font-size:.875rem;max-width:84ch;text-wrap:pretty}
.callout p+p{margin-top:.375rem}
.callout .actions{margin-top:.75rem}
.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:.0625rem 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:2.375rem minmax(0,1fr) auto;gap:.875rem;align-items:center;padding:.75rem 0;border-bottom:.0625rem solid var(--rule-soft)}
.alert:last-child{border-bottom:0}
.alert .rank{width:2.375rem;height:2.375rem;border-radius:.375rem;display:grid;place-items:center;font-weight:600;font-size:.8125rem;color:var(--warn);background:var(--warn-bg)}
.alert h4{font-size:.9375rem;margin:0 0 .0625rem;font-weight:600;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.alert p{margin:0;font-size:.84375rem;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:3.875rem minmax(0,1fr) auto;gap:.75rem;align-items:center;padding:.625rem 0;border-bottom:.0625rem solid var(--rule-soft);font-size:.875rem}
.feed-i:last-child{border-bottom:0}
.feed-i time{color:var(--faint);font-size:.8125rem}
.feed-i.new{background:linear-gradient(90deg,var(--brand-t),transparent 70%);margin:0 -.625rem;padding:.625rem;border-radius:.375rem}
.live{display:inline-flex;align-items:center;gap:.4375rem;font-size:.8125rem;font-weight:500;color:var(--ok);background:var(--ok-bg);padding:.125rem .625rem;border-radius:.25rem}
.live::before{content:"";width:.4375rem;height:.4375rem;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:.25rem}
.tl{display:grid;grid-template-columns:1rem minmax(0,1fr) auto;gap:.875rem;padding:0 0 1.125rem;font-size:.875rem;position:relative}
.tl::before{content:"";grid-column:1;grid-row:1;width:.75rem;height:.75rem;border-radius:50%;background:var(--brand);margin-top:.25rem;box-shadow:0 0 0 .25rem var(--brand-t2)}
.tl::after{content:"";position:absolute;left:.3125rem;top:1.375rem;bottom:0;border-left:.0625rem dashed var(--rule)}
.tl:last-child::after{display:none}
.tl>time{grid-column:3;grid-row:1;color:var(--faint);font-size:.78125rem;white-space:nowrap}
.tl>div{grid-column:2;grid-row:1}
.tl small{display:block;color:var(--muted);font-size:.84375rem}

/* key / value */
.kv{display:grid;grid-template-columns:minmax(5.625rem,11.875rem) minmax(0,1fr);margin:0;row-gap:0}
.kv dt,.kv dd{padding:.5rem 0;margin:0;font-size:.90625rem}
.kv dt{color:var(--muted)}
.kv dd{color:var(--head);font-weight:500}
.kv dd small{color:var(--faint);margin-left:.375rem;font-weight:400}

/* stepper */
.steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;padding:1.125rem 1.375rem;border-radius:.625rem;background:var(--paper);box-shadow:var(--shadow-md);align-items:center}
.step{display:flex;gap:.75rem;align-items:center;font-size:.9375rem;font-weight:600;color:var(--head);position:relative}
.step:not(:last-child)::after{content:"";flex:1;height:0;border-top:.0625rem dashed var(--color-neutral-400);margin:0 1.125rem}
.step .n{width:2.375rem;height:2.375rem;border-radius:.375rem;display:grid;place-items:center;font-size:.875rem;font-weight:600;background:var(--color-neutral-200);color:var(--muted);flex:none}
.step small{display:block;color:var(--muted);font-size:.8125rem;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:.5rem;border-radius:62.4375rem;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:.75rem}
.chart{display:flex;align-items:flex-end;gap:1rem;height:11.875rem;padding-top:.5rem}
.chart>div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:.375rem;min-width:0}
.chart>div>i{display:block;width:100%;max-width:2.75rem;border-radius:.375rem;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:.78125rem;font-weight:500;color:var(--muted)}
.chart-x{display:flex;gap:1rem}
.chart-x span{flex:1;font-size:.8125rem;color:var(--faint);text-align:center;min-width:0}
.legend{display:flex;gap:1rem;font-size:.8125rem;color:var(--muted);flex-wrap:wrap}
.legend span{display:inline-flex;gap:.375rem;align-items:center}
.legend i{width:.625rem;height:.625rem;border-radius:50%;display:inline-block;background:var(--brand-t2)}

/* coverage matrix */
.matrix{border-collapse:separate;border-spacing:.25rem;font-size:.875rem}
.matrix th{font-size:.8125rem;font-weight:600;text-align:left;padding:.375rem .5rem;color:var(--head);vertical-align:bottom;white-space:nowrap}
.matrix th.dv{writing-mode:vertical-rl;transform:rotate(180deg);height:9.375rem;padding:.5rem .375rem}
.matrix td{padding:0;text-align:center}
.matrix td.nm{padding:.25rem 1rem .25rem 0;text-align:left;white-space:nowrap}
.mc{width:2.25rem;height:2rem;display:grid;place-items:center;border-radius:.375rem}
.mc.y{background:var(--brand)}
.mc.g{background:var(--err-bg)}
.mc.g::after{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--err)}
.mc.x{background:var(--color-neutral-200)}
.mc.o{background:var(--warn-base)}
.mkey{display:flex;gap:1rem;flex-wrap:wrap;font-size:.8125rem;color:var(--muted)}
.mkey span{display:inline-flex;gap:.5rem;align-items:center}
.mkey .mc{width:1.25rem;height:1.125rem;border-radius:.25rem}
.mkey .mc.g::after{width:.3125rem;height:.3125rem}

/* states, dialogs, misc */
.states{display:grid;grid-template-columns:repeat(auto-fill,minmax(21.25rem,1fr));gap:1.25rem}
.state{display:flex;flex-direction:column;gap:.625rem;min-width:0;padding:1rem;border-radius:.625rem;background:var(--paper);border:.0625rem dashed var(--color-neutral-400)}
.state-l{font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.stage{background:var(--color-neutral-200);padding:1.5rem;border-radius:.5rem;display:grid;place-items:center}
.stage .dialog{width:100%;max-width:29.375rem;background:var(--paper);border-radius:.625rem;padding:1.5rem;box-shadow:var(--shadow-lg)}
.dialog-title{font-family:var(--font-heading);font-weight:700;font-size:1.1875rem;color:var(--head)}
.dialog.wide{max-width:40rem}
.dialog-body{opacity:1;color:var(--muted);font-size:.90625rem}
.dialog-body p{margin:0 0 .5rem}
.dialog-body ul{margin:.375rem 0 .5rem;padding-left:1.125rem}
.dialog-actions{justify-content:flex-start;gap:.75rem}
.empty{border-radius:.625rem;padding:2rem;display:flex;flex-direction:column;gap:.625rem;align-items:flex-start;background:var(--paper);box-shadow:var(--shadow-md)}
.state .empty,.sec .empty{box-shadow:none;border:.0625rem solid var(--rule)}
.empty>.lucide{width:3.25rem;height:3.25rem;padding:.8125rem;border-radius:.375rem;background:var(--brand-t);color:var(--brand-ink)}
.empty h4{font-size:1.125rem;margin:0}
.empty p{margin:0;color:var(--muted);max-width:60ch}
.paper{background:var(--paper);border-radius:.375rem;box-shadow:var(--shadow-lg);padding:2.25rem 2.5rem;color:var(--hairline)}
.paper b{color:var(--hairline)}
.tabs{display:flex;gap:.25rem;flex-wrap:wrap}
.tabs a{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1.125rem;border-radius:.375rem;font-weight:500;font-size:.90625rem;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:18.75rem;height:18.75rem;background:var(--paper);image-rendering:pixelated;display:block;padding:.875rem;border-radius:.625rem;box-shadow:var(--shadow-lg)}
.qr.sm{width:7rem;height:7rem;padding:.375rem;border-radius:.375rem;box-shadow:none;border:.0625rem solid var(--rule)}
.pin{font-family:var(--font-heading);font-size:3.25rem;font-weight:800;letter-spacing:.06em;line-height:1;color:var(--head)}
.digits{display:flex;gap:.625rem}
.digits span{width:3.125rem;height:3.375rem;border-radius:.375rem;border:.0625rem solid var(--color-neutral-400);display:grid;place-items:center;font-size:1.5rem;font-weight:600;color:var(--head);background:var(--paper)}
.digits span.empty-d:nth-child(4){border:.125rem solid var(--brand);box-shadow:var(--brand-ring)}
.tree{display:flex;flex-direction:column;border-radius:.625rem}
.sec .tree,.state 
.tree-i{display:flex;align-items:center;gap:.625rem;padding:.5625rem .75rem;border-radius:.375rem;font-size:.90625rem;color:var(--ink)}
.tree-i:hover{background:var(--color-neutral-100)}
.tree-i>.lucide{color:var(--muted)}
.tree-i.l0{padding-left:.75rem}
.l1{padding-left:2.25rem}.tree-i.l2{padding-left:3.75rem}
.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:.5rem;display:grid;grid-template-columns:4.5rem 1fr;height:12.25rem;background:var(--color-bg);overflow:hidden;font-size:.5625rem;border:.0625rem solid var(--rule)}
.mini .ms{background:var(--paper);display:flex;flex-direction:column;padding-top:.5rem;box-shadow:.125rem 0 .375rem var(--ink-a06)}
.mini .ms i{display:block;height:.5625rem;margin:.3125rem .5rem;border-radius:.1875rem;background:var(--color-neutral-200)}
.mini .ms i.on{background:var(--grad-brand,var(--brand))}
.mini .mh{height:1.625rem;margin:.375rem .5rem 0;border-radius:.25rem;display:flex;align-items:center;padding:0 .625rem;font-weight:700;font-size:.625rem;background:var(--paper);box-shadow:var(--shadow-sm);color:var(--head)}
.mini .mb{padding:.625rem;display:flex;flex-direction:column;gap:.4375rem}
.mini .mb i{display:block;height:.5625rem;border-radius:.1875rem;background:var(--color-neutral-300)}
.swatches{display:flex;border-radius:.375rem;overflow:hidden;border:.0625rem solid var(--rule)}
.swatches>div{flex:1;padding:.625rem;font-size:.75rem;min-height:4.375rem;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:.5rem .75rem}
.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:.5rem;background:var(--paper);border:.0625rem solid var(--rule);font-size:.875rem;padding:.5rem;color:var(--ink)}
.navprev div{padding:.5rem .75rem;border-radius:.375rem;display:flex;gap:.625rem;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:1.5rem;border-radius:.875rem;padding:3rem 3.5rem;display:flex;flex-direction:column;justify-content:space-between;color:var(--head);background:radial-gradient(31.25rem 22.5rem at 80% 20%,color-mix(in srgb, var(--brand) 22%, transparent),transparent 65%),radial-gradient(25rem 18.75rem at 15% 85%,var(--accent2-t),transparent 65%),var(--color-accent-100)}
.auth-r::after{content:"";position:absolute;right:3rem;bottom:3rem;width:16.25rem;height:16.25rem;border-radius:1.5rem;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:3rem;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:1rem;margin:0;color:var(--muted);position:relative;z-index:1}
.auth-l{display:flex;flex-direction:column;padding:2.5rem 3.5rem;gap:2rem;background:var(--paper)}
.auth-l>.logo-word{display:flex;align-items:center;gap:.625rem;font-size:1.125rem}
.auth-l>.logo-word span{display:none}
.auth-form{max-width:26.25rem;width:100%;display:flex;flex-direction:column;gap:1.125rem;margin:auto 0}
.auth-form h1{font-size:1.625rem;margin:0}
.auth-form .btn-block{justify-content:center;min-height:2.625rem;font-size:.9375rem;margin-top:.25rem}
.auth-foot{font-size:.8125rem;color:var(--faint);display:flex;flex-wrap:wrap;gap:.25rem 1rem}
.powered a{color:inherit;text-decoration:underline;text-underline-offset:.125rem}

/* what Face Attendance keeps on a device, under its health */
.store{display:flex;flex-direction:column;gap:.5rem;padding-top:.875rem;border-top:.0625rem solid var(--rule-soft);min-width:0}
.store-h{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;font-size:.90625rem;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:.375rem;font-size:.875rem}
.store-list li{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;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:.84375rem}
@media (max-width:760px){.store{border-top:0;padding-top:.25rem}}

/* licence */
.top-lic{gap:.375rem}
.lic-lead{margin:0;font-size:1rem;color:var(--ink)}
.lic-lead b{color:var(--head)}
.lic-id{display:flex;flex-direction:column;gap:.375rem;min-width:0}
.lic-id>.muted{font-size:.90625rem}
.lic-code{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.lic-code code{font-size:1.0625rem;letter-spacing:.05em;white-space:nowrap;color:var(--head)}
.lic-pick{display:flex;gap:.625rem;flex-wrap:wrap;align-items:center}
.lic-pick label{position:relative;overflow:hidden;cursor:pointer}
.lic-pick label:focus-within{outline:.125rem solid var(--brand-ink);outline-offset:.125rem}
.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:.8125rem}
.lic-activate{gap:1.25rem}
.lic-activate .lic-id{padding:.875rem 1rem;border-radius:.5rem;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:.125rem;padding:.625rem 0;border-bottom:.0625rem solid var(--rule-soft);font-size:.90625rem;min-width:0;overflow-wrap:anywhere}
.lic-history li:last-child{border-bottom:0}
.lic-history li>div:first-child{display:flex;gap:.25rem .625rem;flex-wrap:wrap;align-items:baseline;color:var(--head)}
.lic-history .muted{font-size:.84375rem}
@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:80rem;margin:0 auto;padding:2rem 1.5rem 5rem}
body[data-layout=bare] .logo-word{display:flex;align-items:center;gap:.625rem}
body[data-layout=bare] .logo-word::before{content:"";width:2.125rem;height:2.125rem;border-radius:.5625rem;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:1.5rem 3.5rem 5rem;background:var(--color-bg)}
.err-region{display:flex;gap:.625rem;padding:.75rem .875rem;border-radius:.375rem;background:var(--err-bg);font-size:.875rem;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:.375rem}
.meter i{height:.375rem;border-radius:62.4375rem;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:.3125rem;font-size:.84375rem}
.rules li{display:flex;gap:.5rem;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(18.75rem,1fr));gap:.5rem}
.index-g a{display:flex;gap:.75rem;align-items:center;padding:.6875rem .875rem;border-radius:.375rem;border:.0625rem solid var(--rule);color:var(--ink);font-size:.90625rem;transition:border-color .15s,box-shadow .15s}
.index-g a:hover{border-color:var(--brand);box-shadow:0 .125rem .375rem color-mix(in srgb, var(--brand) 25%, transparent);color:var(--brand-ink)}
.index-g a .c{font-size:.75rem;font-weight:600;color:var(--brand-ink);width:3.75rem;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:17.5rem;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:.625rem;top:1.25rem}
  .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 1rem}
  .top{padding:0 .625rem 0 .375rem;gap:.375rem}
  .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:3.25rem}
  .main{gap:1.25rem}
}
/* mobile */
@media (max-width:760px){
  body{font-size:.875rem}
  .frame{padding:0 .625rem}
  .top{top:.5rem;margin-top:.5rem;height:3.5rem}
  .top-alert span{display:none}
  .top-alert{padding:0 .5rem}
  .acct>.lucide{display:none}
  .banner{flex-wrap:wrap;gap:.5rem;padding:.625rem .75rem;font-size:.8125rem}
  .banner a{margin-left:0}
  .main{padding:1rem 0 4rem;gap:1rem}
  .ph{gap:.75rem}
  .ph-t{min-width:0;flex-basis:100%;flex-wrap:wrap}
  .ph h1{font-size:1.375rem}
  .ph .sub{font-size:.84375rem}
  .ph .actions{width:100%}
  .ph .actions>.btn,.ph .actions>select{flex:1 1 auto}
  .av.xl{width:4rem;height:4rem;font-size:1.375rem}
  .sec{padding:1rem;gap:.875rem;border-radius:.5rem}
  .sec-h h2{font-size:1rem}
  .cells{gap:.75rem}
  .cells>*{padding:.875rem 1rem}
  .c2,.c3{grid-template-columns:minmax(0,1fr)}
  .c4,.c5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{font-size:1.625rem}.stat.md{font-size:1.25rem}.stat.xl{font-size:2.75rem}
  .split,.split.even,.stack{gap:1rem}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .form{padding:1rem}
  .form-foot .btn{flex:1 1 auto}
  .toolbar{gap:.5rem}
  .toolbar .search{min-width:0;max-width:none;flex:1 1 100%}
  .toolbar>select.input,.toolbar>.input{flex:1 1 calc(50% - .25rem);min-width:0}
  .tbl-wrap>.table{min-width:42.5rem}
  table.perm{min-width:47.5rem}
  .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:.78125rem}
  .kv dd{padding-top:.125rem;border-bottom:.0625rem solid var(--rule-soft)}
  .setting{padding:1rem 0;gap:.75rem}
  .cost{grid-template-columns:minmax(0,1fr)}
  .alert{grid-template-columns:2.125rem minmax(0,1fr)}
  .alert>.btn,.alert>a{grid-column:2;justify-self:start}
  .alert .rank{width:2.125rem;height:2.125rem}
  .feed-i{grid-template-columns:3.125rem minmax(0,1fr);row-gap:.25rem}
  .feed-i>:nth-child(3){grid-column:2}
  .tl{grid-template-columns:1rem minmax(0,1fr)}
  .tl>time{grid-column:2;grid-row:2}
  .states{grid-template-columns:minmax(0,1fr)}
  .state{padding:.75rem}
  .stage{padding:.75rem}
  .stage .dialog{padding:1.125rem}
  .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:.75rem;padding:.875rem}
  .step::after{display:none}
  .qr{width:min(17.5rem,100%);height:auto;aspect-ratio:1}
  .pin{font-size:2.375rem}
  .digits{gap:.375rem}
  .digits span{width:2.625rem;height:3rem;font-size:1.25rem}
  .paper{padding:1.125rem}
  .paper [style*="grid-template-columns"]{grid-template-columns:1.5rem minmax(0,1fr) auto!important;font-size:.9375rem!important}
  .paper [style*="grid-template-columns"]>:last-child{display:none}
  .matrix th.dv{height:6.875rem}
  .mc{width:1.875rem;height:1.75rem}
  .empty{padding:1.25rem}
  .auth-l{padding:1.5rem 1.25rem;gap:1.5rem}
  .auth-form h1{font-size:1.5rem}
  .auth-states{padding:1rem 1.25rem 3.75rem}
  .index-g{grid-template-columns:minmax(0,1fr)}
  .chart{gap:.5rem;height:9.375rem}.chart-x{gap:.5rem}
  .swatches{flex-wrap:wrap}.swatches>div{flex:1 1 33%}
  body[data-layout=bare] .main{padding:1.25rem .75rem 3.75rem}
}
@media (max-width:420px){
  .c4,.c5{grid-template-columns:minmax(0,1fr)}
  .toolbar>select.input,.toolbar>.input{flex-basis:100%}
  .acct{padding:.125rem}
}
@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:.375rem;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:.5rem;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:.25rem;padding:0 .5rem}
}