/*
 * Shared design system for Frontline Verify.
 *
 * Theming: tokens are defined for light (default), for the OS dark preference
 * (@media prefers-color-scheme), and for an explicit user choice
 * (:root[data-theme="light"|"dark"], stamped by the Auth/Theme control in
 * app.js). Style everything through the tokens - never hard-code a themed color
 * in a component rule. color-scheme is set per theme so native controls
 * (selects, date pickers, scrollbars) follow suit.
 */

/* Palette + type match the approved Frontline Verify mockup exactly. */
:root {
  --bg: #f5f7fa; --panel: #ffffff; --card: #ffffff;
  --ink: #182231; --muted: #5a6577; --faint: #8a94a4;
  --line: #e5e9ef; --line-soft: #eef1f5;
  --brand: #2f6df0; --brand-ink: #ffffff; --brand-tint: #eaf1ff;
  --ok: #129c68; --ok-tint: #e6f6ef;
  --warn: #c1820a; --warn-tint: #fbf1dd;
  --fail: #d43a5b; --fail-tint: #fdeaef;
  --chart-1: #2f6df0; --chart-2: #12b3a6; --chart-3: #7c5cff; --chart-4: #5b6b82; --chart-5: #e08a2b;
  --c3: #7c5cff; /* avatar / logo-tile gradient accent */
  --code-bg: #0f1826; --code-ink: #d7e0ec;
  --shadow: 0 1px 2px rgba(20,30,50,.05), 0 4px 16px rgba(20,30,50,.05);
  --shadow-lift: 0 4px 16px rgba(20,30,50,.10);
  --r: 12px;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Cascadia Code", Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1218; --panel: #141a22; --card: #161d27;
    --ink: #e7ecf3; --muted: #9aa5b4; --faint: #6c7788;
    --line: #242c38; --line-soft: #1d242e;
    --brand: #5b8cff; --brand-ink: #0a1220; --brand-tint: #17233c;
    --ok: #2ec489; --ok-tint: #123026;
    --warn: #e0a63a; --warn-tint: #33280f;
    --fail: #f26385; --fail-tint: #341721;
    --chart-1: #5b8cff; --chart-2: #2dd4c4; --chart-3: #a58bff; --chart-4: #8493a8; --chart-5: #eaa64e;
    --c3: #a58bff;
    --code-bg: #0b1017; --code-ink: #d7e0ec;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35); --shadow-lift: 0 6px 20px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme="light"] {
  --bg:#f5f7fa; --panel:#fff; --card:#fff; --ink:#182231; --muted:#5a6577; --faint:#8a94a4;
  --line:#e5e9ef; --line-soft:#eef1f5; --brand:#2f6df0; --brand-ink:#fff; --brand-tint:#eaf1ff;
  --ok:#129c68; --ok-tint:#e6f6ef; --warn:#c1820a; --warn-tint:#fbf1dd; --fail:#d43a5b; --fail-tint:#fdeaef;
  --chart-1:#2f6df0; --chart-2:#12b3a6; --chart-3:#7c5cff; --chart-4:#5b6b82; --chart-5:#e08a2b; --c3:#7c5cff;
  --code-bg:#0f1826; --code-ink:#d7e0ec;
  --shadow:0 1px 2px rgba(20,30,50,.05),0 4px 16px rgba(20,30,50,.05); --shadow-lift:0 4px 16px rgba(20,30,50,.10);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg:#0e1218; --panel:#141a22; --card:#161d27; --ink:#e7ecf3; --muted:#9aa5b4; --faint:#6c7788;
  --line:#242c38; --line-soft:#1d242e; --brand:#5b8cff; --brand-ink:#0a1220; --brand-tint:#17233c;
  --ok:#2ec489; --ok-tint:#123026; --warn:#e0a63a; --warn-tint:#33280f; --fail:#f26385; --fail-tint:#341721;
  --chart-1:#5b8cff; --chart-2:#2dd4c4; --chart-3:#a58bff; --chart-4:#8493a8; --chart-5:#eaa64e; --c3:#a58bff;
  --code-bg:#0b1017; --code-ink:#d7e0ec;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.35); --shadow-lift:0 6px 20px rgba(0,0,0,.5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* Flex column + 100vh so the copyright footer can be pinned to the bottom of the
 * viewport (via .site-foot margin-top:auto) on short pages, not left mid-screen. */
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
/* In a flex column, a child's `margin: 0 auto` (used by main/.wrap/.mgr-shell for
 * centering) cancels the default cross-axis stretch and collapses it to
 * shrink-to-fit. Force full width back so content keeps its intended max-width
 * columns instead of feeling squished. Fixed-position overlays are out of flow,
 * so this rule doesn't affect them. */
body > * { width: 100%; }
a { color: var(--brand); }
h1, h2, h3 { letter-spacing: -.01em; }
.tnum { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.lead { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* -------- Top bar + theme control (mockup shell) -------- */
header.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .6rem 1rem;
  flex-wrap: wrap;
  padding: .65rem 1.25rem;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line);
}
.topbar .brand { display: flex; align-items: center; gap: .55rem; font-weight: 650; letter-spacing: -.01em; font-size: 1rem; min-width: 0; }
.brand-logo { height: 1.65rem; width: auto; display: block; flex: none; border-radius: 7px; }
.topbar .brand small { display: block; font-weight: 450; color: var(--muted); font-size: .72rem; }
/* Gradient logo tile fallback when no image is used. */
.logo { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, var(--brand), var(--c3, #7c5cff)); display: grid; place-items: center; color: #fff; font-size: .82rem; font-weight: 800; flex: none; }
.pagetag { margin-left: .1rem; padding: .18rem .55rem; border-radius: 999px; background: var(--brand-tint); color: var(--brand); font-size: .68rem; font-weight: 700; letter-spacing: .03em; }
.topbar .spacer { flex: 1; }
.topbar-right { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem; font-size: .9rem; margin-left: auto; }
.identity { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .4rem .6rem; color: var(--muted); }
.who { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .82rem; }
.who-name { font-weight: 500; }
@media (max-width: 560px) { .who-name { display: none; } }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--c3, #7c5cff); color: #fff; display: grid; place-items: center; font-size: .68rem; font-weight: 700; }
.iconbtn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.iconbtn:hover { border-color: var(--brand); }

.themeseg { display: inline-flex; background: var(--line-soft); border: 1px solid var(--line); border-radius: 8px; padding: 2px; gap: 2px; }
.themeseg button { font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; padding: .3rem .5rem; border: 0; border-radius: 6px; background: transparent; color: var(--muted); display: inline-flex; align-items: center; gap: .3rem; }
.themeseg button svg { width: 13px; height: 13px; }
.themeseg button:hover { color: var(--ink); }
.themeseg button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); }
/* Segmented control (nav tabs, filters, toggles) — mockup design language:
   a soft-filled pill track with a solid brand chip for the active option. */
.seg { display: inline-flex; flex-wrap: wrap; background: var(--line-soft); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; vertical-align: middle; }
.seg button { font: inherit; font-size: .82rem; font-weight: 550; cursor: pointer; padding: .44rem .9rem; border: 0; border-radius: 7px; background: transparent; color: var(--muted); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); }
.seg button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.seg.sm button { padding: .3rem .7rem; font-size: .78rem; }
.filter-lead { font-size: .85rem; color: var(--muted); }

/* -------- Layout -------- */
main, .wrap { max-width: 1200px; margin: 0 auto; padding: 1.4rem 1.25rem 3.5rem; }
footer { max-width: 1200px; margin: 1.5rem auto 2rem; padding: 0 1.25rem; color: var(--faint); font-size: .8rem; }
/* Site-wide copyright footer, on every page. */
/* margin-top:auto consumes leftover vertical space so the footer sits at the
 * viewport bottom on short pages; on tall pages it collapses to 0 and the footer
 * follows the content (its border-top keeps the separation). */
.site-foot { max-width: 1200px; width: 100%; margin: auto auto 1.5rem; padding: 1rem 1.25rem 0; border-top: 1px solid var(--line-soft); color: var(--faint); font-size: .78rem; text-align: center; }
/* Page header: big title + subtitle on the left, section tabs on the right. */
.pagehead { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.pagehead h1 { font-size: 1.4rem; letter-spacing: -.02em; margin: 0; }
.pagehead p { margin: .2rem 0 0; color: var(--muted); font-size: .82rem; }
.pagehead .spacer { flex: 1; }
.sechint { color: var(--muted); font-size: .82rem; margin: -.2rem 0 1rem; }

/* -------- Buttons -------- */
/* `.btn` remains the brand primary (the app's existing hierarchy); `.primary` is
   an alias, `.secondary`/`.ghost` are the neutral bordered style, `.danger` is
   destructive. Shape follows the mockup. */
/* Mockup convention: NEUTRAL bordered button by default; solid brand only for
   .primary (the single main action per view). */
.btn { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: .5rem .9rem; border-radius: 9px; font: inherit; font-weight: 600; font-size: .82rem; cursor: pointer; text-decoration: none; }
.btn:hover { border-color: var(--brand); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.secondary, .btn.ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn.ghost { background: transparent; }
.btn.secondary:hover, .btn.ghost:hover { border-color: var(--brand); }
.btn.danger { background: var(--card); color: var(--fail); border-color: color-mix(in srgb, var(--fail) 38%, var(--line)); }
.btn.danger:hover { background: var(--fail-tint); border-color: var(--fail); color: var(--fail); }
.btn.warn { background: var(--card); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.btn.warn:hover { background: var(--warn-tint); border-color: var(--warn); color: var(--warn); }
/* Icon-only button (tight rails): square, tooltip via title/aria-label. */
.btn.icon { padding: .34rem; gap: 0; }
.btn.icon svg { width: 15px; height: 15px; }
.btn.icon.done { color: var(--ok); border-color: var(--ok); }
.btn.big { padding: .8rem 1.3rem; font-size: 1.02rem; border-radius: 11px; }
.btn:disabled, .btn.off { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn svg { width: 16px; height: 16px; }
.btn.mini { padding: .32rem .6rem; font-size: .75rem; border-radius: 7px; }
.mini { font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; padding: .35rem .7rem; border-radius: 7px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.mini:hover { border-color: var(--brand); color: var(--brand); }
.mini.link { border-color: transparent; background: transparent; color: var(--muted); padding-left: .2rem; }
.mini.link:hover { color: var(--fail); }
.mini.danger:hover { border-color: var(--fail); color: var(--fail); }

/* -------- Form controls (themed) -------- */
input, select, textarea { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: .45rem .55rem; }
input::placeholder { color: var(--faint); }
input[type="checkbox"] { accent-color: var(--brand); width: 15px; height: 15px; }
.btn:focus-visible, .mini:focus-visible, .themeseg button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* -------- Cards / panels -------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 1.25rem 1.4rem; box-shadow: var(--shadow); margin-bottom: 1.25rem; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 1.2rem 1.3rem; margin-bottom: 1.2rem; }
.panel > h2 { font-size: 1.05rem; margin: 0 0 .2rem; }
.panel > .hint { color: var(--muted); font-size: .85rem; margin: 0 0 1rem; }
h1 { font-size: 1.5rem; margin: .2rem 0 .6rem; }
h2 { font-size: 1.15rem; margin: 0 0 .6rem; }

.notice { border-left: 4px solid var(--brand); background: var(--brand-tint); padding: .8rem 1rem; border-radius: 0 9px 9px 0; }
.result { font-family: var(--mono); font-size: .85rem; white-space: pre-wrap; background: var(--code-bg); color: var(--code-ink); border-radius: 8px; padding: .85rem 1rem; overflow-x: auto; }
.phase-tag { font-size: .72rem; color: var(--muted); border: 1px dashed var(--line); padding: .1rem .5rem; border-radius: 6px; }
.pill { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; border: 1px solid var(--line); color: var(--muted); background: var(--brand-tint); }
.pill.rolechip { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }

/* -------- Status words + vocabulary (Section 12) -------- */
.status { font-weight: 600; }
.status.ok { color: var(--ok); } .status.warn { color: var(--warn); } .status.fail { color: var(--fail); } .status.muted { color: var(--muted); }
.vbadge, .vchip { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid currentColor; border-radius: 999px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.vbadge { padding: .1rem .5rem; font-size: .78rem; } .vchip { padding: .22rem .55rem; font-size: .76rem; font-weight: 500; }
.vbadge svg, .vchip svg { flex: 0 0 auto; width: 14px; height: 14px; }
.v-ok { color: var(--ok); } .v-warn { color: var(--warn); } .v-fail { color: var(--fail); } .v-muted { color: var(--muted); }
.varea { padding: .5rem 0; border-top: 1px solid var(--line); }
.varea:first-child { border-top: none; }
.varow { display: flex; align-items: center; gap: .5rem; }
.vline { color: var(--ink); margin: .15rem 0 0; font-size: .92rem; }
.varea details { margin-top: .3rem; }
.varea summary { cursor: pointer; color: var(--brand); font-size: .82rem; }
.vdetail { font-family: var(--mono); font-size: .78rem; color: var(--muted); margin-top: .3rem; }
.vdetail span { color: var(--ink); }
.steptracker { display: flex; flex-wrap: wrap; gap: .45rem; margin: .5rem 0; }

/* -------- Contextual assist -------- */
.assist-card { border-left: 4px solid var(--warn); background: var(--warn-tint); padding: .6rem .8rem; border-radius: 0 8px 8px 0; margin: .5rem 0; }
.assist-card.ref { border-left-color: var(--brand); background: var(--brand-tint); }
.assist-card h4 { margin: 0 0 .25rem; font-size: .95rem; }
.assist-card p { margin: 0; font-size: .9rem; }
.assist-card img { max-width: 320px; width: 100%; border: 1px solid var(--line); border-radius: 6px; margin-top: .4rem; }

/* -------- Tables + pagination -------- */
table.grid { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.grid th, table.grid td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; white-space: nowrap; }
/* Single-line cells with a truncating inner span (full value shown on hover via
   the cell's title). Keeps every table row one line high for a consistent look. */
.grid td .tc { display: block; max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid td .tc.tc-sm { max-width: 12ch; }
.grid td .tc.tc-lg { max-width: 40ch; }
.grid td.nowrap { white-space: nowrap; }
/* Column headers: uppercase, faint, letter-spaced (mockup). Not sticky — the
   panes size to content + paginate rather than scroll inside a fixed viewport. */
table.grid thead th { color: var(--faint); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; background: transparent; }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid.rows tbody tr { cursor: pointer; }
table.grid.rows tbody tr:hover { background: var(--line-soft); }
/* Stable table viewport: a fixed min/max height with internal scroll so filter
 * changes, pagination, and row-count changes never collapse or jump the layout.
 * Content scrolls inside; the sticky header keeps columns labeled. */
/* Static height so the card doesn't jump as rows/pages change (fits header + 5). */
.table-scroll, .audit-scroll { height: 15rem; overflow: auto; }
/* legacy audit table (kept for compatibility) */
.audit-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.audit-table th, .audit-table td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.audit-table thead th { position: sticky; top: 0; background: var(--brand-tint); color: var(--muted); font-weight: 600; white-space: nowrap; }
.audit-table tbody tr:hover { background: var(--line-soft); }

.pager { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .9rem; font-size: .82rem; color: var(--muted); flex-wrap: wrap; }
.pager-left { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.rowsel-lbl { display: inline-flex; align-items: center; gap: .35rem; }
.rows-per { padding: .2rem .35rem; font-size: .8rem; }
.pager .pages { display: flex; gap: .25rem; }
.pager .pg { font: inherit; font-size: .8rem; min-width: 1.9rem; padding: .25rem .5rem; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; }
.pager .pg[aria-current="page"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.pager .pg:disabled { opacity: .45; cursor: not-allowed; }

/* -------- Landing / role chooser -------- */
.hero { text-align: center; padding: 2rem 0 1.4rem; }
.hero h1 { font-size: 2rem; margin: 0 0 .5rem; }
.hero p { color: var(--muted); max-width: 52ch; margin: 0 auto; }
.rolegrid, .rolecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; margin-top: 1.6rem; }
.role, .rolecard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.role.feature { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: var(--shadow-lift); }
.role .ico { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); margin-bottom: .3rem; }
.role .ico svg { width: 22px; height: 22px; }
.role h2, .rolecard h2 { margin: 0; font-size: 1.1rem; }
.role p { margin: 0; color: var(--muted); font-size: .9rem; flex: 1; }
.role .tag { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.role .cta { margin-top: .6rem; }

/* -------- Candidate flow -------- */
.cwrap { max-width: 680px; margin: 0 auto; }
/* The system-check step is instruction-heavy (download + annotated screenshots),
   so it gets a wider card than the rest of the candidate flow. */
.cwrap.wide { max-width: 980px; }
.ccard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 1.6rem 1.7rem; }
.otp-input { font-size: 1.35rem; letter-spacing: .12em; padding: .6rem .8rem; border: 2px solid var(--line); border-radius: 10px; width: 13rem; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.interviewer-bar { display: flex; align-items: center; gap: .6rem; background: var(--ok-tint); color: var(--ok); border-radius: 10px; padding: .6rem .9rem; font-size: .88rem; font-weight: 600; margin-bottom: 1rem; }
.interviewer-bar svg { width: 18px; height: 18px; flex: 0 0 auto; }
.snag { border: 1px solid var(--line-soft); border-radius: 10px; margin-top: .6rem; background: var(--panel); }
.snag > summary { cursor: pointer; list-style: none; padding: .7rem .9rem; font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: .5rem; }
.snag > summary::-webkit-details-marker { display: none; }
.snag > summary .caret { margin-left: auto; color: var(--faint); transition: transform .15s; }
.snag[open] > summary .caret { transform: rotate(90deg); }
.snag .body { padding: 0 .9rem .9rem; color: var(--muted); font-size: .9rem; }
.snag .shot { margin-top: .5rem; border: 1px solid var(--line); border-radius: 8px; min-height: 100px; display: grid; place-items: center; background: linear-gradient(135deg, var(--line-soft), var(--bg)); color: var(--faint); font-size: .78rem; }
.snag .shot img { max-width: 100%; border-radius: 8px; }
/* Per-browser download-help blocks inside a snag (Chromium vs Firefox). */
.brow { margin-top: .85rem; }
.brow h5 { margin: 0 0 .35rem; font-size: .9rem; color: var(--ink); font-weight: 700; }
.brow-steps { margin: 0; padding-left: 1.2rem; } .brow-steps li { margin: .22rem 0; }
.cmd { font-family: var(--mono); font-size: .82rem; background: var(--code-bg); color: var(--code-ink); border-radius: 8px; padding: .7rem .9rem; overflow-x: auto; margin-top: .5rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.cmd button { font: inherit; font-size: .74rem; background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 6px; padding: .3rem .55rem; cursor: pointer; white-space: nowrap; }
.done-check { width: 60px; height: 60px; border-radius: 50%; background: var(--ok-tint); color: var(--ok); display: grid; place-items: center; margin: 0 auto 1rem; }
.done-check svg { width: 32px; height: 32px; }
.done-check.warn { background: var(--warn-tint); color: var(--warn); }
/* Attention callout (e.g. "use the PC you'll work from") */
.warn-callout { display: flex; gap: .7rem; align-items: flex-start; background: var(--warn-tint); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-left: 4px solid var(--warn); border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1rem; font-size: .92rem; }
.warn-callout svg { color: var(--warn); flex: 0 0 auto; margin-top: .05rem; }
/* Stronger (red) variant for a hard incompatibility, e.g. a non-Windows device. */
.warn-callout.incompat-callout { background: var(--fail-tint); border-color: color-mix(in srgb, var(--fail) 45%, transparent); border-left-color: var(--fail); }
.warn-callout.incompat-callout svg { color: var(--fail); }
/* Expected security prompts (the "what you'll see" block) */
.expect { margin-top: 1.3rem; }
.expect-h { font-size: 1rem; margin: 0 0 .3rem; }
.expect-intro { color: var(--muted); font-size: .9rem; margin: 0 0 .8rem; }
.expect-grid { display: grid; grid-template-columns: 1fr; gap: .9rem; }
.expect-step { display: flex; gap: .6rem; background: var(--brand-tint); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line)); border-radius: 10px; padding: .8rem .9rem; }
.expect-n { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; font-weight: 700; font-size: .82rem; }
.expect-c h4 { margin: 0 0 .2rem; font-size: .9rem; }
.expect-c p { margin: 0 0 .5rem; font-size: .85rem; color: var(--muted); }
.expect-c .shot { margin-top: .3rem; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.expect-c .shot img { max-width: 100%; display: block; }
/* Screenshots are annotated help - make them clickable to enlarge (SVGs zoom
   crisply), with a corner hint so candidates know they can. */
.shot { position: relative; cursor: zoom-in; }
.shot img { cursor: zoom-in; }
.shot::after { content: '\2922  Click to enlarge'; position: absolute; right: .45rem; bottom: .45rem; background: rgba(15,20,30,.72); color: #fff; font-size: .72rem; padding: .16rem .45rem; border-radius: 6px; pointer-events: none; }
.shot-ov { position: fixed; inset: 0; background: rgba(0,0,0,.8); display: grid; place-items: center; padding: 3vh 3vw; z-index: 70; cursor: zoom-out; }
.shot-ov img { max-width: 94vw; max-height: 94vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
/* Theme-adaptive illustrations: each figure ships a light + dark <img>; show the
   one matching the resolved theme. Mirrors the token cascade above — light by
   default, the OS dark preference unless the user forced light, and the explicit
   theme toggle winning over the OS in both directions. */
.shot img.theme-dark { display: none; }
.shot img.theme-light { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot img.theme-dark { display: block; }
  :root:not([data-theme="light"]) .shot img.theme-light { display: none; }
}
:root[data-theme="dark"] .shot img.theme-dark { display: block; }
:root[data-theme="dark"] .shot img.theme-light { display: none; }
:root[data-theme="light"] .shot img.theme-light { display: block; }
:root[data-theme="light"] .shot img.theme-dark { display: none; }
/* Troubleshooting group */
.trouble { margin-top: 1.4rem; }
.trouble-h { font-size: .9rem; margin: 0 0 .4rem; color: var(--muted); }
@media (max-width: 640px) { .expect-grid { grid-template-columns: 1fr; } }

/* -------- Admin dashboard -------- */
.adm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: .2rem 0 1.1rem; flex-wrap: wrap; }
.adm-head h1 { font-size: 1.3rem; margin: 0; }
.adm-nav { display: flex; flex-wrap: wrap; gap: .4rem; }
.adm-nav a { font-size: .8rem; font-weight: 600; color: var(--muted); text-decoration: none; padding: .3rem .6rem; border-radius: 7px; border: 1px solid var(--line); }
.adm-nav a:hover { color: var(--brand); border-color: var(--brand); }
.profile { border: 1px solid var(--line-soft); border-radius: 10px; padding: 1rem; margin-bottom: .8rem; }
.profile-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; }
.profile-head h3 { margin: 0; font-size: 1rem; }
.lock { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .12rem .5rem; border-radius: 999px; }
.lock.idle { color: var(--ok); background: var(--ok-tint); }
.lock.locked { color: var(--warn); background: var(--warn-tint); }
/* Thresholds editor: broken out by category. Each group is a titled block; its
   fields flow in an auto-fit grid beneath the heading. */
.th-groups { display: flex; flex-direction: column; gap: 1.1rem; margin-top: .8rem; }
.th-group-h { margin: 0 0 .55rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); border-bottom: 1px solid var(--line-soft); padding-bottom: .3rem; }
.thresholds { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem .9rem; align-items: stretch; }
.th { display: flex; flex-direction: column; gap: .2rem; }
.th label { font-size: .72rem; color: var(--muted); font-weight: 600; }
/* Titles (label + ⓘ) are always one line - every unit / range / "0 = off" note
   lives in the info bubble, not the label. */
.th-label { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.th input:disabled { opacity: .6; }
/* Inputs sit at the bottom of each (grid-stretched) cell so they align across a row. */
.th > input, .th > select { margin-top: auto; }
/* Checkbox fields take their own full-width row within the group so a longer
   label never gets squeezed into (or overflow) a narrow numeric column. */
.th-check { flex-direction: row; align-items: center; grid-column: 1 / -1; }
.th-check .th-label { white-space: nowrap; font-weight: 600; }
/* Per-check outcome-severity selector (admin-configurable). Stacks under the
   input for numeric/select fields; sits to the right for checkbox + signal rows. */
.th > .sev { margin-top: .25rem; }
.sev { font-size: .74rem; padding: .16rem .3rem; color: var(--muted); }
.th-check .sev { margin-left: auto; }
.th-sev { flex-direction: row; align-items: center; justify-content: space-between; gap: .6rem; grid-column: 1 / -1; }
.th-sev .th-label { white-space: normal; font-weight: 600; }
.th-sev .sev { margin-top: 0; flex: 0 0 auto; }
.profile-acts { margin-top: .8rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.editor { border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: 10px; padding: 1rem 1.1rem; margin-top: .8rem; background: var(--brand-tint); }
.newrow { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; border-top: 1px solid var(--line-soft); padding-top: .9rem; margin-top: .3rem; }
.field { display: flex; flex-direction: column; gap: .25rem; }
.field label { font-size: .72rem; color: var(--muted); font-weight: 600; }
.retention-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
/* Retention control: amount + unit + "Never". */
.retention-ctl { display: inline-flex; align-items: center; gap: .4rem; }
.retention-ctl .ret-num { width: 4.5rem; }
.retention-ctl .ret-num:disabled, .retention-ctl .ret-unit:disabled { opacity: .5; }
.retention-ctl .ret-never { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; color: var(--muted); margin-left: .2rem; white-space: nowrap; }
.cand-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1rem 0 .6rem; }
.cand-tools label { font-size: .85rem; color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; }
.audit-scroll { border: 1px solid var(--line-soft); border-radius: 9px; }

/* Date-range picker (candidate-data filter): self-contained calendar popover */
.daterange { position: relative; display: inline-block; }
#candRangeBtn.active { border-color: var(--brand); color: var(--brand); }
.dr-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 15.5rem; padding: .6rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lift); }
.dr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .45rem; }
.dr-title { font-weight: 650; font-size: .85rem; }
.dr-nav { font: inherit; font-size: 1rem; line-height: 1; width: 1.8rem; height: 1.8rem; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 6px; cursor: pointer; }
.dr-nav:hover { background: var(--line-soft); }
.dr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dr-wd { text-align: center; font-size: .64rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: .2rem 0; }
.dr-day { font: inherit; font-size: .8rem; aspect-ratio: 1 / 1; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink); border-radius: 6px; cursor: pointer; }
.dr-day.empty { visibility: hidden; cursor: default; }
.dr-day:not(.empty):hover { background: var(--line-soft); }
.dr-day.today { box-shadow: inset 0 0 0 1px var(--line); }
.dr-day.in { background: var(--brand-tint); border-radius: 0; }
.dr-day.start, .dr-day.end { background: var(--brand); color: var(--brand-ink); }
.dr-day.start { border-radius: 6px 0 0 6px; }
.dr-day.end { border-radius: 0 6px 6px 0; }
.dr-day.start.end { border-radius: 6px; }
.dr-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; padding-top: .45rem; border-top: 1px solid var(--line-soft); }
.dr-hint { font-size: .74rem; color: var(--muted); }

/* -------- Access needed (403) -------- */
.access-wrap { max-width: 520px; margin: 4rem auto; text-align: center; }
.access-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 2.2rem; }
.access-ico { width: 60px; height: 60px; border-radius: 50%; background: var(--warn-tint); color: var(--warn); display: grid; place-items: center; margin: 0 auto 1.1rem; }
.access-ico svg { width: 30px; height: 30px; }

/* -------- Manager dashboard -------- */
.mgr-shell { max-width: 1180px; margin: .7rem auto 2rem; padding: 0 1.4rem; display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 1.4rem; align-items: start; }
@media (max-width: 940px) { .mgr-shell { grid-template-columns: 1fr; } .rail { position: static; } }
/* Inside the admin Live tab the shell fills the already-padded <main>, so it
   drops the standalone page's own max-width/margins/padding. */
#admLive .mgr-shell { max-width: none; margin: 0; padding: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; margin: .2rem .2rem 1rem; }
.steptracker { display: flex; flex-wrap: wrap; gap: .35rem; }
.section-head h1 { font-size: 1.15rem; margin: 0; }
.section-head .count { font-size: .78rem; color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 1.1rem; }
/* Keep the live-session and roster panels from collapsing between updates. */
#liveList, #applicantList { min-height: 96px; }
/* Live heartbeat: muted text with a green status dot (mockup) — no reconnecting state. */
.heartbeat { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); font-weight: 500; font-size: .8rem; }
.heartbeat .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.heartbeat.off { color: var(--fail); }
.heartbeat.off .dot { background: var(--fail); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fail) 22%, transparent); }
.heartbeat .hb-link { color: inherit; text-decoration: underline; font-weight: 600; cursor: pointer; }
/* "Dismiss all closed" sits between the two rail cards (a flex-column with gap),
   centered, so it never shifts the live-card column out of line with the rail. */
.live-bulk { align-self: center; }

/* live session card */
.live { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.live::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--muted); }
.live.v-pass::before { background: var(--ok); }
.live.v-fail::before { background: var(--fail); }
.live.v-review::before { background: var(--warn); }
.live-body { padding: 1.15rem 1.25rem 1.25rem 1.4rem; }
.live-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.cand { min-width: 0; }
.cand .name { font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; margin: 0; line-height: 1.2; }
.cand .sub { font-size: .82rem; color: var(--muted); margin: .2rem 0 0; }
.cand .sub b { color: var(--ink); font-weight: 600; }
/* Compact tinted verdict pill (mockup) — in-progress reads brand/blue ("running"). */
.verdict { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 999px; font-weight: 650; font-size: .78rem; border: 0; white-space: nowrap; }
.verdict svg { width: 13px; height: 13px; }
.verdict.v-ok { background: var(--ok-tint); color: var(--ok); } .verdict.v-fail { background: var(--fail-tint); color: var(--fail); } .verdict.v-warn { background: var(--warn-tint); color: var(--warn); } .verdict.v-muted { background: var(--brand-tint); color: var(--brand); }

.tools { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.tbtn { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; padding: .42rem .7rem; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.tbtn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.tbtn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.tbtn.primary:hover { filter: brightness(1.05); color: var(--brand-ink); }
.tbtn svg { width: 15px; height: 15px; }
.tbtn:focus-visible, .chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Assessment rows (mockup): two columns of "● label … status", compact. */
.assess { display: grid; grid-template-columns: repeat(2, 1fr); gap: .1rem .9rem; margin: 1rem 0 .2rem; }
@media (max-width: 560px) { .assess { grid-template-columns: 1fr; } }
.arow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .35rem 0; font-size: .82rem; }
.arow .adot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: currentColor; }
.arow .adot.v-ok { color: var(--ok); } .arow .adot.v-fail { color: var(--fail); } .arow .adot.v-warn { color: var(--warn); } .arow .adot.v-muted { color: var(--faint); }
.arow .an { flex: 1; color: var(--ink); min-width: 0; }
.arow .astat { font-weight: 600; }
.arow .astat.v-ok { color: var(--ok); } .arow .astat.v-fail { color: var(--fail); } .arow .astat.v-warn { color: var(--warn); } .arow .astat.v-muted { color: var(--muted); }
/* Clarifier under a "needs help" that stems from a tooling/verification failure. */
.arow .anote { flex-basis: 100%; margin-top: .1rem; font-size: .76rem; line-height: 1.4; color: var(--ink); background: color-mix(in srgb, var(--warn) 12%, transparent); border-left: 3px solid var(--warn); border-radius: 4px; padding: .3rem .5rem; }
.rejects { margin-top: .7rem; font-size: .8rem; color: var(--fail); font-weight: 600; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.rejects .tag { background: var(--fail-tint); border: 1px solid color-mix(in srgb, var(--fail) 35%, transparent); border-radius: 6px; padding: .1rem .45rem; }

/* Live "which check is running" heartbeat on a manager card (before results arrive). */
.liveprog { margin: .5rem 0 .2rem; }
.liveprog-label { font-size: .82rem; color: var(--brand); font-weight: 600; }
.liveprog-track { margin-top: .35rem; height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.liveprog-track > span { display: block; height: 100%; background: var(--brand); border-radius: 999px; transition: width .3s ease; }
/* Consistent tinted pills across the step tracker + signals (mockup): no border,
   soft-tint background, colored text. */
.stepchip { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; background: var(--line-soft); color: var(--muted); }
.stepchip svg { width: 12px; height: 12px; flex: none; }
.stepchip.done { background: var(--ok-tint); color: var(--ok); }
.stepchip.active { background: var(--brand-tint); color: var(--brand); }
.stepchip.warn { background: var(--warn-tint); color: var(--warn); }

.signals { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; align-items: center; }
.sig { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600; padding: .22rem .6rem; border-radius: 999px; border: 0; background: var(--line-soft); color: var(--muted); }
.sig.flag { color: var(--warn); background: var(--warn-tint); }
.sig.good { color: var(--ok); background: var(--ok-tint); }
.sig b { color: currentColor; }

.more { margin-top: .9rem; display: flex; flex-direction: column; gap: .5rem; }
details.disc { border: 1px solid var(--line-soft); border-radius: 9px; background: var(--panel); }
details.disc > summary { cursor: pointer; list-style: none; padding: .55rem .8rem; font-size: .82rem; font-weight: 600; color: var(--brand); display: flex; align-items: center; gap: .5rem; }
details.disc > summary::-webkit-details-marker { display: none; }
details.disc > summary .caret { margin-left: auto; color: var(--faint); transition: transform .15s; }
details.disc[open] > summary .caret { transform: rotate(90deg); }
details.disc .disc-body { padding: 0 .8rem .8rem; font-size: .84rem; color: var(--muted); }
/* Live-card panels are opened by the bottom tool buttons, not a visible disclosure
   bar — hide the summary and drop the box (the content brings its own structure). */
.disc.lc-panel { border: 0; background: transparent; }
.disc.lc-panel > summary { display: none; }
.disc.lc-panel > .disc-body { padding: .6rem 0 0; }
.assist { border-left: 3px solid var(--warn); background: var(--warn-tint); border-radius: 0 8px 8px 0; padding: .55rem .75rem; margin: .3rem 0; }
.assist h4 { margin: 0 0 .2rem; font-size: .84rem; color: var(--ink); }
.assist p { margin: 0; font-size: .82rem; }
.shots { display: flex; gap: .5rem; flex-wrap: wrap; }
.shot-thumb { border: 1px solid var(--line); border-radius: 6px; padding: .2rem; display: inline-block; }
.shot-thumb img { height: 54px; display: block; border-radius: 4px; }
.shot-thumb .cap { font-size: .68rem; text-align: center; margin-top: .15rem; }
/* Recalled-result modal (re-open a closed session card) */
/* Center the modal in both axes; "safe" falls back to top-aligned when the modal
   is taller than the viewport so its top never clips out of the scroll area. */
.result-ov { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: grid; place-items: safe center; padding: 4vh 1rem; overflow: auto; z-index: 60; }
.result-modal { position: relative; width: min(760px, 100%); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: .55rem 1.1rem 1.1rem; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.result-modal.narrow { width: min(440px, 100%); }
/* Themed confirm / alert dialog (window.Dialog), stacked above other modals. */
.dialog-ov { z-index: 80; }
.result-modal.dialog { width: min(420px, 100%); padding: 1.1rem 1.2rem 1.2rem; }
.dialog-msg { margin: .1rem 0 1.1rem; color: var(--ink); font-size: .92rem; line-height: 1.5; }
.dialog-acts { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; }
/* (danger is the neutral fail-text style defined above; no solid override) */
/* Dynamic width: only as wide as the content needs, within comfortable bounds. */
.result-modal.fit { width: fit-content; min-width: 21rem; max-width: min(600px, 100%); }
/* Close button sits in its own row above the card, so it never crowds the
   card's own top-right verdict badge. */
.result-top { display: flex; justify-content: flex-end; margin-bottom: .35rem; }
/* Titled modal header (code / attempts): title left, close right. */
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; }
.modal-head .modal-title { margin: 0; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-x { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 9px; font-size: 1.35rem; line-height: 1; cursor: pointer; }
.result-x:hover { color: var(--ink); border-color: var(--muted); }
/* Attempts list inside its modal: cap at ~5 rows and scroll the rest. */
.attempts-list { max-height: 22.5rem; overflow-y: auto; scrollbar-gutter: stable; }
.attempt-row { padding: .5rem 0; border-top: 1px solid var(--line-soft); font-size: .82rem; }
.attempt-row:first-child { border-top: none; }
.attempt-meta { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: baseline; }
.consent-line { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.cstat { font-size: .8rem; } .cstat b { color: var(--ink); }

/* full system details spec sheet */
/* Full system details: grouped bordered cards (mockup), two columns. Dense flow
   lets the short Collection card tuck under Network beside the tall Location card. */
.specgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; grid-auto-flow: dense; }
.specgroup.loc { grid-row: span 2; }          /* tall Location-signals card */
.specgroup.full { grid-column: 1 / -1; }       /* full-width Hardware/VM strip */
.specgroup.full .kvcols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.4rem; }
@media (max-width: 620px) { .specgrid { grid-template-columns: 1fr; } .specgroup.loc { grid-row: auto; } .specgroup.full .kvcols { grid-template-columns: 1fr; } }
.specgroup { border: 1px solid var(--line-soft); border-radius: 9px; padding: .7rem .85rem; background: var(--panel); }
.specgroup h5 { margin: 0 0 .5rem; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 700; display: flex; align-items: center; }
/* Findings summary at the top of Full system details: every gated check grouped by
   Fail / Needs help / Pass, with the detail line and how-to-handle guidance. */
.findings { border: 1px solid var(--line); border-radius: 10px; padding: .8rem .95rem; margin-bottom: .9rem; background: var(--card); }
.findings > h5 { margin: 0 0 .6rem; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 700; }
.fgroup { margin-bottom: .7rem; } .fgroup:last-child { margin-bottom: 0; }
.fghead { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin-bottom: .3rem; }
.ftag { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .12rem .5rem; border-radius: 999px; }
.ftag.v-ok { color: var(--ok); background: var(--ok-tint); } .ftag.v-review { color: var(--warn); background: var(--warn-tint); } .ftag.v-fail { color: var(--fail); background: var(--fail-tint); }
.fgcount { font-size: .74rem; font-weight: 700; color: var(--muted); }
.fgtip { flex: 1 1 100%; font-size: .76rem; color: var(--muted); }
.fitem { padding: .3rem 0 .3rem .2rem; border-top: 1px solid var(--line-soft); }
.fitem:first-of-type { border-top: 0; }
.fitem-h { font-size: .82rem; color: var(--ink); } .fitem-d { color: var(--muted); }
.fitem-adv { margin-top: .15rem; font-size: .76rem; color: var(--muted); }
.fitem-adv b { color: var(--ink); font-weight: 600; }
.kv { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; padding: .28rem 0; border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 60%, transparent); }
.kv:last-child { border-bottom: 0; }
.kv > span { color: var(--muted); display: flex; align-items: center; }
.kv > b { color: var(--ink); font-weight: 500; text-align: right; }
.kv.na > b { color: var(--faint); font-weight: 500; font-style: italic; }

/* candidate rail */
.rail { display: flex; flex-direction: column; gap: 1.1rem; position: sticky; top: 4.4rem; }
/* Height grows with the rows up to the ~5-row page size, then caps (and scrolls
   if a row wraps past it), but shrinks for fewer candidates. Generate code /
   Attempts open in a modal so rows never expand; the pager (hidden until >5)
   sits below this box. */
/* No scrollbar: renderRoster sizes each page to fit, paginating any overflow. */
.roster { display: flex; flex-direction: column; }
.rperson { padding: .7rem 0; border-top: 1px solid var(--line-soft); }
.rperson:first-child { border-top: none; padding-top: .2rem; }
.rperson-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.rmeta { flex: 1; min-width: 0; }                 /* shrinkable so children can truncate */
.rperson .rn { display: flex; align-items: center; gap: .4rem; min-width: 0; font-weight: 650; font-size: .9rem; }
.rperson .rn .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rperson .rr { font-size: .74rem; color: var(--muted); }
/* Shared-directory ownership markers (only when managers can see others). */
.owner-tag { flex: 0 1 auto; min-width: 2.5rem; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .64rem; font-weight: 700; letter-spacing: .02em; padding: .1rem .42rem; border-radius: 999px; background: var(--line-soft); color: var(--muted); }
.owner-tag.mine { background: var(--brand-tint); color: var(--brand); }
.rperson-other { border-left: 3px solid var(--line); padding-left: .55rem; }
.rperson-mine { border-left: 3px solid var(--brand); padding-left: .55rem; }
.state-dot { flex: none; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .1rem .45rem; border-radius: 999px; }
.state-dot.active { color: var(--ok); background: var(--ok-tint); }
.state-dot.idle { color: var(--faint); background: var(--bg); }
.rperson-acts { display: flex; gap: .4rem; margin-top: .55rem; align-items: center; flex-wrap: wrap; }
/* Inline access code on a roster row (mockup): label + monospace chip + copy/discard. */
.rcodeline { display: flex; align-items: center; gap: .4rem; margin-top: .55rem; flex-wrap: nowrap; }
.rcodelabel { font-size: .6rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; white-space: nowrap; flex: none; }
.rcode-grp { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: nowrap; }
.rcode { font-family: var(--mono); font-weight: 700; letter-spacing: .06em; background: var(--brand-tint); color: var(--brand); padding: .16rem .4rem; border-radius: 6px; font-size: .84rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.codebox { margin-top: .55rem; background: var(--brand-tint); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); border-radius: 8px; padding: .5rem .65rem; }
.codebox .cap { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--brand); }
.codebox .code { font-size: 1.5rem; font-weight: 750; letter-spacing: .18em; color: var(--ink); margin-top: .1rem; font-variant-numeric: tabular-nums; }
.assist-search { width: 100%; margin: .15rem 0 .5rem; }
.codebox-acts { display: flex; gap: .4rem; margin-top: .45rem; }
.codebox.collapsed { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.codebox.collapsed .cap { margin: 0; }

/* -------- Help: info icons, popovers, guides, glossary -------- */
.help-i { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: .35rem; padding: 0; font: inherit; font-size: .64rem; font-weight: 700; font-style: italic; line-height: 1; border: 1.5px solid var(--brand); border-radius: 50%; background: var(--brand-tint); color: var(--brand); cursor: pointer; vertical-align: middle; flex: 0 0 auto; }
.help-i:hover { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
/* Question-mark cursor over info bubbles, site-wide (matches the mockup). */
.help-i { cursor: help; }
/* Guide button: a brief flash on load to draw the eye (manager/admin). */
@keyframes guideFlash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px var(--brand-tint); border-color: var(--brand); color: var(--brand); } }
.guide-btn.flash { animation: guideFlash .5s ease-in-out 3; }
.help-i:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.help-pop { position: absolute; z-index: 60; max-width: 300px; padding: .7rem .8rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lift); font-size: .82rem; color: var(--ink); }
.help-pop-h { font-weight: 700; margin-bottom: .25rem; }
.help-pop p { margin: .3rem 0 0; color: var(--muted); }
.help-pop p b { color: var(--ink); font-weight: 600; }
.guide-ov { position: fixed; inset: 0; z-index: 80; background: rgba(10,15,22,.55); display: grid; place-items: center; padding: 1rem; }
.guide-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lift); max-width: 520px; width: 100%; max-height: 85vh; overflow: auto; padding: 1.3rem 1.4rem; }
.guide-h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.guide-h h2 { margin: 0; font-size: 1.15rem; }
.help-x { font: inherit; font-size: 1.4rem; line-height: 1; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: .1rem .3rem; }
.help-x:hover { color: var(--ink); }
.guide-card ol { margin: .8rem 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .55rem; }
.guide-card li { font-size: .9rem; color: var(--muted); }
.guide-card li b { color: var(--ink); font-weight: 600; }
.guide-note { margin: .9rem 0 0; font-size: .82rem; color: var(--faint); }
.guide-foot { margin-top: 1.1rem; display: flex; justify-content: flex-end; }
.gloss { padding: .4rem 0; border-bottom: 1px solid var(--line-soft); }
.gloss h4 { margin: 0 0 .15rem; font-size: .85rem; color: var(--ink); }
.gloss p { margin: 0; font-size: .82rem; color: var(--muted); }
.gloss .gloss-read { color: var(--faint); margin-top: .1rem; }
.gloss-results { max-height: 320px; overflow-y: auto; padding-right: .3rem; }
.gloss-results .gloss:last-child { border-bottom: 0; }
.help-panel > summary { cursor: pointer; font-weight: 750; font-size: 1.05rem; list-style: none; }
.help-panel > summary::-webkit-details-marker { display: none; }
.help-panel[open] > summary { margin-bottom: .3rem; }
/* Affordance that the collapsed glossary can be opened (rotates when open). */
.help-panel > summary { position: relative; padding-right: 1.3rem; }
.help-panel > summary::after { content: "▸"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); color: var(--faint); transition: transform .15s; }
.help-panel[open] > summary::after { transform: translateY(-50%) rotate(90deg); }

/* -------- Responsive / mobile -------- */
@media (max-width: 640px) {
  header.topbar { padding: .55rem .85rem; gap: .5rem .7rem; }
  .topbar .brand { font-size: .98rem; }
  .themeseg button { padding: .3rem .4rem; font-size: .7rem; }
  main, footer { margin: 1rem auto; padding: 0 1rem; }
  .mgr-shell { padding: 0 1rem; margin: 1rem auto; gap: 1rem; }
  .ccard { padding: 1.2rem 1.05rem; }
  .live-body { padding: 1rem 1rem 1.1rem 1.15rem; }
  .cand .name { font-size: 1.15rem; overflow-wrap: anywhere; }
  .rperson .rn, .kv > b { overflow-wrap: anywhere; }
  .otp-input { width: 100%; }
  .access-wrap { margin: 2rem auto; }
  .access-card { padding: 1.6rem 1.25rem; }
  .hero h1 { font-size: 1.6rem; }
  /* Never let the arow's fixed label column force the card wider than the screen. */
  .arow { grid-template-columns: 92px 1fr; gap: .55rem; padding: .55rem .7rem; }
  .dr-pop { width: min(15.5rem, calc(100vw - 2rem)); }
}

/* ---- Reporting dashboard (Phase 2) ------------------------------------- */
.rpt { max-width: 1180px; margin: 0 auto; }
.rpt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .7rem .8rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); margin-bottom: 1rem; }
.rpt-bar .lead { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 600; }
.rpt-bar .spacer { flex: 1; }
.rpt-note { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; border-radius: 10px; font-size: .8rem;
  background: var(--brand-tint); color: var(--ink); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); margin-bottom: 1rem; }
.rpt-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-bottom: 1rem; }
.rpt-tile { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: .9rem 1rem; }
.rpt-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand); }
.rpt-tile.ok::before { background: var(--ok); } .rpt-tile.warn::before { background: var(--warn); } .rpt-tile.fail::before { background: var(--fail); }
.rpt-tile .k { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.rpt-tile .v { font-size: 1.8rem; font-weight: 700; letter-spacing: -.02em; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.rpt-tile .d { display: inline-flex; align-items: center; margin-top: .4rem; font-size: .72rem; font-weight: 600; }
.rpt-tile .d.good { color: var(--ok); } .rpt-tile .d.bad { color: var(--fail); } .rpt-tile .d.flat { color: var(--faint); }
.rpt-tile .d .d-sub { color: var(--faint); font-weight: 500; margin-left: .3rem; }
.rpt-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: .9rem; }
.rpt-w { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0; }
.rpt-w.c4 { grid-column: span 4; } .rpt-w.c6 { grid-column: span 6; } .rpt-w.c8 { grid-column: span 8; } .rpt-w.c12 { grid-column: span 12; }
.rpt-wh { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line-soft); }
.rpt-wh h3 { font-size: .9rem; margin: 0; font-weight: 620; }
.rpt-wh .sub { font-size: .72rem; color: var(--faint); }
.rpt-wb { padding: .9rem; flex: 1; min-height: 60px; }
.rpt-canvas { position: relative; height: 200px; }
.rpt-canvas.tall { height: 240px; }
.rpt-stat { text-align: center; padding: .4rem 0; }
.rpt-stat .big { font-size: 2.4rem; font-weight: 720; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rpt-stat .cap { color: var(--muted); font-size: .8rem; }
.rpt-empty { color: var(--faint); font-size: .85rem; text-align: center; padding: 1.2rem; }
.rpt-tbl { width: 100%; border-collapse: collapse; font-size: .82rem; }
.rpt-tbl th, .rpt-tbl td { text-align: left; padding: .45rem .7rem; border-bottom: 1px solid var(--line-soft); }
.rpt-tbl th { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 600; }
.rpt-tbl td.num, .rpt-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .rpt-tiles { grid-template-columns: repeat(2, 1fr); } .rpt-w.c4, .rpt-w.c6, .rpt-w.c8 { grid-column: span 12; } }

/* Dashboard filters bar + chips (mockup) */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .55rem .8rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); margin-bottom: 1rem; }
.filters .lead { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); font-weight: 600; margin-right: .1rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .65rem; border: 1px solid var(--line); background: var(--card); border-radius: 8px; color: var(--ink); font-size: .78rem; font-weight: 500; }
.chip.brandy { background: var(--brand-tint); border-color: transparent; color: var(--brand); font-weight: 600; }
.rpt-draghint { font-size: .72rem; color: var(--faint); }
.rpt-addwidget { width: 100%; margin-top: .9rem; padding: .8rem; border: 1px dashed var(--line); background: transparent; color: var(--muted); border-radius: var(--r); font: inherit; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.rpt-addwidget:hover { border-color: var(--brand); color: var(--brand); }
.rpt-addwidget svg { width: 16px; height: 16px; }
/* Dashboard filter chip-selects. */
.chipsel { padding: .3rem .55rem; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 8px; font: inherit; font-size: .78rem; cursor: pointer; }
.chipsel:hover { border-color: var(--brand); }
/* Add-widget modal (build-your-own). */
.rpt-modal-ov { position: fixed; inset: 0; background: rgba(9,13,22,.55); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 1rem; z-index: 90; }
.rpt-modal { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lift); padding: 1.2rem 1.3rem; width: min(420px, 100%); }
.rpt-modal h3 { margin: 0 0 .8rem; font-size: 1.05rem; }
.rpt-fld { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .7rem; font-size: .78rem; color: var(--muted); font-weight: 600; }
.rpt-fld input, .rpt-fld select { font: inherit; font-size: .85rem; font-weight: 400; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .45rem .55rem; }
.rpt-modal-acts { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
/* Report-builder: single date-range control + catalog section hints */
.rb-drbtn { cursor: pointer; text-align: left; min-width: 12rem; display: inline-flex; align-items: center; justify-content: space-between; gap: .5rem; }
.rb-catt-note { text-transform: none; letter-spacing: 0; color: var(--faint); font-weight: 500; font-size: .66rem; }

/* Phase 3 — customizable Gridstack dashboard. Widgets fill their grid cell; the
 * body is a flex column so charts (flex:1) fill the resizable space, and content
 * scrolls inside the widget rather than breaking the layout (content is king). */
.grid-stack { margin: 0 -4px; }
.grid-stack-item-content { inset: 0; overflow: hidden; display: flex; }
.rpt-w { height: 100%; width: 100%; }
.rpt-wb { min-height: 0; display: flex; flex-direction: column; }
.rpt-canvas { height: auto; flex: 1; min-height: 140px; }
.rpt-tblwrap { flex: 1; min-height: 0; overflow: auto; }
.rpt-whtools { margin-left: auto; display: flex; gap: .3rem; }
.rpt-x { display: none; border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  border-radius: 6px; width: 1.5rem; height: 1.5rem; line-height: 1; cursor: pointer; font-size: .8rem; }
.rpt-x:hover { color: var(--fail); border-color: var(--fail); }
.rpt-editing .rpt-x { display: inline-flex; align-items: center; justify-content: center; }
.rpt-editing .rpt-wh { cursor: move; }
.rpt-editing .grid-stack-item-content { outline: 1.5px dashed color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: -2px; border-radius: var(--r); }
.rpt-picker { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .6rem .8rem; margin-bottom: 1rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.rpt-picker[hidden] { display: none; }
.rpt-picker .lead { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 600; }
.rpt-chip { border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 999px;
  padding: .25rem .65rem; font-size: .78rem; cursor: pointer; }
.rpt-chip:hover { border-color: var(--brand); }
.rpt-chip.on { background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 30%, transparent); color: var(--brand); font-weight: 600; }

/* Phase 4 — report builder + Reports sub-tabs. */
.rpt-subtabs { margin-bottom: 1rem; }
.rb-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem .8rem; margin-bottom: 1rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.rb-controls .spacer, .rb .spacer { flex: 1; }
.rb-f { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--muted); }
.rb-f input, .rb-f select, .rb-controls input, .rb-controls select { font-size: .82rem; }
.rb-main { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; align-items: start; }
.rb-cat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: .7rem; max-height: 640px; overflow: auto; position: sticky; top: .5rem; }
.rb-search { width: 100%; box-sizing: border-box; margin-bottom: .6rem; }
.rb-catsec { margin-bottom: .8rem; }
.rb-catt { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); font-weight: 700; margin-bottom: .4rem; }
.rb-catgh { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 600; margin: .4rem 0 .2rem; }
.rb-item { display: flex; align-items: center; gap: .45rem; padding: .2rem .25rem; font-size: .82rem; color: var(--ink); cursor: pointer; border-radius: 6px; }
.rb-item:hover { background: var(--card); }
.rb-preview { min-width: 0; }
.rb-actions { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.rb-summary { font-size: .82rem; color: var(--muted); }
.rb-exports { display: inline-flex; align-items: center; gap: .35rem; }
.rb-exports .lead { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 600; }
.rb-chart { position: relative; height: 280px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: .8rem; margin-bottom: 1rem; }
.rb-table { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.rb-tblwrap { overflow: auto; max-height: 460px; }
.rb-tblwrap .rpt-tbl { margin: 0; }
@media (max-width: 820px) { .rb-main { grid-template-columns: 1fr; } .rb-cat { position: static; max-height: 300px; } }

/* RBAC — Users & Roles admin sections. */
.pill.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.pill.fail { color: var(--fail); border-color: color-mix(in srgb, var(--fail) 35%, var(--line)); background: color-mix(in srgb, var(--fail) 12%, transparent); }
.rolechip { margin: 0 .2rem .2rem 0; }
.roleedit { display: flex; flex-wrap: wrap; gap: .3rem .8rem; }
.row-actions { white-space: nowrap; text-align: right; }
.pending-box { border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 8%, transparent); border-radius: var(--r); padding: .8rem 1rem; margin-bottom: 1rem; }
.pending-box h3 { margin: 0 0 .3rem; font-size: .95rem; color: color-mix(in srgb, var(--warn) 70%, var(--ink)); }
.pending-box table { margin-top: .5rem; }
.rolematrix { width: 100%; }
.rolematrix th, .rolematrix td { text-align: left; }
.rolematrix .rmcol { text-align: center; min-width: 6.5rem; }
.rolematrix .rmc { text-align: center; }
.rolematrix .rmgroup td { background: var(--panel); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 700; padding-top: .5rem; }
.rolematrix .yes { color: var(--ok); font-weight: 700; }
.rolematrix .no { color: var(--faint); }
.rmx { border: none; background: none; color: var(--fail); cursor: pointer; font-size: .8rem; padding: 0 .2rem; }
.rmx:hover { text-decoration: underline; }

/* ============================================================================
   Mockup design system — shell + structural components (visual refactor).
   Ported from the approved reports-mockup; tokens already match app.css.
   ============================================================================ */

/* Base tables for the new panes. table.grid keeps its own, more specific,
   functional rules for JS-generated data tables, so this can't clobber them. */
.pane-card table, .settbl { width: 100%; border-collapse: collapse; font-size: .82rem; }
.pane-card table th, .pane-card table td, .settbl th, .settbl td { text-align: left; padding: .55rem 1rem; border-bottom: 1px solid var(--line-soft); }
.pane-card table th, .settbl th { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 600; }
.pane-card table tbody tr:hover, .settbl tbody tr:hover { background: var(--line-soft); }

/* Status tags (mockup) — alongside the existing .pill. */
.tag { display: inline-flex; padding: .12rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 650; }
.tag.ok { background: var(--ok-tint); color: var(--ok); }
.tag.warn { background: var(--warn-tint); color: var(--warn); }
.tag.fail { background: var(--fail-tint); color: var(--fail); }
.tag.mut { background: var(--line-soft); color: var(--muted); }

/* Forms (mockup) */
.field-m { margin: .9rem 0; }
.field-m label { display: block; font-size: .74rem; color: var(--muted); margin-bottom: .3rem; font-weight: 600; }
.selish { width: 100%; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; font-size: .82rem; }
.note { display: flex; align-items: center; gap: .55rem; padding: .55rem .8rem; border-radius: 10px; font-size: .78rem; background: var(--brand-tint); color: var(--ink); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); margin-bottom: .9rem; }
.switch { width: 40px; height: 23px; border-radius: 999px; background: var(--line); border: 0; position: relative; cursor: pointer; flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.switch[aria-checked="true"] { background: var(--brand); } .switch[aria-checked="true"]::after { transform: translateX(17px); }

/* Settings master-detail (mockup) */
.setwrap { display: grid; grid-template-columns: 236px 1fr; gap: 1rem; align-items: start; }
.setnav { display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 8px; height: max-content; position: sticky; top: 70px; }
.setnav button { display: flex; align-items: center; gap: .6rem; text-align: left; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 550; padding: .55rem .7rem; border-radius: 8px; cursor: pointer; }
.setnav button svg { color: var(--faint); flex: none; width: 17px; height: 17px; }
.setnav button:hover { background: var(--line-soft); }
.setnav button[aria-pressed="true"] { background: var(--brand-tint); color: var(--brand); }
.setnav button[aria-pressed="true"] svg { color: var(--brand); }
.setpane { display: none; } .setpane.on { display: block; }
.pane-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 1.1rem 1.25rem; margin-bottom: .9rem; }
.pane-h { display: flex; align-items: center; gap: .75rem; margin-bottom: .2rem; } .pane-h h2 { font-size: 1.05rem; letter-spacing: -.01em; margin: 0; } .pane-h .spacer { flex: 1; }
/* Toolbar buttons align by flex-center, not inline baseline (an icon button next
   to text-only buttons would otherwise sit a hair high). */
#rolesToolbar { display: inline-flex; align-items: center; gap: .4rem; }
.pane-sub { color: var(--muted); font-size: .78rem; margin-bottom: 1rem; }
.lockbar { display: flex; align-items: center; gap: .55rem; padding: .55rem .75rem; border-radius: 9px; font-size: .78rem; background: var(--ok-tint); color: var(--ink); border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); margin-bottom: 1rem; }
.lockbar svg { color: var(--ok); }

/* NOTE: the manager live-session card + roster and the candidate flow were
   ALREADY built on this design system (.live/.arow/.assess/.sig/.specgroup/.kv/
   .heartbeat/.steptracker, .ccard/.warn-callout, etc.), so no mockup-duplicate
   classes are (re)defined here — doing so previously overrode the working live
   card. Those existing rules above are the source of truth. */

/* Manager rail cards (mockup). Kept minimal + collision-free (the live card
   keeps its existing .live/.arow/.assess/.sig styling). */
/* The rail is an outer card that nests the three inner cards (Add / Candidates /
   Glossary), matching the mockup — a lighter panel framing them against the bg. */
.rail-col { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 4.4rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 1rem; }
@media (max-width: 940px) { .rail-col { position: static; } }
.railcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 1rem 1.1rem; }
.railcard > h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 .7rem; font-weight: 700; }
.railcard .field-m { margin: 0 0 .7rem; }

/* Manager-access rows (mockup): label + sub left, toggle right. */
.accrow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line-soft); }
.accrow:last-of-type { border-bottom: 0; }
.accrow .al { font-size: .84rem; font-weight: 600; }
.accrow .al small { display: block; font-weight: 400; color: var(--muted); font-size: .74rem; margin-top: .15rem; }

/* Spec-thresholds editor (mockup two-column layout) */
.globalsev { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .82rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); margin-bottom: .9rem; }
.thgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1.6rem; }
.thgroup h4 { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 700; margin: .5rem 0; border-bottom: 1px solid var(--line-soft); padding-bottom: .35rem; }
.thgroup.full { grid-column: 1 / -1; }
.siggrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.6rem; }
.frow { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .4rem 0; }
.frow .fl { font-size: .82rem; color: var(--ink); } .frow .fl small { display: block; font-size: .68rem; color: var(--faint); }
.frc { display: flex; align-items: center; gap: .5rem; }
.inp { width: 5.2rem; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--ink); font: inherit; font-size: .82rem; text-align: right; }
.sev { padding: .35rem .45rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; font-size: .76rem; cursor: pointer; }
.sev.sev-fail { color: var(--fail); border-color: color-mix(in srgb, var(--fail) 40%, var(--line)); }
.sev.sev-review { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.sev.sev-ignore { color: var(--faint); }
.rowacts { display: flex; gap: .5rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
@media (max-width: 760px) { .thgrid, .siggrid { grid-template-columns: 1fr; } }

/* Roles permission matrix (mockup .mtx) */
.mtx { width: 100%; border-collapse: collapse; font-size: .82rem; }
.mtx th, .mtx td { text-align: center; padding: .5rem .6rem; border-bottom: 1px solid var(--line-soft); }
.mtx th:first-child, .mtx td:first-child { text-align: left; }
.mtx thead th { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 600; }
.mtx td.grp { text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 700; background: var(--line-soft); }
.mtx .y { color: var(--brand); font-weight: 800; }
.mtx .n { color: var(--faint); }
.mtx input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.mtx input[type=checkbox]:disabled { cursor: not-allowed; opacity: .55; }
.mtx.editing tbody tr:hover { background: var(--brand-tint); }
.mtx tr.landingrow td { background: color-mix(in srgb, var(--brand) 6%, transparent); vertical-align: middle; }
.mtx tr.landingrow td:first-child { font-weight: 600; color: var(--ink); }
.mtx tr.landingrow select { padding: .3rem .4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; font-size: .74rem; }
.mtx tr.subp td:first-child { padding-left: 30px; position: relative; color: var(--muted); }
.mtx tr.subp td:first-child::before { content: "\21B3"; position: absolute; left: 13px; color: var(--faint); }
.mtx .rmx { color: var(--fail); }
/* Diagnostics status list (mockup) */
.statusrow { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--line-soft); font-size: .85rem; }
.statusrow:last-child { border-bottom: 0; }
.statusrow .k { color: var(--muted); flex: 1; }
.ind { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.ind.ok { color: var(--ok); } .ind.warn { color: var(--warn); } .ind.fail { color: var(--fail); } .ind.mut { color: var(--faint); }
.ind .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Data-retention rows (mockup): label + amount + unit + "or Keep forever". */
.retrow { display: flex; align-items: center; gap: .55rem; padding: .7rem 0; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.retrow:last-child { border-bottom: 0; }
.retrow .rl { width: 170px; font-size: .85rem; font-weight: 600; }
.retrow .inp { width: 4.5rem; }
/* Compact select used in rowacts/retention (mockup .selmini). */
.selmini { padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--ink); font: inherit; font-size: .82rem; }

/* Master-detail: each existing .panel becomes a pane shown one at a time. */
.setpanes > .panel { display: none; margin: 0 0 .9rem; }
.setpanes > .panel.pane-on { display: block; }
@media (max-width: 900px) { .setwrap { grid-template-columns: 1fr; } .setnav { position: static; flex-direction: row; flex-wrap: wrap; } }