/* ============================================================================
   people.css — the SCEND QMS layer on top of the shared kit
   ============================================================================
   LOAD ORDER MATTERS: scend-client.css FIRST, then this file. Every page links
   both, in that order.

   WHY THIS FILE CHANGED SHAPE (2026-09-03)
   Kyle: "James portal really ugly compared to the rest of the SCEND products -
   can we add the CS UI ruling". He is right: this portal was the only one still
   on its own look — indigo #4f46e5, flat cards, no dark mode — while the client,
   CS, finance and ops portals all render the approved kit (teal #00B5B6, zinc
   neutrals, 16px cards, real dark mode, motion tokens). Four products and one
   odd one out reads as the odd one being unfinished.

   So this file stopped being a design system and became a THIN LAYER: the kit
   owns the shell, cards, buttons, KPIs, pills and skeletons; this file owns only
   what is specific to a quality-management portal — the compliance status cells,
   the wide sticky-header matrices, the filter chips, the form inputs and the
   sign-in panel.

   TWO TRAPS, both learned the hard way elsewhere in this codebase:

   1. TOKEN COVERAGE, not class coverage. An unresolved var() invalidates the
      WHOLE declaration — `background:var(--brand-soft)` does not fall back to a
      default, the background simply disappears while the text stays. That is
      silent and partial, and it is what "looks all over the place" actually is.
      This portal referenced 7 tokens the kit does not define (--brand,
      --brand-soft, --brand-ink, --ok, --ok-soft, --watch, --watch-soft) across
      109 places. They are ALIASED below rather than found and rewritten,
      because 109 hand edits is 109 chances to miss one.

   2. The kit HIDES .rail below 860px and expects .mobile-tabs markup instead.
      people-shell.js now emits that markup, so the nav survives on a phone. If
      you ever render a page without the shell, the rail is gone on mobile and
      that is the reason.

   Do NOT edit scend-client.css. It is a fork of the client portal's kit; changes
   go upstream and get re-forked, or every portal drifts.
   ============================================================================ */

:root{
  /* ── aliases: this portal's vocabulary → the kit's ──────────────────────
     Aliases, never literals, so all of them inherit the kit's dark mode for
     free. --brand was indigo; it is now the SCEND teal accent, which is the
     whole point of the change. */
  --brand:var(--accent);
  --brand-soft:var(--accent-soft);
  --brand-ink:var(--accent-ink);
  --ok:var(--good);
  --ok-soft:var(--good-soft);

  /* The kit has no fourth semantic colour. QMS needs one: "watch" is the state
     between fine and due — a training record inside its notice period, a check
     that is coming but not late. Amber is already spoken for by "due soon", so
     these stay literal, and carry their own dark values below. Tuned to sit
     with teal rather than against it. */
  --watch:#0E7490;
  --watch-soft:#E0F2F7;
}
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --watch:#4CC5DE; --watch-soft:#0C2E36;
}}
:root[data-theme="dark"]{ --watch:#4CC5DE; --watch-soft:#0C2E36; }
:root[data-theme="light"]{ --watch:#0E7490; --watch-soft:#E0F2F7; }

/* ── base ────────────────────────────────────────────────────────────────────
   The kit leaves font-size to the browser (16px). Every page in this portal was
   laid out against a 14px base — table density, chip padding, the lot — so the
   base is pinned here rather than in 23 pages. Headings get their margins zeroed
   because the pages assume it; NOT a universal `*{margin:0}`, which would fight
   the kit's own spacing rules. */
body{font-size:14px}
h1,h2,h3,h4,p,figure,fieldset{margin:0}
button,input,select,textarea{font-family:inherit;font-size:inherit}
a{color:var(--accent-ink)}

/* ── rail: what the kit does not cover ───────────────────────────────────────
   The shell now emits the kit's .brand/.navlbl/.rail-foot, so the only thing
   left here is the three legacy `.lbl` uses inside the rail. */
.rail .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--rail-lbl);padding:16px 8px 6px;font-weight:700}

/* ── page header ─────────────────────────────────────────────────────────────
   `.top` is this portal's name for the kit's .topbar. Kept as an alias so a
   page that builds its own header still lines up with the shell's. */
.top{display:flex;align-items:center;gap:16px;padding:16px 32px;
  border-bottom:1px solid var(--line);background:var(--canvas);
  position:sticky;top:0;z-index:5}
.top h1{font-size:16px;font-weight:650;letter-spacing:-.2px}
.top .sp,.card-h .sp{flex:1}

/* ── KPI tiles: the kit's tile, this portal's inner class names ──────────────
   The kit uses .lbl/.val/.meta inside .kpi; 125 places here use .k/.v/.s. Same
   type scale, different names — matched rather than renamed. */
.kpi .k{font-size:12px;color:var(--muted);font-weight:600;
  text-transform:uppercase;letter-spacing:.5px}
.kpi .v{font-size:31px;font-weight:750;letter-spacing:-1px;line-height:1;
  margin-top:9px;font-variant-numeric:tabular-nums}
.kpi .s{font-size:12px;color:var(--muted);margin-top:8px}
.kpi.bad .v{color:var(--crit)} .kpi.warn .v{color:var(--warn)} .kpi.good .v{color:var(--good)}
.kpis{grid-template-columns:repeat(auto-fit,minmax(172px,1fr))}

/* ── cards ───────────────────────────────────────────────────────────────────
   The kit's card header has no rule under it and titles at h3. This portal puts
   154 headers over tables, where a divider is doing real work — it separates
   the header from a sticky <th> row that would otherwise touch it. */
.card{margin-bottom:18px}
.card-h{padding:15px 20px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px}
.card-h h2{font-size:14px;font-weight:650;letter-spacing:-.1px}
.card-h .sub{font-size:12.5px;color:var(--muted);margin:0}
/* .sub is used 118 times, mostly as a caption directly under a heading. The
   kit's 24px bottom margin is right for a page subtitle and wrong for those. */
.sub{margin:0}
.content .sub:first-child{margin-bottom:20px}
.card .skel{margin:10px 20px}

/* ── tables: wide compliance matrices ───────────────────────────────────────
   Sticky header AND sticky first column: the training matrix is ~40 columns
   wide, and without the frozen name column a scrolled row is anonymous. */
.scroll{overflow:auto;max-height:74vh}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
th{position:sticky;top:0;background:var(--canvas);text-align:left;font-weight:650;
  color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:2}
td{padding:10px 12px;border-bottom:1px solid var(--line-2);white-space:nowrap}
tr:hover td{background:var(--line-2)}
th.person,td.person{position:sticky;left:0;background:var(--canvas);z-index:1;
  font-weight:600;border-right:1px solid var(--line)}
th.person{z-index:3}
tr:hover td.person{background:var(--line-2)}
td.c{text-align:center}
.tnum,td.num{font-variant-numeric:tabular-nums}

/* ── compliance status cells ─────────────────────────────────────────────────
   215 of these. The one thing a QMS page must never do is make "fine" and
   "nobody has looked" render alike, so every state gets its own pair. */
.st{display:inline-block;min-width:74px;text-align:center;border-radius:7px;
  padding:3px 9px;font-size:11.5px;font-weight:650;letter-spacing:-.1px}
.st.ok{background:var(--good-soft);color:var(--good)}
.st.missing{background:var(--crit-soft);color:var(--crit)}
.st.expired{background:var(--crit-soft);color:var(--crit)}
.st.due_soon{background:var(--warn-soft);color:var(--warn)}
.st.watch{background:var(--watch-soft);color:var(--watch)}
.st.assigned,.st.in_progress{background:var(--line-2);color:var(--muted)}
.st.waived{background:var(--line-2);color:var(--faint)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:6px;vertical-align:-1px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);
  padding:12px 20px;border-top:1px solid var(--line-2)}

/* A bare .pill is a badge in this portal (the role chip in the topbar), but the
   kit's .pill draws a leading dot and expects a state class. Without this, a
   bare pill renders as a dot on nothing. */
.pill{background:var(--accent-soft);color:var(--accent-ink)}
/* The shell always emits #p-pill; most pages never fill it. An empty pill still
   painted its background, so every one of those pages carried a small teal blob
   in the top bar that looked like a rendering fault. */
.pill:empty{display:none}
.pill:not(.good):not(.warn):not(.crit):not(.mut)::before{display:none}

/* ── filter chips ───────────────────────────────────────────────────────────*/
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--canvas);color:var(--muted);
  border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;
  cursor:pointer;transition:border-color var(--t-fast) var(--ease),
  color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.chip:hover{border-color:var(--accent);color:var(--accent-ink)}
.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}

/* ── buttons ────────────────────────────────────────────────────────────────
   The kit's .btn is unstyled until you add .primary/.ghost/.subtle. This portal
   has 23 bare `.btn` and 43 `.btn.p`, so bare maps to the kit's ghost and .p to
   its primary. Renaming 66 call sites would have been the same result with more
   ways to get it wrong. */
.btn{background:transparent;color:var(--ink);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:8px 14px}
.btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn.p{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.p:hover{filter:brightness(1.06);color:#fff}
.btn.sm{padding:5px 11px;font-size:12px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ── form controls ──────────────────────────────────────────────────────────*/
.in{border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;
  outline:none;width:100%;background:var(--canvas);color:var(--ink);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.in:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.in:disabled{background:var(--line-2);color:var(--muted)}
select.in{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.opt{font-weight:400;color:var(--muted)}

/* ── inline messages ────────────────────────────────────────────────────────*/
.empty,.error{padding:38px 20px;text-align:center;color:var(--muted);font-size:13px}
.error{color:var(--crit)}
.err{color:var(--crit);font-size:13px;min-height:18px;margin-top:8px}
.note{background:var(--warn-soft);color:var(--warn);border-radius:var(--r-sm);
  padding:11px 14px;font-size:12.5px;margin:0 20px 16px}

/* ── sign-in ────────────────────────────────────────────────────────────────*/
.center{min-height:100vh;display:grid;place-items:center;padding:22px;background:var(--bg)}
.panel{background:var(--canvas);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--card-shadow);padding:34px;
  width:100%;max-width:400px}
.panel h1{font-size:21px;font-weight:700;letter-spacing:-.4px;margin-bottom:5px}
.panel .s{color:var(--muted);font-size:13.5px;margin-bottom:20px}
.panel .in{margin-bottom:11px}
.go{width:100%;background:var(--accent);color:#fff;border:none;
  border-radius:var(--r-sm);padding:12px;font-weight:650;cursor:pointer;
  font-family:inherit;font-size:14px;transition:filter var(--t-fast) var(--ease)}
.go:hover{filter:brightness(1.06)}

/* Kit tab bar, one QMS addition: five equal columns means a label gets ~20%
   of the width, so it must be allowed to ellipsize rather than wrap into the
   icon. The short labels come from the nav's `m` field. */
.mobile-tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── mobile ─────────────────────────────────────────────────────────────────
   The kit handles the rail and the tab bar. Only the table shell needs saying:
   a 40-column matrix inside a max-height box is unusable on a phone unless it
   may scroll the whole viewport height. */
@media(max-width:860px){
  .top{padding:13px 18px}
  .scroll{max-height:none}
  .card-h{padding:14px 16px}
  .note{margin:0 16px 14px}
  .card .skel{margin:10px 16px}
}

/* ── the rail must be able to scroll ────────────────────────────────────────
   Reported by James on 08/09/2026: "the black panel down the side for each
   section is not scrolling the full way down - I can see and know there's more
   tabs but can't get to them."

   scend-client.css sets `.rail{...position:sticky;top:0;height:100vh}` with no
   overflow rule, so anything past the fold is simply unreachable. That was
   fine when the kit was written; the People portal now has 26 nav items in 5
   groups, and the Safety register split added five of them on its own.

   Measured against the real stylesheet at a 1440x900 viewport: the rail wants
   1416px and gets 900, so 516px - about thirteen items, plus the account
   button at the bottom - could not be reached by any means.

   FIXED HERE, NOT IN THE KIT. scend-client.css is the shared SCEND kit that
   the client and CS portals also use; editing our copy would diverge it and
   the next sync would silently undo this. people.css loads after it, so this
   override wins and survives. The kit still has the bug for every other
   portal that uses it, which is Kyle's to fix at source - raised separately.

   overscroll-behavior stops a flick at the end of the nav from carrying on
   into the page behind it. */
.rail{overflow-y:auto;overscroll-behavior:contain;
      scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.rail::-webkit-scrollbar{width:8px}
.rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:4px}
.rail::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3)}
.rail::-webkit-scrollbar-track{background:transparent}