/* =====================================================================
   MLS design system, aligned with the JPMC HR Training System:
   hospital-sketch backdrop, translucent white shell, white rounded panels,
   JPMC burgundy and gold, pill buttons, soft borderless inputs.
   Result state keeps its meaning: green = verified, gold = awaiting verification.
   MLS's own look, glass panels, is the layer at the end of this file;
   everything above it is the solid design it falls back to.
   ===================================================================== */

:root {
  --brand-burgundy: #86374a;
  --brand-burgundy-hover: #702b3c;
  --brand-burgundy-soft: #f7edf0;
  --brand-gold: #e1b442;
  --brand-gold-hover: #edc768;
  --brand-gold-soft: #fbf4df;
  --brand-gold-line: #e8d6a6;
  --brand-gold-ink: #725414;
  --brand-ink: #3b222b;

  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --sunken: #f1f3f5;
  --hover: #f7f8fa;
  --line: #e8eaed;
  --line-strong: #d9dde2;
  --ink: #20272c;
  --ink-2: #41454d;
  --ink-3: #66717a;

  --accent: var(--brand-burgundy);
  --accent-hover: var(--brand-burgundy-hover);
  --accent-soft: var(--brand-burgundy-soft);
  --accent-ink: #ffffff;
  --icon: var(--brand-burgundy);
  --secondary-bg: var(--brand-gold-soft);
  --secondary-hover: #f3e5bd;
  --secondary-line: var(--brand-gold-line);
  --secondary-text: var(--brand-burgundy-hover);

  --done: #276650;
  --done-soft: #e5f1eb;
  --active: #e1b442;
  --active-ink: #725414;
  --active-soft: #fbf4df;
  --danger: #9f293a;
  --danger-soft: #f8e9ec;
  --info: #2f5e8c;
  --info-soft: #e8eff7;
  --pending: #dfe3e7;
  --focus: var(--brand-burgundy);
  --scrim: rgba(12, 20, 28, .52);

  --shadow: 0 20px 70px rgba(30, 39, 43, .07);
  --shadow-card: 0 5px 25px rgba(30, 39, 43, .03);
  --shadow-overlay: 0 24px 90px rgba(0, 0, 0, .25);
  --shadow-pop: 0 12px 32px rgba(11, 15, 25, .16), 0 2px 6px rgba(11, 15, 25, .06);
  --curve: cubic-bezier(.22, 1, .36, 1);
  --ease: var(--curve);

  --font: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: var(--font);
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 30px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 21px;
  --sidebar: 278px;
  --topbar: 86px;

  --scrollbar-thumb: var(--brand-burgundy);
  --scrollbar-thumb-hover: var(--brand-burgundy-hover);
  --scrollbar-track: #f5efdf;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --brand-burgundy-soft: #382830;
  --brand-gold-soft: #332e22;
  --brand-gold-line: #665735;
  --brand-gold-ink: var(--brand-gold-hover);

  --bg: #12191e;
  --surface: #1b252b;
  --surface-2: #212d34;
  --sunken: #182127;
  --hover: #212d34;
  --line: #303d45;
  --line-strong: #3d4b54;
  --ink: #edf1f3;
  --ink-2: #c3ccd5;
  --ink-3: #a8b5be;

  --accent: var(--brand-gold);
  --accent-hover: var(--brand-gold-hover);
  --accent-soft: #332e22;
  --accent-ink: var(--brand-ink);
  --icon: var(--brand-gold);
  --secondary-bg: var(--brand-gold-soft);
  --secondary-hover: #463b25;
  --secondary-line: var(--brand-gold-line);
  --secondary-text: var(--brand-gold-hover);

  --done: #91d2b5;
  --done-soft: rgba(145, 210, 181, .13);
  --active: #e1b442;
  --active-ink: #edc768;
  --active-soft: rgba(225, 180, 66, .14);
  --danger: #f5a8b6;
  --danger-soft: rgba(245, 168, 182, .12);
  --info: #9cc2e8;
  --info-soft: rgba(156, 194, 232, .12);
  --pending: #3a4650;
  --focus: var(--brand-gold);

  --shadow: 0 20px 70px rgba(0, 0, 0, .14);
  --shadow-card: 0 5px 25px rgba(0, 0, 0, .12);
  --shadow-overlay: 0 24px 90px rgba(0, 0, 0, .5);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .32);
  --scrollbar-thumb: var(--brand-gold);
  --scrollbar-thumb-hover: var(--brand-gold-hover);
  --scrollbar-track: #352832;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 16px; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--ink); font-family: var(--font); font-size: var(--fs-md); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background: linear-gradient(135deg, rgba(248, 248, 246, .48), rgba(235, 238, 237, .62)), url("../img/backdrop.webp") center / cover fixed no-repeat, var(--bg);
}
[data-theme="dark"] body { background: linear-gradient(135deg, rgba(19, 28, 33, .68), rgba(27, 36, 41, .78)), url("../img/backdrop.webp") center / cover fixed no-repeat, var(--bg); }
h1, h2, h3, h4 { margin: 0; font-family: var(--font); font-weight: 650; letter-spacing: -.02em; line-height: 1.25; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.num, time, .tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: none; }
::selection { background: var(--secondary-bg); }
svg { stroke-width: 1.7; }
/* Icons have no size of their own; every place sizes them. This zero-specificity default keeps an icon without a rule
   at text size instead of filling its container. */
:where(svg.ic) { width: 1em; height: 1em; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }

/* scrollbars (burgundy on light, gold on dark) */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); }
@supports selector(::-webkit-scrollbar) {
  * { scrollbar-width: auto; scrollbar-color: auto; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 999px; }
  ::-webkit-scrollbar-thumb { min-width: 32px; min-height: 32px; background: var(--scrollbar-thumb); border: 2px solid var(--scrollbar-track); border-radius: 999px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
  ::-webkit-scrollbar-corner { background: var(--scrollbar-track); }
  ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  /* Scroll areas inside cards, panels, dialogs and menus: a slim rounded thumb on a clear track, held clear of the
     rounded corners. The page's own scrollbar (above) keeps the full style. */
  body *::-webkit-scrollbar { width: 8px; height: 8px; }
  body *::-webkit-scrollbar-track { background: transparent; margin: 14px; }
  body *::-webkit-scrollbar-thumb { min-width: 36px; min-height: 36px; border: 2px solid transparent; background-clip: padding-box; background-color: color-mix(in srgb, var(--scrollbar-thumb) 40%, transparent); }
  body *:hover::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--scrollbar-thumb) 70%, transparent); }
  body *::-webkit-scrollbar-thumb:hover, body *::-webkit-scrollbar-thumb:active { background-color: var(--scrollbar-thumb); }
  body *::-webkit-scrollbar-corner { background: transparent; }
}
@supports not selector(::-webkit-scrollbar) {
  body * { scrollbar-color: color-mix(in srgb, var(--scrollbar-thumb) 55%, transparent) transparent; }
}

/* ------------------------------------------------------------------ shell */
.shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.sidebar {
  width: var(--sidebar); flex-shrink: 0; position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column;
  padding: 18px 12px; background: rgba(255, 255, 255, .94); box-shadow: 10px 0 28px rgba(30, 39, 43, .035); z-index: 40;
}
[data-theme="dark"] .sidebar { background: rgba(20, 29, 39, .96); box-shadow: 10px 0 28px rgba(0, 0, 0, .12); }
.brand { display: flex; align-items: center; gap: 12px; padding: 9px; color: var(--ink); flex-shrink: 0; }
.brand-mark { display: grid; place-items: center; width: 45px; height: 45px; flex-shrink: 0; border-radius: 13px; background: #fff; box-shadow: 0 8px 20px rgba(30, 39, 43, .05); }
.brand-mark img { width: 35px; height: 35px; object-fit: contain; }
.brand-name { display: block; font-size: 14px; line-height: 1.5; font-weight: 700; }
.brand-sub { display: block; font-size: 11px; line-height: 1.5; color: var(--ink-3); margin-top: 2px; }
.sidebar-nav { flex: 1; min-height: 0; margin-top: 22px; padding: 4px 2px 22px; overflow-y: auto; overscroll-behavior: contain; }
.nav-group { margin: 0 10px 11px; color: var(--ink-3); font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; }
.sidebar-nav .nav-group:not(:first-child) { margin-top: 26px; }
.nav-link {
  width: 100%; display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 9px 11px; margin-bottom: 2px; border: 0; border-radius: 9px;
  color: var(--ink-2); background: transparent; font-size: 13px; font-weight: 600; line-height: 1.5; text-align: left; text-decoration: none;
  transition: background .25s var(--curve), color .25s var(--curve);
}
.nav-link svg { width: 19px; height: 19px; flex: none; color: var(--icon); }
.nav-link:hover, .nav-link[aria-current="page"] { background: var(--secondary-bg); color: var(--ink); }
.nav-link[aria-current="page"] { box-shadow: inset 4px 0 0 var(--accent); }
.nav-count { margin-left: auto; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* each test's Logsheet page under the Logsheet, as LMMS's menu listed them: a table icon and "Name (CODE)", the whole
   name on as many lines as it needs; a panel's tests under the panel's name, which opens and closes them */
.nav-tests { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin: 2px 0 8px 12px; }
.nav-tests:empty { display: none; }
.nav-test {
  width: 100%; display: flex; align-items: flex-start; gap: 10px; min-height: 36px; padding: 8px 10px; border: 0; border-radius: 8px;
  color: var(--ink-2); background: transparent; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.5; text-align: left;
  text-decoration: none; cursor: pointer; transition: background .25s var(--curve), color .25s var(--curve);
}
.nav-test svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--icon); }
.nav-test .name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.nav-test .chev { display: flex; flex: none; margin-left: auto; transition: transform .2s var(--curve); }
.nav-test[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.nav-test-children { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; padding-left: 22px; }
.nav-test-children[hidden] { display: none; }
.nav-test:hover, .nav-test[aria-current="page"] { background: var(--secondary-bg); color: var(--ink); }
.nav-test[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); }
.nav-test[aria-current="page"] svg { color: var(--accent); }
.sidebar-foot { flex-shrink: 0; padding: 13px 4px 0; margin-top: 14px; border-top: 1px solid var(--line); }
.account-link { display: flex; align-items: center; gap: 12px; padding: 8px; margin: 0 0 7px; border-radius: 9px; color: var(--ink); text-decoration: none; min-width: 0; }
.account-link:hover { background: var(--hover); }
.account-link .who { min-width: 0; }
.account-link b { display: block; font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-link .who span { display: block; color: var(--ink-3); font-size: 11px; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.theme-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; margin: 0 2px 5px; padding: 7px 10px; border-radius: 9px; font-size: 11px; font-weight: 600; color: var(--ink-3); cursor: pointer; }
.theme-switch:hover { background: var(--hover); }
.theme-switch input {
  appearance: none; -webkit-appearance: none; width: 38px; height: 22px; flex-shrink: 0; margin: 0; padding: 0; border: 0; border-radius: 20px;
  background: #d5dce1; position: relative; cursor: pointer; transition: background .3s var(--curve);
}
.theme-switch input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(30, 39, 43, .15); transition: transform .3s var(--curve); }
.theme-switch input:checked { background: var(--accent); }
.theme-switch input:checked::before { transform: translateX(16px); }
[data-theme="dark"] .theme-switch input:checked::before { background: var(--brand-ink); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar); position: sticky; top: 0; z-index: 30; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 15px;
  padding: 0 42px; background: rgba(255, 255, 255, .9); box-shadow: 0 8px 24px rgba(30, 39, 43, .035); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
[data-theme="dark"] .topbar { background: rgba(20, 29, 39, .92); }
.topbar-left, .topbar-actions { display: flex; align-items: center; gap: 14px; min-width: 0; }
.breadcrumb { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb > span { margin: 0 10px; opacity: .5; }
.breadcrumb b { font-weight: 600; color: var(--ink-2); }
.access-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.demo-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; margin-left: 12px; padding: 0 11px; border-radius: 999px; background: var(--active-soft); color: var(--active-ink); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.demo-badge svg { width: 13px; height: 13px; }
.access-badge svg { width: 16px; height: 16px; color: var(--icon); }
.search-trigger {
  display: inline-flex; align-items: center; gap: 10px; width: 280px; min-height: 42px; padding: 0 8px 0 14px; border: 1px solid transparent; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-3); font-size: 13px; cursor: pointer; text-align: left;
}
.search-trigger:hover { border-color: var(--line); }
.search-trigger svg { width: 16px; height: 16px; flex: none; color: var(--icon); }
.search-trigger span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-trigger kbd { white-space: nowrap; flex: none; }
.content { width: 100%; max-width: 1480px; margin: 0 auto; padding: 30px 42px 44px; flex: 1; outline: none; }
.workspace-footer { display: flex; justify-content: space-between; gap: 20px; padding: 0 42px 23px; font-size: 11px; color: var(--ink-3); }

/* ------------------------------------------------------------------ page heading */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 0 0 28px; }
.page-title { min-width: 0; }
.page-head h1 { font-size: clamp(1.85rem, 2.6vw, 2.45rem); font-weight: 650; letter-spacing: -.035em; line-height: 1.18; overflow-wrap: anywhere; }
.page-head .sub { display: block; margin-top: 12px; color: var(--ink-3); font-size: 15px; line-height: 1.6; max-width: 640px; }
.page-head .sub:empty { display: none; }
.page-head .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; flex-shrink: 0; margin-top: 6px; }
.page-body { padding: 0; }
.page-body.flush { padding: 0; }

/* ------------------------------------------------------------------ controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 19px; border-radius: 999px;
  border: 1px solid var(--secondary-line); background: var(--secondary-bg); color: var(--secondary-text); font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; text-decoration: none; line-height: 1.2;
  transition: transform .25s var(--curve), background-color .2s var(--curve), color .2s var(--curve), border-color .2s var(--curve);
}
.btn:hover { background: var(--secondary-hover); }
.btn:active { transform: scale(.98); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.quiet:hover { background: var(--surface-2); color: var(--ink); }
.btn.quiet svg { color: var(--icon); }
.btn.danger { color: var(--danger); background: var(--accent-soft); border-color: transparent; }
.btn.danger.solid { background: var(--brand-burgundy); border-color: var(--brand-burgundy); color: #fff; }
.btn.danger.solid:hover { background: var(--brand-burgundy-hover); }
.btn.sm { min-height: 32px; padding: 0 13px; font-size: 12px; gap: 6px; }
.btn.sm svg { width: 14px; height: 14px; }
.btn.icon { width: 42px; padding: 0; }
.btn.sm.icon { width: 32px; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .55; cursor: not-allowed; }
.btn.go { background: var(--done); border-color: var(--done); color: #fff; }
[data-theme="dark"] .btn.go { color: #10241b; }
.btn.go:hover { filter: brightness(.95); }
.btn.go-in { background: var(--surface); border-color: var(--done); color: var(--done); }
.btn.go-in:hover { background: var(--done-soft); }
.button-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(225, 180, 66, .18); color: var(--brand-gold-hover); transition: transform .3s var(--curve); }
.button-icon svg { width: 16px; height: 16px; }
.btn:hover .button-icon { transform: translate(2px, -2px); }
[data-theme="dark"] .btn.primary .button-icon { background: rgba(59, 34, 43, .12); color: var(--brand-ink); }

kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); font: 600 11px var(--font);
}

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label, .field > .label { font-size: 13px; font-weight: 600; color: var(--ink); }
.field .hint { font-size: 12px; color: var(--ink-3); line-height: 1.6; }
.field .hint.warn { color: var(--active-ink); }
.field .hint.bad { color: var(--danger); }
.field .error { font-size: 12px; color: var(--danger); }
.input, select.input, textarea.input {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid transparent; border-radius: var(--r-md); background: var(--surface-2); color: var(--ink);
  font-size: 14px; transition: border-color .2s var(--curve), background .2s var(--curve);
}
textarea.input { min-height: 84px; padding: 11px 14px; resize: vertical; line-height: 1.55; }
.input:hover { border-color: var(--line); }
/* background-color, not the background shorthand: the shorthand would reset the select arrow to a tiled pattern. */
.input:focus { background-color: var(--surface); border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 1px; }
.input[aria-invalid="true"] { border-color: var(--danger); }
.input.sm { min-height: 38px; padding: 7px 12px; border-radius: var(--r-sm); font-size: 13px; }
select.input.sm { padding-right: 32px; background-position: right 11px center; }
select.input { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2386374a' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; }
[data-theme="dark"] select.input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23e1b442' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.check { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.form-grid .span-2 { grid-column: span 2; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.form-actions .left { margin-right: auto; font-size: 12px; color: var(--ink-3); }

.search-box { position: relative; }
.search-box svg { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--icon); pointer-events: none; }
.search-box .input { padding-left: 38px; }

.segmented { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); }
.segmented button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: none; font-size: 12px; font-weight: 600; color: var(--ink-3); cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 2px 8px rgba(30, 39, 43, .08); }
.date-stepper { display: inline-flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------------------ tabs (bordered chips) */
.tabs { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--line); margin: 0 0 18px; padding: 0 0 16px; }
.tab {
  display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; min-height: 39px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--ink-3); font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer;
}
.tab:hover { color: var(--accent); border-color: var(--accent); }
.tab[aria-selected="true"] { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.tab .count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 22px; padding: 1px 7px; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 11px; font-variant-numeric: tabular-nums; }
.content > .tabs { border-bottom: 0; padding-bottom: 2px; margin-bottom: 20px; }
.tabs { scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------------ pills, tags and count badges */
.pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px; border-radius: 18px; font-size: 11px; font-weight: 600;
  white-space: nowrap; background: var(--surface-2); color: var(--ink-3); line-height: 1.5;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.pill.plain::before { display: none; }
.pill[data-tone="success"] { background: var(--done-soft); color: var(--done); }
.pill[data-tone="progress"], .pill[data-tone="warning"] { background: var(--active-soft); color: var(--active-ink); }
.pill[data-tone="danger"] { background: var(--danger-soft); color: var(--danger); }
.pill[data-tone="info"] { background: var(--info-soft); color: var(--info); }
.pill[data-tone="accent"] { background: var(--accent-soft); color: var(--accent); }
.tag { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); font-size: 11px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.tag[data-tone="danger"] { border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-soft); color: var(--danger); }
.tag[data-tone="warning"] { border-color: color-mix(in srgb, var(--active) 45%, transparent); background: var(--active-soft); color: var(--active-ink); }
/* A pill that opens something (a kit lot's QC chip opens its QC history). */
button.pill { border: 0; cursor: pointer; transition: box-shadow .2s var(--curve); }
button.pill:hover { box-shadow: inset 0 0 0 1px currentColor; }
.count-badge { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-2); }
.count-badge[data-tone="danger"] { background: var(--danger-soft); color: var(--danger); }
.count-badge[data-tone="warning"] { background: var(--active-soft); color: var(--active-ink); }
.count-badge[data-tone="info"] { background: var(--info-soft); color: var(--info); }

/* ------------------------------------------------------------------ panels, lists, metric cards */
.panel { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-card); min-width: 0; }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 22px 26px 12px; }
.panel-head h2, .panel-head h3 { font-size: 16px; font-weight: 650; letter-spacing: -.015em; }
.panel-head .meta { color: var(--ink-3); font-size: 13px; }
.panel-head .actions { margin-left: auto; display: flex; gap: 6px; }
.panel-body { padding: 6px 26px 24px; }
.panel-foot { padding: 14px 26px 20px; border-top: 1px solid var(--line); font-size: 13px; }
.list-panel { padding: 24px 26px 22px; }
.filter-panel { padding: 22px 26px; margin-bottom: 24px; }
.filter-panel .toolbar { margin: 0; }

.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; }
.strip > * {
  position: relative; display: block; min-width: 0; padding: 22px 23px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-card);
  color: inherit; text-decoration: none; transition: transform .4s cubic-bezier(.32, .72, 0, 1), box-shadow .4s cubic-bezier(.32, .72, 0, 1);
}
.strip a:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(30, 39, 43, .06); }
.strip .metric-icon { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--secondary-bg); color: var(--brand-gold-ink); }
.strip .metric-icon svg { width: 18px; height: 18px; }
.strip .value { font-size: var(--fs-2xl); font-weight: 650; line-height: 1.1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; padding-right: 40px; }
.strip .value small { font-size: 15px; color: var(--ink-3); font-weight: 600; margin-left: 2px; letter-spacing: 0; }
.strip .label { font-size: 12px; color: var(--ink-3); margin-top: 8px; line-height: 1.6; }
.strip .value.danger { color: var(--danger); }
.strip .value.good { color: var(--done); }

.rows { list-style: none; margin: 0; padding: 0; }
.rows > li + li { box-shadow: 0 -1px 0 var(--line); }
.panel > .rows:last-child > li:last-child > .row-link { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.panel-note { padding: 2px 26px 22px; color: var(--ink-3); font-size: 13px; }
.row-link { display: flex; align-items: center; gap: 14px; padding: 14px 26px; text-decoration: none; color: inherit; min-width: 0; transition: background .25s var(--curve); }
.row-link:hover { background: var(--surface-2); }
.row-link .grow { flex: 1; min-width: 0; }
.row-link .title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.row-link .meta { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.row-link .side { text-align: right; font-size: 13px; color: var(--ink-2); flex: none; }
.row-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 10px; background: var(--surface-2); color: var(--icon); }
.row-icon svg { width: 15px; height: 15px; }

.empty { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 40px 20px; text-align: center; color: var(--ink-3); font-size: 13px; }
.empty > svg { width: 30px; height: 30px; color: var(--icon); opacity: .8; }
.empty strong { color: var(--ink); font-size: 15px; }

/* ------------------------------------------------------------------ data table */
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.toolbar .search-box { width: 280px; max-width: 100%; }
.toolbar .spacer { flex: 1; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 18px; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 4px 0 11px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.chip button { display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: none; color: var(--ink-3); cursor: pointer; }
.chip button svg { width: 12px; height: 12px; }
.toggle-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--ink-3); cursor: pointer; }
.toggle-chip:hover { color: var(--accent); }
.toggle-chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }

/* position: relative keeps absolutely placed content (such as .sr-only labels) inside the scroll area. */
.table-wrap { position: relative; overflow-x: auto; border-radius: var(--r-md); }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
table.data th { background: var(--surface-2); text-align: left; font-size: 11px; font-weight: 600; color: var(--ink-3); padding: 12px 11px; white-space: nowrap; }
table.data th:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
table.data th:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
table.data th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
table.data th button:hover { color: var(--accent); }
table.data th button:focus-visible { outline: 2px solid var(--focus); border-radius: 3px; }
table.data th[aria-sort] { color: var(--accent); }
table.data th svg { width: 12px; height: 12px; }
table.data td { padding: 14px 11px; border-bottom: 1px solid var(--line); vertical-align: middle; line-height: 1.5; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr { cursor: pointer; }
table.data tbody tr:hover td { background: var(--surface-2); }
table.data tbody tr[aria-selected="true"] td { background: var(--accent-soft); }
table.data tbody tr[aria-selected="true"] td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
table.data td:first-child, table.data th:first-child { padding-left: 16px; }
table.data td:last-child, table.data th:last-child { padding-right: 16px; }
table.data .name { font-weight: 600; color: var(--ink); }
table.data .sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
table.data .nowrap { white-space: nowrap; }
table.data.compact td { padding-top: 11px; padding-bottom: 11px; }
table.data.static tbody tr { cursor: default; }
table.data.static tbody tr:hover td { background: none; }
.cell-trunc { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-trunc.narrow { max-width: 96px; }
.pager { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); flex-wrap: wrap; }
.pager .spacer { flex: 1; }
.skeleton { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--sunken) 25%, var(--surface-2) 50%, var(--sunken) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* bulk selection, and the sticky bar of actions at the foot of a long form */
th.pick, td.pick { width: 46px; padding-right: 0 !important; }
th.pick input, td.pick input { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; vertical-align: middle; cursor: pointer; }
.bulk-bar {
  position: fixed; z-index: 40; bottom: calc(24px + var(--nav-clear)); left: calc(50% + var(--sidebar) / 2); transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--brand-ink); color: #fff; box-shadow: var(--shadow-pop); font-size: 13px; animation: toast-in .18s var(--curve);
}
.bulk-bar[hidden] { display: none; }
.bulk-bar .btn.primary { background: var(--brand-gold); border-color: var(--brand-gold); color: var(--brand-ink); }
.bulk-bar .btn.quiet { color: #fff; }
.bulk-bar .btn.quiet:hover { background: rgba(255, 255, 255, .12); }
.bulk-bar .btn.quiet svg { color: currentColor; opacity: .85; }
.sticky-actions { position: sticky; bottom: calc(18px + var(--nav-clear)); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; padding: 10px 10px 10px 22px; border-radius: 999px; background: var(--brand-ink); color: #fff; box-shadow: var(--shadow-pop); font-size: 13px; }
.sticky-actions .grow { flex: 1; min-width: 0; }
.sticky-actions .btn.primary { background: var(--brand-gold); border-color: var(--brand-gold); color: var(--brand-ink); }
.sticky-actions .btn.quiet { color: #fff; }
.sticky-actions .btn.quiet:hover { background: rgba(255, 255, 255, .12); }

/* ------------------------------------------------------------------ overlays */
.scrim { position: fixed; inset: 0; z-index: 60; background: var(--scrim); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s var(--curve); }
.scrim.open { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(820px, 100vw); display: flex; flex-direction: column; background: var(--surface);
  border-radius: 24px 0 0 24px; box-shadow: var(--shadow-overlay); transform: translateX(28px); opacity: 0; transition: transform .25s var(--curve), opacity .18s var(--curve); overflow: hidden;
}
.drawer.open { transform: none; opacity: 1; }
.drawer.narrow { width: min(580px, 100vw); }
.drawer-head { display: flex; align-items: flex-start; gap: 14px; padding: 24px 28px 18px; border-bottom: 1px solid var(--line); }
.drawer-head .grow { flex: 1; min-width: 0; }
.drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.drawer-section { padding: 22px 28px; border-bottom: 1px solid var(--line); }
.drawer-section:last-child { border-bottom: 0; }
.drawer-foot { padding: 14px 28px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; align-items: center; background: var(--surface-2); }
.drawer-foot .left { margin-right: auto; font-size: 12px; color: var(--ink-3); }
.drawer .tabs { padding: 14px 28px; margin: 0; }

.dialog-layer { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: var(--scrim); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.dialog { width: min(500px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); border-radius: 23px; box-shadow: var(--shadow-overlay); }
.dialog.wide { width: min(660px, 100%); }
.dialog h2 { font-size: 22px; letter-spacing: -.03em; padding: 28px 30px 0; }
.dialog .body { padding: 12px 30px 6px; color: var(--ink-3); font-size: 14px; line-height: 1.7; }
.dialog .form-actions { padding: 18px 30px 26px; margin: 0; }

.menu { position: fixed; z-index: 90; min-width: 210px; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-pop); }
.menu button, .menu a { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 7px; background: none; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; text-align: left; text-decoration: none; }
.menu button:hover, .menu a:hover, .menu button:focus-visible { background: var(--surface-2); outline: none; }
.menu button.danger { color: var(--danger); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 5px 0; }
.menu svg { width: 16px; height: 16px; color: var(--icon); }
.menu button[role="menuitemradio"][aria-checked="true"] { color: var(--accent); font-weight: 600; }
.menu button[role="menuitemradio"][aria-checked="true"] svg { color: currentColor; }

.toasts { position: fixed; z-index: 100; bottom: calc(22px + var(--nav-clear)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; min-width: 240px; max-width: min(540px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 13px;
  background: var(--brand-ink); color: #fff; font-size: 13px; box-shadow: var(--shadow-pop); pointer-events: auto; animation: toast-in .2s var(--curve);
}
.toast svg { width: 17px; height: 17px; flex: none; color: var(--brand-gold); }
.toast.error { background: var(--brand-burgundy); }
.toast.error svg { color: #fff; }
.toast button { margin-left: auto; border: 0; background: none; color: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.palette-layer { position: fixed; inset: 0; z-index: 95; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: var(--scrim); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.palette { width: min(640px, 100%); background: var(--surface); border-radius: 23px; box-shadow: var(--shadow-overlay); overflow: hidden; }
.palette-input { display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.palette-input svg { width: 19px; height: 19px; color: var(--icon); }
.palette-input input { flex: 1; height: 58px; border: 0; background: none; font-size: 16px; outline: none; }
.palette-list { max-height: 50vh; overflow-y: auto; padding: 8px; }
.palette-group { padding: 10px 12px 5px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.palette-item { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 42px; padding: 8px 12px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; font-size: 14px; }
.palette-item svg { width: 17px; height: 17px; color: var(--icon); flex: none; }
.palette-item .meta { margin-left: auto; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.palette-item[aria-selected="true"] { background: var(--secondary-bg); }
.palette-foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); background: var(--surface-2); }

/* ------------------------------------------------------------------ record drawer: title, state, facts and history */
.ws-name { font-size: 24px; letter-spacing: -.035em; line-height: 1.2; }
.ws-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin: 0; }
.kv > div { min-width: 0; }
.kv dt { font-size: 12px; color: var(--ink-3); margin-bottom: 3px; }
.kv dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; white-space: pre-line; }
.kv dd.empty-val { color: var(--ink-3); }
.kv .span-2 { grid-column: span 2; }
.section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.section-head h3 { font-size: 15px; }
.section-head .actions { margin-left: auto; display: flex; gap: 6px; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 18px 24px; }
.timeline li::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: -6px; width: 1px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ""; position: absolute; left: 1px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); }
.timeline li[data-kind="close"]::after { border-color: var(--done); background: var(--done); }
.timeline li[data-kind="create"]::after { border-color: var(--accent); }
.timeline li[data-kind="return"]::after { border-color: var(--danger); }
.timeline li[data-kind="delete"]::after { border-color: var(--danger); background: var(--danger); }
.timeline li[data-kind="amend"]::after { border-color: var(--active); }
.timeline .t-head { font-size: 13px; }
.timeline .t-head b { font-weight: 600; }
.timeline .t-when { font-size: 12px; color: var(--ink-3); }
.changes { margin: 7px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; }
.changes dt { color: var(--ink-3); }
.changes dd { margin: 0; overflow-wrap: anywhere; }
.changes del { color: var(--ink-3); }
.changes ins { text-decoration: none; color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ charts (components/charts.js) */
.chart { width: 100%; height: auto; max-height: 300px; display: block; overflow: visible; }
.chart text { fill: var(--ink-3); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .bar-done { fill: var(--done); }
.chart .bar-open { fill: var(--pending); }
.chart .bar-accent { fill: var(--accent); }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart .line-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.chart .target { stroke: var(--brand-gold); stroke-dasharray: 5 4; stroke-width: 1.5; }
.chart rect:hover { opacity: .85; }
.legend-inline { display: flex; gap: 14px; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; }
.legend-inline i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.hbars { display: flex; flex-direction: column; gap: 12px; }
.hbar { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) 70px; gap: 12px; align-items: center; font-size: 13px; }
.hbar .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.hbar .track-bg { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; display: flex; }
.hbar .fill { height: 100%; background: var(--done); }
.hbar .fill.open { background: var(--pending); }
.hbar .fill.accent { background: var(--accent); }
.hbar .fill.danger { background: var(--danger); }
.hbar .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
/* A heatmap with many columns can be wider than a phone: the grid then scrolls inside its panel. */
.heatmap { display: grid; grid-template-columns: 40px repeat(var(--cols), minmax(18px, 1fr)); gap: 3px; font-size: 11px; color: var(--ink-3); overflow-x: auto; overscroll-behavior-x: contain; }
.heatmap .hm { aspect-ratio: 1.4; border-radius: 4px; background: var(--surface-2); }
.heatmap .hl { display: flex; align-items: center; }
.heatmap .hh { text-align: center; }

/* ------------------------------------------------------------------ sign in (JPMC frame, logsheet artwork) */
.login-stage { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 36px; }
.login-frame { width: 100%; max-width: 1120px; display: grid; grid-template-columns: 1fr 1fr; min-height: 700px; padding: 7px; background: var(--surface); border-radius: 30px; box-shadow: var(--shadow); overflow: hidden; animation: enter .7s var(--curve) both; }
@keyframes enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.login-visual {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; padding: 33px 36px; color: #fff; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(ellipse at 95% 65%, rgba(225, 160, 123, .27), transparent 60%), linear-gradient(155deg, #682435, #8f3045 56%, #752a3a);
  box-shadow: inset 0 0 0 2px var(--brand-gold);
}
[data-theme="dark"] .login-visual { background: radial-gradient(ellipse at 95% 65%, rgba(225, 160, 123, .14), transparent 60%), linear-gradient(155deg, #42202e, #672c3c 56%, #432733); }
.login-visual::after { content: ""; position: absolute; width: 600px; height: 600px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 50%; left: 110px; top: 180px; z-index: -1; }
.visual-wordmark { display: flex; align-items: center; gap: 14px; font-size: 9px; letter-spacing: .19em; color: #efdce2; font-weight: 600; }
.monogram { font-size: 22px; font-weight: 700; letter-spacing: -.05em; color: #fff; }
.monogram span { display: inline-block; width: 5px; height: 5px; background: #f6c77b; border-radius: 50%; margin-left: 3px; }
.visual-main { transform: translateY(-20px); }
.visual-eyebrow { font-size: 10px; letter-spacing: .17em; color: #ead2d8; font-weight: 600; }
.visual-main h1 { font-size: clamp(2.7rem, 4.6vw, 3.9rem); line-height: 1.05; letter-spacing: -.055em; margin: 20px 0 22px; font-weight: 550; }
.visual-main p { font-size: 14px; line-height: 1.75; color: #efdce1; }
/* The artwork: an illustrative logsheet, with rows of test code, result chips, and the Done and Verified ticks
   (app.js SHEET_ART). Not real results. */
.login-sheet { position: relative; max-width: 340px; margin: 30px 0 0; padding: 20px 22px 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); box-shadow: inset 0 1px rgba(255, 255, 255, .2); }
.login-sheet .ls-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #ead2d8; }
.login-sheet .ls-head b { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #fff; }
.ls-cols, .ls-rows li { display: grid; grid-template-columns: 40px minmax(0, 1fr) 34px 50px; gap: 10px; align-items: center; }
.ls-cols { padding-bottom: 7px; border-bottom: 1px solid rgba(255, 255, 255, .16); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #d7bcc4; }
.ls-cols span:nth-child(n + 3) { text-align: center; }
.ls-rows { margin: 0; padding: 0; list-style: none; }
.ls-rows li { min-height: 33px; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ls-rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.ls-rows b { font-size: 12px; font-weight: 700; letter-spacing: .03em; color: #fff; }
.ls-res { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.ls-chip { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, .13); color: #f4e6ea; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ls-chip.pos { background: #f6d49e; color: #5b2232; }
.ls-tick { justify-self: center; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .5); color: #fff; }
.ls-tick svg { width: 11px; height: 11px; stroke-width: 2.6; }
.ls-tick.ok { border-color: #f6d49e; background: #f6d49e; color: #7b2c3e; }
.ls-tick.wait { border-style: dashed; border-color: #f6d49e; box-shadow: 0 0 0 4px rgba(246, 212, 158, .18); }
.login-panel { padding: 30px 43px 25px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.login-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.login-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font-size: 13px; font-weight: 650; }
.login-brand img { width: 44px; height: 44px; object-fit: contain; }
.login-form-area { padding: 44px 3px 28px; text-align: center; }
.login-form-area .field { text-align: left; margin-bottom: 20px; }
.login-form-area h2 { font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: -.045em; }
.login-intro { font-size: 14px; color: var(--ink-3); margin: 15px 0 30px; }
.login-form-area .notice { text-align: left; margin-bottom: 20px; }
.login-submit { width: 100%; position: relative; min-height: 52px; padding: 8px 54px; font-size: 14px; }
.login-submit .button-icon { position: absolute; right: 10px; }
.account-help { color: var(--ink-3); font-size: 12px; line-height: 1.8; margin-top: 24px; }
.account-help strong { font-weight: 500; color: var(--ink); }
.login-footer { display: flex; justify-content: space-between; gap: 10px; align-items: center; color: var(--ink-3); font-size: 10px; }
.login-footer > span { display: flex; align-items: center; gap: 5px; }
.login-footer svg { width: 15px; height: 15px; color: var(--icon); }
.login-footer small { font-size: 10px; text-align: right; line-height: 1.7; }
.password-control { position: relative; }
.password-control .input { padding-right: 52px; }
.password-control .btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: inline; }
[data-theme="dark"] .theme-toggle .moon { display: none; }

/* compact password card (first sign-in and account security) */
.password-stage { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 28px 16px; }
.password-panel { width: min(100%, 520px); padding: 36px 38px 32px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.password-card-heading { text-align: center; margin-bottom: 22px; }
.password-card-icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 19px; border-radius: 18px; background: var(--accent-soft); color: var(--icon); }
.password-card-icon svg { width: 25px; height: 25px; }
.password-card-heading h1 { font-size: clamp(1.55rem, 2.4vw, 1.85rem); line-height: 1.2; letter-spacing: -.035em; }
.password-card-intro { max-width: 390px; margin: 11px auto 0; color: var(--ink-3); font-size: 13px; line-height: 1.7; }
.password-panel .field { margin-bottom: 18px; }
.password-card-actions { display: grid; gap: 8px; margin-top: 6px; }
.password-card-actions .btn { width: 100%; min-height: 50px; }
.password-card-actions .btn.quiet { min-height: 42px; color: var(--ink-3); }

.notice { padding: 13px 16px; border-radius: 13px; font-size: 13px; line-height: 1.6; background: var(--surface-2); color: var(--ink-2); }
/* .refusal looks like .error for what the server refused (a 409, a rule about the whole form): showErrors clears every
   .error in a form before it shows the new messages, so a form's own notice cannot be one. */
.notice.error, .notice.refusal { background: var(--accent-soft); color: var(--danger); }
.notice.warn { background: var(--active-soft); color: var(--active-ink); }
.notice.info { background: var(--info-soft); color: var(--info); }
/* A result returned for correction is red everywhere (its pill, its figure, the callout), so its reason is too. Not
   .error: showErrors would remove it from the correction form. */
.notice.returned { background: var(--danger-soft); color: var(--danger); }
.list-note { display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 16px; }
.list-note svg { width: 15px; height: 15px; flex: none; margin-top: 3px; }

/* ------------------------------------------------------------------ misc */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.perm-matrix th, .perm-matrix td { text-align: center; }
.perm-matrix th:first-child, .perm-matrix td:first-child { text-align: left; }
.temp-pass { font-family: Consolas, "Cascadia Mono", monospace; font-size: 18px; letter-spacing: .04em; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); user-select: all; margin-top: 8px; color: var(--ink); }
.inline-list { display: flex; flex-wrap: wrap; gap: 6px; }
.spinner { width: 18px; height: 18px; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-page { display: grid; place-items: center; min-height: 40vh; }
.noscript { padding: 24px; }
.help-grid { display: grid; grid-template-columns: max-content 1fr; gap: 9px 16px; font-size: 13px; align-items: center; }

/* ------------------------------------------------------------------ spacing contract
   Everything inside a panel sits on the panel inset: 26px (18px on phones); tables keep a 20px gutter. */
.panel > .panel-body:first-child { padding-top: 24px; }
.panel > .table-wrap { margin: 0 20px 20px; }
.panel > .table-wrap:first-child { margin-top: 20px; }
.panel > .pager { margin: 0 26px; padding-bottom: 18px; }
.list-panel > .table-wrap, .list-panel > .table-wrap:first-child { margin: 0; }
.list-panel > .pager { margin: 8px 0 0; padding-bottom: 0; }
.panel > .panel-note:first-child { padding-top: 22px; }
.panel > .empty { padding: 36px 26px; }
.dialog form.body { color: var(--ink); padding-bottom: 28px; }
.dialog .body .form-actions { padding: 0; margin: 22px 0 0; }
.dialog .body .hint-line { font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.account-card { display: flex; gap: 16px; align-items: center; }
.account-card .avatar { width: 48px; height: 48px; font-size: 15px; border-radius: 14px; }
.account-card b { display: block; font-size: 16px; font-weight: 650; }
.account-card span { font-size: 13px; color: var(--ink-3); }
.stack { display: grid; gap: 24px; }
.narrow-page { max-width: 760px; }

/* ------------------------------------------------------------------ drill-down: every figure opens the records behind it */
.strip > a { cursor: pointer; }
.strip > a:hover .label { color: var(--ink-2); }
.strip > a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.strip .go { position: absolute; right: 20px; bottom: 18px; width: 16px; height: 16px; color: var(--ink-3); opacity: 0; transition: opacity .2s var(--curve), transform .2s var(--curve); }
.strip .go svg { width: 16px; height: 16px; }
.strip > a:hover .go, .strip > a:focus-visible .go { opacity: 1; transform: translate(2px, -2px); }
a.hbar { color: inherit; text-decoration: none; margin: -5px -10px; padding: 5px 10px; border-radius: 10px; transition: background .2s var(--curve); }
a.hbar:hover, a.hbar:focus-visible { background: var(--surface-2); }
a.hbar:hover .lbl, a.hbar:focus-visible .lbl { color: var(--accent); }
.chart a { cursor: pointer; }
.chart a:hover rect, .chart a:focus rect { opacity: .78; }
.chart a:focus { outline: none; }
.chart a:focus-visible rect { stroke: var(--focus); stroke-width: 2; }
.chart a:hover text { fill: var(--accent); }
.heatmap a.hm { display: block; }
.heatmap a.hm:hover, .heatmap a.hm:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.drill { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 18px; padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--secondary-bg); color: var(--secondary-text); font-size: 12px; }
.drill .lead { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; margin-right: 4px; }
.drill .lead svg { width: 15px; height: 15px; }
.drill .chip { background: var(--surface); color: var(--ink); }
.drill .btn { margin-left: auto; }

/* ------------------------------------------------------------------ results awaiting verification (top-bar chip, app.js)
   .live-status is the chip; it is quiet when everything is verified and gold while results wait. */
.live-status { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--done-soft); color: var(--done); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.live-status:hover { filter: brightness(.97); }
.live-status .pulse { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse 2s infinite; }
.live-status.quiet { background: var(--surface-2); color: var(--ink-3); }
.live-status.quiet .pulse { animation: none; opacity: .6; }
.live-status.waiting { background: var(--active-soft); color: var(--active-ink); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ------------------------------------------------------------------ my account (HR layout: summary beside the forms) */
.avatar.has-photo { overflow: hidden; background: var(--surface-2); }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.account-layout { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.65fr); gap: 24px; align-items: start; }
.account-summary { position: sticky; top: calc(var(--topbar) + 24px); min-width: 0; max-height: calc(100vh - var(--topbar) - 48px); overflow-y: auto; overscroll-behavior: contain; padding: 32px 26px 26px; text-align: center; }
.account-photo { display: inline-grid; place-items: center; width: 104px; height: 104px; margin-bottom: 18px; overflow: hidden; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 32px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 0 0 5px var(--surface), 0 0 0 6px var(--line); }
.account-photo img, .account-photo canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.account-photo.sm { width: 76px; height: 76px; margin: 0; flex: none; font-size: 24px; box-shadow: 0 0 0 4px var(--surface); }
.account-summary h2 { font-size: 20px; overflow-wrap: anywhere; }
.account-role { margin: 6px 0 14px; font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
.account-meta { display: grid; gap: 16px; margin: 26px 0 0; text-align: left; }
.account-meta dt { margin-bottom: 3px; font-size: 11px; color: var(--ink-3); }
.account-meta dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.account-meta dd small { display: block; font-size: 12px; color: var(--ink-3); }
.account-access, .account-nav { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); text-align: left; }
.account-access h3, .account-nav h3 { margin-bottom: 10px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.account-access summary { display: flex; align-items: center; gap: 8px; min-height: 30px; list-style: none; cursor: pointer; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.account-access summary::-webkit-details-marker { display: none; }
.account-access summary .count { padding: 1px 8px; border-radius: 999px; background: var(--surface-2); letter-spacing: 0; color: var(--ink-2); }
.account-access summary svg { width: 15px; height: 15px; margin-left: auto; color: var(--icon); transition: transform .2s var(--curve); }
.account-access[open] summary svg { transform: rotate(180deg); }
.account-access summary:hover { color: var(--ink); }
.account-access[open] ul { margin-top: 10px; }
.account-access ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-2); }
.account-access li { display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.account-access li svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--done); }
.account-nav a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border-radius: 9px; color: var(--ink-2); font-size: 13px; font-weight: 600; text-decoration: none; }
.account-nav a:hover { background: var(--secondary-bg); color: var(--ink); }
.account-nav a svg { width: 16px; height: 16px; color: var(--icon); }
.account-note { margin-top: 20px; font-size: 12px; line-height: 1.7; color: var(--ink-3); text-align: left; }
.account-stack { display: grid; gap: 24px; min-width: 0; }
.account-panel { min-width: 0; padding: 30px 31px; scroll-margin-top: calc(var(--topbar) + 24px); }
.account-panel .panel-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 22px; }
.account-panel .panel-heading .eyebrow { margin-bottom: 6px; }
.account-panel .panel-heading h2 { font-size: 20px; letter-spacing: -.02em; }
.account-panel .form-actions { margin-top: 22px; }
.account-hint { margin-top: 16px; font-size: 12px; line-height: 1.7; color: var(--ink-3); }
.photo-row { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; padding: 16px 18px; border-radius: 16px; background: var(--surface-2); }
.photo-row.over { outline: 2px dashed var(--accent); outline-offset: 2px; }
.photo-row .grow { flex: 1; min-width: 0; }
.photo-row b { display: block; font-size: 14px; }
.photo-row p { margin-top: 3px; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
.photo-row .inline-list { gap: 8px; margin-top: 12px; }
.password-control [data-reveal] svg { width: 16px; height: 16px; }
.strength { display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.strength .bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; width: 120px; flex: none; }
.strength .bar i { height: 5px; border-radius: 3px; background: var(--pending); }
.strength[data-score="1"] .bar i:nth-child(-n+1) { background: var(--danger); }
.strength[data-score="2"] .bar i:nth-child(-n+2) { background: var(--active); }
.strength[data-score="3"] .bar i:nth-child(-n+3), .strength[data-score="4"] .bar i { background: var(--done); }
.strength[data-score="1"] .text { color: var(--danger); }
.hint.caps { display: flex; align-items: center; gap: 6px; color: var(--active-ink); }
.hint.caps svg { width: 14px; height: 14px; }
.hint.match.ok { color: var(--done); }
.hint.match.no { color: var(--danger); }
.device-list, .event-list { margin: 0; padding: 0; list-style: none; }
.device, .event { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.device:first-child, .event:first-child { padding-top: 0; }
.device:last-child, .event:last-child { border-bottom: 0; padding-bottom: 0; }
.device .icon, .event .icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--surface-2); color: var(--icon); }
.device .icon svg, .event .icon svg { width: 18px; height: 18px; }
.event .icon { width: 34px; height: 34px; border-radius: 50%; }
.event.warn .icon { background: var(--danger-soft); color: var(--danger); }
.device .grow, .event .grow { flex: 1; min-width: 0; }
.device b, .event b { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.event b { font-size: 13px; }
.device .meta, .event .meta { margin-top: 2px; font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
.event .when { flex: none; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.pref-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.pref-row > div:first-child { flex: 1 1 260px; min-width: 0; }
.pref-row:first-of-type { padding-top: 0; }
.pref-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pref-row b { font-size: 14px; font-weight: 600; }
.pref-row p { margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.account-panel .strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.account-panel .strip > * { background: var(--surface-2); box-shadow: none; }

/* ------------------------------------------------------------------ compact panels and the team list
   .cc-panel tightens the insets for side panels and short lists; .team-list is people with a bar each. */
.cc-panel .panel-head { padding: 20px 22px 10px; }
.cc-panel .panel-body { padding: 4px 22px 20px; }
.cc-panel .panel-note { padding-left: 22px; padding-right: 22px; }
.cc-panel > .table-wrap { margin: 0 16px 16px; }
.cc-panel .row-link { padding: 12px 22px; }
.cc-panel .row-link .grow { min-width: 0; }
.cc-panel .row-link .side { flex: none; }
.team-list { margin: 0; padding: 4px 22px 18px; list-style: none; display: grid; gap: 12px; }
.team-list li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.team-list .avatar { width: 34px; height: 34px; font-size: 11px; border-radius: 11px; }
.team-list .grow { flex: 1; min-width: 0; }
.team-list b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-list .grow > span { display: block; font-size: 11.5px; color: var(--ink-3); }
.team-list .tb { height: 4px; margin-top: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.team-list .tb i { display: block; height: 100%; border-radius: inherit; background: var(--done); }

/* Display mode: a page on a wall screen, without the app chrome. */
.display-mode .sidebar, .display-mode .topbar, .display-mode .workspace-footer, .display-mode .bottom-nav { display: none !important; }
.display-mode .shell { display: block; }
.display-mode .content { max-width: none; padding: 22px 28px 28px; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .search-trigger { width: 220px; }
  .access-badge span { display: none; }
}
@media (max-width: 1440px) {
  .topbar, .workspace-footer { padding-left: 30px; padding-right: 30px; }
  .content { padding: 26px 30px 40px; }
  .list-panel { padding: 20px; }
}
@media (max-width: 1060px) {
  .login-panel { padding: 28px 31px 25px; }
  .login-visual { padding: 32px; }
}
@media (max-width: 900px) {
  :root { --topbar: 72px; }
  .shell { display: block; }
  /* Phones and tablets use the bottom bar and its More sheet instead (bottom navigation, below). */
  .sidebar { display: none; }
  .topbar { padding: 0 16px; }
  .search-trigger { width: 42px; padding: 0; justify-content: center; }
  .search-trigger span, .search-trigger kbd, .topbar [data-shortcuts], .access-badge { display: none; }
  /* The top bar is narrow here: the page name gives way first; the buttons keep their size. */
  .topbar-left { flex: 1 1 0; overflow: hidden; }
  .topbar-actions { flex: 0 1 auto; }
  .topbar-actions > * { flex-shrink: 0; }
  .content { padding: 22px 16px 34px; }
  .workspace-footer { padding: 0 16px 20px; font-size: 10px; }
  .page-head { flex-wrap: wrap; margin-bottom: 22px; }
  .page-head .actions { flex-shrink: 1; min-width: 0; max-width: 100%; }
  .page-head h1 { font-size: 28px; }
  .page-head .sub { font-size: 14px; }
  .list-panel, .filter-panel { padding: 18px 16px; }
  .panel-head { padding: 18px 18px 10px; }
  .panel-body { padding: 4px 18px 20px; }
  .row-link { padding: 13px 18px; }
  .panel-note { padding: 2px 18px 18px; }
  .panel-foot { padding: 12px 18px 16px; }
  .toolbar .search-box { width: 100%; }
  .toolbar > select.input, .toolbar > .btn[data-dates] { flex: 1 1 40%; min-width: 0; max-width: none !important; }
  .form-grid, .kv, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .form-grid .span-2, .kv .span-2 { grid-column: auto; }
  .login-stage { padding: 22px 16px; align-items: start; }
  .login-frame { display: block; max-width: 460px; min-height: 0; padding: 0; border-radius: 24px; }
  .login-visual { display: none; }
  .login-panel { padding: 27px 26px; }
  .login-form-area { padding: 40px 0 30px; }
  .login-form-area h2 { font-size: 28px; }
  .login-footer { flex-direction: column; gap: 8px; }
  .login-footer small { text-align: center; }
  .drawer { border-radius: 0; }
  .drawer-head, .drawer-section, .drawer-foot { padding-left: 18px; padding-right: 18px; }
  .drawer .tabs { padding: 12px 18px; }
  .hide-mobile { display: none !important; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .strip > * { padding: 18px; }
  .strip .value { font-size: 24px; }
  .bulk-bar { left: 50%; }
}
@media (max-width: 640px) {
  table.data.cards thead { display: none; }
  table.data.cards, table.data.cards tbody, table.data.cards tr, table.data.cards td { display: block; width: 100%; }
  table.data.cards tr { padding: 14px 4px; border-bottom: 1px solid var(--line); }
  table.data.cards td { border: 0; padding: 2px 0 !important; }
  table.data.cards td[data-optional] { display: none; }
  .drawer-head { flex-wrap: wrap; }
  .drawer-head > .avatar { display: none; }
  .drawer-head > .grow { order: 2; flex-basis: 100%; }
  .drawer-head > div:last-child { order: 1; margin-left: auto; }
  .ws-state { gap: 6px; }
  .password-panel { padding: 29px 25px 25px; }
}

@media (max-width: 900px) {
  .panel > .table-wrap { margin: 0 12px 14px; }
  .panel > .table-wrap:first-child { margin-top: 12px; }
  .panel > .pager { margin: 0 18px; }
  .list-panel > .table-wrap, .list-panel > .table-wrap:first-child { margin: 0; }
  .list-panel > .pager { margin: 8px 0 0; }
  .live-status .label { display: none; }
  .live-status { padding: 0 11px; }
  .sticky-actions { border-radius: 20px; padding: 12px 14px; }
  .drill .btn { margin-left: 0; }
}

@media (max-width: 1000px) {
  .account-layout { grid-template-columns: minmax(0, 1fr); }
  .account-summary { position: static; max-height: none; overflow: visible; }
  .account-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .account-panel { padding: 22px 18px; }
  .account-summary { padding: 26px 18px 20px; }
  .account-meta { grid-template-columns: minmax(0, 1fr); }
  .photo-row { flex-wrap: wrap; gap: 14px; }
  .device { flex-wrap: wrap; }
  .device .btn { margin-left: 54px; }
  .event .when { display: none; }
  .account-panel .form-actions .btn { width: 100%; }
}
@media (max-width: 900px) {
  .demo-badge { margin-left: 8px; padding: 0 8px; font-size: 10px; }
  .demo-badge svg { display: none; }
  .cc-panel .panel-head { flex-wrap: wrap; }
  .cc-panel .panel-head .actions { margin-left: 0; }
  [data-display] { display: none !important; }
}
/* ------------------------------------------------------------------ audit trail */
.audit-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.audit-kpis > * { padding: 18px 18px 16px; border-top: 3px solid transparent; }
.audit-kpis > [data-tone="danger"] { border-top-color: var(--danger); }
.audit-kpis > [data-tone="warning"] { border-top-color: var(--active); }
.audit-kpis > .on, .audit-kpis > .on:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); box-shadow: inset 0 0 0 2px var(--accent), var(--shadow-card); }
.audit-kpis > .on .label { color: var(--accent); font-weight: 600; }
.audit-kpis .value { font-size: 26px; padding-right: 34px; }
.audit-kpis .metric-icon { top: 16px; right: 14px; width: 28px; height: 28px; }
.audit-kpis .metric-icon svg { width: 15px; height: 15px; }
.audit-kpis .trend { margin-top: 6px; padding-right: 8px; font-size: 11.5px; line-height: 1.45; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sensitive slices must stand apart from the bars: gold on burgundy in light, rose on gold in dark. */
.audit-overview { --bar: color-mix(in srgb, var(--accent) 62%, var(--surface)); --sens: var(--active); display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 20px; margin: 20px 0 24px; align-items: stretch; }
[data-theme="dark"] .audit-overview { --sens: var(--danger); }
.audit-overview > .panel { display: flex; flex-direction: column; }
.audit-overview .panel-head .actions { gap: 14px; }
.audit-overview .legend-inline .sw-events { background: var(--bar); }
.audit-overview .legend-inline .sw-sensitive { background: var(--sens); }

.activity-bars { flex: 1 1 auto; display: flex; align-items: flex-end; gap: 3px; min-height: 132px; margin: 6px 22px 0; padding-bottom: 1px; border-bottom: 1px solid var(--line); }
.activity-bars .slot { flex: 1 1 0; min-width: 0; align-self: stretch; display: flex; align-items: flex-end; border-radius: 5px 5px 0 0; }
.activity-bars a.slot { cursor: pointer; }
.activity-bars a.slot:hover { background: var(--surface-2); }
.activity-bars a.slot:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.activity-bars .bar { position: relative; display: flex; align-items: flex-end; width: 100%; max-width: 26px; margin: 0 auto; border-radius: 4px 4px 1px 1px; overflow: hidden;
  background: var(--bar); transition: background .2s var(--curve); }
.activity-bars .slot:hover .bar { background: var(--accent); }
.activity-bars .bar i { display: block; width: 100%; background: var(--sens); }
.activity-axis { display: flex; justify-content: space-between; gap: 12px; padding: 8px 22px 20px; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.activity-axis .hint-mid { text-align: center; }

.person-filter { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 6px 8px; margin: -6px -8px; border: 0; border-radius: 11px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; box-sizing: content-box; }
.person-filter:hover { background: var(--surface-2); }
.person-filter[aria-pressed="true"] { background: var(--accent-soft); }
.team-list .person-filter .tb { display: block; }

.audit-filters { display: grid; gap: 14px; }
.audit-filters .chips { margin: 0; }
.audit-filters .toolbar .search-box { flex: 1 1 260px; width: auto; }
.audit-filters .toolbar > select.input { width: 210px; }
.date-range { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13px; }
.date-range .input { width: auto; }
.category-chips .toggle-chip { white-space: nowrap; }
.category-chips .toggle-chip svg { width: 14px; height: 14px; }
.category-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.category-chips .spacer { flex: 1; }
.cat-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 8px 0 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: 600 12px var(--font); color: var(--ink-2); cursor: pointer; }
.cat-chip svg { width: 14px; height: 14px; color: var(--icon); }
.cat-chip .tnum { min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); color: var(--ink-3); font-size: 11px; text-align: center; }
.cat-chip:hover { border-color: var(--accent); color: var(--accent); }
.cat-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.cat-chip[aria-pressed="true"] .tnum { background: var(--surface); color: var(--accent); }
.cat-chip:first-child { padding-left: 15px; }

.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--active); box-shadow: 0 0 0 3px var(--active-soft); }
.btn[data-live] .live-dot { animation: live-pulse 2s infinite var(--curve); }
.btn[data-live].paused .live-dot { animation: none; background: var(--pending); box-shadow: 0 0 0 3px var(--surface-2); }
@keyframes live-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--active-soft); } 50% { box-shadow: 0 0 0 6px transparent; } }

.fresh-banner { position: sticky; top: calc(var(--topbar) + 12px); z-index: 6; display: flex; align-items: center; gap: 8px; width: fit-content; margin: 0 auto 14px; padding: 9px 18px;
  border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 600 13px var(--font); box-shadow: var(--shadow-pop); cursor: pointer; }
.fresh-banner svg { width: 15px; height: 15px; }
.fresh-banner:hover { background: var(--accent-hover); }

.audit-feed { overflow: clip; }
.day-head { position: sticky; top: var(--topbar); z-index: 2; display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 14px 26px; background: var(--surface-2);
  border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 650; color: var(--ink); }
.day-group + .day-group .day-head { border-top: 1px solid var(--line); }
.day-head small { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.day-head .count { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.event-list-feed { list-style: none; margin: 0; padding: 0; }
.event-row { position: relative; display: grid; grid-template-columns: 52px 34px minmax(0, 1fr) 20px; grid-template-areas: "time who main go"; gap: 14px; align-items: start;
  padding: 12px 22px 12px 26px; cursor: pointer; outline: none; transition: background .2s var(--curve); }
.event-row + .event-row { box-shadow: 0 -1px 0 var(--line); }
.event-row:hover { background: var(--surface-2); }
.event-row[aria-selected="true"], .event-row:focus-visible { background: var(--accent-soft); }
.event-row::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.event-row.sensitive::before { background: var(--active); }
.event-row.failed::before { background: var(--danger); }
.ev-time { grid-area: time; padding-top: 8px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.ev-who { grid-area: who; }
.ev-who .avatar, .avatar.sm { width: 34px; height: 34px; font-size: 11px; border-radius: 11px; }
.avatar.system { background: var(--surface-2); color: var(--ink-3); }
.avatar.system svg { width: 16px; height: 16px; }
.event-row.failed .avatar.system { background: var(--danger-soft); color: var(--danger); }
.ev-main { grid-area: main; min-width: 0; }
.ev-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev-text b { font-weight: 650; color: var(--ink); }
.ev-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.ev-cat { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--cat, var(--ink-3)); }
.ev-cat svg { width: 13px; height: 13px; }
.ev-ip { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11.5px; }
.ev-go { grid-area: go; align-self: center; display: grid; place-items: center; color: var(--ink-3); opacity: 0; transition: opacity .2s var(--curve), transform .2s var(--curve); }
.ev-go svg { width: 16px; height: 16px; }
.event-row:hover .ev-go, .event-row[aria-selected="true"] .ev-go { opacity: 1; transform: translateX(2px); }
.rec-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 260px; min-height: 22px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font: 600 12px var(--font); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.rec-chip svg { width: 12px; height: 12px; flex: none; color: var(--icon); }
.rec-chip:hover { border-color: var(--accent); color: var(--accent); }
.rec-chip.static { cursor: default; }
.rec-chip.static:hover { border-color: var(--line); color: var(--ink-2); }
:is(.ev-cat, .event-icon, .mini-events .dot)[data-cat="security"] { --cat: var(--accent); }
:is(.ev-cat, .event-icon, .mini-events .dot)[data-cat="logsheet"] { --cat: var(--info); }
:is(.ev-cat, .event-icon, .mini-events .dot)[data-cat="tests"] { --cat: var(--done); }
:is(.ev-cat, .event-icon, .mini-events .dot)[data-cat="people"] { --cat: var(--ink-2); }
:is(.ev-cat, .event-icon, .mini-events .dot)[data-cat="settings"] { --cat: var(--ink-3); }
.feed-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 26px 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }

.event-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, var(--cat, var(--accent)) 12%, var(--surface)); color: var(--cat, var(--accent)); }
.event-icon svg { width: 20px; height: 20px; }
.event-foot { flex-wrap: wrap; }
.event-kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
.event-kv > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.event-kv > div:first-child { padding-top: 0; }
.event-kv > div:last-child { border-bottom: 0; padding-bottom: 0; }
.event-kv dt { margin: 0; }
.who-cell { display: flex; align-items: center; gap: 10px; white-space: normal !important; }
.who-cell b { display: block; font-weight: 600; }
.who-cell small { display: block; font-size: 12px; color: var(--ink-3); }
.diff { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.diff th, .diff td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.diff thead th { padding-top: 0; font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.diff tbody th { width: 32%; font-weight: 600; color: var(--ink-2); }
.diff tr > :first-child { padding-left: 0; }
.diff tr > :last-child { padding-right: 0; }
.diff tbody tr:last-child > * { border-bottom: 0; }
.diff del, .diff ins { display: inline; padding: 1px 6px; border-radius: 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.diff del { background: var(--danger-soft); color: var(--danger); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.diff ins { background: var(--done-soft); color: var(--done); text-decoration: none; }
.mini-events { list-style: none; margin: 0 -10px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.mini-events button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; color: var(--ink-2); font: 13px/1.45 var(--font); text-align: left; cursor: pointer; }
.mini-events button:hover { background: var(--surface-2); }
.mini-events .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-events b { color: var(--ink); font-weight: 600; }
.mini-events .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cat, var(--ink-3)); }
.mini-events time { flex: none; font-size: 11.5px; color: var(--ink-3); }

@media (max-width: 1300px) {
  .audit-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1060px) {
  .audit-overview { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .audit-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .audit-kpis .value { font-size: 22px; }
  .audit-kpis .trend { white-space: normal; }
  .audit-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .audit-overview .panel-head { flex-wrap: wrap; }
  .audit-overview .panel-head .actions { margin-left: 0; }
  .activity-axis .hint-mid { display: none; }
}
@media (max-width: 640px) {
  .audit-filters .segmented { display: flex; width: 100%; }
  .audit-filters .segmented button { flex: 1 1 0; padding: 0 4px; }
  .audit-filters .toolbar > select.input { flex: 1 1 100%; width: auto; }
  .date-range { display: flex; width: 100%; }
  .date-range .input { flex: 1 1 0; min-width: 0; }
  .category-chips .spacer { display: none; }
  .event-row { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "who main time"; gap: 12px; padding: 14px 18px; }
  .ev-time { padding-top: 2px; }
  .ev-go { display: none; }
  .ev-ip { display: none; }
  .day-head { padding: 13px 18px; }
  .feed-foot { padding: 14px 18px 18px; }
  .feed-foot .btn { width: 100%; justify-content: center; }
  .drawer-head.event-head { flex-wrap: nowrap; }
  .event-head > .event-icon { display: none; }
  .event-head > .grow { order: 0; flex-basis: auto; }
  .event-kv > div { grid-template-columns: 64px minmax(0, 1fr); }
  .event-foot .btn { flex: 1 1 auto; justify-content: center; }
}

/* ------------------------------------------------------------------ people and access */
.back-link { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 16px; font-size: 13px; font-weight: 600; color: var(--ink-3); text-decoration: none; }
.back-link svg { width: 16px; height: 16px; }
.back-link:hover { color: var(--accent); }
.audit-kpis > [data-tone="good"] { border-top-color: var(--done); }
.role-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* A person's page has three work figures: three across, then two on tablets and phones (the third spans the row). */
.person-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.people-kpis, .role-kpis { margin-bottom: 22px; }
.people-table th.num-col { text-align: right; }
.people-filters { display: grid; gap: 14px; }
.people-filters .toolbar .search-box { flex: 1 1 280px; width: auto; }
.people-filters .toolbar > select.input { width: 220px; }
.list-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 14px; font-size: 13px; color: var(--ink-2); }
.list-summary > span > svg { width: 14px; height: 14px; margin-right: 7px; vertical-align: -2px; color: var(--icon); }
.list-summary b { font-weight: 650; color: var(--ink); }
.list-panel.refreshed .table-wrap, .list-panel.refreshed .empty { animation: list-in .4s var(--curve); }
@keyframes list-in { from { opacity: .25; transform: translateY(6px); } }
.category-chips .toggle-chip svg { width: 14px; height: 14px; }

.avatar-wrap { position: relative; display: inline-flex; flex: none; }
.presence-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--done); box-shadow: 0 0 0 2px var(--surface); }
.avatar-wrap > .presence-dot { position: absolute; right: -2px; bottom: -2px; }
.presence-text { display: inline-flex; align-items: center; gap: 7px; color: var(--done); font-weight: 600; }
.presence-text .presence-dot { box-shadow: 0 0 0 3px var(--done-soft); }
.role-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 11px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; white-space: nowrap; }
.role-pill svg { width: 13px; height: 13px; }
.person-cell { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.person-cell .grow { min-width: 0; }
.person-cell .name, .person-cell .sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-cell .avatar { width: 38px; height: 38px; }
.people-table td[data-col="person"] { min-width: 220px; }
.people-table .person-cell .grow { max-width: 228px; }
.people-table .num-col { text-align: right; }
.people-table th.num-col button { justify-content: flex-end; }
.people-table .row-actions { width: 1%; text-align: right; white-space: nowrap; }
.people-table tr.inactive td[data-col="person"], .people-table tr.inactive td[data-col="role"] { opacity: .62; }
.skip-list { list-style: none; margin: 12px 0 0; padding: 0; }
.skip-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.skip-list li:last-child { border-bottom: 0; }
.skip-list li > span { font-size: 12px; color: var(--ink-3); text-align: right; }
.confirm-check { margin-top: 16px; font-size: 13px; color: var(--ink); }
.paste-area { min-height: 170px; font: 12.5px/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace; resize: vertical; }
textarea.paste-area { min-height: 130px; font-family: Consolas, "Cascadia Mono", monospace; font-size: 12px; white-space: pre; }
.map-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.map-col { flex: 1 1 140px; }
.map-col .label { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.import-table { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
.import-table table.data th { position: sticky; top: 0; z-index: 1; border-radius: 0 !important; }
.import-table tr.error td { background: var(--danger-soft); }
.import-table .problems { font-size: 12px; color: var(--danger); }
.temp-pass.sm { display: inline-block; margin: 0; padding: 3px 8px; font-size: 13px; border-radius: 8px; }

.role-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.role-choice { position: relative; display: flex; gap: 12px; padding: 16px 44px 16px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); cursor: pointer; transition: border-color .2s var(--curve), background .2s var(--curve); }
.role-choice input { position: absolute; opacity: 0; pointer-events: none; }
.role-choice:hover { border-color: var(--accent); }
.role-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.role-choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.role-choice:has(input:disabled) { opacity: .55; cursor: not-allowed; }
fieldset:disabled .role-choice { cursor: default; }
fieldset:disabled .role-choice:hover { border-color: var(--line); }
fieldset:disabled .role-choice:has(input:checked):hover { border-color: var(--accent); }
.rc-body { display: grid; gap: 6px; min-width: 0; }
.rc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.rc-head b { font-size: 14px; }
.rc-desc { font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.rc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink-2); }
.rc-check { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); color: transparent; }
.rc-check svg { width: 13px; height: 13px; }
.role-choice:has(input:checked) .rc-check { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.sens { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--active-ink); white-space: nowrap; }
.sens svg { width: 12px; height: 12px; }

.perm-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px 24px; }
.perm-group h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.perm-group h4 .count { margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none; }
.perm-group ul { list-style: none; margin: 0; padding: 0; }
.perm-group li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 6px; margin: 0 -6px; border-bottom: 1px solid var(--line); border-radius: 8px; font-size: 13px; line-height: 1.5; }
.perm-group li:last-child { border-bottom: 0; }
.perm-group li .grow { flex: 1; min-width: 0; }
.perm-group .mark { display: grid; place-items: center; width: 20px; height: 20px; flex: none; margin-top: 1px; border-radius: 50%; background: var(--done-soft); color: var(--done); }
.perm-group .mark svg { width: 12px; height: 12px; }
.perm-group li.off { color: var(--ink-3); }
.perm-group li.off .mark { background: var(--surface-2); color: var(--ink-3); }
.perm-group li.gain { background: var(--done-soft); }
.perm-group li.lose { background: var(--danger-soft); }
.perm-group li.lose .grow { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.perm-group li .pill { flex: none; }

.choice-list { margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.choice-list legend { margin-bottom: 10px; padding: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.choice { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; color: var(--ink); }
.choice input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.choice b { display: block; font-size: 14px; }
.choice small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.55; color: var(--ink-3); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice.disabled { opacity: .55; cursor: not-allowed; }
.handover p { margin: 0 0 10px; color: var(--ink-2); }
.handover.sent { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 14px; background: var(--done-soft); color: var(--ink-2); }
.handover.sent > svg { width: 22px; height: 22px; flex: none; color: var(--done); }
.handover.sent p { margin: 4px 0 0; }
.temp-pass-row { display: flex; align-items: center; gap: 10px; }
.temp-pass-row .temp-pass { flex: 1; margin: 0; min-width: 0; overflow-wrap: anywhere; }

.person-head { display: flex; align-items: center; gap: 20px; padding: 24px 28px; margin-bottom: 18px; }
.avatar.xl { width: 72px; height: 72px; border-radius: 22px; font-size: 22px; }
.avatar.xl svg { width: 28px; height: 28px; }
.person-head .avatar-wrap > .presence-dot { width: 16px; height: 16px; box-shadow: 0 0 0 3px var(--surface); }
.person-title { flex: 1; min-width: 0; }
.tab svg { width: 16px; height: 16px; flex: none; }
.person-title .eyebrow { margin-bottom: 4px; }
.person-title h1 { font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.2; overflow-wrap: anywhere; }
.person-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; font-size: 13px; color: var(--ink-3); }
.person-meta span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.person-meta svg { width: 14px; height: 14px; flex: none; color: var(--icon); }
.person-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; }
.person-head > .actions { display: flex; gap: 8px; align-self: flex-start; flex: none; }
.self-note { margin: 0 0 18px; }
.person-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; align-items: start; }
.person-facts { padding: 4px 22px 22px; }
.person-facts dd { white-space: normal; }
.fact-hint { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-3); }
.feed-mini { list-style: none; margin: 0 0 6px; padding: 0; }
.feed-mini .row-link { padding: 11px 22px; align-items: flex-start; }
.feed-mini .title, .feed-mini .meta { display: block; }
.account-panel .feed-mini .row-link { margin: 0 -12px; padding: 10px 12px; border-radius: 12px; }
.feed-mini .title { white-space: normal; font-weight: 400; color: var(--ink-2); line-height: 1.5; }
.feed-mini .title b { color: var(--ink); font-weight: 600; }
.feed-mini .side { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.ev-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: color-mix(in srgb, var(--cat, var(--accent)) 12%, var(--surface)); color: var(--cat, var(--accent)); }
.ev-icon svg { width: 16px; height: 16px; }
:is(.ev-icon)[data-cat="security"] { --cat: var(--accent); }
:is(.ev-icon)[data-cat="logsheet"] { --cat: var(--info); }
:is(.ev-icon)[data-cat="tests"] { --cat: var(--done); }
:is(.ev-icon)[data-cat="people"] { --cat: var(--ink-2); }
:is(.ev-icon)[data-cat="settings"] { --cat: var(--ink-3); }
.person-feed .ev-time { line-height: 1.4; padding-top: 3px; }
.person-feed .event-row { cursor: pointer; }
.sec-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.sec-head h2 { font-size: 18px; letter-spacing: -.02em; }
.sec-head p { margin-top: 4px; font-size: 13px; line-height: 1.6; }
.sec-head > div:not(.actions) { flex: 1; min-width: 0; }
.sec-head .actions { margin-left: auto; flex: none; }
.panel-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--secondary-bg); color: var(--brand-gold-ink); }
.panel-mark svg { width: 19px; height: 19px; }
.person-form + .person-form { margin-top: 20px; }
.person-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.status-row .pill { margin-right: auto; }
hr.soft { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.access-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.access-layout .role-choices { grid-template-columns: minmax(0, 1fr); }
.access-layout fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.access-layout .form-actions .left { flex-basis: 100%; margin: 0 0 4px; font-size: 13px; color: var(--ink-2); }
.form-actions .gain { color: var(--done); font-weight: 600; }
.form-actions .lose { color: var(--danger); font-weight: 600; }

.wizard { overflow: hidden; }
.identity-card { display: flex; align-items: center; gap: 16px; padding: 22px 28px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.identity-card .grow { min-width: 0; }
.identity-card .eyebrow { margin-bottom: 4px; }
.identity-card h2 { font-size: 20px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.identity-card p { margin-top: 3px; font-size: 13px; overflow-wrap: anywhere; }
.wizard-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 18px 28px 0; list-style: none; }
.step { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 14px 6px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-3); font: 600 13px var(--font); cursor: pointer; }
.step .num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--surface-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.step .num svg { width: 14px; height: 14px; }
.step:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.step[aria-current="step"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.step[aria-current="step"] .num { background: var(--accent); color: var(--accent-ink); }
.step:disabled { opacity: .5; cursor: not-allowed; }
.wizard-body { padding: 24px 28px 28px; }
.step-title { margin-bottom: 12px; font-size: 14px; }
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.review-box { padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; }
.review-box .kv { gap: 12px 18px; }
.review-box p + p { margin-top: 8px; font-size: 13px; }
.review-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.review-head h3 { font-size: 15px; }
.save-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 13px 16px; border-radius: 13px; background: var(--surface-2); font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.save-note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--icon); }
.wizard-foot { display: flex; align-items: center; gap: 10px; padding: 16px 28px; border-top: 1px solid var(--line); background: var(--surface-2); }
.wizard-foot .spacer { flex: 1; }

.role-section { margin: 22px 0 24px; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.role-card { display: flex; flex-direction: column; gap: 16px; padding: 22px 22px 18px; cursor: pointer; text-align: left; transition: transform .3s var(--curve), box-shadow .3s var(--curve); }
.role-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(30, 39, 43, .08); }
.role-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.role-card header { display: flex; align-items: flex-start; gap: 12px; }
.role-card header .grow { flex: 1; min-width: 0; }
.role-card h3 { font-size: 16px; letter-spacing: -.01em; }
.role-card header p { margin-top: 4px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.role-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.role-mark svg { width: 19px; height: 19px; }
.role-mark.admin { background: var(--secondary-bg); color: var(--brand-gold-ink); }
.role-meter { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.role-meter .bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.role-meter .bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.role-areas { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; padding: 0; list-style: none; }
.role-areas li { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); }
.role-areas i { width: 8px; height: 8px; border-radius: 50%; background: var(--pending); }
.role-areas .some i { background: var(--active); }
.role-areas .all i { background: var(--done); }
.role-areas .all { color: var(--ink-2); }
.role-card footer { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; }
.role-card footer .spacer { flex: 1; }
.open-hint { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-weight: 600; }
.open-hint svg { width: 14px; height: 14px; }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { width: 30px; height: 30px; border-radius: 50%; font-size: 10px; letter-spacing: 0; box-shadow: 0 0 0 2px var(--surface); }
.avatar-stack .avatar + .avatar { margin-left: -5px; }
.avatar-stack .avatar.more { background: var(--surface-2); color: var(--ink-3); }
.role-card.new { align-items: center; justify-content: center; gap: 8px; min-height: 220px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); background: transparent; box-shadow: none; color: var(--ink-3); font: inherit; text-align: center; }
.role-card.new > svg { width: 26px; height: 26px; color: var(--accent); }
.role-card.new b { font-size: 15px; color: var(--ink); }
.role-card.new span { max-width: 240px; font-size: 12.5px; line-height: 1.55; }
.role-card.new:hover { border-color: var(--accent); background: var(--surface); }
.role-card.archived { opacity: .78; }
.archived-roles { margin-top: 20px; }
.archived-roles summary { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; list-style: none; }
.archived-roles summary::-webkit-details-marker { display: none; }
.archived-roles summary svg { width: 16px; height: 16px; }
.archived-roles summary .count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); font-size: 11px; text-align: center; }
.archived-roles[open] summary svg:last-child { transform: rotate(180deg); }
.compare-head { margin-bottom: 16px; }
.compare-head h2 { font-size: 18px; letter-spacing: -.02em; }
.compare-head p { margin-top: 4px; font-size: 13px; }
.matrix-wrap { max-height: 70vh; overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
.perm-matrix thead th { position: sticky; top: 0; z-index: 2; border-radius: 0 !important; text-align: center; white-space: normal; min-width: 120px; vertical-align: bottom; }
.perm-matrix thead th:first-child { left: 0; z-index: 3; text-align: left; }
.perm-matrix tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; min-width: 280px; padding: 12px 16px; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface); font-size: 13px; font-weight: 500; color: var(--ink); text-align: left; white-space: normal; }
.perm-matrix tbody th[scope="row"] .name { font-weight: 500; }
.perm-matrix tbody th[scope="row"] .sub { font-size: 11.5px; }
.perm-matrix tr.group-row th { position: sticky; left: 0; padding: 12px 16px 8px; border-radius: 0; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); text-align: left; }
.perm-matrix td { text-align: center; }
.perm-matrix tbody tr { cursor: default; }
.perm-matrix tbody tr:hover td, .perm-matrix tbody tr:hover th[scope="row"] { background: var(--hover); }
.perm-matrix td.changed, .perm-matrix tbody tr:hover td.changed { background: var(--active-soft); }
.perm-box { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.perm-box:disabled { cursor: not-allowed; }
.matrix-role { all: unset; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--ink); }
.matrix-role:hover { color: var(--accent); }
.matrix-role:focus-visible { outline: 2px solid var(--focus); border-radius: 3px; }
.perm-set { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.perm-set legend { display: flex; width: 100%; padding: 0; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.perm-set legend .count { margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none; }
.perm-switch { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.perm-set .perm-switch:last-child { border-bottom: 0; }
.perm-switch .grow { flex: 1; min-width: 0; }
.perm-switch b { font-size: 13.5px; font-weight: 600; margin-right: 6px; }
.perm-switch small { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.switch { appearance: none; -webkit-appearance: none; position: relative; width: 40px; height: 23px; flex: none; margin: 0; border-radius: 999px; background: var(--pending); cursor: pointer; transition: background .2s var(--curve); }
.switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s var(--curve); }
.switch:checked { background: var(--accent); }
.switch:checked::before { transform: translateX(17px); }
.switch:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.switch:disabled { opacity: .6; cursor: not-allowed; }
.sticky-save { position: sticky; bottom: var(--nav-clear); z-index: 2; margin: 8px 0 0; padding: 14px 0; border-top: 1px solid var(--line); background: var(--surface); }
.form-actions.tight { margin-top: 0; }
.member-list { list-style: none; margin: 0; padding: 0; }
.member-list .row-link { margin: 0 -12px; padding: 10px 12px; border-radius: 12px; }
.member-list .avatar { width: 34px; height: 34px; font-size: 11px; }
.member-list .side { font-size: 12px; }
.drawer-foot { flex-wrap: wrap; }

.role-pill .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1300px) {
  .role-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Narrower desktops: the Results count stays on each person's page, and long role names shorten. */
  .people-table td[data-col="results"], .people-table th.num-col { display: none; }
  .people-table .role-pill { max-width: 170px; }
  .people-table .person-cell .grow { max-width: 205px; }
}
/* Up to 1200 px each person is a card, so the list never scrolls sideways: tick, name and actions on the first
   line; role, status and last sign-in under the name (last sign-in gets its own line on phones). */
@media (max-width: 1200px) {
  table.data.people-table thead { display: none; }
  table.data.people-table, table.data.people-table tbody { display: block; width: 100%; }
  table.data.people-table tr { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 6px; border-bottom: 1px solid var(--line); }
  table.data.people-table tbody tr:last-child { border-bottom: 0; }
  table.data.people-table tbody tr:hover { background: var(--surface-2); }
  table.data.people-table tbody tr:hover td { background: none; }
  table.data.people-table td { display: block; width: auto !important; padding: 2px 0 !important; border: 0; }
  table.data.people-table td.pick { flex: 0 0 22px; }
  table.data.people-table td[data-col="person"] { flex: 1 1 180px; min-width: 0; max-width: none; }
  table.data.people-table .person-cell .grow { max-width: none; }
  table.data.people-table td.row-actions { order: 4; width: auto !important; margin-left: auto; }
  table.data.people-table td[data-col="role"], table.data.people-table td[data-col="status"], table.data.people-table td[data-col="last"] { order: 3; }
  table.data.people-table td[data-col="status"] .sub { display: none; }
  table.data.people-table td[data-col="last"] { margin-left: 6px; font-size: 12px; color: var(--ink-3); }
  table.data.people-table td[data-col="results"] { display: none; }
  table.data.people-table .role-pill { max-width: 240px; }
}
@media (max-width: 1060px) {
  .person-grid, .access-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .person-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .person-head { flex-wrap: wrap; padding: 20px; }
  .person-head > .actions { width: 100%; }
  .person-head > .actions .btn:not(.icon) { flex: 1; }
  .review-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .people-filters .toolbar > select.input { flex: 1 1 100%; width: auto; }
  .category-chips .spacer { display: none; }
  /* The tick box sits in the card's left margin, so every wrapped line lines up under the name. */
  table.data.people-table tr { padding: 14px 6px 14px 38px; }
  table.data.people-table td.pick { margin-left: -32px; }
  table.data.people-table td.row-actions { order: 0; margin-left: 0; }
  table.data.people-table td[data-col="last"] { flex-basis: 100%; margin-left: 0; }
  .person-head { gap: 14px; padding: 18px; align-items: flex-start; }
  .avatar.xl { width: 56px; height: 56px; border-radius: 18px; font-size: 18px; }
  .identity-card, .wizard-body, .wizard-foot { padding-left: 18px; padding-right: 18px; }
  .wizard-steps { padding: 16px 18px 0; }
  .step { flex: 1 1 auto; }
  .wizard-foot { flex-wrap: wrap; }
  .wizard-foot .btn { flex: 1 1 auto; justify-content: center; }
  .wizard-foot .spacer { display: none; }
  .identity-card .role-pill { display: none; }
  .temp-pass-row { flex-wrap: wrap; }
  .temp-pass-row .btn { width: 100%; justify-content: center; }
  .role-grid { grid-template-columns: minmax(0, 1fr); }
  .perm-matrix tbody th[scope="row"] { min-width: 190px; }
  .sec-head { flex-wrap: wrap; }
  .sec-head .actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-left: 0; padding-left: 54px; }
}

/* ------------------------------------------------------------------ settings */
.st-shell { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 22px; align-items: start; }
.st-side { position: sticky; top: calc(var(--topbar) + 16px); max-height: calc(100vh - var(--topbar) - 32px); overflow-y: auto; padding: 16px 12px 18px; }
.st-find { margin: 0 4px 12px; }
.st-find .input { width: 100%; }
.st-results { margin: 0 4px 12px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-pop); }
.st-results ul { list-style: none; margin: 0; padding: 0; }
.st-results a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 13px; }
.st-results a:hover, .st-results a:focus-visible { background: var(--hover); }
.st-results a > svg { width: 16px; height: 16px; flex: none; color: var(--icon); }
.st-results small { display: block; font-size: 11.5px; color: var(--ink-3); }
.st-results p { padding: 8px 10px; font-size: 12.5px; }
.st-nav .nav-group { margin: 18px 10px 6px; }
.st-nav a { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 8px 10px; margin-bottom: 2px; border-radius: 10px; color: var(--ink-2); font-size: 13px; font-weight: 600; text-decoration: none; }
.st-nav a > svg { width: 16px; height: 16px; flex: none; color: var(--icon); }
.st-nav a > svg:last-child:not(:first-child) { width: 13px; height: 13px; margin-left: auto; color: var(--ink-3); }
.st-nav a:hover { background: var(--hover); color: var(--ink); }
.st-nav a[aria-current="page"] { background: var(--secondary-bg); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.st-main { display: grid; gap: 20px; min-width: 0; }
.st-panel { min-width: 0; padding: 28px 30px; }
.st-panel code { padding: 1px 6px; border-radius: 6px; background: var(--surface-2); font: 12px ui-monospace, "Cascadia Mono", Consolas, monospace; }
.st-hint { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; font-size: 12.5px; color: var(--ink-3); }
.st-hint:empty { display: none; }
.st-note { font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }
.st-note svg { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; color: var(--icon); }
.st-hint svg { width: 14px; height: 14px; flex: none; color: var(--icon); }

.st-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.st-card { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; color: inherit; text-decoration: none; transition: transform .3s var(--curve), box-shadow .3s var(--curve); }
a.st-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(30, 39, 43, .08); }
a.st-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.st-card-head { display: flex; align-items: center; gap: 12px; }
.st-card-head h2 { font-size: 16px; letter-spacing: -.01em; }
.st-card-head .go { display: grid; margin-left: auto; color: var(--ink-3); opacity: 0; transition: opacity .2s var(--curve); }
.st-card-head .go svg { width: 16px; height: 16px; }
a.st-card:hover .go, a.st-card:focus-visible .go { opacity: 1; }
.st-card-lines { display: grid; gap: 9px; margin: 0; }
.st-card-lines > div { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; }
.st-card-lines dt { color: var(--ink-3); }
.st-card-lines dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.st-card-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }

.st-row { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 26px; padding: 20px 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--topbar) + 40px); }
.st-row:first-child { padding-top: 4px; }
.st-row:last-child { border-bottom: 0; }
.st-row-text label { font-size: 14.5px; font-weight: 650; color: var(--ink); }
.st-row-text p { margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.st-row-text .st-row-meta { margin-top: 8px; font-size: 12px; }
.st-row.changed .st-row-text label::after { content: "Unsaved"; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--active-soft); color: var(--active-ink); font-size: 11px; font-weight: 600; vertical-align: 2px; }
.st-row-control { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.st-row-control .error { max-width: 100%; }
.st-row-control > .input { width: 100%; }
.st-row-control .hint { font-size: 12px; color: var(--ink-3); }
.unit-input { display: flex; align-items: center; gap: 10px; }
.unit-input .input { width: 110px; font-variant-numeric: tabular-nums; }
.unit-input span { font-size: 13px; color: var(--ink-3); }
.st-row.flash { animation: st-flash 1.6s var(--curve); }
@keyframes st-flash { 0%, 40% { background: var(--secondary-bg); box-shadow: 0 0 0 12px var(--secondary-bg); } }
.st-explain { margin-top: 22px; padding: 18px 20px; border-radius: 16px; background: var(--surface-2); }
.st-explain h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; color: var(--ink-2); }
.st-explain h3 svg { width: 16px; height: 16px; color: var(--icon); }
.st-explain p { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.name-preview { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.name-preview .eyebrow { margin-bottom: 4px; }
.name-preview b { font-size: 22px; letter-spacing: -.03em; }

.st-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.st-tools .search-box { flex: 1 1 240px; }
.st-tools .search-box .input { width: 100%; }
.st-table .st-name b { font-weight: 600; }
.st-table tr.inactive .st-name { opacity: .55; }
.st-table .handle-col { width: 26px; padding-right: 0 !important; }
.drag-handle { display: inline-block; padding: 2px 4px; border-radius: 6px; color: var(--ink-3); font-size: 16px; line-height: 1; cursor: grab; user-select: none; }
.drag-handle:hover { background: var(--surface-2); color: var(--ink); }
.st-table tr.dragging { opacity: .45; }
.st-table tr.drop-before td { box-shadow: inset 0 2px 0 var(--accent); }
.st-table tr.drop-after td { box-shadow: inset 0 -2px 0 var(--accent); }
.st-table .row-actions { width: 1%; white-space: nowrap; text-align: right; }
.st-table .num-col { text-align: right; }

.st-kv { margin-bottom: 18px; }
.st-test { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.st-test .field { flex: 1 1 260px; }
[data-test-result] .notice { margin-top: 14px; display: flex; align-items: center; gap: 8px; }
[data-test-result] .notice svg { width: 16px; height: 16px; flex: none; }
.st-panel > .notice { margin-bottom: 18px; }
.st-panel .notice code { font-size: 12px; }
.st-mail-move { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.st-mail-move > span svg { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; }
.st-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.st-mail-port { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 8px; width: 100%; }
.st-mail-check { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; }
[data-mail-result] .notice { margin-top: 14px; display: flex; align-items: center; gap: 8px; }
[data-mail-result] .notice svg { width: 16px; height: 16px; flex: none; }
[data-mail-result] + .st-note { margin-top: 16px; }
.similar-note { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 0; padding: 10px 12px; font-size: 12.5px; }
.similar-note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.tone-row { display: flex; align-items: center; gap: 12px; }
.tone-row .input { flex: 1; }

@media (max-width: 1060px) {
  .st-shell { grid-template-columns: minmax(0, 1fr); }
  .st-side { position: static; max-height: none; padding: 12px; }
  .st-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .st-nav::-webkit-scrollbar { display: none; }
  .st-nav .nav-group { display: none; }
  .st-nav a { flex: none; white-space: nowrap; margin: 0; }
}
@media (max-width: 640px) {
  .st-panel { padding: 22px 18px; }
  .st-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .st-cards { grid-template-columns: minmax(0, 1fr); }
  .st-card { padding: 20px 18px; }
  .st-table .handle-col, .st-table td.handle-col { display: none; }
  /* Each item as a card: tick, name and switch; then where it is used and the actions. */
  table.data.st-table thead { display: none; }
  table.data.st-table, table.data.st-table tbody { display: block; width: 100%; }
  table.data.st-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 4px 12px 34px; border-bottom: 1px solid var(--line); }
  table.data.st-table tbody tr:last-child { border-bottom: 0; }
  table.data.st-table td { display: block; padding: 0 !important; border: 0; background: none !important; }
  table.data.st-table td.pick { flex: 0 0 22px; margin-left: -30px; }
  table.data.st-table td.handle-col { display: none; }
  table.data.st-table td.st-name { flex: 1 1 140px; min-width: 0; }
  table.data.st-table td.row-actions { width: auto; margin-left: auto; }
  table.data.st-table td.num-col { text-align: left; }
}

/* ------------------------------------------------------------------ logsheet (views/logsheet.js; components/results.js, entry-drawer.js, entry-form.js)
   Figures five across (up to eight while expired kit lots are in use, kit lots need QC or results are to notify:
   data-count), status tabs, the list as a table that turns into
   cards up to 900 px, results tinted by kind, the entry drawer and the record form. Kind colours mix into an opaque
   base (--g-sticky in glass, --surface otherwise), so they read the same over glass. */
.audit-kpis.ls-kpis { margin-bottom: 22px; }
.audit-kpis.ls-kpis[data-count="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.audit-kpis.ls-kpis[data-count="7"] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.audit-kpis.ls-kpis[data-count="8"] { grid-template-columns: repeat(8, minmax(0, 1fr)); }
/* Six to eight figures leave each hint too little room for one line, so their hints wrap rather than lose their ends. */
.audit-kpis.ls-kpis:is([data-count="6"], [data-count="7"], [data-count="8"]) .trend { white-space: normal; }
.ls-kpis .ls-sk-value { width: 40%; height: 26px; }
.ls-sk-line { width: 72%; margin-top: 12px; }
.ls-sk-title { width: 55%; height: 20px; }

/* results returned to you: a link to them under the figures (its glass look is in the glass block) */
.ls-callout {
  display: flex; align-items: center; gap: 12px; margin: -6px 0 22px; padding: 14px 18px; border-radius: 16px; background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  box-shadow: var(--shadow-card); color: var(--ink-2); font-size: 13px; line-height: 1.55; text-decoration: none; transition: box-shadow .2s var(--curve);
}
.ls-callout b { color: var(--danger); font-weight: 650; }
.ls-callout .grow { flex: 1; min-width: 0; }
.ls-callout > svg { width: 18px; height: 18px; flex: none; color: var(--danger); }
.ls-callout > svg:last-child { width: 16px; height: 16px; color: var(--ink-3); transition: transform .2s var(--curve); }
.ls-callout:hover { box-shadow: inset 0 0 0 1px var(--danger), var(--shadow-card); }
.ls-callout:hover > svg:last-child { transform: translateX(2px); }

/* toolbar: search, test, test dates, clear */
.ls-toolbar .search-box { flex: 1 1 260px; width: auto; max-width: 380px; }
.ls-toolbar > select.input, .ls-toolbar > .ss { width: 250px; }
.ls-list [data-table] { transition: opacity .2s var(--curve); }
.ls-list [data-table].ls-loading { opacity: .6; }

/* the list */
.ls-table td .sub { display: block; }
.ls-table .cell-k { display: none; }
.ls-table td[data-col="results"] { min-width: 160px; }
.ls-table td[data-col="done"] { min-width: 96px; }
.ls-table a.row-open { color: var(--ink); font-weight: 600; text-decoration: none; }
.ls-table a.row-open:hover { color: var(--accent); text-decoration: underline; }
.ls-repeat-tag { margin-left: 6px; }
.ls-verified { display: inline-flex; align-items: center; gap: 6px; color: var(--done); font-weight: 600; white-space: nowrap; }
.ls-verified svg { width: 14px; height: 14px; flex: none; }
@media (max-width: 1250px) and (min-width: 901px) {
  table.data.ls-table th, table.data.ls-table td { padding-left: 8px; padding-right: 8px; }
  table.data.ls-table td[data-col="results"] { min-width: 136px; }
}

/* a test's Logsheet page, laid out like LMMS's: the test's name with its code, its QC table, then its results */
.page-title .eyebrow a { color: inherit; text-decoration: none; }
.page-title .eyebrow a:hover { color: var(--accent); text-decoration: underline; }
.ls-test-code {
  display: inline-flex; align-items: center; min-height: 28px; margin-left: 4px; padding: 0 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-size: 14px; font-weight: 700; letter-spacing: .04em; vertical-align: 6px;
}
.ls-panel-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 16px; }
.ls-panel-head h2 { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 650; letter-spacing: -.015em; }
.ls-panel-head h2 svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.ls-panel-head .meta { color: var(--ink-3); font-size: 13px; }
.ls-panel-head .ls-panel-action { margin-left: auto; }
.ls-qc-panel { margin-bottom: 22px; }
.ls-qc-panel .skeleton + .skeleton { margin-top: 12px; }
.ls-qc-empty { margin: 0; max-width: 72ch; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.ls-qc-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ls-qc-ctl + .ls-qc-ctl { margin-top: 6px; }
.ls-qc-ctl-name { min-width: 104px; font-size: 12px; color: var(--ink-3); }
.ls-lmms-qc { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.ls-lmms-qc summary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ls-lmms-qc summary::-webkit-details-marker { display: none; }
.ls-lmms-qc summary svg { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
.ls-lmms-qc summary .muted { font-size: 12px; font-weight: 400; }
.ls-lmms-qc[open] summary { margin-bottom: 12px; }
.ls-verify-btn { white-space: nowrap; }
.ls-verify-btn + .tag { margin-left: 6px; }
.ls-test-table td[data-col="sample"] { min-width: 96px; max-width: 180px; overflow-wrap: anywhere; }
.ls-test-table td[data-col="field"] .ls-notify-tag { margin-left: 6px; }

/* results by kind: positive red, negative green, invalid gold, anything else neutral */
:is(.res-chip, .res-list > li, .ls-seg label, .qc-expected) { --k: var(--ink-3); --kt: var(--ink-2); }
:is(.res-chip, .res-list > li, .ls-seg label, .qc-expected)[data-kind="positive"] { --k: var(--danger); --kt: var(--danger); }
:is(.res-chip, .res-list > li, .ls-seg label, .qc-expected)[data-kind="negative"] { --k: var(--done); --kt: var(--done); }
:is(.res-chip, .res-list > li, .ls-seg label, .qc-expected)[data-kind="invalid"] { --k: var(--active); --kt: var(--active-ink); }
.res-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.res-chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 1px 9px; border-radius: 999px; background: color-mix(in srgb, var(--k) 13%, var(--g-sticky, var(--surface)));
  color: var(--kt); font-size: 11.5px; font-weight: 650; line-height: 1.5; white-space: nowrap;
}
.res-chip .res-k { font-weight: 500; opacity: .85; }
.res-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.res-list > li {
  display: grid; gap: 2px; min-width: 0; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--k) 32%, transparent); border-radius: 14px;
  background: color-mix(in srgb, var(--k) 10%, var(--g-sticky, var(--surface)));
}
.res-list .res-field { font-size: 12px; color: var(--ink-3); }
.res-list .res-value { font-size: 16px; font-weight: 650; color: var(--kt); overflow-wrap: anywhere; }

/* bulk bar and, on phones, Record a result above the bottom bar */
.btn.ls-fab { display: none; }

/* entry drawer */
.ls-head-actions { display: flex; align-items: center; gap: 6px; }
.ls-state-note { font-size: 13px; color: var(--ink-3); }
.ls-notice { display: flex; align-items: flex-start; gap: 10px; }
.ls-notice > svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
/* From LMMS: the section of an imported result in the entry drawer, and "QC passed?" answered No. */
.kv dd.bad-val { color: var(--danger); font-weight: 600; }
.ls-lmms-intro { margin: 0 0 12px; font-size: 13px; }
.ls-lmms-section .notice { margin-bottom: 12px; }
.ls-lmms-notes { margin: 4px 0 0; padding-left: 18px; }
.ls-lmms-h { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.ls-lmms-events { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.ls-lmms-row summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ls-lmms-row[open] summary { margin-bottom: 12px; }
.ls-lmms-row dt.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.ls-notices { display: grid; gap: 10px; }
.ls-remarks { white-space: pre-line; overflow-wrap: anywhere; font-size: 14px; color: var(--ink-2); }
.ls-others .row-link { margin: 0 -12px; padding: 10px 12px; border-radius: 12px; }
.ls-others .row-link .meta { margin-top: 6px; white-space: normal; overflow: visible; }
/* Delete stays red on hover, where a quiet button would turn to ink. */
/* The record form's footer keeps its buttons on one line; "Done by …" wraps instead. */
.ls-form .drawer-foot .left { flex: 1 1 0; min-width: 0; }
.ls-form .drawer-foot .btn { flex: none; white-space: nowrap; }
.ls-entry-foot .ls-delete, .ls-entry-foot .ls-delete:hover { color: var(--danger); }
.ls-entry-foot .ls-delete svg { color: currentColor; }
.ls-dialog-field { margin-top: 16px; }

/* Quality control on the Logsheet: the tag on a row held by a failed kit lot QC, the line about the kit lot's QC in an
   entry's Details, the notice under the record form's kit lot, and the "Check before saving" box (components/confirm.js),
   which a dialog shows too (Verify anyway). */
.ls-qc-tag { margin-left: 6px; vertical-align: 1px; }
.ls-qc-fact dd { color: var(--active-ink); }
.ls-qc-fact[data-qc="failed"] dd { color: var(--danger); font-weight: 600; }
/* Held after the lot passed again: the warning colour, as strong as a failure's line. */
.ls-qc-fact[data-qc="held"] dd { color: var(--active-ink); font-weight: 600; }
/* A kit lot on hold (Round 3b): the tag on its rows, its line in an entry's Details (in the colour of a held QC line)
   and the record form's line under the lots that are listed but not offered. */
.ls-hold-tag { margin-left: 6px; vertical-align: 1px; }
.ls-hold-fact dd { color: var(--active-ink); font-weight: 600; }
.ls-form .field .hint.ls-hold-hint { color: var(--active-ink); }
.ls-qc-link { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ls-qc-link svg { width: 14px; height: 14px; flex: none; }
.ls-qc-note { margin-top: 2px; }
.ls-qc-note a { font-weight: 650; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.cf-box { display: grid; gap: 10px; }
.cf-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.cf-title svg { width: 16px; height: 16px; flex: none; }
.cf-checks { display: grid; gap: 8px; }
.cf-check { align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--ink); }
.cf-check input { flex: none; margin-top: 2px; }
.cf-note { font-size: 12px; }
.cf-note.attention { font-weight: 700; }
.cf-dialog .cf-box { margin-top: 4px; }

/* Turnaround from receipt and the bench checks on the Logsheet: the tag after the status of a result awaiting verification
   past its target, the Turnaround line in an entry's Details (red once past it), the link under the patient's other
   results, and the record form's line about its test's read window. All of it sits inside the list panel, the drawer
   or the form: no surface of its own. */
.ls-tat-tag { margin-left: 6px; vertical-align: 1px; }
.ls-tat-fact[data-tat="over"] dd { color: var(--danger); font-weight: 600; }
.ls-patient-all { margin-top: 10px; font-size: 13px; font-weight: 600; }
.ls-read-window { margin-top: 10px; font-size: 12px; line-height: 1.6; color: var(--ink-3); }

/* Notifications on the Logsheet (components/notify.js): the tag after a row's results while it is to notify, and an
   entry's Notification section: the server's sentence, the notifications recorded as outlined wells, the buttons, and
   the form that records one. All of it sits inside the list panel or the drawer: no surface of its own. */
.ls-res-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; }
.ls-notify-tag { flex: none; }
.nt-section .nt-note, .nt-none, .nt-list { margin-bottom: 14px; }
.nt-section > :last-child { margin-bottom: 0; }
.nt-none { font-size: 13px; }
.nt-list { display: grid; gap: 8px; margin-top: 0; padding: 0; list-style: none; }
.nt-item { display: grid; gap: 4px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.nt-item[data-kind="notified"][data-current="1"] { border-color: color-mix(in srgb, var(--done) 35%, var(--line)); }
.nt-head { display: flex; align-items: flex-start; gap: 8px; }
.nt-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; flex: 1; min-width: 0; min-height: 24px; font-size: 14px; }
.nt-name b { font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.nt-item[data-current="0"] .nt-name b { color: var(--ink-3); }
.nt-delete { flex: none; margin: -4px -6px 0 0; }
.nt-delete, .nt-delete:hover { color: var(--danger); }
.nt-delete svg { color: currentColor; }
.nt-meta { font-size: 12.5px; line-height: 1.55; color: var(--ink-3); overflow-wrap: anywhere; }
.nt-remarks { font-size: 13px; line-height: 1.55; color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.nt-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.nt-form .form-grid { gap: 16px 18px; }
.nt-form > .notice { margin-top: 16px; }
.nt-form .form-actions { margin-top: 18px; }
.nt-read-back { margin-top: -4px; }
/* A tick box on its own line answers to its words only, not to the empty width beside them. */
.nt-read-back > .check { align-self: flex-start; }

/* record form */
.drawer > .ls-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ls-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.ls-form legend { margin: 0 0 9px; padding: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
/* No times for this test, or no hint for this lot: no empty row in the grid, no extra gap in the field. */
.ls-form [data-times]:empty, .ls-form [data-lot-hint]:empty, .ls-form [data-lot-qc]:empty { display: none; }
.ls-form .field .hint.ls-warn { color: var(--active-ink); font-weight: 600; }
.ls-fixed-test { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; }
.ls-fixed-test b { font-size: 16px; }
.ls-fixed-test span { color: var(--ink-3); }
.ls-add-lot { align-self: flex-start; }
/* The "Check before saving" box sits at the end of the last section, above the buttons (hidden until the server asks). */
.ls-repeat, .ls-reason, .ls-confirm { margin-top: 16px; }
.ls-retired { margin-top: 12px; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
.ls-saved {
  display: flex; align-items: center; gap: 10px; margin: 18px 28px 0; padding: 11px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--done) 12%, var(--g-sticky, var(--surface))); color: var(--done); font-size: 13px; font-weight: 600;
}
.ls-saved svg { width: 16px; height: 16px; flex: none; }

/* The test as pill buttons, tests that share a panel together in a tinted group; each result field as a row of
   choices, tinted by kind once chosen. The radios are hidden; the pill after each one is what is seen and clicked. */
.ls-test-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.ls-test-row:has(.ls-panel-group) > .ls-test { margin-bottom: 12px; }
.ls-test { position: relative; display: inline-flex; min-width: 0; max-width: 100%; }
.ls-test input, .ls-seg input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ls-test > span, .ls-seg span {
  display: inline-flex; gap: 8px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); cursor: pointer;
  transition: border-color .2s var(--curve), background .2s var(--curve), color .2s var(--curve);
}
.ls-test input:focus-visible + span, .ls-seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.ls-test > span { align-items: baseline; min-width: 0; max-width: 270px; min-height: 42px; padding: 10px 16px; }
.ls-test b { font-size: 14px; font-weight: 700; color: var(--ink); }
.ls-test small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--ink-3); }
.ls-test:hover > span { border-color: var(--accent); }
.ls-test input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--g-sticky, var(--surface))); box-shadow: inset 0 0 0 1px var(--accent); }
.ls-test input:checked + span b { color: var(--accent); }
/* A plain well (translucent in glass, so it still shows on the drawer), with a hairline so it reads in dark too. */
.ls-panel-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 100%; padding: 12px; border-radius: 24px; background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); }
.ls-panel-name { padding: 0 6px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ls-panel-tests { display: flex; flex-wrap: wrap; gap: 8px; }
.ls-results { display: grid; gap: 18px; }
.ls-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.ls-seg label { position: relative; display: inline-flex; }
.ls-seg span { align-items: center; min-height: 40px; padding: 0 16px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.ls-seg span::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--k); }
.ls-seg label:hover span { border-color: var(--k); }
.ls-seg input:checked + span { border-color: var(--k); background: color-mix(in srgb, var(--k) 14%, var(--g-sticky, var(--surface))); color: var(--kt); box-shadow: inset 0 0 0 1px var(--k); }
.ls-result:has([aria-invalid="true"]) .ls-seg span { border-color: var(--danger); }

@media (max-width: 1600px) {
  .audit-kpis.ls-kpis[data-count="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .audit-kpis.ls-kpis:is([data-count="7"], [data-count="8"]) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1300px) {
  .audit-kpis.ls-kpis[data-count="7"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .audit-kpis.ls-kpis:is([data-count="6"], [data-count="7"], [data-count="8"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-callout { margin-top: -2px; padding: 13px 16px; }
  .ls-toolbar .search-box { flex: 1 1 100%; max-width: none; }
  .ls-toolbar > select.input, .ls-toolbar > .ss { flex: 1 1 100%; width: auto; }
  .ls-toolbar .date-range { display: flex; flex: 1 1 100%; }
  .ls-toolbar .date-range .input { flex: 1 1 0; min-width: 0; }
  .ls-toolbar .spacer { display: none; }
  .ls-saved { margin: 14px 18px 0; }

  /* Each entry is a card: test, date and status; MRN and lab number; the results; kit lot and Done by. The tick box sits
     in the card's left margin, and that whole 40 px strip is its cell, so a tap just beside the box never opens the
     entry. */
  table.data.ls-table thead { display: none; }
  table.data.ls-table, table.data.ls-table tbody { display: block; width: 100%; }
  table.data.ls-table tr { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 14px 6px; border-bottom: 1px solid var(--line); }
  table.data.ls-table tr::after { content: ""; order: 4; flex-basis: 100%; height: 0; margin-top: -6px; }
  table.data.ls-table.has-pick tr { padding-left: 40px; }
  table.data.ls-table tbody tr:last-child { border-bottom: 0; }
  table.data.ls-table tbody tr:hover { background: var(--hover); }
  table.data.ls-table tbody tr[aria-selected="true"] { background: var(--accent-soft); }
  table.data.ls-table tbody tr:hover td, table.data.ls-table tbody tr[aria-selected="true"] td { background: none; box-shadow: none; }
  table.data.ls-table td { display: block; min-width: 0; padding: 0 !important; border: 0; white-space: normal; }
  table.data.ls-table td.pick { position: absolute; left: 0; top: 0; bottom: 0; width: 40px; display: flex; justify-content: center; align-items: flex-start; }
  table.data.ls-table td.pick:has(input) { cursor: pointer; }
  table.data.ls-table td.pick input { margin-top: 15px; }
  table.data.ls-table td[data-col="test"] { order: 1; font-size: 14px; }
  table.data.ls-table td[data-col="date"] { order: 2; flex: 1 1 auto; color: var(--ink-2); }
  table.data.ls-table td[data-col="state"] { order: 3; margin-left: auto; }
  table.data.ls-table td[data-col="prn"] { order: 5; }
  table.data.ls-table td[data-col="lab"] { order: 6; flex: 1 1 auto; }
  table.data.ls-table td[data-col="results"] { order: 7; flex: 1 1 100%; min-width: 0; }
  table.data.ls-table td[data-col="lot"] { order: 8; flex: 1 1 auto; font-size: 12px; color: var(--ink-3); }
  table.data.ls-table td[data-col="done"] { order: 9; min-width: 0; font-size: 12px; color: var(--ink-3); text-align: right; }
  table.data.ls-table td .sub { display: inline; margin: 0 0 0 6px; }
  table.data.ls-table td[data-col="results"] .sub { display: block; margin: 4px 0 0; }
  /* A test's list: its sample, result fields and "QC passed?" side by side under MRN and lab number; the expiry by the
     kit lot. The QC tables: the outcome first, then date and review; the controls and their results on a line of their own. */
  table.data.ls-table td:is([data-col="sample"], [data-col="field"], [data-col="qcpass"]) { order: 7; max-width: none; }
  table.data.ls-table td[data-col="expiry"] { order: 8; font-size: 12px; color: var(--ink-3); }
  table.data.ls-table td[data-col="outcome"] { order: 1; }
  table.data.ls-table td[data-col="controls"] { order: 7; flex: 1 1 100%; min-width: 0; }
  table.data.ls-table td[data-col="read"] { order: 9; font-size: 12px; color: var(--ink-3); }
  table.data.ls-table .cell-k { display: inline; margin-right: 5px; font-size: 11px; font-weight: 600; color: var(--ink-3); }

  /* Record a result floats above the bottom bar; it steps aside for the bulk bar and while someone types. */
  .btn.ls-fab { position: fixed; z-index: 39; right: 16px; bottom: calc(16px + var(--nav-clear)); display: inline-flex; min-height: 48px; padding: 0 20px; box-shadow: var(--shadow-pop); }
  .btn.ls-fab svg { width: 18px; height: 18px; }
  .bulk-bar:not([hidden]) ~ .btn.ls-fab, .typing .btn.ls-fab { display: none; }
  /* The floating button takes over from the header's, so the page never shows two. */
  .page-head .ls-head-new { display: none; }
  .ls-list.has-fab { margin-bottom: 72px; }
}
@media (max-width: 640px) {
  .ls-entry-foot .left, .ls-form .drawer-foot .left { flex: 1 1 100%; }
  .ls-entry-foot .btn, .ls-form .drawer-foot .btn, .nt-actions .btn { flex: 1 1 auto; }
  .ls-test > span { max-width: 100%; }
}
@media print {
  .btn.ls-fab, .ls-callout { display: none !important; }
}

/* ------------------------------------------------------------------ tests and kits (views/tests.js, components/lot-dialog.js, components/test-editor.js)
   Kit lots: four figures that filter the list, and the list as a table that becomes one card per lot up to 1200 px.
   Tests: one card each, with its result fields and their choices coloured by what the result counts as. */
.tab-intro { max-width: 860px; margin: 0 0 20px; font-size: 13.5px; line-height: 1.7; color: var(--ink-3); }
.tab-intro .pill { vertical-align: 1px; }
.test-code { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.strip.kit-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 22px; }
.lot-toolbar .ss, .lot-toolbar > select.input { width: 280px; max-width: 100%; }
.lot-toolbar .category-chips { flex: 1 1 auto; }
.kit-gap { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 16px; }
.kit-gap > svg { width: 17px; height: 17px; flex: none; }
.kit-gap .grow { flex: 1 1 280px; min-width: 0; }
.lot-table .num-col { text-align: right; }
.lot-table .row-actions { width: 1%; white-space: nowrap; text-align: right; }
.lot-table .row-actions .btn + .btn { margin-left: 4px; }
.lot-table td[data-col="lot"] .name { overflow-wrap: anywhere; }
.lot-table td[data-col="lot"] { min-width: 150px; }
.lot-table td[data-col="test"] { max-width: 100px; }
.lot-table td[data-col="status"] { min-width: 108px; }
.lot-table td[data-col="test"] .test-code { white-space: normal; padding-block: 3px; line-height: 1.3; }
.lot-expiry { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.lot-table .cell-label { display: none; }
/* Retired lots, tests and fields carry a Retired pill; their text turns muted ink rather than fading, so it still reads. */
.lot-table tr.retired td[data-col="test"] .test-code { background: var(--surface-2); color: var(--ink-3); }
.lot-table tr.retired td[data-col="lot"] .name, .lot-table tr.retired td[data-col="expiry"] time { color: var(--ink-3); }
.lot-table tr.expired td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.lot-table tr.flash, .test-card.flash { animation: tk-flash 1.8s var(--curve); }
@keyframes tk-flash { 0%, 40% { background: var(--secondary-bg); } }
/* The kit-lot record (Round 3b): a lot's use-by once opened, its condition on arrival and why it was retired, each a
   line under its cell's first one; its tests left (red below 0, a sign the count is wrong) beside its Low stock pill.
   On hold and Low stock join the figures when they count any lot, so the strip holds four to six (data-count). */
.lot-use-by, .lot-condition, .lot-retired-why, .lot-hold-why { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.lot-retired-why, .lot-hold-why { overflow-wrap: anywhere; }
.lot-retired-why + .pill { margin-top: 6px; }
.lot-stock-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.lot-stock { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lot-stock.bad { color: var(--danger); font-weight: 600; }
.strip.kit-kpis[data-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.strip.kit-kpis[data-count="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.strip.kit-kpis:is([data-count="5"], [data-count="6"]) .trend { white-space: normal; }

.test-list { display: grid; gap: 18px; }
.test-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 24px 26px 22px; scroll-margin-top: calc(var(--topbar) + 20px); }
.tc-head { display: flex; align-items: flex-start; gap: 12px; }
.tc-head .test-code { min-height: 30px; padding: 0 11px; font-size: 13px; }
.tc-title { flex: 1; min-width: 0; padding-top: 4px; }
.tc-title h2 { font-size: 16px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.tc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.tc-meta > span:not(.pill) { display: inline-flex; align-items: center; gap: 5px; }
.tc-meta svg { width: 13px; height: 13px; flex: none; color: var(--icon); }
.test-card.retired .tc-title h2 { color: var(--ink-3); }
.test-card.retired > .tc-head .test-code { background: var(--surface-2); color: var(--ink-3); }
.tc-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.tc-fields { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
/* A field is a row: its name and how often it was recorded, its choices, then the actions. */
.tc-field {
  display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) auto; grid-template-areas: "name choices actions"; gap: 8px 16px; align-items: center;
  padding: 10px 14px; border-radius: 14px; background: var(--surface-2);
}
.tc-field-name { grid-area: name; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; min-height: 32px; font-size: 13.5px; }
.tc-field-name b { font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.tc-field-name .muted { font-size: 12px; }
.tc-field > .tc-actions { grid-area: actions; }
.tc-choices { grid-area: choices; display: flex; flex-wrap: wrap; gap: 6px; }
.tc-field.retired .tc-field-name b { color: var(--ink-3); }
.tc-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
.tc-foot a { font-weight: 600; }
.tc-foot .btn { margin-left: auto; }

/* The dialogs: a lot's test and dates; a test with its fields, each field a name and rows of choices. Their notice of
   what the server refused is .notice.refusal (with .notice.error, above). */
.tk-form { display: grid; gap: 18px; }
.dialog .tk-form .form-actions { margin-top: 4px; }
.dialog .tk-form > .notice, .dialog .tk-form > .hint-line { margin: 0; }
.tk-form [data-dup]:empty { display: none; }
.tk-form .check { font-size: 13.5px; color: var(--ink); }
.lot-test { display: flex; align-items: center; gap: 10px; min-height: 46px; font-size: 14px; color: var(--ink); }
/* Why a lot's number (and expiry date) are shown as text, or can still change: right under them. */
.ld-kept { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
/* The lot dialog's groups (Received, In use): fieldsets of its grid, each headed like a field label over a rule, and
   the live line that says the use-by once the opened date and the days usable once opened are given. */
.ld-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.ld-group > legend { float: left; width: 100%; margin: 0 0 14px; padding: 16px 0 0; border-top: 1px solid var(--line); font-size: 13px; font-weight: 650; color: var(--ink); }
.ld-group > legend + * { clear: both; }
.ld-use-by { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.ld-use-by:empty { display: none; }
.ld-use-by.bad { color: var(--danger); }
.fe-section { display: grid; gap: 12px; }
.fe-head h3 { font-size: 15px; color: var(--ink); }
.fe-head p { margin-top: 2px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.fe-list { display: grid; gap: 12px; }
.fe-field { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: 16px; }
.fe-single { display: grid; gap: 12px; }
.fe-name-row { display: flex; align-items: center; gap: 8px; }
.fe-name-row .input { flex: 1; min-width: 0; }
.fe-choices { display: grid; gap: 8px; }
.fe-choice-head, .fe-choice { display: grid; grid-template-columns: minmax(0, 1fr) 132px 32px; gap: 8px; align-items: center; }
.fe-choice-head { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.fe-choice .error { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--danger); }
.fe-add { justify-self: start; }
/* "Notifiable when positive" answers to its words only, not to the empty width beside them. */
.fe-notify > .check { align-self: flex-start; }
/* A test's read window: the earliest and latest read side by side under its legend, shown while it records times. */
.field.td-window { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.td-window legend { margin: 0 0 2px; padding: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.td-window .form-grid { gap: 12px 22px; }

/* Quality control on Tests and kits (components/qc.js, qc-form.js, qc-history.js and the controls in test-editor.js):
   a lot's QC cell, a test's QC controls, the controls dialog, the QC run form and the QC history drawer. They sit on
   the panels and drawers that hold them, so none is a surface of its own; boxes inside a drawer are outlined wells. */
.lot-table td[data-col="qc"] { min-width: 150px; }
.lot-qc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.lot-qc-last, .lot-qc-affected { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
a.lot-qc-affected { color: var(--danger); font-weight: 600; }
a.lot-qc-affected:hover { text-decoration: underline; }
/* Results a failed QC still holds once the lot has passed again: each is verified with a confirmation. */
a.lot-qc-affected.held { color: var(--active-ink); }
.qc-held-note a { color: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.lot-qc .lot-qc-review { min-height: 26px; padding: 0 9px; }

.tc-qc { display: grid; gap: 8px; }
.tc-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; font-weight: 650; letter-spacing: 0; color: var(--ink-2); }
.tc-sub svg { width: 15px; height: 15px; flex: none; color: var(--icon); }
.tc-sub .muted { font-size: 12px; font-weight: 500; }
.tc-none { font-size: 13px; }
.tc-warn { font-size: 12px; font-weight: 600; color: var(--active-ink); }
/* QC kept elsewhere: the controls stay listed in muted ink, their chips grey. */
.tc-qc.off .tc-field-name b { color: var(--ink-3); }
.tc-qc.off .tc-choices .pill { background: var(--surface-2); color: var(--ink-3); }
.tc-foot .tc-foot-actions { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.tc-foot .tc-foot-actions .btn { margin-left: 0; }

.field.qc-expect { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.qc-expect legend { margin: 0 0 2px; padding: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.qc-expect-row { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr); gap: 8px 14px; align-items: center; }
.qc-expect-field { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }

.qc-controls, .qc-run-controls { display: grid; gap: 14px; }
/* Two classes, so the record form's fieldset reset (.ls-form fieldset) does not take the outline away. */
:is(.qc-controls, .qc-run-controls) > .qc-control { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 16px 16px 18px; border: 1px solid var(--line); border-radius: 16px; }
.qc-run-controls > .qc-control { gap: 10px; padding: 14px 16px 16px; }
.qc-run-controls > .qc-control[data-passed="0"] { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.qc-control-head { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.qc-control-head h4 { flex: 1; min-width: 0; font-size: 14.5px; overflow-wrap: anywhere; }
.qc-material { gap: 12px 16px; }
.qc-expected {
  display: inline-flex; align-items: center; margin-left: 8px; padding: 1px 9px; border-radius: 999px; vertical-align: 1px;
  background: color-mix(in srgb, var(--k) 12%, var(--g-sticky, var(--surface))); color: var(--kt); font-size: 11px; font-weight: 600;
}
.qc-outcome { margin: 0 0 16px; font-size: 13px; }
.qc-outcome:empty { display: none; }
.qc-outcome-line { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; font-weight: 650; }
.qc-outcome-line svg { width: 16px; height: 16px; flex: none; }
.qc-outcome-line[data-tone="success"] { background: color-mix(in srgb, var(--done) 12%, var(--g-sticky, var(--surface))); color: var(--done); }
.qc-outcome-line[data-tone="danger"] { background: color-mix(in srgb, var(--danger) 10%, var(--g-sticky, var(--surface))); color: var(--danger); }
.qc-form-error { margin-top: 14px; }
.qc-purpose .hint { margin-top: 2px; }

.qc-lot-notice .grow { display: grid; gap: 10px; flex: 1; min-width: 0; }
.qc-affected {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--g-sticky, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); font-size: 13px; font-weight: 650; text-decoration: none;
}
.qc-affected .grow { flex: 1; min-width: 0; }
.qc-affected svg { width: 16px; height: 16px; flex: none; }
a.qc-affected:hover { box-shadow: inset 0 0 0 1px var(--danger); }
p.qc-affected.muted { color: var(--ink-3); font-weight: 500; box-shadow: inset 0 0 0 1px var(--line); }
.qc-failed .drawer-section > .qc-affected { margin-top: 12px; }
.qc-runs .row-link { width: calc(100% + 24px); margin: 0 -12px; padding: 12px; border: 0; border-radius: 12px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.qc-runs .row-link:hover { background: var(--hover); }
.qc-runs .row-link .meta { white-space: normal; }
.qc-runs .row-link > svg { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
/* LMMS's QC rows on a lot, as LMMS kept them: read only, so no hover */
.qc-lmms-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 0; }
.qc-lmms-row .grow { flex: 1; min-width: 0; }
.qc-lmms-row .title { font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.qc-lmms-row .meta { margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--ink-3); overflow-wrap: anywhere; }
.qc-lmms-row .side { flex: none; }
.qc-material-line { font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.qc-answers { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.qc-answers li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13px; }
.qc-answers li[data-passed="0"] { background: color-mix(in srgb, var(--danger) 8%, var(--g-sticky, var(--surface))); box-shadow: inset 3px 0 0 var(--danger); }
.qc-answer-field { min-width: 70px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.qc-answer-want { font-size: 12px; color: var(--ink-3); }
.qc-miss { gap: 4px; margin-left: auto; }
.qc-miss svg { width: 11px; height: 11px; flex: none; }

/* Up to 1200 px each lot is a card: test, lot number and actions on the first line; expiry, received, entries and
   status under them (expiry gets its own line on phones). */
@media (max-width: 1200px) {
  table.data.lot-table thead { display: none; }
  table.data.lot-table, table.data.lot-table tbody { display: block; width: 100%; }
  table.data.lot-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 14px 8px; border-bottom: 1px solid var(--line); }
  table.data.lot-table tbody tr:last-child { border-bottom: 0; }
  table.data.lot-table td { display: block; width: auto; padding: 0 !important; border: 0; }
  table.data.lot-table td[data-col="test"] { order: 0; }
  table.data.lot-table td[data-col="lot"] { order: 0; flex: 1 1 160px; min-width: 0; }
  table.data.lot-table td.row-actions { order: 1; margin-left: auto; }
  /* An empty line-wide item ends the first line, so the details always start on the next. */
  table.data.lot-table tr::after { content: ""; order: 1; flex: 0 0 100%; height: 0; margin-top: -8px; }
  table.data.lot-table td[data-col="expiry"], table.data.lot-table td[data-col="received"], table.data.lot-table td[data-col="entries"], table.data.lot-table td[data-col="stock"], table.data.lot-table td[data-col="qc"], table.data.lot-table td[data-col="status"] { order: 2; font-size: 12.5px; color: var(--ink-2); }
  table.data.lot-table td[data-col="qc"] { min-width: 0; }
  table.data.lot-table td.num-col { text-align: left; }
  table.data.lot-table td[data-empty] { display: none; }
  .lot-table .cell-label { display: inline; color: var(--ink-3); }
  table.data.lot-table tr.expired td:first-child { box-shadow: none; }
  table.data.lot-table tr.expired { box-shadow: inset 3px 0 0 var(--danger); }
}
@media (max-width: 1600px) {
  .strip.kit-kpis:is([data-count="5"], [data-count="6"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1060px) {
  .strip.kit-kpis, .strip.kit-kpis:is([data-count="5"], [data-count="6"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Narrow cards: a field's name and actions on one line, its choices under them. */
@media (max-width: 760px) {
  .tc-field { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name actions" "choices choices"; }
}
@media (max-width: 640px) {
  .lot-toolbar .ss, .lot-toolbar > select.input { width: 100%; }
  table.data.lot-table td[data-col="expiry"] { flex-basis: 100%; }
  .test-card { padding: 18px; }
  .tc-field { padding: 12px; }
  .tc-foot .btn { margin-left: 0; }
  .fe-field { padding: 14px 12px 12px; }
  .fe-choice-head, .fe-choice { grid-template-columns: minmax(0, 1fr) 108px 32px; }
  .tc-foot .tc-foot-actions { margin-left: 0; }
  .qc-expect-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  :is(.qc-controls, .qc-run-controls) > .qc-control { padding: 14px 12px 16px; }
  .lot-qc-last, .lot-qc-affected { white-space: normal; }
}

/* ------------------------------------------------------------------ printable logsheet (views/logsheet-sheet.js)
   The sheet is laid out like the paper Test Kit Result Logsheet: a title block, then per test an underlined heading in
   capitals over a ruled table with grey header cells. It is paper, not a panel: white with near-black ink in every
   theme and panel style (no glass), because it is what gets printed. Print shows the sheet alone, A4 landscape; the
   header rows (with the table's heading, hidden on screen) repeat on every page and rows never split. */
.print-tools .toolbar > select.input, .print-tools .toolbar > .ss { width: 260px; }
.print-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.paper {
  --paper-ink: #16191c; --paper-muted: #5b636b; --paper-rule: #50565c; --paper-head: #e3e5e7; --focus: var(--brand-burgundy);
  max-width: 1123px; margin: 0 auto; padding: 40px 44px 46px; border-radius: 6px; background: #fff; color: var(--paper-ink); color-scheme: light;
  box-shadow: 0 1px 2px rgba(30, 39, 43, .06), 0 14px 40px rgba(30, 39, 43, .12); transition: opacity .2s var(--curve);
}
[data-theme="dark"] .paper { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 48px rgba(0, 0, 0, .45); }
.paper.stale { opacity: .55; }
.paper ::selection { background: #f6e3ae; color: #000; }
.paper-title { margin-bottom: 28px; text-align: center; }
.paper-title h2 { font-size: 16px; font-weight: 700; letter-spacing: .1em; }
.paper-lab { margin-top: 6px; font-size: 13px; font-weight: 600; }
.paper-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; margin: 10px 0 0; font-size: 12px; color: var(--paper-muted); }
.paper-meta > div { display: flex; gap: 5px; }
.paper-meta dt { font-weight: 600; }
.paper-meta dt::after { content: ":"; }
.paper-meta dd { margin: 0; font-variant-numeric: tabular-nums; }
.paper-cut { margin-top: 10px; font-size: 12px; font-weight: 700; }
.paper-block + .paper-block { margin-top: 32px; }
.paper-heading { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; letter-spacing: .01em; text-decoration: underline; text-underline-offset: 3px; }
.paper-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.paper-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 12.5px; line-height: 1.4; color: var(--paper-ink); }
.paper-table th, .paper-table td { padding: 6px 8px; border: 1px solid var(--paper-rule); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.paper-table thead th { background: var(--paper-head); font-weight: 700; }
.paper-table .nowrap { white-space: nowrap; }
.paper-table td { font-variant-numeric: tabular-nums; }
.paper-table td.pos { font-weight: 700; }
.paper-table a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.paper-table a:hover { color: var(--brand-burgundy); text-decoration-style: solid; }
.paper-repeat { display: none; }
.paper-muted { color: var(--paper-muted); font-style: italic; }
.paper-note { color: var(--paper-muted); font-size: 11px; white-space: nowrap; }
.paper-table td.paper-empty { padding: 12px 8px; color: var(--paper-muted); text-align: center; }
.paper-none { padding: 24px 0 8px; color: var(--paper-muted); text-align: center; }
/* Screen only: a printed page is narrower than 900 px in CSS pixels, and print has its own sizes below. */
@media screen and (max-width: 900px) {
  .paper { padding: 26px 18px 30px; border-radius: 4px; }
  .paper-title { margin-bottom: 22px; }
  .paper-title h2 { font-size: 14px; }
  .paper-block + .paper-block { margin-top: 26px; }
  .paper-table { font-size: 12px; }
  /* The table scrolls sideways here; the empty line stays in view at its start. */
  .paper-table td.paper-empty { text-align: left; }
}
@media screen and (max-width: 640px) {
  .print-tools .toolbar > select.input, .print-tools .toolbar > .ss { flex: 1 1 100%; width: auto; }
  .print-tools .segmented { display: flex; width: 100%; }
  .print-tools .segmented button { flex: 1 1 0; padding: 0 4px; }
  .print-actions { width: 100%; margin-left: 0; }
  .print-actions .btn { flex: 1 1 0; padding: 0 12px; }
  .paper-meta { flex-direction: column; align-items: center; }
}
@page mls-sheet {
  size: A4 landscape;
  margin: 10mm 10mm 12mm;
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 8pt "Segoe UI", system-ui, sans-serif; color: #444; }
}
@media print {
  /* The whole view takes the named page: an empty box before the sheet on the default page would add a blank page.
     The frame around it is laid out as plain blocks, so the page name reaches the first page. */
  .print-view { page: mls-sheet; }
  :root:has(.print-view) .main { display: block; }
  /* Paper is light whatever the theme: a dark colour scheme would paint the page margins dark. */
  :root:has(.print-view) { color-scheme: light; }
  .print-view > .page-head { display: none !important; }
  .paper, [data-theme] .paper {
    --paper-ink: #000; --paper-muted: #444; --paper-rule: #000; --paper-head: #e3e3e3;
    max-width: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none; background: #fff; opacity: 1; transition: none;
  }
  .paper-title { margin-bottom: 14px; }
  .paper-title h2 { font-size: 13pt; }
  .paper-lab { font-size: 10pt; }
  .paper-meta { font-size: 9pt; }
  .paper-block + .paper-block { margin-top: 16px; }
  .paper-scroll { overflow: visible; }
  .paper-table { min-width: 0; font-size: 9pt; line-height: 1.3; }
  .paper-table th, .paper-table td { padding: 3pt 4pt; }
  .paper-table thead { display: table-header-group; }
  .paper-table thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .paper-table tr { break-inside: avoid; page-break-inside: avoid; }
  .paper-table a { text-decoration: none; }
  .paper-heading { display: none; }
  .paper-repeat { display: table-row; }
  .paper-table .paper-repeat th { padding: 0 0 6px; border: 0; background: none; font-size: 10pt; text-decoration: underline; text-underline-offset: 2px; }
}

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

@media print {
  body { background: #fff !important; }
  .sidebar, .topbar, .workspace-footer, .page-head .actions, .toolbar, .filter-panel, .no-print, .toasts, .bulk-bar, .bottom-nav { display: none !important; }
  .main { padding-bottom: 0 !important; }
  .shell { display: block; }
  .content { max-width: none; padding: 0; }
  .panel, .strip > * { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
}

/* ---------------------------------------------------------------- Chart.js charts (components/chartjs.js): colours, chart boxes, legends and table twins */
/* Chart colours. The five series colours were verified in this order for both themes (lightness band, chroma,
   colour-vision separation of neighbours, the normal-vision floor, contrast on the panel surface: worst neighbouring pair
   ΔE 17.0 light, 13.8 dark); status colours mean good/bad and are never used for a series. Insights gives them to the
   tests in their order. */
:root { --ch-1: #86374a; --ch-2: #4a7fb5; --ch-3: #6c8a3c; --ch-4: #7b5ea7; --ch-5: #c26a2e; --ch-good: var(--done); --ch-bad: var(--danger); --ch-warn: #b98214; --ch-target: #b98214; --ch-muted: #cfd5db; --ch-grid: var(--line); --ch-ink: var(--ink-3); }
:root[data-theme="dark"] { --ch-1: #c0637a; --ch-2: #4f8fd0; --ch-3: #6f9c3a; --ch-4: #8f74c8; --ch-5: #c97a3a; --ch-warn: var(--brand-gold); --ch-target: var(--brand-gold); --ch-muted: #3a4650; }
.chart-box { position: relative; height: 270px; }
.chart-box.short { height: 230px; }
.chart-box.tall { height: 340px; }
.chart-box canvas { display: block; }
.chart-table { margin-top: 10px; }
.chart-table summary { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; list-style: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ink-3); border-radius: 6px; }
.chart-table summary::-webkit-details-marker { display: none; }
.chart-table summary svg { width: 14px; height: 14px; }
.chart-table summary:hover { color: var(--accent); }
.chart-table summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.chart-table[open] summary { margin-bottom: 8px; }
.chart-table .table-wrap { max-height: 320px; overflow: auto; }
.legend-inline i.line { height: 2px; width: 14px; border-radius: 0; vertical-align: 3px; }
.legend-inline i.dash { height: 0; width: 14px; border-radius: 0; border-top: 2px dashed currentColor; background: none !important; vertical-align: 3px; }
.legend-wrap { margin-top: 12px; justify-content: center; }
@media (max-width: 900px) {
  .chart-box { height: 240px; }
  .chart-box.short { height: 210px; }
}
@media print {
  .chart-table { display: none !important; }
  .chart-box { height: 220px; }
}

/* ---------------------------------------------------------------- Insights (views/insights.js), after CCTS's: the grid, figures with their change, highlights,
   the comparison, positivity by test and month, the glance list, attention rows and the breakdown table */
.insight-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.span-12 { grid-column: span 12; } .span-7 { grid-column: span 7; } .span-5 { grid-column: span 5; } .span-4 { grid-column: span 4; }
.insight-grid > .panel { min-width: 0; }
.insight-grid .panel-body .panel-note { padding: 10px 0 0; }
.sec-title { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 6px 2px -8px; }
.sec-title .eyebrow { margin: 0; color: var(--ink-2); }
.sec-title .meta { font-size: 13px; color: var(--ink-3); }
.insight-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.insight-kpis .trend { display: flex; align-items: center; gap: 3px; white-space: normal; }
.insight-kpis .trend.good { color: var(--done); }
.insight-kpis .trend.bad { color: var(--danger); }
.insight-kpis .trend.flat { color: var(--ink-2); }
.insight-kpis .trend svg { width: 12px; height: 12px; flex: none; }
.insight-kpis .trend span { color: var(--ink-3); }
.highlights { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.highlights li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.highlights li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--icon); }
.highlights li[data-tone="good"] svg { color: var(--done); }
.highlights li[data-tone="bad"] svg { color: var(--danger); }
table.data.compare th.num-col, table.data.compare td.num-col { text-align: right; }
table.data.compare td .trend { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
table.data.compare td .trend.good { color: var(--done); }
table.data.compare td .trend.bad { color: var(--danger); }
.share { display: inline-block; width: 60px; height: 6px; margin-right: 8px; border-radius: 999px; background: var(--surface-2); vertical-align: 1px; overflow: hidden; }
.share i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
table.data td.num-col .share { width: 54px; margin-right: 8px; }
table.data.top-list td.num-col, table.data.top-list th.num-col { text-align: right; white-space: nowrap; }
table.data.top-list td:first-child { width: 100%; }
table.data.top-list td.worse { color: var(--danger); font-weight: 600; }
table.data.top-list td .name { line-height: 1.4; }
table.data.top-list .pill { margin-left: 4px; vertical-align: 1px; }
/* Positive by month: months across, the first column stays in view while the months scroll on a narrow screen. */
table.data.pos-grid th.num-col, table.data.pos-grid td.num-col { text-align: center; min-width: 58px; }
/* The row names are headers for screen readers but look like the cells beside them, not like the column heads. */
table.data.pos-grid th[scope="row"] { position: sticky; left: 0; z-index: 1; min-width: 150px; padding-top: 11px; padding-bottom: 11px; border-radius: 0; border-bottom: 1px solid var(--line);
  background: var(--surface); text-align: left; font-size: 13px; font-weight: 400; color: var(--ink); white-space: nowrap; }
table.data.pos-grid tr.field-row th[scope="row"] { padding-left: 40px; color: var(--ink-2); }
table.data.pos-grid td a { display: block; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
table.data.pos-grid td a:hover, table.data.pos-grid td a:focus-visible { text-decoration: underline; }
table.data.pos-grid .tot-start { border-left: 1px solid var(--line-strong); }
table.data.pos-grid td.muted { white-space: nowrap; }
.glance { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.glance li > a, .glance li > div { display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; margin: 0 -10px; border-radius: 10px; color: inherit; text-decoration: none; }
.glance li > a:hover, .glance li > a:focus-visible { background: var(--surface-2); }
.glance li > a:hover .k { color: var(--accent); }
.glance .k { flex: 1; font-size: 13px; color: var(--ink-2); }
.glance .v { font-size: 17px; font-weight: 650; letter-spacing: -.02em; white-space: nowrap; }
.glance .v small { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-left: 4px; letter-spacing: 0; }
.glance .v.bad { color: var(--danger); }
.glance .v.good { color: var(--done); }
.attention-list .row-link .count { font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; }
.attention-list .row-link .count.danger { color: var(--danger); }
.attention-list .row-link .count.warn { color: var(--active-ink); }
.seg-head { flex-wrap: wrap; }
.seg-head .actions { align-items: center; flex-wrap: wrap; }
.seg-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 26px 12px; font-size: 12px; }
.seg-panel .seg-chart { margin: 0 26px 10px; }
.seg-table th.num-col, .seg-table td.num-col { text-align: right; }
.seg-table th.num-col button { justify-content: flex-end; }
.seg-table td.worse { color: var(--danger); font-weight: 600; }
.seg-table tr.whole td { background: var(--surface-2); font-weight: 650; }
.seg-table .share-col { width: 90px; }
.seg-table td.share-col .share { width: 70px; margin: 0; }
.seg-table td .sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.seg-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-size: 12.5px; }
.defs { display: grid; gap: 12px; margin: 14px 0 0; }
.defs dt { font-weight: 650; }
.defs dd { margin: 2px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 1180px) {
  .span-7, .span-5, .span-4 { grid-column: span 12; }
}
@media (max-width: 900px) {
  .insight-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insight-grid { gap: 18px; margin-top: 18px; }
  .seg-tools { padding: 0 18px 12px; }
  .seg-panel .seg-chart { margin: 0 18px 10px; }
}
@media (max-width: 640px) {
  table.data.compare td .trend { display: inline; margin-left: 6px; }
  .glance .v { font-size: 15px; }
  table.data.pos-grid tr.field-row th[scope="row"] { padding-left: 28px; }
  table.data.pos-grid th[scope="row"] { min-width: 110px; }
  table.data.seg-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; }
  table.data.seg-table td:first-child { grid-column: 1 / -1; }
  table.data.seg-table td.num-col { text-align: left; }
  table.data.seg-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; color: var(--ink-3); }
  table.data.seg-table td.share-col { display: none; }
  table.data.seg-table tr.whole td:first-child { padding-bottom: 6px !important; }
}
@media print {
  .seg-tools { display: none !important; }
  .sec-title { break-after: avoid; }
}
/* Turnaround from receipt: each test against its own target (a card per test on phones, as the breakdown), and the one
   line a period without received times shows in place of the panels. */
table.data.rc-tests th.num-col, table.data.rc-tests td.num-col { text-align: right; white-space: nowrap; }
table.data.rc-tests td .name { line-height: 1.4; }
table.data.rc-tests td.worse, table.data.rc-tests td.worse a { color: var(--danger); font-weight: 600; }
.rc-none .panel-body .panel-note { padding: 0; }
@media (max-width: 640px) {
  table.data.rc-tests tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; }
  table.data.rc-tests td:first-child { grid-column: 1 / -1; padding-bottom: 6px !important; }
  table.data.rc-tests td.num-col { text-align: left; white-space: normal; }
  table.data.rc-tests td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; color: var(--ink-3); }
}

/* ---------------------------------------------------------------- the printed Insights report (views/insights.js, "the printed report")
   Paper only: drawn when printing starts, never shown on screen. A4 upright with 15 mm sides. Pages after the first
   carry a running header (the report, its period and test; the laboratory), and every page a footer (who prepared it;
   page n of N), their text set from insights.js. The first page has no top margin, so Chrome finds no room there for
   its own date and title and leaves its headers and footers off every page; the report's head gives that page its
   spacing.
   Colours are fixed light values whatever the theme, the chart tokens included (makeChart reads them from here), and
   print as they are without "Background graphics". */
.ins-report {
  --rp-ink: #1d2327; --rp-ink-2: #3c434a; --rp-muted: #5f6a73; --rp-rule: #c9cfd5; --rp-rule-soft: #e3e6ea; --rp-head: #f0f2f4;
  --rp-accent: #86374a; --rp-good: #276650; --rp-bad: #9f293a;
  --ch-1: #86374a; --ch-2: #4a7fb5; --ch-3: #6c8a3c; --ch-4: #7b5ea7; --ch-5: #c26a2e; --ch-good: #276650; --ch-bad: #9f293a;
  --ch-warn: #b98214; --ch-target: #b98214; --ch-muted: #cfd5db; --ch-grid: #e3e6ea; --ch-ink: #4f5961;
  --ink-2: #3c434a; --surface: #ffffff; --line-strong: #c9cfd5; --accent: #86374a; --sunken: #f1f3f5;
  display: none; color: var(--rp-ink); background: #fff; font-size: 9pt; line-height: 1.4; color-scheme: light;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
@page ins-report {
  size: A4 portrait;
  margin: 18mm 15mm 16mm;
  @top-left { font: 7.5pt "Segoe UI", system-ui, sans-serif; color: #5f6a73; vertical-align: bottom; padding-bottom: 3mm; border-bottom: .5pt solid #c9cfd5; }
  @top-right { font: 600 7.5pt "Segoe UI", system-ui, sans-serif; color: #5f6a73; text-align: right; vertical-align: bottom; padding-bottom: 3mm; border-bottom: .5pt solid #c9cfd5; }
  @bottom-left { font: 7.5pt "Segoe UI", system-ui, sans-serif; color: #5f6a73; vertical-align: top; padding-top: 3mm; }
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 7.5pt "Segoe UI", system-ui, sans-serif; color: #5f6a73; text-align: right; vertical-align: top; padding-top: 3mm; }
}
@page ins-report:first { margin-top: 0; }
@media print {
  .ins-report { display: block; page: ins-report; }
  .ins-screen { display: none !important; }
  :root:has(.ins-report) .main { display: block; }
  :root:has(.ins-report) { color-scheme: light; }
}
.ins-report :where(h1, h2, h3, p, figure, dl, dd) { margin: 0; }
/* The first page: the report's head and the summary, under its own top spacing (the page has no top margin). */
.rp-first { padding-top: 12mm; break-after: page; }
.rp-head { display: flex; align-items: center; gap: 5mm; padding-bottom: 4mm; border-bottom: 1.2pt solid var(--rp-accent); }
.rp-logo { width: 15mm; height: 15mm; flex: none; }
.rp-lab { font-size: 8pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rp-accent); }
.ins-report h1 { margin: .6mm 0 .4mm; font-size: 21pt; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--rp-ink); }
.rp-lead { font-size: 9.5pt; color: var(--rp-muted); }
.rp-meta { display: grid; grid-template-columns: 32mm minmax(0, 1fr); gap: 1.1mm 4mm; margin: 4mm 0 6mm; padding: 3mm 4mm; border-radius: 1.5mm; background: #f6f7f9; font-size: 8.5pt; }
.rp-meta > div { display: contents; }
.rp-meta dt { font-weight: 600; color: var(--rp-muted); }
.rp-meta dd { color: var(--rp-ink); }
/* Sections: a numbered heading with a line under it; from the second, each starts a page. */
.rp-page { break-before: page; }
.rp-section > h2 { display: flex; align-items: baseline; gap: 3mm; margin: 0 0 4.5mm; padding-bottom: 1.8mm; border-bottom: .6pt solid var(--rp-rule); font-size: 13pt; font-weight: 700; letter-spacing: -.01em; color: var(--rp-ink); break-after: avoid; }
.rp-n { min-width: 5mm; color: var(--rp-accent); }
.rp-section > h2 small { margin-left: auto; font-size: 8pt; font-weight: 400; letter-spacing: 0; color: var(--rp-muted); text-align: right; }
.rp-h3 { margin: 0 0 2.4mm; font-size: 9.5pt; font-weight: 700; color: var(--rp-ink); break-after: avoid; }
/* Key figures: four across, a grey top edge, green or red when the figure is measured against the target. */
.rp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3mm; margin-bottom: 5.5mm; }
.rp-kpi { padding: 2.6mm 3mm 2.8mm; border: .6pt solid var(--rp-rule); border-top: .9mm solid #b9c0c7; border-radius: 1.2mm; break-inside: avoid; }
.rp-kpi[data-tone="good"] { border-top-color: var(--rp-good); }
.rp-kpi[data-tone="bad"] { border-top-color: var(--rp-bad); }
.rp-kpi-label { font-size: 7.5pt; font-weight: 600; line-height: 1.3; color: var(--rp-muted); }
.rp-kpi-value { margin: .6mm 0 .2mm; font-size: 16pt; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--rp-ink); }
.rp-kpi-note { font-size: 7.5pt; color: var(--rp-ink-2); }
.rp-kpi[data-tone="good"] .rp-kpi-note { color: var(--rp-good); font-weight: 600; }
.rp-kpi[data-tone="bad"] .rp-kpi-note { color: var(--rp-bad); font-weight: 600; }
.rp-kpi[data-tone] .rp-kpi-note.plain { color: var(--rp-ink-2); font-weight: 400; }
.rp-kpi-line { margin-top: 1.2mm; font-size: 7pt; line-height: 1.35; color: var(--rp-muted); }
.rp-chg { font-weight: 600; color: var(--rp-ink-2); white-space: nowrap; }
.rp-chg.good { color: var(--rp-good); }
.rp-chg.bad { color: var(--rp-bad); }
.rp-points { display: grid; gap: 1.2mm; margin: 0 0 5.5mm; padding: 0; list-style: none; font-size: 8.5pt; line-height: 1.4; color: var(--rp-ink); }
.rp-points li { display: flex; align-items: flex-start; gap: 2.2mm; break-inside: avoid; }
.rp-points svg { width: 3.4mm; height: 3.4mm; flex: none; margin-top: .45mm; color: var(--rp-muted); }
.rp-points li[data-tone="good"] svg { color: var(--rp-good); }
.rp-points li[data-tone="bad"] svg { color: var(--rp-bad); }
/* Tables: a caption above, a grey head row ruled off, light rules between rows, figures right-aligned. */
.rp-table { width: 100%; margin: 0 0 6.5mm; border-collapse: collapse; font-size: 8pt; line-height: 1.35; font-variant-numeric: tabular-nums; color: var(--rp-ink); }
.rp-table caption { caption-side: top; padding: 0 0 2mm; text-align: left; font-size: 8.5pt; color: var(--rp-ink); }
.rp-table caption span, .rp-fig figcaption span { font-size: 7.5pt; color: var(--rp-muted); }
.rp-table thead { display: table-header-group; }
.rp-table thead th { padding: 1.3mm 2mm; border-bottom: .8pt solid var(--rp-ink-2); background: var(--rp-head); text-align: left; vertical-align: bottom; font-size: 7.5pt; font-weight: 600; color: var(--rp-ink-2); }
.rp-table td, .rp-table tbody th { padding: 1.2mm 2mm; border-bottom: .5pt solid var(--rp-rule-soft); text-align: left; vertical-align: top; font-weight: 400; }
.rp-table tbody tr:last-child > * { border-bottom: .8pt solid var(--rp-rule); }
.rp-table tr { break-inside: avoid; }
.rp-table.rp-keep { break-inside: avoid; }
.rp-table .n { text-align: right; white-space: nowrap; }
.rp-table .bad { color: var(--rp-bad); font-weight: 600; }
.rp-table .good { color: var(--rp-good); font-weight: 600; }
.rp-sub { display: block; font-size: 7pt; font-weight: 400; color: var(--rp-muted); }
.rp-dim { color: var(--rp-muted); }
.rp-flag { font-size: 7pt; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rp-bad); }
.rp-whole > * { background: #f8f9fa; font-weight: 600 !important; }
.rp-compare tbody th { font-weight: 600; }
.rp-glance td { font-size: 9.5pt; font-weight: 600; }
.rp-glance td span { font-size: 7.5pt; font-weight: 400; color: var(--rp-muted); }
/* Turnaround from receipt: its long column heads wrap, so its nine columns stay within the page. */
.rp-receipt thead th.n { white-space: normal; }
.rp-list tbody th { font-weight: 600; }
/* Positive by test and month: months across, a test's fields indented under it. */
.rp-grid th.n, .rp-grid td.n { text-align: center; }
.rp-grid .rp-test th { font-weight: 600; }
.rp-grid tbody th { white-space: nowrap; }
.rp-grid .rp-test th span { font-weight: 400; color: var(--rp-muted); }
.rp-grid .rp-field th { padding-left: 5mm; color: var(--rp-ink-2); }
.rp-grid .rp-tot { border-left: .6pt solid var(--rp-rule); }
.rp-grid td, .rp-grid tbody th { padding-top: 1mm; padding-bottom: 1mm; }
.rp-grid.many { table-layout: fixed; font-size: 7pt; }
.rp-grid.many thead th:first-child { width: 17mm; }
.rp-grid.many .rp-tot { width: 13mm; }
.rp-grid.many .rp-pos { width: 12mm; }
.rp-grid.many .rp-vs { width: 14mm; }
.rp-grid.many th, .rp-grid.many td { padding-left: .6mm; padding-right: .6mm; }
.rp-grid.many thead th.n { white-space: normal; }
.rp-grid.many .rp-field th { padding-left: 3mm; }
/* Figures: a numbered caption, the chart across its column, its key below. */
.rp-fig { min-width: 0; margin: 0 0 6.5mm; break-inside: avoid; }
.rp-fig figcaption { margin: 0 0 2mm; font-size: 8.5pt; color: var(--rp-ink); }
.rp-fig canvas { display: block; width: 100% !important; height: auto !important; }
.rp-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8mm; align-items: start; }
.rp-key { display: flex; flex-wrap: wrap; gap: 1mm 4.5mm; margin-top: 1.8mm; font-size: 7.5pt; color: var(--rp-ink-2); }
.rp-key span { display: inline-flex; align-items: center; gap: 1.5mm; }
.rp-key i { display: inline-block; width: 2.8mm; height: 2.8mm; border-radius: .6mm; }
.rp-key i.line { width: 4.2mm; height: .7mm; border-radius: 0; }
.rp-key i.dash { width: 4.2mm; height: 0; border-radius: 0; border-top: .7mm dashed currentColor; background: none; }
.rp-key i.scale { width: 12mm; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, var(--sunken)), var(--accent)); }
.ins-report .heatmap { grid-template-columns: 7mm repeat(var(--cols), minmax(0, 1fr)); gap: .6mm; font-size: 6.5pt; color: var(--rp-muted); overflow: visible; }
.ins-report .heatmap .hm { aspect-ratio: 1.3; border-radius: .5mm; background: #f1f3f5; }
.rp-defs { columns: 2; column-gap: 8mm; font-size: 8pt; line-height: 1.45; }
.rp-defs > div { margin: 0 0 3mm; break-inside: avoid; }
.rp-defs dt { margin-bottom: .6mm; font-weight: 700; color: var(--rp-ink); }
.rp-defs dd { color: var(--rp-ink-2); }
.rp-about { margin-top: 2mm; font-size: 7.5pt; color: var(--rp-muted); }
.rp-intro { margin: 0 0 4mm; font-size: 8pt; color: var(--rp-ink-2); }
.rp-about { margin-top: 4mm; padding-top: 2.5mm; border-top: .5pt solid var(--rp-rule-soft); }
.rp-none { margin: 0 0 4mm; font-style: italic; color: var(--rp-muted); }
.ins-report > .rp-none { padding-top: 12mm; }   /* the first page has no top margin */

/* ---------------------------------------------------------------- Searchable dropdowns (components/select.js): selects with five or more choices */
.ss { position: relative; display: inline-block; max-width: 100%; min-width: 0; vertical-align: middle; }
.field > .ss { display: block; }
.ss .ss-native { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.ss-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; cursor: pointer; text-align: left; appearance: none; background-image: none !important; padding-right: 12px !important; color: var(--ink); font-family: inherit; }
.ss-btn .ss-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-btn svg { width: 14px; height: 14px; flex: none; color: var(--accent); transition: transform .2s var(--curve); }
.ss-btn[aria-expanded="true"] { border-color: var(--accent); }
.ss-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.ss-btn:disabled { opacity: .6; cursor: default; }
.ss-pop { position: fixed; z-index: 96; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-pop); }
.ss-pop .ss-search { width: 100%; }
.ss-list { list-style: none; margin: 0; padding: 0; max-height: min(320px, 50vh); overflow-y: auto; overscroll-behavior: contain; }
.ss-list li { padding: 8px 10px; border-radius: 7px; font-size: 13px; line-height: 1.45; color: var(--ink); cursor: pointer; }
.ss-list li.active { background: var(--surface-2); }
.ss-list li[aria-selected="true"] { font-weight: 600; color: var(--accent); }
.ss-list li.ss-any { color: var(--ink-2); font-style: italic; }
.ss-list li.ss-none { color: var(--ink-3); cursor: default; }
/* A disabled choice (a kit lot on hold): listed in muted ink, its title saying why, and it cannot be chosen. */
.ss-list li.ss-disabled { color: var(--ink-3); cursor: not-allowed; }
.ss-count { min-height: 0; padding: 0 4px; font-size: 11px; color: var(--ink-3); }
.ss-count:empty { display: none; }

/* ------------------------------------------------------------------ bottom navigation (phones and tablets)
   Up to 900px wide the sidebar gives way to a floating bar: the first four pages the role can open, and More for the
   rest (a sheet from the bottom). Anything fixed or sticky to the bottom of the screen adds --nav-clear so it sits
   above the bar, and the page ends with --nav-space so its last row is never hidden. While someone types, the bar
   steps aside (html.typing) and the floating bars drop back down. */
:root { --nav-space: 0px; --nav-clear: 0px; }
.bottom-nav { display: none; }
@media screen and (max-width: 900px) {
  :root.has-bottom-nav:not(.display-mode) { --nav-space: calc(92px + env(safe-area-inset-bottom)); --nav-clear: var(--nav-space); }
  :root.has-bottom-nav.typing { --nav-clear: 0px; }
  .has-bottom-nav .main { padding-bottom: var(--nav-space); }
  .bottom-nav {
    position: fixed; z-index: 45; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; height: 72px; padding: 6px;
    border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-pop);
    transition: transform .25s var(--curve), opacity .2s var(--curve);
  }
  .typing .bottom-nav { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
  .bn-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 0 0 2px; border: 0; border-radius: 16px;
    background: transparent; color: var(--ink-3); font: inherit; font-size: 11px; font-weight: 600; line-height: 1.25; text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .bn-ic { position: relative; display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; transition: background .2s var(--curve); }
  .bn-ic svg { width: 22px; height: 22px; color: var(--ink-2); }
  .bn-label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bn-item:hover .bn-ic { background: var(--hover); }
  .bn-item[aria-current="page"], .bn-item.on { color: var(--accent); }
  .bn-item[aria-current="page"] .bn-ic, .bn-item.on .bn-ic { background: var(--accent-soft); }
  .bn-item[aria-current="page"] svg, .bn-item.on svg { color: var(--accent); }
  .bn-item:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
  .bn-badge {
    position: absolute; top: -4px; left: 31px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand-gold); color: var(--brand-ink);
    box-shadow: 0 0 0 2px var(--surface); font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
  }
  .bn-badge[hidden] { display: none; }
}

/* The More sheet: a drawer that rises from the bottom (openDrawer({ sheet: true })). */
.drawer.sheet {
  top: auto; left: 0; right: 0; bottom: 0; width: min(600px, 100%); max-height: 86vh; max-height: min(86dvh, 700px); margin: 0 auto; display: block;
  overflow-y: auto; overscroll-behavior: contain; padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; transform: translateY(40px);
}
.drawer.sheet.open { transform: none; }
.sheet-grip { width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 4px; background: var(--line-strong); }
.sheet-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sheet-head .account-link { flex: 1; margin: 0; padding: 8px 12px 8px 8px; }
.sheet-head .account-link[aria-current="page"] { background: var(--secondary-bg); }
.sheet .nav-group { margin: 20px 4px 10px; }
.sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sheet-link {
  display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 56px; padding: 10px 14px; border-radius: 14px; background: var(--surface-2);
  color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.35; text-decoration: none;
}
.sheet-link span { min-width: 0; overflow-wrap: anywhere; }
.sheet-link svg { width: 20px; height: 20px; flex: none; color: var(--icon); }
.sheet-link:hover { background: var(--hover); }
.sheet-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.sheet-foot { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.sheet-foot .theme-switch { margin: 0; justify-content: flex-start; }
.sheet-foot .nav-link { width: auto; margin: 0 0 0 auto; }

/* ================================================================ Glass (the MLS look)
   Frosted, translucent panels over the hospital backdrop and soft brand glows. This is a layer over the solid design
   above, switched on by data-surface="glass" on <html> (theme.js). theme.js leaves it off (data-surface="solid") when
   the browser cannot blur, when the device asks for less transparency or for high-contrast colours, and when the
   person chose solid panels (Account > Preferences). Print always uses the solid design.
   Legibility was checked on the worst-case glass background (the gold glow over the photo): the secondary ink is a
   shade deeper here to keep 4.5:1, and the chart colours still pass. Sticky headers stay opaque so rows do not show
   through, and the heatmap keeps an opaque base so its colour scale reads the same everywhere. */
@media screen {
  :root[data-surface="glass"] {
    --ink-3: #5f6a73;
    --surface-2: rgba(32, 39, 44, .042);
    --sunken: rgba(32, 39, 44, .06);
    --hover: rgba(32, 39, 44, .042);
    --line: rgba(32, 39, 44, .095);
    --line-strong: rgba(32, 39, 44, .15);
    --solid-sunken: #f1f3f5;
    --g-panel: linear-gradient(140deg, rgba(255, 255, 255, .76), rgba(255, 255, 255, .6));
    --g-panel-hover: linear-gradient(140deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .72));
    --g-side: linear-gradient(180deg, rgba(255, 255, 255, .64), rgba(255, 255, 255, .48));
    --g-top: rgba(255, 255, 255, .56);
    --g-float: rgba(255, 255, 255, .9);
    --g-pop: rgba(255, 255, 255, .86);
    --g-sticky: #f7f7f8;
    --g-blur: blur(24px) saturate(170%);
    --g-blur-strong: blur(32px) saturate(180%);
    --g-edge: inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .9);
    --g-rim: rgba(255, 255, 255, .7);
    --g-shade: rgba(46, 26, 34, .05);
    --g-shadow: 0 1px 2px rgba(46, 26, 34, .04), 0 10px 30px rgba(46, 26, 34, .06);
    --g-shadow-hover: 0 2px 4px rgba(46, 26, 34, .05), 0 16px 38px rgba(46, 26, 34, .09);
    --g-backdrop:
      radial-gradient(55vmax 45vmax at 0% 0%, rgba(134, 55, 74, .18), transparent 70%),
      radial-gradient(50vmax 50vmax at 100% 35%, rgba(225, 180, 66, .22), transparent 70%),
      radial-gradient(45vmax 40vmax at 35% 100%, rgba(74, 127, 181, .1), transparent 70%),
      linear-gradient(135deg, rgba(248, 248, 246, .34), rgba(235, 238, 237, .5)),
      url("../img/backdrop.webp") center / cover no-repeat,
      #f5f6f8;
  }
  :root[data-surface="glass"][data-theme="dark"] {
    --ink-3: #a8b5be;
    --surface-2: rgba(255, 255, 255, .05);
    --sunken: rgba(0, 0, 0, .16);
    --hover: rgba(255, 255, 255, .05);
    --line: rgba(255, 255, 255, .09);
    --line-strong: rgba(255, 255, 255, .14);
    --solid-sunken: #182127;
    --g-panel: linear-gradient(140deg, rgba(38, 50, 58, .68), rgba(24, 33, 39, .56));
    --g-panel-hover: linear-gradient(140deg, rgba(44, 57, 66, .78), rgba(28, 38, 45, .68));
    --g-side: linear-gradient(180deg, rgba(20, 29, 36, .68), rgba(16, 24, 30, .6));
    --g-top: rgba(17, 25, 31, .62);
    --g-float: rgba(27, 37, 43, .92);
    --g-pop: rgba(29, 39, 46, .9);
    --g-sticky: #1d272e;
    --g-blur: blur(24px) saturate(150%);
    --g-blur-strong: blur(32px) saturate(160%);
    --g-edge: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .07);
    --g-rim: rgba(255, 255, 255, .07);
    --g-shade: rgba(0, 0, 0, .2);
    --g-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 12px 34px rgba(0, 0, 0, .28);
    --g-shadow-hover: 0 2px 4px rgba(0, 0, 0, .24), 0 18px 40px rgba(0, 0, 0, .34);
    --g-backdrop:
      radial-gradient(55vmax 45vmax at 0% 0%, rgba(134, 55, 74, .32), transparent 70%),
      radial-gradient(50vmax 50vmax at 100% 35%, rgba(225, 180, 66, .1), transparent 70%),
      radial-gradient(45vmax 40vmax at 35% 100%, rgba(74, 127, 181, .12), transparent 70%),
      linear-gradient(135deg, rgba(19, 28, 33, .74), rgba(27, 36, 41, .84)),
      url("../img/backdrop.webp") center / cover no-repeat,
      #12191e;
  }

  /* The backdrop sits on a fixed layer, so scrolling never repaints the photo. */
  :root[data-surface="glass"] body { background: var(--bg); }
  :root[data-surface="glass"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--g-backdrop); }

  /* The frame: sidebar and top bar. */
  :root[data-surface="glass"] .sidebar {
    background: var(--g-side); -webkit-backdrop-filter: var(--g-blur-strong); backdrop-filter: var(--g-blur-strong);
    box-shadow: inset -1px 0 0 var(--g-rim), 12px 0 32px var(--g-shade);
  }
  :root[data-surface="glass"] .topbar {
    background: var(--g-top); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
    box-shadow: inset 0 -1px 0 var(--g-rim), 0 8px 24px var(--g-shade);
  }

  /* Panels and figures. :where() keeps these at the specificity of the rules they replace, so variants such as the
     selected audit figure keep their own fill. */
  :where(:root[data-surface="glass"]) :is(.panel, .strip > *) {
    background: var(--g-panel); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
    box-shadow: var(--g-edge), var(--g-shadow);
  }
  :where(:root[data-surface="glass"]) .strip > a:hover { background: var(--g-panel-hover); box-shadow: var(--g-edge), var(--g-shadow-hover); }
  /* Figures inside a panel are tinted wells, not a second layer of glass. */
  :where(:root[data-surface="glass"]) .account-panel .strip > * { -webkit-backdrop-filter: none; backdrop-filter: none; }
  :where(:root[data-surface="glass"]) .heatmap { --sunken: var(--solid-sunken); }
  /* The Logsheet's notice of results returned to you is a surface of its own on the page, tinted red. The printable
     sheet (.paper) is not glass: it stays white paper. */
  :where(:root[data-surface="glass"]) .ls-callout {
    background: linear-gradient(color-mix(in srgb, var(--danger) 9%, transparent), color-mix(in srgb, var(--danger) 9%, transparent)), var(--g-panel);
    -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); box-shadow: var(--g-edge), var(--g-shadow);
  }
  :where(:root[data-surface="glass"]) .ls-callout:hover { box-shadow: inset 0 0 0 1px var(--danger), var(--g-edge), var(--g-shadow-hover); }
  /* Insights: the months scroll under the first column of "Positive by month", so it stays opaque. */
  :where(:root[data-surface="glass"]) table.data.pos-grid th[scope="row"] { background: var(--g-sticky); }

  /* Overlays: drawers, dialogs and the command palette sit over a scrim, so they are nearly opaque for reading;
     menus and dropdowns float over the page. */
  :where(:root[data-surface="glass"]) :is(.drawer, .dialog, .palette) {
    background: var(--g-float); -webkit-backdrop-filter: var(--g-blur-strong); backdrop-filter: var(--g-blur-strong);
    box-shadow: var(--g-edge), var(--shadow-overlay);
  }
  :where(:root[data-surface="glass"]) :is(.menu, .ss-pop) {
    background: var(--g-pop); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
    box-shadow: inset 0 1px 0 var(--g-rim), var(--shadow-pop);
  }
  :where(:root[data-surface="glass"]) :is(.login-frame, .password-panel) {
    background: var(--g-panel); -webkit-backdrop-filter: var(--g-blur-strong); backdrop-filter: var(--g-blur-strong);
    box-shadow: var(--g-edge), var(--shadow);
  }

  /* Sticky headers stay opaque, so the rows scrolling beneath them never show through. */
  :where(:root[data-surface="glass"]) :is(.sticky-save, .import-table table.data th, .perm-matrix thead th, .perm-matrix tbody th[scope="row"]) { background: var(--g-sticky); }
  :where(:root[data-surface="glass"]) .day-head { background: var(--g-sticky); }
}
@media screen and (max-width: 900px) {
  /* The bottom bar floats over the page like a menu: nearly opaque, so labels read over any panel. */
  :root[data-surface="glass"] .bottom-nav {
    background: var(--g-float); border-color: transparent; -webkit-backdrop-filter: var(--g-blur-strong); backdrop-filter: var(--g-blur-strong);
    box-shadow: var(--g-edge), var(--shadow-pop);
  }
}