/* Clarify LIMS - design system applied 2026-08-19.
   Order: fonts, tokens, legacy shim, components, then the existing
   stylesheet. Later rules still win, so this is additive and
   reversible: delete the four blocks to return to the old look. */

/* =============================================================================
   Archivo — self-hosted @font-face (no build step, no CDN)
   Paste at the TOP of app/web/static/styles.css.
   Expects the woff2 files at app/web/static/fonts/ — see FONTS-README.md for
   how to fetch them (I can't download binaries into this project).
   Weights used by the design: 400, 500, 600, 700, 800.
   ============================================================================= */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-variable.woff2') format('woff2-variations'),
       url('fonts/archivo-variable.woff2') format('woff2');
  font-weight: 100 900;              /* variable — one file covers every weight */
  font-style: normal;
  font-display: swap;
}

/* --- Static fallback: use these INSTEAD of the block above if you prefer
       fixed instances over the variable font. Delete the block above first. ---

@font-face { font-family:'Archivo'; src:url('fonts/archivo-400.woff2') format('woff2');
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('fonts/archivo-500.woff2') format('woff2');
             font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('fonts/archivo-600.woff2') format('woff2');
             font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('fonts/archivo-700.woff2') format('woff2');
             font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('fonts/archivo-800.woff2') format('woff2');
             font-weight:800; font-style:normal; font-display:swap; }
--- */

/* Logo lockup only — never for UI text. Ship the woff2 you licensed for Diavlo. */
@font-face {
  font-family: 'Diavlo Bold';
  src: url('fonts/diavlo-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: block;               /* wordmark should not swap-flash */
}

/* Apply */
body { font-family: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }

/* =============================================================================
   Clarify LIMS — "Glass" design tokens
   Paste into app/web/static/styles.css, replacing the current :root block.
   Existing token names are PRESERVED (--accent, --accent-strong, --accent-soft,
   --bg, --card, --surface-2, --ink, --muted, --line) so current rules keep working.
   Theme: offwhite only (no dark mode in v1).
   ============================================================================= */

:root {
  /* ---- Brand quad — DECORATIVE ONLY -------------------------------------
     Logo, category coding, small accents. Never used to signal result state. */
  --brand-red:   #d63324;
  --brand-blue:  #2a5cdb;
  --brand-gold:  #f0a500;
  --brand-green: #12923f;

  /* ---- Interactive accent (single) --------------------------------------
     Replaces the legacy teal #10b981. Brand blue drives every interactive
     state: primary buttons, links, focus rings, selected nav, active tabs. */
  --accent:        #2a5cdb;
  --accent-strong: #1d45a8;   /* hover / pressed */
  --accent-soft:   #eaf0fc;   /* tinted fill, selected row, info pill bg */
  --accent-ring:   rgba(42, 92, 219, 0.35);

  /* ---- Surfaces (offwhite warm neutral) --------------------------------- */
  --bg:           #f1efe9;   /* app canvas behind cards */
  --card:         #ffffff;   /* opaque card fill (fallback + print) */
  --surface-2:    #f8f7f3;   /* inset / zebra / table stripe */
  --surface-3:    #efece4;   /* wells, disabled fields */
  --chrome:       #f6f4ef;   /* sidebar + table header base */
  --chrome-hi:    #fdfcfa;   /* lit top edge of chrome */
  --chrome-lo:    #e4e1d9;   /* shaded base of chrome */

  /* ---- Glass (progressive enhancement — see components.css) ------------- */
  --surface-glass:      linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.62));
  --surface-glass-blur: blur(20px) saturate(1.5);
  --glass-edge:         rgba(255, 255, 255, .80);   /* hairline border */
  --glass-inner-hi:     rgba(255, 255, 255, .95);   /* inset top highlight */

  /* ---- Chrome bevel (sidebar / sticky table header) --------------------- */
  --chrome-bevel-bg:
    linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 42%,
                            rgba(27,36,55,.05) 44%, rgba(27,36,55,.13) 100%),
    linear-gradient(180deg, var(--chrome-hi) 0%, var(--chrome) 40%, #eeebe4 72%, var(--chrome-lo) 100%);
  --chrome-bevel-shadow:
    inset 0 1px 0 rgba(255,255,255,1), inset 0 2px 6px rgba(255,255,255,.9),
    inset 0 -2px 4px rgba(27,36,55,.12), 0 6px 14px rgba(27,36,55,.14);
  --chrome-edge:  rgba(27, 36, 55, .16);

  /* ---- Text ------------------------------------------------------------- */
  --ink:          #1b2437;   /* primary text, headings, result values */
  --ink-2:        #39445c;   /* secondary body / table cells */
  --text-muted:   #454c60;   /* AA-verified muted (4.5:1 on --chrome) */
  --muted:        #5f5a4c;   /* small caps section labels on chrome */
  --ink-invert:   #ffffff;

  /* ---- Lines ------------------------------------------------------------ */
  --line:         #e4e1d9;   /* default border */
  --line-2:       #eef0f5;   /* table row rule */
  --line-strong:  rgba(27, 36, 55, .22);

  /* ---- Result / status semantics — LEGAL MEANING, never restyle ---------
     Never re-map these to brand quad decoration. FAIL must always be the
     highest-contrast, highest-saturation state on the screen. */
  --pass-ink: #0f6b30;  --pass-bg: #e7f4eb;  --pass-line: #bfe0c9;
  --fail-ink: #a51f13;  --fail-bg: #fdeceb;  --fail-line: #f2bdb8;
  --warn-ink: #8a5c00;  --warn-bg: #fbf3dc;  --warn-line: #ecd79a;  /* IN PROGRESS / pending */
  --info-ink: #1d45a8;  --info-bg: var(--accent-soft); --info-line: #c5d5f5; /* PLACED / TESTED / REPORTED */
  --nd-ink:   #4b5468;  --nd-bg:   #eef0f4;  --nd-line: #d7dbe3;  /* ND — not detected */
  --nt-ink:   #6b6250;  --nt-bg:   #f3f0e8;  --nt-line: #ddd6c6;  /* NT — not tested */
  --locked-ink: #2d2a4a; --locked-bg: #ecebf5; --locked-line: #cfcce6; /* signed / locked */

  /* ---- Typography ------------------------------------------------------- */
  --font-ui:   'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mark: 'Diavlo Bold', 'Archivo', sans-serif;   /* logo lockup ONLY */
  --font-num:  'Archivo', 'Helvetica Neue', sans-serif; /* use tnum, see below */

  --fs-caps:   10.5px;  /* table headers, section labels — 700, +1.5px tracking */
  --fs-xs:     11.5px;  /* pills, meta */
  --fs-sm:     12.5px;  /* controls, buttons */
  --fs-base:   13px;    /* table cells, body */
  --fs-md:     13.5px;  /* nav items */
  --fs-lg:     17px;    /* page title */
  --fs-xl:     22px;    /* section heading */
  --fs-stat:   34px;    /* stat card figure */
  --fs-hero:   44px;    /* potency headline value */

  --lh-tight:  1.1;
  --lh-body:   1.45;
  --track-caps: 1.5px;
  --track-mark: 2px;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 40px;

  /* ---- Radius ----------------------------------------------------------- */
  --r-sm:  8px;   /* inputs, small buttons */
  --r-md:  10px;  /* buttons, selects */
  --r-lg:  12px;  /* primary button, small cards */
  --r-xl:  18px;  /* cards, table shell, modals */
  --r-pill: 999px;

  /* ---- Elevation -------------------------------------------------------- */
  --elev-1: 0 4px 14px rgba(27, 36, 55, .08);
  --elev-2: 0 10px 28px rgba(27, 36, 55, .10);
  --elev-3: 0 12px 32px rgba(27, 36, 55, .10);
  --elev-4: 0 24px 60px rgba(27, 36, 55, .22);   /* modal */

  /* ---- Density (bench default: comfortable-dense) ---------------------- */
  --row-h:      44px;   /* data row — also the minimum glove hit target */
  --row-h-dense:40px;   /* opt-in via .is-dense on the table */
  --head-h:     52px;   /* sticky table header */
  --control-h:  44px;   /* buttons, inputs, selects, tabs */
  --tap-min:    44px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur-fast: 120ms;
  --dur:      180ms;
}

/* Tabular figures for every number that gets compared down a column. */
.num, td.num, .stat-figure, .result-value { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* ---------------------------------------------------------------------------
   Legacy token shim. The rules below this file were written against the old
   names; each is remapped onto the new design system rather than rewritten,
   so the restyle is one reversible layer instead of 1,400 edited lines.
   Status colours map to the SEMANTIC families, never to the interactive
   accent: a PASS must never render in the same colour as a link.
   ------------------------------------------------------------------------- */
:root {
  --font: var(--font-ui);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --accent-deep:   var(--accent-strong);
  --accent-bright: #6f9bff;
  --accent-soft-2: #d8e4fb;

  /* legacy "green" family meant GOOD RESULT, not clickable: map to PASS */
  --green:    var(--pass-ink);
  --green-d:  #0b5526;
  --green-hi: #7fc79a;
  --green-bg: var(--pass-bg);

  --red:      var(--fail-ink);
  --red-bg:   var(--fail-bg);
  --red-line: var(--fail-line);
  --amber:    var(--warn-ink);
  --amber-bg: var(--warn-bg);
  --blue:     var(--info-ink);
  --blue-bg:  var(--info-bg);

  --gray:  var(--text-muted);
  --faint: var(--line-2);
  --bg-2:  var(--surface-2);

  --glass:       var(--surface-glass);
  --glass-2:     linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.48));
  --glass-ctl:   linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.72));
  --glass-hi:    var(--glass-inner-hi);
  --glass-line:  var(--glass-edge);
  --glass-inset: inset 0 1px 0 var(--glass-inner-hi);
  --blur:    var(--surface-glass-blur);
  --blur-sm: blur(10px) saturate(1.3);

  --shadow-xs: 0 1px 2px rgba(27,36,55,.06);
  --shadow-sm: var(--elev-1);
  --shadow:    var(--elev-2);
  --shadow-lg: var(--elev-4);

  --r: var(--r-md);
  --t:   var(--dur) var(--ease);
  --t-2: var(--dur-fast) var(--ease);

  --appbar-h:  64px;
  --sidebar-w: 232px;

  /* Five names used only with fallbacks, two of which fell back to the OLD
     green. Defined here so they follow the new system instead. */
  --rod:        var(--accent);        /* nav rail indicator */
  --stripe:     var(--accent);        /* card edge stripe */
  --row-hover:  var(--accent-soft);   /* table row hover */
  --brand:      var(--accent);        /* focus outline */
  --panel-2:    var(--surface-2);
}

/* =============================================================================
   Clarify LIMS — component recipes (vanilla CSS, no build step)
   Depends on tokens.css. Class names are suggestions — map them onto whatever
   your h() helper already emits. Every rule degrades to an opaque fill when
   backdrop-filter is unsupported (see @supports blocks).
   ============================================================================= */

/* ---------- App shell ----------------------------------------------------- */
.app {
  display: flex;
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 15% -5%, rgba(42,92,219,.08), transparent 60%),
    radial-gradient(800px 450px at 90% 0%,  rgba(240,165,0,.08),  transparent 60%),
    radial-gradient(700px 500px at 70% 100%, rgba(18,146,63,.06), transparent 60%),
    var(--bg);
}
.app__main { flex: 1; min-width: 0; overflow-x: hidden; display: flex; flex-direction: column; }
.app__content { padding: var(--sp-6) var(--sp-7) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-5); }

/* ---------- Sidebar (glass bevel) ---------------------------------------- */
.sidebar {
  width: 232px; flex-shrink: 0;
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  padding: var(--sp-5) 0 var(--sp-4);
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.9);
  border-right: 1px solid var(--chrome-edge);
  background:
    linear-gradient(90deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.45) 30%,
                           rgba(27,36,55,.05) 70%, rgba(27,36,55,.12) 100%),
    linear-gradient(180deg, var(--chrome-hi) 0%, var(--chrome) 34%, #efede7 72%, var(--chrome-lo) 100%);
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.95), inset 0 1px 0 rgba(255,255,255,.95),
    inset -2px 0 5px rgba(27,36,55,.10), inset 0 -2px 6px rgba(27,36,55,.10),
    6px 0 18px rgba(27,36,55,.12);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
}
/* specular curve — the thing that makes it read as glass rather than a gradient */
.sidebar::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 52%;
  background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.02));
  border-radius: 0 60% 60% 0 / 0 100% 100% 0;
  pointer-events: none; z-index: -1;
}

/* Logo lockup. Mark is raster-only: keep it ≤ 300px and on LIGHT surfaces. */
.sidebar__brand { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-5) 22px; }
.sidebar__mark  { width: 36px; height: 36px; display: block; border-radius: var(--r-md); background: #fff;
                  box-shadow: 0 3px 10px rgba(27,36,55,.18), inset 0 1px 0 rgba(255,255,255,.6); }
.sidebar__word  { font-family: var(--font-mark); font-weight: 700; font-size: 15px;
                  letter-spacing: var(--track-mark); color: var(--ink); line-height: 1; }
.sidebar__sub   { font-family: var(--font-ui); font-weight: 700; font-size: 9px;
                  letter-spacing: 3.5px; color: #16702f; margin-top: 3px; }

.sidebar__label { padding: 0 var(--sp-5) var(--sp-2); font-size: var(--fs-caps); font-weight: 700;
                  letter-spacing: 2px; color: var(--muted); }
.sidebar__label + .sidebar__label, .sidebar__group + .sidebar__label { padding-top: 18px; }
.sidebar__group { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }

/* Nav item — 44px tall for gloved taps */
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: var(--tap-min); padding: 0 var(--sp-3);
  border-radius: var(--r-sm); border: 0; background: transparent; width: 100%;
  font: 500 var(--fs-md)/1 var(--font-ui); color: var(--text-muted);
  cursor: pointer; text-align: left; transition: background var(--dur) var(--ease);
}
.nav-item:hover { background: rgba(27,36,55,.06); }
.nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-item.is-active { background: rgba(27,36,55,.07); color: var(--ink); font-weight: 700; }

/* Active indicator: 3px glass rod, brand-quad colored per section (decorative) */
.nav-item__rod {
  width: 3px; height: 10px; flex-shrink: 0; border-radius: var(--r-pill);
  background: rgba(27,36,55,.12);
  transition: height var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.nav-item.is-active .nav-item__rod {
  height: 20px;
  /* --rod set per item: var(--brand-blue) | red | gold | green */
  background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, var(--rod, var(--accent)) 32%,
                                      var(--rod, var(--accent)) 68%, rgba(0,0,0,.25) 100%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--rod, var(--accent)) 50%, transparent),
              inset 0 0 0 .5px rgba(255,255,255,.55);
}
.sidebar__foot { margin: auto var(--sp-5) 0; padding-top: var(--sp-4); border-top: 1px solid rgba(27,36,55,.12); }
.sidebar__foot b { display: block; font-size: 12px; font-weight: 600; color: var(--ink); }
.sidebar__foot span { font-size: 11px; color: var(--muted); }

/* ---------- Topbar ------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--sp-4);
  height: 60px; padding: 0 var(--sp-7);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border-bottom: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 1px 0 rgba(27,36,55,.06), inset 0 1px 0 rgba(255,255,255,.9);
}
.topbar__title { margin: 0; font: 800 var(--fs-lg)/1 var(--font-ui); letter-spacing: .5px; color: var(--ink); }
.search {
  flex: 1; max-width: 420px; display: flex; align-items: center; gap: var(--sp-2);
  height: var(--control-h); padding: 0 var(--sp-4);
  background: rgba(241,239,233,.75); border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--r-pill); box-shadow: inset 0 1px 2px rgba(27,36,55,.08);
}
.search input { flex: 1; border: 0; background: transparent; outline: none;
                font: 400 var(--fs-base) var(--font-ui); color: var(--ink); }

/* ---------- Glass card / panel ------------------------------------------ */
.card {
  position: relative; overflow: hidden;
  background: var(--card);                     /* fallback first */
  border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--elev-2);
  padding: 18px var(--sp-5) var(--sp-4);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card {
    background: var(--surface-glass);
    backdrop-filter: var(--surface-glass-blur); -webkit-backdrop-filter: var(--surface-glass-blur);
    border-color: var(--glass-edge);
    box-shadow: var(--elev-2), inset 0 1px 0 var(--glass-inner-hi);
  }
}
/* category stripe — decorative quad color, 5px, full height on the left */
.card__stripe { position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--stripe, var(--accent)); }
.card__label  { font-size: var(--fs-caps); font-weight: 700; letter-spacing: 2px; color: var(--muted); }
.stat-figure  { font: 800 var(--fs-stat)/1 var(--font-ui); color: var(--ink); margin-top: var(--sp-2);
                font-variant-numeric: tabular-nums; }
.card__sub    { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  min-height: var(--control-h); padding: 0 var(--sp-4);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: 600 var(--fs-sm) var(--font-ui); color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.65));
  border: 1px solid var(--glass-edge); border-radius: var(--r-md);
  box-shadow: var(--elev-1), inset 0 1px 0 rgba(255,255,255,.9);
  cursor: pointer; transition: border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { border-color: var(--line-strong); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn--primary {
  color: #fff; border-color: rgba(255,255,255,.35); border-radius: var(--r-lg); font-weight: 700; font-size: 13px;
  background: linear-gradient(180deg, #4a75e4 0%, var(--accent) 55%, var(--accent-strong) 100%);
  box-shadow: 0 6px 16px var(--accent-ring), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn--primary:hover { background: linear-gradient(180deg, #3a66d8 0%, var(--accent-strong) 55%, #17368a 100%); }
.btn--danger { color: #fff; background: linear-gradient(180deg, #e04b3d 0%, var(--brand-red) 60%, #a51f13 100%);
               box-shadow: 0 6px 16px rgba(214,51,36,.3), inset 0 1px 0 rgba(255,255,255,.4); }

/* Segmented filter pills */
.segmented { display: flex; gap: var(--sp-1); padding: var(--sp-1); min-width: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.6));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-edge); border-radius: var(--r-pill);
  box-shadow: var(--elev-1), inset 0 1px 0 rgba(255,255,255,.9); }
.segmented button { min-height: 36px; padding: 0 var(--sp-4); border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-2); font: 600 var(--fs-sm) var(--font-ui); cursor: pointer; }
.segmented button.is-on { background: var(--ink); color: var(--ink-invert); }

/* Toolbar row — must wrap so the primary action never leaves the viewport */
.toolbar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.toolbar__actions { margin-left: auto; display: flex; gap: 10px; flex-shrink: 0; }

/* ---------- Data table (dense, sticky bevel header, zebra) -------------- */
.table-shell {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--elev-3); overflow: auto; max-height: calc(100vh - 260px);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .table-shell { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
                 backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
                 border-color: var(--glass-edge); box-shadow: var(--elev-3), inset 0 1px 0 var(--glass-inner-hi); }
}
.dtable { width: 100%; min-width: 1140px; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); }
.dtable thead th {
  position: sticky; top: 0; z-index: 2;
  height: var(--head-h); padding: 0 var(--sp-3); text-align: left; white-space: nowrap;
  font: 700 var(--fs-caps)/1 var(--font-ui); letter-spacing: var(--track-caps);
  color: #39415a; text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background: var(--chrome-bevel-bg);
  border-top: 1px solid rgba(255,255,255,.95);
  border-bottom: 1px solid var(--chrome-edge);
  box-shadow: var(--chrome-bevel-shadow);
  backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
}
.dtable tbody td { height: var(--row-h); padding: 0 var(--sp-3); border-bottom: 1px solid var(--line-2);
                   color: var(--ink-2); vertical-align: middle; }
.dtable.is-dense tbody td { height: var(--row-h-dense); }
.dtable tbody tr:nth-child(even) td { background: var(--surface-2); }
.dtable tbody tr:hover td { background: #f5f7fb; }
.dtable tbody tr.is-selected td { background: var(--accent-soft); }
.dtable td.id { font-weight: 700; color: var(--ink); }
.dtable td.num, .dtable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dtable td.truncate { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A result value is never dimmed, never overlapped, never animated. */
.result-value { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- Status pills — legal meaning -------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font: 700 var(--fs-xs)/1.3 var(--font-ui); white-space: nowrap;
  border: 1px solid var(--pill-line, transparent);
  background: var(--pill-bg); color: var(--pill-ink);
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--pass     { --pill-ink: var(--pass-ink);   --pill-bg: var(--pass-bg);   --pill-line: var(--pass-line); }
.pill--fail     { --pill-ink: var(--fail-ink);   --pill-bg: var(--fail-bg);   --pill-line: var(--fail-line);
                  border-width: 1.5px; letter-spacing: .4px; }
.pill--progress { --pill-ink: var(--warn-ink);   --pill-bg: var(--warn-bg);   --pill-line: var(--warn-line); }
.pill--tested,
.pill--placed,
.pill--reported { --pill-ink: var(--info-ink);   --pill-bg: var(--info-bg);   --pill-line: var(--info-line); }
.pill--nd       { --pill-ink: var(--nd-ink);     --pill-bg: var(--nd-bg);     --pill-line: var(--nd-line); }
.pill--nt       { --pill-ink: var(--nt-ink);     --pill-bg: var(--nt-bg);     --pill-line: var(--nt-line); }
.pill--locked   { --pill-ink: var(--locked-ink); --pill-bg: var(--locked-bg); --pill-line: var(--locked-line); }
/* Never rely on hue alone: FAIL and locked also carry a glyph in markup
   (✕ for FAIL, ✓ for PASS, lock for signed) so colorblind users and
   grayscale printouts stay unambiguous. */

/* Status banner (sample detail, top of screen) */
.banner { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5);
          border-radius: var(--r-xl); border: 1px solid var(--pill-line); background: var(--pill-bg);
          color: var(--pill-ink); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.banner--fail { --pill-ink: var(--fail-ink); --pill-bg: var(--fail-bg); --pill-line: var(--fail-line);
                box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 3px rgba(165,31,19,.10); }

/* ---------- Panel accordion -------------------------------------------- */
.panel { border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--card); overflow: hidden; }
.panel__head { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--control-h);
  padding: 0 var(--sp-5); cursor: pointer; background: var(--chrome-bevel-bg);
  box-shadow: var(--chrome-bevel-shadow); border-bottom: 1px solid var(--chrome-edge);
  font: 700 var(--fs-caps) var(--font-ui); letter-spacing: var(--track-caps); color: #39415a; }
.panel__chev { margin-left: auto; transition: transform var(--dur) var(--ease); }
.panel.is-open .panel__chev { transform: rotate(90deg); }

/* ---------- Form rows + inline validation ------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .6px; color: var(--muted); }
.input, .select {
  min-height: var(--control-h); padding: 0 var(--sp-3);
  font: 400 var(--fs-sm) var(--font-ui); color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.65));
  border: 1px solid var(--glass-edge); border-radius: var(--r-md);
  box-shadow: var(--elev-1), inset 0 1px 0 rgba(255,255,255,.9);
}
.input:focus, .select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.field.is-invalid .input { border-color: var(--fail-ink); box-shadow: 0 0 0 3px rgba(165,31,19,.15); }
.field__error { font-size: var(--fs-xs); font-weight: 600; color: var(--fail-ink); }

/* ---------- Modal + toast ---------------------------------------------- */
.scrim { position: fixed; inset: 0; background: rgba(20,26,40,.42);
         backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal { background: var(--card); border: 1px solid var(--glass-edge); border-radius: var(--r-xl);
         box-shadow: var(--elev-4), inset 0 1px 0 var(--glass-inner-hi); max-width: 560px; width: 92vw; }
.toast { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4);
         border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line);
         box-shadow: var(--elev-2); font-size: var(--fs-sm); }

/* ---------- Client portal accents -------------------------------------- */
.portal-hero { border-radius: var(--r-xl); padding: var(--sp-7);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.6)),
              radial-gradient(600px 300px at 90% 0%, rgba(42,92,219,.12), transparent 60%), var(--card);
  border: 1px solid var(--glass-edge); box-shadow: var(--elev-2), inset 0 1px 0 var(--glass-inner-hi); }
.qr-plate { padding: var(--sp-3); background: #fff; border-radius: var(--r-lg);
            box-shadow: var(--elev-1), inset 0 0 0 1px var(--line); }

/* ==========================================================================
   CLARIFY LIMS — design system
   --------------------------------------------------------------------------
   "Apple glass" aesthetic (macOS Big Sur–Sonoma vibrancy): a calm ambient
   gradient canvas, frosted translucent surfaces (backdrop blur + saturate),
   hairline top-lit borders, soft layered depth, teal accent.
   Tokens first; everything else consumes them. Every selector/class name is
   preserved for the JS router & renderers — values only are restyled.
   ========================================================================== */


* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---- Ambient canvas: soft fixed gradient mesh the glass gets to blur ---- */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1100px 720px at 86% -12%, rgba(16,185,129,.16), transparent 62%),
    radial-gradient(900px 640px at -12% 22%,  rgba(56,189,248,.11), transparent 55%),
    radial-gradient(1000px 780px at 55% 118%, rgba(16,185,129,.10), transparent 60%),
    radial-gradient(700px 520px at 30% -8%,   rgba(255,255,255,.85), transparent 70%),
    linear-gradient(180deg, #f5f9f8, #eaf1ef);
}
h1, h2, h3 { color: var(--ink); }
h2 { font-size: 16px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 14px; }
a { color: var(--accent-deep); }
::selection { background: var(--accent-soft-2); }

/* In-app "open record" links (e.g. sample ids in Client / Order tables). */
a.link { color: var(--accent-deep); text-decoration: none; border-bottom: 1px dotted var(--accent); cursor: pointer; }
a.link:hover { color: var(--accent-strong); border-bottom-style: solid; }

/* macOS-style soft focus glow everywhere */
:focus-visible { outline: none; box-shadow: 0 0 0 3.5px var(--accent-ring); }

/* ==========================================================================
   APP SHELL  — sidebar + main column
   ========================================================================== */
.layout {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

/* ---- Sidebar (frosted rail) ---- */
.sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  display: flex;
  flex-direction: column;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-right: 1px solid var(--glass-line);
  box-shadow: 1px 0 0 var(--line), var(--glass-inset);
  padding: 18px 14px;
  z-index: 30;
}
.sidebar-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 8px 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.logo-img {
  height: 40px; width: 40px; flex: 0 0 auto;
  object-fit: contain;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55)), var(--accent-soft);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 12px;
  padding: 5px;
  box-shadow: var(--shadow-xs), var(--glass-inset);
}
.sidebar-brand { min-width: 0; line-height: 1.2; }
/* Wordmark. Restrained neutral sans, light weight, wide tracking. That
   combination is what reads "enterprise" rather than "startup": heavy weight
   plus tight tracking is the generic default we came from. No webfont request,
   so there is nothing to block and nothing to slow first paint. */
.brand-name {
  font-family: "Helvetica Neue", "Inter", "Segoe UI Variable Display",
               "Segoe UI", system-ui, Arial, sans-serif;
  font-size: 15px;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: .55em;
  line-height: 1.15;
  white-space: nowrap;
}
.brand-name .bn-mark {
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.brand-name .bn-suffix {
  font-weight: 600;
  font-size: .66em;
  letter-spacing: .2em;
  color: #37a08e;
  text-transform: uppercase;
}
.brand-sub  { font-size: 11.5px; color: var(--muted); font-weight: 500; }

/* ---- Nav (kept as #tabnav / .tab for the JS router) ---- */
.tabnav {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 2px;
  scrollbar-width: thin;
}
.tabnav::-webkit-scrollbar { width: 8px; }
.tabnav::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--faint);
  padding: 2px 12px 6px;
}
.tabnav .tab {
  font: inherit; font-weight: 600; font-size: 14px;
  cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  background: transparent; color: var(--ink-2);
  border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 9px 12px; margin: 0;
  position: relative;
  transition: background var(--t), color var(--t), box-shadow var(--t), border-color var(--t);
}
.tabnav .tab .tab-ico {
  width: 19px; height: 19px; flex: 0 0 auto;
  color: var(--faint);
  transition: color var(--t), transform var(--t);
}
.tabnav .tab:hover { background: rgba(255,255,255,.55); color: var(--ink); }
.tabnav .tab:hover .tab-ico { color: var(--muted); }
.tabnav .tab.active {
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.15)), var(--accent-soft);
  color: var(--accent-deep);
  border-color: rgba(255,255,255,.55);
  box-shadow: var(--shadow-xs), var(--glass-inset);
}
.tabnav .tab.active .tab-ico { color: var(--accent); }
.tabnav .tab.active::before {
  content: ""; position: absolute; left: -2px; top: 9px; bottom: 9px;
  width: 3px; border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 8px rgba(16,185,129,.55);
}
.tabnav .tab:focus-visible {
  outline: none; box-shadow: 0 0 0 3.5px var(--accent-ring);
}

.sidebar-foot span:not(.app-version):not(.sidebar-foot-dot) {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .68rem;
  font-weight: 600;
}
.sidebar-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 10px 4px; margin-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--muted); font-weight: 500;
}
.sidebar-foot-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft-2), 0 0 10px rgba(16,185,129,.6);
}
.app-version { margin-left: auto; color: var(--faint); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Main column ---- */
.appmain {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---- Top bar (frosted, sticky) ---- */
.appbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--appbar-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px;
  background: var(--glass-2);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--glass-line);
  box-shadow: 0 1px 0 var(--line), var(--glass-inset);
}
.appbar-lead { flex: 0 0 auto; }
.page-title { font-size: 18px; font-weight: 800; letter-spacing: -.022em; margin: 0; }
.appbar-search {
  flex: 1 1 auto; max-width: 460px;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2);
  border: 1px solid transparent; border-radius: var(--r-pill);
  padding: 0 14px; height: 38px;
  box-shadow: inset 0 1px 2px rgba(15,40,30,.05);
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.appbar-search:focus-within {
  background: rgba(255,255,255,.85); border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--accent-ring);
}
.appbar-search-ico { width: 17px; height: 17px; color: var(--faint); flex: 0 0 auto; }
.appbar-search input {
  flex: 1 1 auto; min-width: 0;
  border: none; background: transparent; outline: none;
  font: inherit; font-size: 14px; color: var(--ink); padding: 0;
  box-shadow: none;
}
.appbar-search input::placeholder { color: var(--faint); }
.appbar-actions { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 10px; }

.icon-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  background: var(--glass-ctl); color: var(--muted);
  border: 1px solid rgba(255,255,255,.65); border-radius: var(--r-sm);
  box-shadow: var(--shadow-xs), var(--glass-inset);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { background: rgba(255,255,255,.85); color: var(--ink); box-shadow: var(--shadow-sm), var(--glass-inset); }
.icon-btn:active { transform: scale(.96); }
.notif-dot {
  position: absolute; top: 8px; right: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff;
  box-shadow: 0 0 6px rgba(16,185,129,.7);
}

/* Cert / license pills + user chip (top bar) */
.pill {
  background: var(--pass-bg); color: var(--pass-ink);
  border: 1px solid var(--pass-line);
  border-radius: var(--r-pill);
  padding: 4px 11px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: var(--glass-inset);
}
.pill.cert { background: rgba(255,255,255,.5); color: var(--muted); border-color: rgba(255,255,255,.7); }
.pill.link { text-decoration: none; transition: background var(--t); }
.pill.link { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--info-line); }
.pill.link:hover { background: #d8e4fb; }
.user-pill {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 1px; line-height: 1.2;
  background: var(--pass-bg); color: var(--pass-ink);
  border: 1px solid var(--pass-line);
  border-radius: var(--r);
  padding: 5px 13px; white-space: nowrap;
  box-shadow: var(--glass-inset);
}
.user-pill-name { font-size: 12.5px; font-weight: 700; }
.user-pill-lic { font-size: 10px; font-weight: 600; color: var(--accent-strong); opacity: .9; }
.user-pill-lic:empty { display: none; }
.logout-btn { white-space: nowrap; }

@media (max-width: 980px) {
  .pill.cert { display: none; }
}

/* ---- Legacy standalone top bar (portal.html — no sidebar) ---- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--glass-2); color: var(--ink);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  padding: 12px 24px;
  border-bottom: 1px solid var(--glass-line);
  box-shadow: 0 1px 0 var(--line), var(--glass-inset);
}
.topbar .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar .lab-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; padding: 10px 14px; }
  .topbar .lab-meta { width: 100%; justify-content: flex-start; }
}

/* ==========================================================================
   CONTENT LAYOUT
   ========================================================================== */
.topbar + .wrap { padding-top: 24px; }
.wrap { width: 100%; max-width: none; margin: 0; padding: 26px 32px 56px; }
.tabpanel > section + .card,
.tabpanel > .card + .card,
.tabpanel > .grid + .card,
.tabpanel > .card + .grid,
.tabpanel > .tiles + .card,
.tabpanel > section + section { margin-top: 18px; }

/* Any stacked cards keep a consistent minor gap (e.g. the Settings cards, which
   live inside a sub-section the .tabpanel > rules above don't reach). Grids and
   tiles space their own children via `gap`, so reset those to avoid double gaps. */
.card + .card,
.card + .grid,
.grid + .card,
.card + .an-layout,
.an-layout + .card,
.card + .od-grid,
.od-grid + .card,
.tiles + .an-layout { margin-top: 18px; }
.grid > .card + .card,
.tiles > .card + .card { margin-top: 0; }

/* The sibling rules above match on `.card`/`.grid`, so they look straight past a
   bare <section>/<div> host: the card a module renders inside one (or the card
   that follows one) gets no margin and butts against the panel above. Space the
   hosts that sit between panels. #email-send-panel does this near its own rules. */
#custody-card > .card,
#cert-details-card { margin-top: 18px; }

.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; align-items: start; }

/* Users tab: two stacked sections (Lab Users / Client Users) */
.users-section + .users-section { margin-top: 26px; }
.users-section-title { font-size: 18px; letter-spacing: -.02em; margin: 0 0 12px; }
#tab-users .tbl .btn { padding: 5px 10px; font-size: 12.5px; }
#tab-users .tbl select { padding: 5px 8px; font-size: 13px; }
#tab-users .row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.span2 { grid-column: span 2; }
.full-row { grid-column: 1 / -1; }   /* span every column of the grid */
@media (max-width: 980px) { .grid { grid-template-columns: 1fr; } .span2 { grid-column: auto; } }

/* ---- Cards (primary glass surface) ---- */
.card {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm), var(--glass-inset);
  overflow-x: auto;
  transition: box-shadow var(--t-2), border-color var(--t-2), transform var(--t-2);
}
.card:hover { box-shadow: var(--shadow), var(--glass-inset); }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.card-head h2 { margin: 0; }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form { display: flex; flex-direction: column; gap: 13px; }
/* Every .row is a horizontal flex row (all usages carry inline justify/gap that
   assume this). Without it rows stacked as blocks and crowded their neighbours. */
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.form .row { display: flex; gap: 13px; }
.form .row label { flex: 1 1 0; min-width: 0; }
/* A flex item will not shrink below its content unless min-width is cleared, so
   the last field in a row pushed past the card edge. Fields also need an
   explicit full width, since an input's intrinsic size otherwise wins. */
.form .row > label > input:not([type="checkbox"]):not([type="radio"]),
.form .row > label > select,
.form .row > label > textarea { width: 100%; box-sizing: border-box; min-width: 0; }
/* A checkbox must keep its intrinsic size; stretching one to the column width
   reads as a broken control. */
.form .row > label > input[type="checkbox"],
.form .row > label > input[type="radio"] { width: auto; align-self: flex-start; }
label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px; color: var(--muted); font-weight: 600;
}
input, select, textarea, .search {
  font: inherit; font-size: 14px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.75); border-radius: var(--r-sm);
  background: var(--glass-ctl); color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(15,40,30,.06), 0 1px 0 rgba(255,255,255,.5);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, select:hover, .search:hover { border-color: var(--line-2); background: rgba(255,255,255,.72); }
input:focus, select:focus, textarea:focus, .search:focus {
  outline: none; border-color: var(--accent);
  background: rgba(255,255,255,.88);
  box-shadow: 0 0 0 3.5px var(--accent-ring);
}
input[type="file"] { padding: 7px 10px; }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; font-size: 13px;
  margin-right: 10px; padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.75); border-radius: 8px;
  background: rgba(255,255,255,.7); color: var(--ink-2); cursor: pointer;
  box-shadow: var(--shadow-xs), var(--glass-inset);
  transition: background var(--t), border-color var(--t);
}
input[type="file"]::file-selector-button:hover { background: #fff; border-color: var(--accent); }

/* Search input (compact, card heads) */
.search { min-width: 220px; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  font: inherit; font-weight: 600; font-size: 14px;
  cursor: pointer; border-radius: var(--r-sm);
  padding: 9px 15px;
  border: 1px solid rgba(255,255,255,.7);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
  color: var(--ink-2);
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  text-align: center; white-space: nowrap;
  box-shadow: var(--shadow-xs), var(--glass-inset);
  transition: background var(--t), border-color var(--t), color var(--t), box-shadow var(--t), transform var(--t), filter var(--t);
}
.btn:hover {
  border-color: rgba(255,255,255,.9);
  background: linear-gradient(180deg, #fff, rgba(255,255,255,.75));
  box-shadow: var(--shadow-sm), var(--glass-inset);
}
.btn:active { transform: translateY(1px) scale(.985); filter: brightness(.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3.5px var(--accent-ring); }
/* Disabled: stay solid + bounded (never a translucent ghost) and drop the glow
   so a disabled button can't visually bleed onto tightly-packed neighbours. */
.btn[disabled], .btn[disabled]:hover {
  cursor: not-allowed; transform: none; filter: none;
  opacity: 1; color: var(--muted);
  background: linear-gradient(180deg, rgba(244,248,246,.96), rgba(236,242,239,.96));
  border-color: var(--glass-line);
  box-shadow: var(--shadow-xs); text-shadow: none;
}
.btn.primary[disabled], .btn.primary[disabled]:hover {
  color: #f4f8f6;
  background: linear-gradient(180deg, #a6bcb2, #8ba498);
  border-color: rgba(255,255,255,.32);
  box-shadow: var(--shadow-xs);
}

/* Primary — vibrant glossy brand button (kept AA-legible: deep teal base) */
.btn.primary {
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #089468, #04724f);
  color: #fff;
  border-color: rgba(255,255,255,.28);
  text-shadow: 0 1px 1px rgba(4,80,56,.35);
  box-shadow:
    0 1px 2px rgba(4,110,78,.35),
    0 8px 20px rgba(16,185,129,.32),
    inset 0 1px 0 rgba(255,255,255,.35);
}
.btn.primary:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #0aa173, #058257);
  border-color: rgba(255,255,255,.36);
  box-shadow:
    0 2px 4px rgba(4,110,78,.35),
    0 10px 26px rgba(16,185,129,.38),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.btn.primary:focus-visible { box-shadow: 0 0 0 3.5px var(--accent-ring), inset 0 1px 0 rgba(255,255,255,.35); }

.btn.ghost {
  background: transparent; border-color: transparent; color: var(--accent-deep);
  box-shadow: none;
}
.btn.ghost:hover {
  background: var(--accent-soft); border-color: rgba(255,255,255,.4);
  color: var(--accent-deep); box-shadow: none;
}

/* ==========================================================================
   TABLES — airy rows on glass, frosted sticky header
   ========================================================================== */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tbl thead th { position: sticky; top: 0; z-index: 1; }
.tbl th {
  text-align: left; color: var(--muted);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 10px 12px;
  background: var(--glass-hi);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  border-bottom: 1px solid var(--line-2);
}
.tbl th:first-child { border-top-left-radius: var(--r-sm); }
.tbl th:last-child  { border-top-right-radius: var(--r-sm); }
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr { transition: background var(--t); }
.tbl tbody tr:nth-child(even) td { background: rgba(255,255,255,.28); }
.tbl tbody tr:hover td { background: var(--accent-soft); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl td strong { color: var(--ink); font-weight: 700; }

/* ==========================================================================
   BADGES / PILLS / CHIPS — soft translucent pills, semantics preserved
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 11px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  border: 1px solid transparent; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.badge.big { font-size: 13.5px; padding: 6px 16px; }
.badge.PASS { background: var(--pass-bg); color: var(--pass-ink); border-color: var(--pass-line); }
.badge.FAIL { background: var(--red-bg); color: var(--red); border-color: var(--red-line); }
.badge.TESTED, .badge.NT { background: rgba(255,255,255,.5); color: var(--muted); border-color: var(--line-2); }
.badge.ND { background: var(--blue-bg); color: var(--blue); border-color: rgba(59,130,246,.28); }
.badge.unknown { background: rgba(255,255,255,.5); color: var(--gray); border-color: var(--line-2); }

/* ==========================================================================
   DETAIL HEADER
   ========================================================================== */
.detail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 0 0 18px;
}
.detail-head h2 { font-size: 20px; letter-spacing: -.02em; }
.detail-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ==========================================================================
   UTILITY TEXT / MESSAGES
   ========================================================================== */
.muted { color: var(--muted); }
.small { font-size: 12px; }
.msg { margin-top: 10px; font-size: 13px; color: var(--muted); }
.msg.ok  { color: var(--accent-deep); }
.msg.err { color: var(--red); }

/* Draft-restored banner (Quick COA localStorage autosave) */
.draft-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 14px; padding: 10px 14px;
  font-size: 13px; color: var(--accent-deep);
  background: var(--accent-soft); border: 1px solid var(--accent-soft-2);
  border-radius: 10px;
}
.draft-banner .btn { padding: 5px 12px; font-size: 12px; flex: 0 0 auto; }

/* Shared server-side draft list (Quick COA "Drafts" bar) */
.draft-list { display: flex; flex-direction: column; gap: 8px; }
.draft-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: rgba(255,255,255,.5);
}
.draft-row.active { border-color: var(--accent-soft-2); background: var(--accent-soft); }
.draft-row-title { font-size: 13.5px; font-weight: 600; }
.draft-row-title .muted { font-weight: 400; }
.draft-row-title .badge { margin-left: 6px; }
.draft-row-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.draft-row-actions .btn { padding: 5px 12px; font-size: 12px; }

/* Dry-run / payload preview (kept dark & opaque for legibility) */
.codeblock {
  background: rgba(10,26,20,.92); color: #c6f7de; border-radius: var(--r-sm);
  padding: 14px; font: 12px/1.5 var(--mono);
  overflow: auto; max-height: 320px; margin: 8px 0 0; white-space: pre;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ==========================================================================
   TOAST — dark frosted glass
   ========================================================================== */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(0);
  background: rgba(16,30,24,.82);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  color: #fff;
  padding: 12px 20px; border-radius: var(--r); font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.14);
  z-index: 60; max-width: 80vw;
  border: 1px solid rgba(255,255,255,.16);
  animation: toast-in var(--t-2) both;
}
.toast.err { background: rgba(153,27,27,.86); }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ==========================================================================
   MFA ENROLLMENT (Security tab)
   ========================================================================== */
.mfa-enroll { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 18px; }
.mfa-enroll-grid { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; }
@media (max-width: 620px) { .mfa-enroll-grid { grid-template-columns: 1fr; } }
.mfa-qr-wrap {
  background: var(--card); border: 1px solid rgba(255,255,255,.8); border-radius: var(--r);
  padding: 10px; box-shadow: var(--shadow-sm), var(--glass-inset); width: max-content;
}
.mfa-qr { display: block; width: 176px; height: 176px; image-rendering: pixelated; }
.mfa-secret {
  display: inline-block; background: rgba(10,26,20,.92); color: #c6f7de; border-radius: var(--r-sm);
  padding: 9px 13px; font: 13px/1.4 var(--mono);
  letter-spacing: 1px; word-break: break-all; user-select: all;
  border: 1px solid rgba(255,255,255,.10);
}

/* ==========================================================================
   LOGIN PAGE — full glass hero
   ========================================================================== */
.login-body {
  min-height: 100vh; margin: 0;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  position: relative; overflow: hidden;
  background:
    radial-gradient(1000px 620px at 80% -10%, rgba(16,185,129,.22), transparent 60%),
    radial-gradient(880px 560px at 4% 108%,  rgba(56,189,248,.16), transparent 56%),
    radial-gradient(760px 520px at 108% 82%, rgba(25,224,160,.14), transparent 58%),
    linear-gradient(180deg, #f6faf9, #e9f1ee);
}
.login-body::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(16,185,129,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,185,129,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(700px 460px at 50% 35%, #000, transparent 75%);
          mask-image: radial-gradient(700px 460px at 50% 35%, #000, transparent 75%);
}
.login-card {
  position: relative; z-index: 1;
  width: 384px; max-width: 92vw;
  background: var(--glass-2);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg), var(--glass-inset);
  padding: 36px 34px 30px;
  display: flex; flex-direction: column; gap: 14px; text-align: center;
}
.login-logo {
  height: 64px; width: 64px; object-fit: contain; align-self: center;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.55)), var(--accent-soft);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 18px; padding: 9px; margin-bottom: 4px;
  box-shadow: var(--shadow-sm), var(--glass-inset);
}
.login-card h1 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--ink); }
.login-card h1.brand-wordmark { letter-spacing: .06em; }
.login-tenant { margin: -4px 0 0; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.login-tagline { margin: 4px auto 8px; max-width: 34ch; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.login-sub { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.login-card label { text-align: left; }
.login-btn { margin-top: 8px; padding: 12px; font-size: 15px; width: 100%; border-radius: var(--r-sm); }
.login-card .msg.err {
  background: var(--red-bg); border: 1px solid var(--red-line); color: var(--red);
  border-radius: var(--r-sm); padding: 9px 12px; margin-top: 2px; text-align: left;
}

/* ==========================================================================
   COA VIEWER — Confident-Cannabis-style summary
   ========================================================================== */

/* Summary count tiles (stat tiles) */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 18px; }
.tile {
  position: relative; overflow: hidden;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line); border-radius: var(--r-lg);
  padding: 18px 18px;
  box-shadow: var(--shadow-sm), var(--glass-inset);
  transition: box-shadow var(--t-2), transform var(--t-2);
}
.tile:hover { box-shadow: var(--shadow), var(--glass-inset); transform: translateY(-2px); }
.tile .tile-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 700;
}
.tile .tile-value { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1.1; margin-top: 6px; }
.tile.accent {
  background: linear-gradient(160deg, rgba(255,255,255,.72), var(--accent-soft));
  border-color: rgba(255,255,255,.7);
}
.tile.accent::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-strong));
}
.tile.accent .tile-value { color: var(--accent-deep); }
.tile .tile-sub { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 4px; }

/* Status legend */
.legend {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  margin: -2px 0 16px; font-size: 12px; color: var(--muted);
}
.legend .legend-item { display: inline-flex; align-items: center; gap: 6px; }

/* Overall PASS / FAIL safety banner — tinted glass */
.coa-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-radius: var(--r-lg); padding: 18px 22px; margin: 0 0 18px;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: var(--shadow-sm), var(--glass-inset);
  border: 1px solid transparent;
}
.coa-banner .banner-main { display: flex; align-items: center; gap: 16px; }
.coa-banner .banner-icon {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; font-weight: 800; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px rgba(15,40,30,.18);
}
.coa-banner .banner-title { font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.coa-banner .banner-sub { font-size: 12.5px; opacity: .92; margin-top: 3px; }
.coa-banner.PASS {
  background: linear-gradient(160deg, rgba(255,255,255,.6), rgba(255,255,255,.15)), var(--pass-bg);
  border-color: var(--pass-line); color: var(--pass-ink);
}
.coa-banner.PASS .banner-icon { background: linear-gradient(180deg, var(--pass-ink), #0b5526); }
.coa-banner.FAIL {
  background: linear-gradient(160deg, rgba(255,255,255,.6), rgba(255,255,255,.15)), var(--red-bg);
  border-color: rgba(255,255,255,.6); color: var(--red);
}
.coa-banner.FAIL .banner-icon { background: linear-gradient(180deg, #dc2626, #991b1b); }
.coa-banner.unknown {
  background: rgba(255,255,255,.5);
  border-color: rgba(255,255,255,.6); color: var(--gray);
}
.coa-banner.unknown .banner-icon { background: linear-gradient(180deg, #8a9c93, #5b6e65); }

/* Headline cannabinoid metric cards */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 18px; }
.metric {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line); border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm), var(--glass-inset);
  text-align: center;
  transition: box-shadow var(--t-2), transform var(--t-2);
}
.metric:hover { box-shadow: var(--shadow), var(--glass-inset); transform: translateY(-2px); }
.metric .metric-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 700;
}
.metric .metric-value { font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--accent-deep); line-height: 1.1; margin-top: 6px; }
.metric .metric-unit { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 4px; }

/* Per-panel result groups */
.panel-group { margin-bottom: 20px; }
.panel-group:last-child { margin-bottom: 0; }
.panel-group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.panel-group-head h3 { font-size: 15px; margin: 0; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.panel-group-head .panel-method { font-size: 12px; color: var(--muted); }

/* Status pills (color-coded result statuses) */
.pill-status {
  display: inline-flex; align-items: center;
  padding: 3px 11px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.pill-status.PASS { background: var(--pass-bg); color: var(--pass-ink); border-color: var(--pass-line); }
.pill-status.FAIL { background: var(--red-bg); color: var(--red); border-color: var(--red-line); }
.pill-status.ND { background: var(--blue-bg); color: var(--blue); border-color: rgba(59,130,246,.28); }
.pill-status.LOQ, .pill-status.TESTED, .pill-status.NT, .pill-status.unknown {
  background: rgba(255,255,255,.5); color: var(--gray); border-color: var(--line-2);
}

/* ==========================================================================
   PHASE-2 — shared component primitives
   ========================================================================== */

/* Sub-nav (Samples: List / Overview / Results / Photos) */
.subnav {
  display: flex; gap: 4px; flex-wrap: wrap; align-items: stretch;
  margin: 0 0 20px; border-bottom: 1px solid var(--line-2);
}
.subnav .subtab {
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; flex: 0 0 auto;
  background: transparent; color: var(--muted);
  border: none; border-bottom: 2px solid transparent;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  padding: 9px 14px; margin-bottom: -1px;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.subnav .subtab:hover { color: var(--accent-deep); background: rgba(255,255,255,.4); }
.subnav .subtab.active { color: var(--accent-deep); border-bottom-color: var(--accent); }

/* Per-panel tab strip (Results) */
.panel-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.panel-tabs .panel-tab {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--glass-ctl); color: var(--muted);
  border: 1px solid rgba(255,255,255,.65); border-radius: var(--r-pill); padding: 6px 14px;
  box-shadow: var(--shadow-xs), var(--glass-inset);
  transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
}
.panel-tabs .panel-tab:hover { border-color: var(--accent); color: var(--accent-deep); background: rgba(255,255,255,.8); }
.panel-tabs .panel-tab.active {
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 46%),
              linear-gradient(180deg, #089468, #04724f);
  color: #fff; border-color: rgba(255,255,255,.28);
  box-shadow: 0 1px 2px rgba(4,110,78,.35), 0 6px 16px rgba(16,185,129,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.panel-tabs .panel-tab[disabled] { opacity: .5; cursor: not-allowed; }

/* Assay-status chip */
.status-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 3px 11px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700;
  background: rgba(255,255,255,.55); color: var(--ink-2); border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.status-chip.empty { color: var(--gray); }
.status-chip .status-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }

/* Rush toggle */
.rush-toggle {
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  cursor: pointer; border-radius: var(--r-pill); padding: 3px 11px;
  border: 1px solid rgba(255,255,255,.65); background: var(--glass-ctl); color: var(--muted);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.rush-toggle:hover { border-color: var(--amber); color: var(--amber); }
.rush-toggle.on { background: var(--amber-bg); color: var(--amber); border-color: rgba(214,158,46,.45); }

/* Assign dropdown */
.assign-dd { display: inline-flex; gap: 6px; align-items: center; }
.assign-dd .assign-status, .assign-dd .assign-analyst {
  font: inherit; font-size: 13px; padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.75); border-radius: 8px; background: var(--glass-ctl);
  box-shadow: inset 0 1px 2px rgba(15,40,30,.05);
}
.assign-dd .assign-analyst { max-width: 120px; }

/* View / Filter popover menus — frosted panel */
.menu { position: relative; display: inline-block; }
.menu .popover {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; min-width: 210px;
  background: var(--glass-2);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid rgba(255,255,255,.7); border-radius: var(--r);
  box-shadow: var(--shadow-lg), var(--glass-inset); padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.popover .pop-row { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); }
.popover .pop-row.col { flex-direction: column; align-items: stretch; gap: 4px; color: var(--muted); }

/* Wide-table wrapper — horizontal scroll with sticky leading columns
   (sticky cells stay SOLID so scrolled content never bleeds through) */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-scroll .tbl { min-width: max-content; }
.tbl-scroll.sticky-1 .tbl th:first-child,
.tbl-scroll.sticky-1 .tbl td:first-child,
.tbl-scroll.sticky-2 .tbl th:nth-child(-n+2),
.tbl-scroll.sticky-2 .tbl td:nth-child(-n+2) {
  position: sticky; left: 0; background: var(--card); z-index: 2;
}
.tbl-scroll.sticky-2 .tbl th:nth-child(2),
.tbl-scroll.sticky-2 .tbl td:nth-child(2) { left: 120px; }

/* ==========================================================================
   ANALYTICS TAB
   ========================================================================== */
.an-filterbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.an-filterbar > label { flex: 0 1 auto; min-width: 150px; }
.an-filterbar .an-dim { opacity: .45; }
.an-filter-actions { display: flex; gap: 8px; align-items: flex-end; margin-left: auto; }

.an-layout { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
.dash-list {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line); border-radius: var(--r-lg);
  padding: 8px; box-shadow: var(--shadow-sm), var(--glass-inset);
  position: sticky; top: calc(var(--appbar-h) + 14px);
}
.dash-list .dash-item {
  text-align: left; background: transparent; border: 0; border-radius: var(--r-sm);
  padding: 9px 12px; font: inherit; font-weight: 600; font-size: 14px;
  color: var(--ink-2); cursor: pointer; border-left: 3px solid transparent;
  transition: background var(--t), color var(--t);
}
.dash-list .dash-item:hover { background: var(--accent-soft); color: var(--accent-deep); }
.dash-list .dash-item.active { background: var(--accent-soft); color: var(--accent-deep); border-left-color: var(--accent); }
.an-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.an-sub-head { margin: 16px 0 6px; }
.an-sub-head h3 { margin: 0; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

/* Inline SVG charts */
.chart-host, .chart-svg { width: 100%; }
.chart-svg { display: block; height: auto; max-height: 320px; }
.chart-svg .ax-grid { stroke: rgba(18,45,35,.10); stroke-width: 1; }
.chart-svg .ax-lbl { fill: var(--muted); font-size: 11px; font-family: inherit; }
.chart-svg .chart-line { stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .chart-dot { stroke: #fff; stroke-width: 1.5; }
.chart-svg rect { transition: opacity .12s; }
.chart-svg rect:hover, .chart-svg path:hover, .chart-svg .chart-dot:hover { opacity: .82; }

/* Donut + legend */
.an-donut-box { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.an-donut { width: 190px; flex: 0 0 auto; }
.an-donut .chart-svg { max-width: 190px; }
.legend-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* Split layout: donut beside ranked bars */
.an-split { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 24px; align-items: start; }
.an-rank.wide, .an-rank { min-width: 0; }

/* Ranked horizontal bars */
.rank-bars { display: flex; flex-direction: column; gap: 9px; }
.rank-row { display: grid; grid-template-columns: 150px 1fr 64px; gap: 10px; align-items: center; }
.rank-label { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-track { background: var(--bg-2); border-radius: 999px; height: 18px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(15,40,30,.06); }
.rank-fill {
  height: 100%; border-radius: 999px; min-width: 2px;
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-strong));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.rank-val { font-size: 13px; font-weight: 700; color: var(--ink); text-align: right; }

.an-empty { padding: 28px 12px; text-align: center; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 860px) {
  .an-layout { grid-template-columns: 1fr; }
  .dash-list { flex-direction: row; flex-wrap: wrap; position: static; }
  .dash-list .dash-item { border-left: 0; border-bottom: 3px solid transparent; }
  .dash-list .dash-item.active { border-left: 0; border-bottom-color: var(--accent); }
  .an-split { grid-template-columns: 1fr; }
  .rank-row { grid-template-columns: 110px 1fr 60px; }
}

/* Sidebar collapses to a top strip on narrow viewports (no JS hamburger needed) */
@media (max-width: 820px) {
  .layout { flex-direction: column; }
  .sidebar {
    position: sticky; top: 0; height: auto; width: 100%; flex: none;
    flex-direction: row; align-items: center; gap: 14px;
    border-right: none; border-bottom: 1px solid var(--glass-line);
    box-shadow: 0 1px 0 var(--line), var(--glass-inset);
    padding: 10px 14px; overflow: hidden;
  }
  .sidebar-head { border-bottom: none; padding: 0; margin: 0; flex: 0 0 auto; }
  .sidebar-foot { display: none; }
  .tabnav {
    flex-direction: row; gap: 6px; align-items: center;
    overflow-x: auto; overflow-y: hidden; padding: 4px 2px;
    scrollbar-width: none;
  }
  .tabnav::-webkit-scrollbar { display: none; }
  .nav-group { flex-direction: row; gap: 4px; align-items: center; }
  .nav-group-label { display: none; }
  .tabnav .tab { white-space: nowrap; padding: 8px 12px; }
  .tabnav .tab.active::before { display: none; }
  .tab-label { font-size: 13px; }
}

@media (max-width: 640px) {
  .appbar { gap: 10px; padding: 0 14px; height: 56px; }
  .page-title { font-size: 16px; }
  .appbar-search { display: none; }
  .brand-sub { display: none; }
  .logout-btn { padding: 8px 12px; }

  .wrap { padding: 16px 14px 48px; }
  .card { padding: 16px; border-radius: var(--r); }

  .form .row { flex-direction: column; gap: 13px; }
  .card-head { flex-wrap: wrap; }
  .detail-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .detail-actions { flex-wrap: wrap; }
  .search { min-width: 0; width: 100%; }

  /* >=16px inputs so iOS Safari doesn't auto-zoom on focus */
  input, select, .search { font-size: 16px; }

  /* Roomier so stacked full-width actions (and their soft glows) never touch */
  /* Every action becomes a full-width, well-separated tap target on phones so
     nothing crowds or bleeds into its neighbour. */
  .detail-actions { gap: 12px; row-gap: 12px; width: 100%; }
  .detail-actions > .btn,
  .detail-actions > .menu,
  .detail-actions > .popover,
  .detail-actions .badge.big { width: 100%; text-align: center; }
  .detail-actions .menu > .btn,
  .detail-actions .popover > .btn { width: 100%; }
  .card-head { row-gap: 12px; }

  .tbl { font-size: 13px; }
  .tbl th, .tbl td { padding: 8px 9px; }

  .mfa-enroll-grid { grid-template-columns: 1fr; }

  .tiles { grid-template-columns: 1fr; gap: 12px; }
  .metrics { grid-template-columns: 1fr; gap: 12px; }
  .metric .metric-value { font-size: 28px; }
  .coa-banner { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
  .coa-banner .banner-title { font-size: 18px; }

  h2 { font-size: 15px; }
}

/* ============================================================================
   Email delivery (COA) — Settings onboarding wizard + Deliver-to-client panel
   (js/email.js)
   ========================================================================== */
/* Amber "pending / in-progress" badge (DNS not verified yet, setup pending). */
.badge.WARN { background: var(--amber-bg); color: var(--amber); border-color: rgba(214,158,46,.4); }

.email-step {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.email-step:first-child { border-top: 0; padding-top: 6px; }
.email-step-num {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  background: rgba(255,255,255,.55); color: var(--muted);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.email-step.done .email-step-num {
  background: var(--accent-soft); color: var(--accent-deep);
  border-color: var(--accent-soft-2);
}
.email-step-body { flex: 1; min-width: 0; }
.email-step-title {
  font-weight: 700;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
/* DNS host/value cells: monospace + wrap long DKIM strings instead of
   blowing out the table. */
.dns-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
  max-width: 420px;
}

/* Deliver-to-client panel sits between the COA summary and the ingest grid
   inside #view-detail (no sibling-margin rules apply there). */
#email-send-panel .card { margin: 18px 0; }

/* ==========================================================================
   GRACEFUL DEGRADATION
   ========================================================================== */

/* No backdrop-filter support → near-opaque surfaces so text stays legible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass:      rgba(255,255,255,.95);
    --glass-2:    rgba(255,255,255,.97);
    --glass-hi:   rgba(250,252,251,.98);
    --glass-ctl:  rgba(255,255,255,.92);
  }
  .toast { background: #14201a; }
  .toast.err { background: #991b1b; }
  .coa-banner.PASS { background: #e2f6ee; }
  .coa-banner.FAIL { background: #fbe9e9; }
  .coa-banner.unknown { background: #f1f4f3; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .tile:hover, .metric:hover { transform: none; }
}

/* ---- Manual result entry (sample detail — "Enter manually" mode) -------- */
.mode-toggle { display: flex; gap: 6px; }
.mode-toggle .btn { padding: 6px 12px; font-size: 12px; }
.manual-tbl input[type="number"], .manual-tbl input[type="text"] {
  width: 88px; padding: 6px 8px; font-size: 13px;
}
.manual-tbl td { vertical-align: middle; }
.manual-tbl td.manual-nd { text-align: center; }
.manual-tbl input[type="checkbox"] { width: auto; }
#manual-entry-host { margin-top: 12px; }

/* ==========================================================================
   CALCULATIONS DASHBOARD  (js/calculations.js + js/calc_render.js)
   --------------------------------------------------------------------------
   Excel-replica calculator grids: spreadsheet chrome (row/col headers,
   hairline gridlines, bottom sheet tabs) on the glassy theme, with the
   workbook fill legend rendered as subtle tints under dark text.
   ========================================================================== */

/* ---- toolbar: sample picker + calculator tab strip + template line ------- */
.calc-toolbar .calc-picker-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.calc-picker { display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--muted); }
.calc-picker input { min-width: 300px; }
.calc-save-status { margin-left: auto; color: var(--accent-deep); font-weight: 600; }
.calc-save-status.offline { color: var(--amber); }

.calc-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.calc-tab {
  padding: 7px 13px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--muted); background: var(--glass-ctl);
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  transition: background var(--t), color var(--t);
}
.calc-tab:hover { background: rgba(255,255,255,.85); color: var(--ink); }
.calc-tab.active {
  background: var(--accent-soft-2); color: var(--accent-deep);
  border-color: var(--accent-ring);
}
.calc-template-line { margin-top: 8px; font-weight: 600; letter-spacing: .01em; }

/* ---- the Excel-style grid ------------------------------------------------ */
.calc-panel-card { padding: 14px; }
.calc-grid-wrap { overflow-x: auto; }
.calc-grid {
  border-collapse: collapse; table-layout: fixed;
  background: #fff; font-size: 12.5px; color: var(--ink);
  border: 1px solid var(--line-2);
}
.calc-grid th, .calc-grid td {
  border: 1px solid rgba(18,45,35,.12);
  padding: 2px 5px; height: 21px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; vertical-align: middle;
}
/* Row-number / column-letter chrome */
.calc-grid thead th, .calc-grid tbody th {
  background: var(--surface-2); color: var(--muted);
  font-size: 11px; font-weight: 600; text-align: center;
  -webkit-user-select: none; user-select: none;
}
.calc-grid td.calc-bold { font-weight: 700; }
.calc-grid td.calc-cell-computed { text-align: right; font-variant-numeric: tabular-nums; }
.calc-grid td.calc-err { color: var(--faint); font-style: italic; text-align: center; }

/* Inline cell inputs: fill the cell, inherit its tint */
.calc-grid td.calc-cell-input { padding: 0; }
.calc-input {
  width: 100%; height: 100%; box-sizing: border-box; display: block;
  padding: 2px 5px; margin: 0; border: none; border-radius: 0;
  background: transparent; font: inherit; color: var(--ink);
}
.calc-input:focus {
  outline: 2px solid var(--accent); outline-offset: -2px;
  background: rgba(255,255,255,.75);
}

/* ---- workbook fill legend (subtle tints, dark text) ----------------------- */
.calc-grid .calc-fill-green  { background: rgba(146,208,80,.32); }  /* 92D050/00B050 calibration input */
.calc-grid .calc-fill-yellow { background: rgba(255,235,59,.38); }  /* FFFF00 input/calc */
.calc-grid .calc-fill-orange { background: rgba(255,192,0,.32); }   /* FFC000 dilution/flag */
.calc-grid .calc-fill-cyan   { background: rgba(0,176,240,.22); }   /* 00B0F0 RESULT to transcribe */
.calc-grid .calc-fill-theme  { background: rgba(214,196,166,.35); } /* shaded data entry */

/* ---- Excel-style sheet tabs at the BOTTOM --------------------------------- */
.calc-sheettabs {
  display: flex; gap: 2px; padding: 4px 6px 0;
  border-top: 1px solid var(--line-2); background: var(--surface-2);
}
.calc-sheettab {
  padding: 5px 16px 6px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--muted); background: rgba(255,255,255,.45);
  border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 8px 8px; cursor: pointer;
  transition: background var(--t), color var(--t);
}
.calc-sheettab:hover { background: rgba(255,255,255,.8); color: var(--ink); }
.calc-sheettab.active {
  background: #fff; color: var(--accent-deep);
  border-color: var(--line-2); border-top: 2px solid var(--accent);
  margin-top: -1px;
}

/* ---- Live calibration charts (js/calc_chart.js) ---------------------------- */
/* Grid + chart panels sit in a flex row that wraps on narrow screens. */
.calc-sheet-flex { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.calc-sheet-flex > .calc-grid-wrap { flex: 1 1 420px; min-width: 0; }
.calc-charts { display: flex; flex-direction: column; gap: 14px; flex: 0 1 400px; min-width: 280px; }
.calc-chart-panel {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  box-shadow: var(--shadow-xs), var(--glass-inset);
  padding: 10px 12px 8px;
}
.calc-chart-svg { display: block; width: 100%; height: auto; }
.calc-chart-svg .cc-title { font-size: 13.5px; font-weight: 700; fill: var(--ink); }
.calc-chart-svg .cc-eq    { font-size: 12px; font-weight: 600; font-style: italic;
                            fill: var(--accent-deep); }
.calc-chart-svg .cc-plot  { fill: rgba(255,255,255,.55); stroke: none; }
.calc-chart-svg .cc-grid  { stroke: rgba(15,33,25,.10); stroke-width: 1; }
.calc-chart-svg .cc-axis  { stroke: rgba(15,33,25,.45); stroke-width: 1.25; }
.calc-chart-svg .cc-tick  { font-size: 10px; fill: var(--muted); }
.calc-chart-svg .cc-point { fill: var(--accent-strong); stroke: #fff; stroke-width: 1; }
.calc-chart-svg .cc-trend { stroke: var(--ink-2); stroke-width: 1.5;
                            stroke-dasharray: 4 3; fill: none; }
.calc-chart-svg .cc-empty { font-size: 12px; font-style: italic; fill: var(--faint); }

/* ---- one-time announcement overlay -------------------------------------- */
.announce-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 20, 16, .55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: announceFade .25s ease-out;
}
.announce-card {
  max-width: 560px; width: calc(100% - 48px);
  padding: 30px 34px 26px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(240,253,248,.95));
  border: 1px solid rgba(16,185,129,.35);
  box-shadow: 0 24px 80px rgba(4, 30, 22, .45), 0 0 0 1px rgba(255,255,255,.4) inset;
  text-align: center;
}
.announce-icon { font-size: 44px; line-height: 1; margin-bottom: 10px; }
.announce-title {
  margin: 0 0 14px; font-size: 20px; font-weight: 800; letter-spacing: -.2px;
  color: #0f3b30;
}
.announce-p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.65; color: #26433a; text-align: left; }
.announce-p strong { color: #047857; }
.announce-btn { margin-top: 6px; padding: 10px 26px; font-size: 14px; font-weight: 700; }
@keyframes announceFade { from { opacity: 0 } to { opacity: 1 } }

/* ---- Certificate details editor (js/certificate_details.js) -------------- */
/* Field grid that collapses on narrow screens. Fields are labelled with what
   the certificate prints, not with database column names. */
.cd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .75rem 1rem;
  margin-top: .5rem;
}
.cd-field { display: flex; flex-direction: column; min-width: 0; }
.cd-field label { font-size: .8rem; font-weight: 600; margin-bottom: .2rem; }
.cd-field input { width: 100%; box-sizing: border-box; }
.cd-hint {
  font-size: .72rem;
  color: var(--muted, #6b7280);
  margin-top: .2rem;
  line-height: 1.35;
}

/* ---- Go-live celebration variant of the announcement card --------------- */
/* Applied only when an announcement sets celebrate: true. The plain card is
   untouched, so routine notices stay quiet. */
.announce-confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.announce-overlay.celebrate .announce-card { position: relative; z-index: 1; }

@keyframes announce-pop {
  0%   { transform: scale(.86) translateY(14px); opacity: 0; }
  60%  { transform: scale(1.02) translateY(0);   opacity: 1; }
  100% { transform: scale(1)    translateY(0);   opacity: 1; }
}
@keyframes announce-icon-pop {
  0%   { transform: scale(0) rotate(-25deg); }
  55%  { transform: scale(1.25) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}
.announce-card.celebrate {
  animation: announce-pop .5s cubic-bezier(.2, .9, .3, 1.2) both;
  border-top: 4px solid #37a08e;
}
.announce-card.celebrate .announce-icon {
  animation: announce-icon-pop .7s .15s cubic-bezier(.2, .9, .3, 1.4) both;
  font-size: 3.2rem;
}
.announce-card.celebrate .announce-title {
  background: linear-gradient(90deg, #0f2136, #37a08e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Motion is decorative here; respect the OS setting and just show the card. */
@media (prefers-reduced-motion: reduce) {
  .announce-card.celebrate,
  .announce-card.celebrate .announce-icon { animation: none; }
}

/* ---- Support tab (js/support.js) ---------------------------------------- */
.sup-answer {
  margin-top: .75rem;
  padding: .85rem 1rem;
  border-left: 3px solid var(--line);
  background: rgba(0,0,0,.02);
  border-radius: 0 6px 6px 0;
}
.sup-answer.matched { border-left-color: #37a08e; }
.sup-answer h3 { margin: 0 0 .4rem; font-size: .95rem; }
.sup-answer p { margin: .4rem 0; }

/* Paste target. Focusable so Ctrl+V lands here, and visibly a drop zone. */
.sup-paste {
  margin-top: .9rem;
  padding: 1rem;
  border: 2px dashed var(--line);
  border-radius: 8px;
  text-align: center;
  cursor: text;
  transition: border-color .15s, background .15s;
}
.sup-paste:focus,
.sup-paste.over { border-color: #37a08e; background: rgba(55,160,142,.06); outline: none; }

.sup-shots { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .75rem; }
.sup-shot { position: relative; }
.sup-shot img {
  max-width: 190px; max-height: 130px;
  border: 1px solid var(--line); border-radius: 6px; display: block;
}
.sup-shot .btn { margin-top: .25rem; width: 100%; }

/* Support form fields span the card. A one-line subject and a description of
   what went wrong are the two things people actually type, so they get the room
   rather than sitting at the browser's default input width. */
#sup-subject,
#sup-body {
  width: 100%;
  box-sizing: border-box;
  display: block;
}
#sup-body { resize: vertical; min-height: 7.5rem; }

/* The send action is the point of the screen, so it reads as the primary. */
.btn.gold {
  background: linear-gradient(180deg, #d4a13a, #b8862a);
  border-color: #a4761f;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.btn.gold:hover:not(:disabled) {
  background: linear-gradient(180deg, #e0ae45, #c4922f);
  border-color: #8f6719;
}
.btn.gold:disabled { opacity: .6; }

/* ---- Certificate details grid ------------------------------------------- */
/* Scoped to this panel on purpose. .cd-grid / .cd-field are shared with the
   Support form, so widening or re-columning them globally would move a screen
   that is already correct. */
#cert-details-body .cd-grid {
  /* auto-fit produced six columns on a wide monitor, which crowded the fields
     against the card edge and left the layout looking ragged. Four is enough
     for the longest label here and keeps a real gutter. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem 1.25rem;
  align-items: start;
}
@media (min-width: 1100px) {
  #cert-details-body .cd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* min-width:0 lets a grid item shrink; without it a long hint or value sets a
   floor and the track overflows. */
#cert-details-body .cd-field { min-width: 0; }
#cert-details-body .cd-field input { width: 100%; box-sizing: border-box; min-width: 0; }
#cert-details-body .cd-hint { overflow-wrap: anywhere; }

/* Certificate lifecycle status, sitting to the right of View COA. There is
   deliberately only one of these: the detail header previously carried a second
   badge on the far left, so two elements both claimed to be "the status". The
   trail is the mini audit line, muted so the badge stays the thing you read. */
.coa-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  flex-wrap: wrap;
}
.coa-status .cs-label {
  color: var(--muted, #5f7268);
  font-size: .85em;
}
.coa-status .cs-trail {
  color: var(--muted, #5f7268);
  font-size: .8em;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Samples list: the whole row opens the sample. Cursor and hover make that
   discoverable, and the focus ring keeps it usable from the keyboard, since the
   row is the link and the Open button is only its visible affordance. */
tr.row-open { cursor: pointer; }
tr.row-open:hover > td { background: var(--row-hover, rgba(47, 145, 80, .07)); }
tr.row-open:focus-visible {
  outline: 2px solid var(--brand, #2f9150);
  outline-offset: -2px;
}

/* Support tab: non-image attachments. A spreadsheet has no useful preview, so
   it gets a named row instead. The filename is the thing the reporter and the
   support engineer both refer to, so it leads. */
.sup-files { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sup-file {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel-2, #f4f7f5);
  border: 1px solid var(--line, #e0ebe4);
  border-radius: 8px; padding: 7px 10px;
}
.sup-file .sf-name {
  flex: 1 1 auto; min-width: 0; font-weight: 600;
  overflow-wrap: anywhere;
}
.sup-file .sf-size { flex: 0 0 auto; white-space: nowrap; }