/* ==========================================================================
   VMS Intranet v2 — Application stylesheet
   Built on tokens.css (the design-system source of truth). VMS-branded per
   the vms-style-guide skill. Every class the Jinja templates use is defined
   here; new classes are additive (nothing renamed) so templates/tests keep
   working. Responsive to mobile; print-sane for registers.
   ========================================================================== */

@import url("/static/css/tokens.css");

/* ---------- Reset / base ------------------------------------------------ */
* { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Keyboard focus — visible ring on every interactive element (WCAG 2.4.x) */
:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip link (added in base.html) */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -3rem;
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--vms-blue);
  color: var(--color-text-invert);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 0.12s ease;
}
.skip-link:focus { top: var(--space-2); }

/* ---------- Headings & text -------------------------------------------- */
h1, h2, h3, h4 {
  color: var(--color-text-strong);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); margin-top: var(--space-6); }
h3 { font-size: var(--fs-h3); margin-top: var(--space-5); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--space-4); }

a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); text-decoration: underline; }

small { font-size: var(--fs-small); }

.muted { color: var(--color-text-muted); }

hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-4) 0;
}

/* ---------- App shell: header ------------------------------------------ */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-h);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-strong);
  box-shadow: var(--shadow-1);
}

.topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
  text-decoration: none;
  white-space: nowrap;
}
.topbar .brand:hover { text-decoration: none; }

.brand-logo {
  display: block;
  height: 32px;
  width: auto;
}

.brand-name { font-size: 1.0625rem; letter-spacing: -0.01em; }

.topbar .v2 {
  font-weight: var(--fw-regular);
  color: var(--vms-blue);
}

.topbar nav {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.topbar nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--fw-regular);
}
.topbar nav a:hover {
  background: var(--surface-sunken);
  color: var(--vms-blue);
  text-decoration: none;
}

.topbar .spacer { flex: 1 1 auto; }

.topbar .who {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar a[href="/logout"] {
  color: var(--color-link);
  font-size: var(--fs-small);
  white-space: nowrap;
}

/* ---------- App shell: main & footer ----------------------------------- */
main {
  max-width: var(--content-max);
  margin: var(--space-5) auto;
  padding: 0 var(--space-4);
}

footer {
  max-width: var(--content-max);
  margin: var(--space-6) auto var(--space-5);
  padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  color: var(--color-text-muted);
}
footer small { color: var(--color-text-muted); }

/* ---------- Cards ------------------------------------------------------- */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}

.card.narrow {
  max-width: 24rem;
  margin: var(--space-8) auto;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

/* Card that is a link (home + stat cards) */
a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover {
  border-color: var(--vms-blue);
  box-shadow: var(--shadow-2);
  text-decoration: none;
}

/* Stat card */
.card.stat { text-align: center; padding: var(--space-5) var(--space-4); }
.stat-num {
  font-size: 2rem;
  font-weight: var(--fw-bold);
  line-height: 1.1;
  color: var(--vms-blue);
}
.stat-label {
  margin-top: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

/* ---------- Tables (guide: neutral header, no vertical borders, 14px) --- */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;             /* clip rows to the rounded corners */
  font-size: var(--fs-table);
  margin-bottom: var(--space-4);
}

thead th {
  background: var(--grey-light);            /* Light Grey — primary header row */
  color: var(--color-text-strong);
  font-weight: var(--fw-bold);
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

tbody td {
  text-align: left;
  padding: var(--space-2) var(--space-3);   /* 8×12px — compact but readable */
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
  word-break: break-word;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--row-hover); }

/* generic th/td fallbacks so any non-thead/tbody table still reads well */
th, td { text-align: left; padding: var(--space-2) var(--space-3); }

td a { color: var(--color-link); text-decoration: none; }
td a:hover { text-decoration: underline; }

/* ---------- Page head / week navigation --------------------------------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.week-nav { display: flex; align-items: center; gap: var(--space-2); }
.week-label { font-weight: var(--fw-bold); color: var(--color-text-strong); white-space: nowrap; }
.board-person h2 { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-top: 0; }
.board-person h2 .muted { font-size: var(--fs-small); font-weight: var(--fw-regular); }

/* ---------- Tags / status chips ---------------------------------------- */
.tag {
  display: inline-block;
  padding: 0.1rem var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--grey-light);
  color: var(--color-text-strong);
  font-size: var(--fs-small);
  line-height: 1.5;
  white-space: nowrap;
}
/* Warning chip (e.g. "bad payer") — functional amber, not a brand colour */
.tag.warn {
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
  border: 1px solid var(--status-warn-border);
}

/* ---------- Key–value lists -------------------------------------------- */
dl.kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
dl.kv dt { font-weight: var(--fw-bold); color: var(--color-text-muted); }
dl.kv dd { margin: 0; color: var(--color-text); }

/* ---------- Forms ------------------------------------------------------- */
form label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--fw-regular);
}

input, select, textarea {
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  min-height: var(--control-min-h);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  width: 100%;
}
input::placeholder { color: var(--color-text-muted); }
/* Checkboxes/radios must not inherit the text-field box model (100% width +
   44px min-height turns them into giant squares in table rows). */
input[type="checkbox"], input[type="radio"] {
  width: 1.05rem; height: 1.05rem;
  min-height: 0;
  padding: 0;
  accent-color: var(--vms-blue);
  vertical-align: middle;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--vms-blue);
  box-shadow: var(--focus-ring);
}

/* Search bar */
.search {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  max-width: 36rem;
}
.search input { flex: 1; }

/* Inline add-row form (people) */
.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.inline-form input { width: auto; flex: 1 1 10rem; }

/* ---------- Buttons ----------------------------------------------------- */
button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-min-h);
  /* A label must never break mid-word, and a button must never be squeezed to
     nothing by a cramped flex row: in the admin lookups inline editor the Save
     button collapsed to ~0 width and rendered as a vertical letter stack. */
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0 var(--space-4);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  /* Primary (default): VMS Blue bg, white text */
  background: var(--vms-blue);
  border: 1px solid var(--vms-blue);
  color: var(--color-text-invert);
}
button:hover, .button:hover,
.button.primary:hover {
  background: var(--vms-blue-hover);
  border-color: var(--vms-blue-hover);
  color: var(--color-text-invert);
  text-decoration: none;
}
button:active, .button:active { transform: translateY(1px); }

.button.primary { /* explicit alias of default */
  background: var(--vms-blue);
  border-color: var(--vms-blue);
  color: var(--color-text-invert);
}

/* Secondary: transparent bg, VMS Blue border+text, Light Grey hover */
.button.secondary {
  background: transparent;
  border: 1px solid var(--vms-blue);
  color: var(--vms-blue);
}
.button.secondary:hover {
  background: var(--grey-light);
  border-color: var(--vms-blue-hover);
  color: var(--vms-blue-hover);
}

/* Destructive: outlined, not filled — it should read as serious without
   competing with the primary action for attention. */
.button.danger {
  background: transparent;
  border: 1px solid var(--status-error-border);
  color: var(--status-error-fg);
}
.button.danger:hover {
  background: var(--status-error-bg);
  border-color: var(--status-error-fg);
  color: var(--status-error-fg);
}

/* ---------- Banners / errors ------------------------------------------- */
.error {
  background: var(--status-error-bg);
  border: 1px solid var(--status-error-border);
  color: var(--status-error-fg);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
}

/* ---------- Login page -------------------------------------------------- */
.login-brand {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-5);
}
.login-brand img { height: 64px; width: auto; }

/* ==========================================================================
   Responsive — field staff on phones
   ========================================================================== */
@media (max-width: 640px) {
  main { margin: var(--space-4) auto; padding: 0 var(--space-3); }

  .topbar {
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) var(--space-3);
  }
  .topbar .spacer { flex-basis: 100%; height: 0; }
  .topbar nav { order: 3; flex-basis: 100%; }
  .topbar nav a { flex: 1 1 auto; justify-content: center; }
  .topbar .who { max-width: 9rem; }

  h1 { font-size: 1.625rem; }
  h2 { font-size: 1.3125rem; }

  /* Registers: let wide tables scroll horizontally rather than overflow the
     viewport. display:block keeps the internal table layout via the anonymous
     table box while turning the element into a scroll container. */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cards { grid-template-columns: 1fr 1fr; }
  .search { flex-wrap: wrap; }
  .search input { flex-basis: 100%; }
}

@media (max-width: 380px) {
  .cards { grid-template-columns: 1fr; }
}

/* Respect reduced-motion preference (house rule) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Print — registers are printed; keep them clean and ink-light
   ========================================================================== */
@media print {
  body { background: #fff; color: #000; }
  .topbar, footer, .search, .inline-form, .skip-link { display: none !important; }
  main { max-width: none; margin: 0; padding: 0; }
  a { color: #000; text-decoration: none; }

  .card { border: 1px solid var(--grey-smoke); box-shadow: none; break-inside: avoid; }
  .cards { display: grid; }

  table { border: 1px solid var(--grey-smoke); box-shadow: none; font-size: 11pt; }
  thead th { background: var(--grey-light) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  tbody tr:hover td { background: transparent; }
  tr, td, th { break-inside: avoid; }
  thead { display: table-header-group; }   /* repeat header on each page */

  .tag { border: 1px solid var(--grey-smoke); background: transparent !important; color: #000; }
  .tag.warn { border-color: var(--status-warn-fg); color: var(--status-warn-fg); }
}

/* ==========================================================================
   Billing workbench + invoices (server-rendered screens; tokens only)
   ========================================================================== */

/* PRG success/error notices */
.banner {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.banner.ok   { background: var(--status-success-bg); color: var(--status-success-fg); border-color: var(--status-success-border); }
.banner.err  { background: var(--status-error-bg);   color: var(--status-error-fg);   border-color: var(--status-error-border); }
.banner.warn { background: var(--status-warn-bg);    color: var(--status-warn-fg);    border-color: var(--status-warn-border); }
.banner.info { background: var(--status-info-bg);    color: var(--status-info-fg);    border-color: var(--status-info-border); }

/* Xero-Me soft-start banner (22 Jul): a strong, unmissable "use Xero Me" callout
   on modules whose writes are blocked during the rollout. Warn (amber) palette +
   a thick accent bar so it reads louder than an ordinary .banner. The .is-mirror
   variant (payroll read-only note) drops to the calmer info palette. */
.softstart-banner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4);
  margin: 0 0 var(--space-5);
  background: var(--status-warn-bg); color: var(--status-warn-fg);
  border: 1px solid var(--status-warn-border); border-left: 6px solid var(--status-warn-fg);
  border-radius: var(--radius-md);
}
.softstart-banner.is-mirror {
  background: var(--status-info-bg); color: var(--status-info-fg);
  border-color: var(--status-info-border); border-left-color: var(--status-info-fg);
}
.softstart-banner .softstart-body { flex: 1 1 22rem; }
.softstart-banner .softstart-head { font-weight: var(--fw-bold); margin: 0 0 var(--space-1); }
.softstart-banner p:last-child { margin: 0; }
.softstart-banner .button { flex: 0 0 auto; }

/* Status-tag variants (tags section defines .tag/.tag.warn). One product-wide
   mapping (design-billing-workbench §2.3): draft=neutral, ready/sent=info,
   submitted=warn, approved=ok, rejected/cancelled=err. */
.tag.ok   { background: var(--status-success-bg); color: var(--status-success-fg); border: 1px solid var(--status-success-border); }
.tag.info { background: var(--status-info-bg);    color: var(--status-info-fg);    border: 1px solid var(--status-info-border); }
.tag.err  { background: var(--status-error-bg);   color: var(--status-error-fg);   border: 1px solid var(--status-error-border); }
/* Status tags carry sentence case regardless of the raw enum value; kind/type
   tags (multi-word) stay unstyled — word-by-word caps would be wrong there. */
.tag.status { text-transform: capitalize; }

/* Invoice note lines + Xero CSV export (delta 2026-08-05a) — layout/colour from
   existing tokens only. A note line reads as a quiet aside; the export's
   blocker/warning lists carry the status colour they already use elsewhere. */
tr.note td { color: var(--color-text-muted); font-style: italic; }
/* Composed multi-line scopes (EVM billing, 05b) stack their lines on the detail page. */
td.pre-line { white-space: pre-line; }
.inline-checks { display: inline-flex; gap: var(--space-3); align-items: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2); margin: 0; }
.inline-checks legend { font-size: var(--fs-small); color: var(--color-text-muted); padding: 0 var(--space-1); }
.issue-list { margin: 0; padding-left: var(--space-4); }
.issue-list li { margin: var(--space-1) 0; }
.issue-blocker { color: var(--status-error-fg); }
.issue-warn { color: var(--status-warn-fg); }

/* Person history panel (design-person-history.md) — layout only, no new colours.
   Mirrors the existing heading-reset precedent; state is carried by text + .tag,
   never colour alone. */
.history-section + .history-section { margin-top: var(--space-5); }
.history-section > h3 { margin: 0 0 var(--space-2); font-size: var(--fs-h4); }
.history-empty { margin: 0; }
.period { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Move-vs-correction reveal on the person form (design-person-history.md §5) —
   a quiet inset that appears only when the company/relationship changes. */
.move-choice { margin-top: var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-2); }
.move-choice-q { margin: 0; font-weight: var(--fw-bold); }
.move-choice .muted { margin: 0; }

/* Money/number columns + truncated free-text cells */
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scope-cell { max-width: 26rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Collapsed reveal forms (+ Manual draft item / + Record assessment).
   NB: NOT ".inline-form" — that's the people-page flex row above, and reusing
   it turned these details blocks into flex containers with 10rem-tall inputs. */
.form-reveal { margin-bottom: var(--space-4); }
.form-reveal summary { list-style: none; display: inline-block; cursor: pointer; }
.form-reveal summary::-webkit-details-marker { display: none; }
.form-reveal[open] {
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}

/* Reveal-form layout (design-billing-workbench §2.1): rows of sized fields +
   a separated action row. Field width is a modifier class, never inline style. */
.reveal-form        { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.form-row           { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.form-row .fld      { margin: 0; }
.fld                { display: flex; flex-direction: column; gap: var(--space-1);
                      font-size: var(--fs-small); color: var(--color-text-muted); }
.fld > input, .fld > select { width: 100%; }
/* Checkboxes/radios keep their intrinsic size — they must not inherit the
   100%-width text-field rule above (it balloons the box and shoves the label). */
.fld > input[type="checkbox"], .fld > input[type="radio"] { width: auto; flex: 0 0 auto; }
.fld-xs   { flex: 0 0 6rem;  max-width: 6rem;  }        /* item #, %, markup */
.fld-sm   { flex: 0 0 10rem; max-width: 10rem; }        /* project no., date, month, amount */
.fld-md   { flex: 0 0 14rem; max-width: 14rem; }        /* selects */
.fld-grow { flex: 1 1 16rem; }                          /* notes */
.fld-full { flex: 1 1 100%; }                           /* scope / long free text */
.fld.checkline { flex-direction: row; align-items: center; gap: var(--space-2); color: var(--color-text); }
.form-actions { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-1); }

/* Link-style button for low-frequency secondary actions in tables/rows */
.link-btn {
  background: transparent; border: 0; color: var(--vms-blue);
  min-height: var(--control-min-h); padding: 0 var(--space-2);
  font-weight: var(--fw-bold); font-size: var(--fs-small); cursor: pointer;
}
.link-btn:hover { text-decoration: underline; background: transparent; color: var(--vms-blue-hover); }
/* Compact primary — still ≥40px tall, just less horizontal shout */
.button.sm, button.sm { padding: 0 var(--space-3); font-size: var(--fs-small); }

/* Billing-run toolbar: one sticky billing-period control for the whole run */
.bill-toolbar {
  position: sticky; top: var(--header-h); z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-4);
  background: var(--surface-card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
}
.bill-period-global { flex-direction: row; align-items: center; gap: var(--space-2); }
.bill-period-global input { flex: 0 0 10rem; width: auto; }

/* Unbilled-time group blocks: whitespace-separated, ref-first header */
.client-block { margin-bottom: var(--space-4); }
.time-group { margin-bottom: var(--space-5); }
.time-group > summary.group-head { cursor: pointer; list-style: none; padding: var(--space-2) 0; }
.time-group > summary.group-head::-webkit-details-marker { display: none; }
.group-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-2);
}
.group-ref {
  font-weight: var(--fw-bold); color: var(--color-text-strong);
  font-variant-numeric: tabular-nums; margin-right: var(--space-2);
}
.group-title { color: var(--color-text); }
.group-sub   { font-size: var(--fs-small); margin-top: 2px; }
.group-metrics {
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  white-space: nowrap;
}
.group-figure { font-size: var(--fs-small); color: var(--color-text-muted); }
.group-figure b { font-size: var(--fs-body); color: var(--color-text); font-variant-numeric: tabular-nums; }

.group-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4);
  margin-top: var(--space-2); flex-wrap: wrap;
}

/* "Ready to invoice" sign-off cell (v1's PM-OK-to-send) — tag + who/when + the
   toggle form on one wrapping row (shared macro billing/_ready_control.html). */
.ready-cell { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ready-cell .ready-form { margin: 0; display: inline; }
.ready-cell .ready-by { font-size: var(--fs-small); }

/* Details: in-flow expanding row (never an absolute popover — the table box
   clips those). Shows the billed-time composition + the Adjust form. */
.adjust-row > td { background: var(--surface-sunken); padding: var(--space-4); }
.adjust-row[hidden] { display: none; }   /* explicit — some UAs show [hidden] table rows */
.adjust-row .detail-heading {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-small); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.adjust-row .detail-heading:not(:first-child) { margin-top: var(--space-4); }
.adjust-row .detail-table { margin: 0 0 var(--space-3); background: var(--surface-card); }
.adjust-row .claim-detail { margin-bottom: var(--space-3); }
.adjust-row .reveal-form { margin-top: 0; }
.delta-note {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-small);
  color: var(--status-warn-fg); background: var(--status-warn-bg);
  border: 1px solid var(--status-warn-border); border-radius: var(--radius-md);
}

/* Progress queue decision cell: Approve on one line; Reject reveals its
   required reason only when chosen. */
.decision-cell { min-width: 15rem; }
.decide-approve { display: flex; align-items: flex-end; gap: var(--space-2); margin-bottom: var(--space-1); }
.decide-approve .fld-sm { flex: 0 0 8.5rem; }
.reject-reveal > summary { list-style: none; display: inline-block; }
.reject-reveal > summary::-webkit-details-marker { display: none; }
.reject-reveal[open] { margin-top: var(--space-2); }

/* Assembly options fieldset */
.invoice-options { border: 1px solid var(--border-strong); border-radius: var(--radius-lg); margin-top: var(--space-4); padding: var(--space-3) var(--space-4); }
.invoice-options legend { font-weight: var(--fw-bold); padding: 0 var(--space-2); }

/* Searchable contract-item picker (combobox over the shared search API) */
.item-picker { position: relative; min-width: 18rem; }
.picker-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  margin-top: 2px;
  max-height: 18rem; overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: var(--space-1);
}
.picker-group {
  padding: var(--space-1) var(--space-2);
  font-size: var(--fs-small); font-weight: var(--fw-bold);
  color: var(--color-text-muted);
}
.picker-group:not(:first-child) { border-top: 1px solid var(--border-subtle); margin-top: var(--space-1); }
/* <button> rows: strip the global button chrome */
.picker-option {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; box-shadow: none;
  min-height: 32px; padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text); font-size: var(--fs-body); font-weight: var(--fw-regular);
  cursor: pointer;
}
.picker-option:hover, .picker-option.active { background: var(--row-hover); color: var(--color-text-strong); }
.picker-empty { padding: var(--space-2) var(--space-3); color: var(--color-text-muted); font-size: var(--fs-small); }

/* ==========================================================================
   Forward workload / capacity board (design-workload-simplify.md)
   Reads like a workload meeting: a calm one-row-per-person capacity table up
   top, then a rundown of what each person is actually doing. Layout-only.
   ========================================================================== */
.cap-totals { display: inline-flex; gap: var(--space-3); flex-wrap: wrap; align-items: baseline;
              font-size: var(--fs-small); color: var(--color-text-muted); }
.cap-totals b { font-size: var(--fs-body); color: var(--color-text); font-variant-numeric: tabular-nums; }
.cap-totals .is-free { color: var(--status-success-fg); }
.cap-totals .is-over { color: var(--status-warn-fg); }
.cap-caveat { font-size: var(--fs-small); color: var(--color-text-muted); margin: 0 0 var(--space-3); }
.week-stepper { display: inline-flex; gap: var(--space-1); align-items: center; }
.to-invoice { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dept-filter { display: inline-flex; gap: var(--space-2); align-items: center; margin: 0; }
.dept-filter-label { display: inline-flex; gap: var(--space-1); align-items: center;
  font-size: var(--fs-small); color: var(--color-text-muted); }
.dept-filter-label select { min-height: auto; padding: 2px var(--space-2); font-size: var(--fs-small); width: auto; }
.dept-filter .manage-depts { font-size: var(--fs-small); }
/* muted department pill shown after a person's name */
.dept-tag { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-pill);
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  color: var(--color-text-muted); font-size: var(--fs-small); font-weight: var(--fw-regular);
  vertical-align: middle; }
/* inline set-department control on a workload person card */
.dept-set { display: inline-block; position: relative; }
.dept-set > summary { list-style: none; cursor: pointer; }
.dept-set > summary::-webkit-details-marker { display: none; }
.dept-tag-set:hover { border-color: var(--vms-blue); color: var(--vms-blue); }
.dept-tag-set .dt-caret { opacity: 0.6; }
.dept-set-form { position: absolute; top: 100%; left: 0; z-index: 20; margin-top: 2px;
  background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: var(--space-2); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.dept-set-form select { min-height: auto; padding: 2px var(--space-2); font-size: var(--fs-small); }

/* ---- Compact capacity table: Person · This week · sparkline · outlook --- */
.cap-matrix-wrap { overflow-x: auto; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); }
.cap-matrix { table-layout: auto; width: 100%; margin: 0; border: 0; box-shadow: none; }
.cap-matrix thead th { text-align: left; background: var(--grey-light); font-size: var(--fs-small);
  color: var(--color-text-muted); font-weight: var(--fw-regular); padding: var(--space-2) var(--space-3); }
.cap-matrix tbody td { padding: var(--space-2) var(--space-3); vertical-align: middle;
  border-top: 1px solid var(--border-subtle); }
.cap-matrix td.cap-person { font-weight: var(--fw-bold); white-space: nowrap; }
.cap-matrix .cap-summary-h, .cap-matrix td.cap-summary { text-align: right; }
.cap-matrix .spark-h { width: 9rem; }

.cap-thisweek { display: inline-flex; align-items: center; gap: var(--space-2); }
.cap-bar { position: relative; display: block; height: 8px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); overflow: visible; width: 4.5rem; flex: 0 0 auto; }
.cap-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; display: flex; width: 100%; border-radius: var(--radius-pill); overflow: hidden; }
.cap-seg-confirmed { background: var(--vms-blue); }
.cap-seg-tentative { background: repeating-linear-gradient(45deg, var(--vms-blue) 0 3px, var(--surface-card) 3px 6px); }
.cap-marker { position: absolute; left: 100%; top: -2px; bottom: -2px; width: 1px; background: var(--color-text-strong); }
.cap-over-wedge { position: absolute; left: 100%; top: 0; bottom: 0; background: var(--status-warn-fg);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.cap-figure { font-size: var(--fs-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cap-figure.is-over  { color: var(--status-warn-fg); font-weight: var(--fw-bold); }
.cap-figure.is-free  { color: var(--status-success-fg); }
.cap-figure.is-full  { color: var(--color-text); }
.is-logged { font-size: var(--fs-small); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* Sparkline: one bar per horizon week (a link to that week), height = planned / capacity. */
.cap-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 20px; }
.spark-bar { display: block; width: 8px; min-height: 4px; background: var(--vms-blue);
  border-radius: 1px 1px 0 0; opacity: 0.85; text-decoration: none; cursor: pointer; }
.spark-bar:hover { opacity: 1; outline: 1px solid var(--vms-blue); outline-offset: 1px; }
.spark-bar.is-empty { background: var(--surface-sunken); opacity: 1; }
.spark-bar.tentative { background: repeating-linear-gradient(45deg, var(--vms-blue) 0 2px, var(--surface-card) 2px 4px); }
.spark-bar.is-now { outline: 1px solid var(--color-text-strong); outline-offset: 1px; }

.cap-summary { white-space: nowrap; }
.free-chip, .over-chip, .noplan-chip { display: inline-flex; align-items: center; padding: 0 var(--space-2);
  border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: var(--fw-bold);
  white-space: nowrap; }
.free-chip   { background: var(--status-success-bg); color: var(--status-success-fg); border: 1px solid var(--status-success-border); }
.over-chip   { background: var(--status-warn-bg); color: var(--status-warn-fg); border: 1px solid var(--status-warn-border); }
.noplan-chip { background: var(--surface-sunken); color: var(--color-text-muted); border: 1px solid var(--border-strong); }

.cap-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--fs-small);
  color: var(--color-text-muted); margin: var(--space-2) 0 var(--space-4); align-items: center; }
.cap-legend .linklike { margin-left: auto; }
.cap-legend a + a { margin-left: 0; }
.lg-swatch { display: inline-block; width: 1.6rem; height: 8px; border-radius: var(--radius-pill); vertical-align: middle; }
.lg-swatch.confirmed { background: var(--vms-blue); }
.lg-swatch.tentative { background: repeating-linear-gradient(45deg, var(--vms-blue) 0 3px, var(--surface-card) 3px 6px); }

/* ---- The rundown: what each person is doing --------------------------- */
.week-detail { margin-top: var(--space-5); }
.week-detail > h2 { font-size: var(--fs-h4); margin: 0 0 var(--space-3); }
.person-block { border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface-card); margin-bottom: var(--space-3); overflow: hidden; }
.person-block-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  flex-wrap: wrap; padding: var(--space-2) var(--space-4); background: var(--grey-light); }
.pb-who { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* Activity lines — the heart of the page: ref · job · task · hours, with the
   scope note always shown beneath so you never have to click to read it. */
.pb-activity { padding: var(--space-1) 0; }
.act-line { display: grid; grid-template-columns: 5rem minmax(8rem, 1fr) minmax(6rem, 14rem) 3.5rem;
  align-items: baseline; gap: var(--space-3); padding: var(--space-1) var(--space-4);
  font-size: var(--fs-small); }
.act-ref { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); color: var(--vms-blue);
  text-decoration: none; white-space: nowrap; }
.act-ref:hover { text-decoration: underline; }
.act-job { color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-what { color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-hrs { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); }
.act-scope { margin: 0 var(--space-4) var(--space-2) 5rem; padding: var(--space-1) var(--space-3);
  border-left: 2px solid var(--border-strong); color: var(--color-text-muted); font-size: var(--fs-small);
  font-style: italic; }

/* Upcoming plan chips (day + anytime), reused from the planner */
.pb-upcoming { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border-subtle); }
.up-label { font-size: var(--fs-small); color: var(--color-text-muted); flex: 0 0 auto; }
.day-block, .alloc-chip { display: inline-flex; align-items: baseline; gap: var(--space-1);
  padding: var(--space-1) 1.4rem var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  border-left: 3px solid var(--vms-blue); background: var(--row-hover); color: var(--color-text);
  position: relative; font-size: var(--fs-small); }
.day-block .db-h, .alloc-chip .ac-h { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.day-block .db-meta, .alloc-chip .ac-meta { font-size: var(--fs-small); color: var(--color-text-muted); }
.day-block.tentative, .alloc-chip.tentative {
  background: repeating-linear-gradient(45deg, var(--status-info-bg) 0 6px, var(--surface-card) 6px 12px);
  border-left: 0; outline: 1px dashed var(--status-info-fg); outline-offset: -1px; }
.db-x { position: absolute; top: 2px; right: 2px; border: 0; background: transparent;
  color: var(--color-text-muted); cursor: pointer; font-size: var(--fs-body); line-height: 1; padding: 0 2px; }
.db-x:hover { color: var(--status-error-fg); }
.plan-editor { margin: 0; }
.plan-editor > summary { font-size: var(--fs-small); }

@media (max-width: 899px) {
  .act-line { grid-template-columns: 4.5rem 1fr 3rem; }
  .act-what { display: none; }
  .act-scope { margin-left: var(--space-4); }
}

/* ==========================================================================
   Departments admin (/departments) — org grouping of staff. Layout-only.
   ========================================================================== */
.dept-assign-bar { border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface-card); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.dept-assign-bar .assign-hint { margin: var(--space-2) 0 0; }
.unassigned-name { white-space: nowrap; }
/* Confirmation of the last assign, beside the button it came from. */
.assign-status { align-self: flex-end; padding-bottom: var(--space-2); }

.dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--space-4); }
.dept-card { border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface-card); overflow: hidden; display: flex; flex-direction: column; }
.dept-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); background: var(--grey-light); }
.dept-card-head h2 { margin: 0; font-size: var(--fs-h4); }

.dept-managers { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.dept-label { font-size: var(--fs-small); color: var(--color-text-muted); flex: 0 0 auto; }
.mgr-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2);
  border-radius: var(--radius-pill); background: var(--status-info-bg); color: var(--status-info-fg);
  border: 1px solid var(--status-info-border); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.mgr-add { margin: 0; }
.mgr-add select { min-height: auto; padding: 2px var(--space-2); font-size: var(--fs-small); width: auto; }

.dept-members { list-style: none; margin: 0; padding: var(--space-2) var(--space-4); display: flex;
  flex-direction: column; gap: 2px; }
.dept-members li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: 2px 0; }
/* Name takes the slack so the tag sits with the × rather than being flung to
   the far edge by space-between. */
.dept-members li > span:first-child { margin-right: auto; }
/* Someone whose HOME department is elsewhere (Ryan, 17 Jul) — Olivia listed
   under EVM. Quieter than .mgr-chip and outlined rather than filled: it marks an
   exception, so it must be legible without competing with the manager chips. It
   is also the only thing on the card distinguishing a visitor from a member, so
   it is not decorative — don't drop it for tidiness. */
.dept-secondary-tag { font-size: var(--fs-small); color: var(--color-text-muted);
  border: 1px dashed var(--border-subtle); border-radius: var(--radius-pill);
  padding: 0 var(--space-2); white-space: nowrap; flex: 0 0 auto; }
.chip-x { border: 0; background: transparent; color: var(--color-text-muted); cursor: pointer;
  font-size: var(--fs-body); line-height: 1; padding: 0 2px; }
.chip-x:hover { color: var(--status-error-fg); }
/* Chips that are each their own POST form (e.g. removable role assignments) */
.chip-form { display: inline-flex; margin: 0 var(--space-1) var(--space-1) 0; }

/* Edit-in-place table cells (Admin > Lookups) */
.inline-edit { padding: 2px var(--space-2); font-size: var(--fs-small); min-height: auto; }
.inline-edit-num { width: 5rem; }

/* ---------- Confidential figures (salaries) ----------------------------------
   Masked until the eye is clicked, then auto-re-hidden. Covers the walk-away
   case: HR left open on an unlocked screen (Ryan, 16 Jul). */
.secret { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.secret-value { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.secret:not(.is-shown) .secret-value { color: var(--color-text-muted); user-select: none; }
.secret-eye {
  border: 0; background: transparent; padding: 0; cursor: pointer; line-height: 0;
  color: var(--color-text-muted);
}
.secret-eye:hover, .secret-eye:focus-visible { color: var(--vms-blue); }
.secret-eye .icon { width: 1em; height: 1em; }
.secret.is-shown .secret-eye { color: var(--vms-blue); }
/* Never let a revealed salary end up on paper or in a PDF. */
@media print { .secret .secret-value { visibility: hidden; } }
/* Masked edit field (the salary input) — eye sits inside the control. */
.secret-input { display: inline-flex; align-items: center; gap: var(--space-2); }
.secret-input input { flex: 1; }

/* ---------- Type-ahead suggestions + pager (registers) ---------------------- */
.suggest-wrap { position: relative; flex: 1 1 22rem; }
.suggest-wrap input { width: 100%; }
.suggest-box { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px); }
.suggest-list {
  list-style: none; margin: 0; padding: 0; background: var(--color-surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  box-shadow: 0 6px 20px rgb(0 0 0 / 12%); overflow: hidden;
}
.suggest-list a {
  display: flex; gap: var(--space-2); align-items: baseline;
  padding: var(--space-2) var(--space-3); text-decoration: none; color: var(--color-text);
}
.suggest-list a:hover, .suggest-list a:focus-visible { background: var(--grey-light); }
.suggest-num { font-weight: var(--fw-bold); white-space: nowrap; }
.suggest-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-meta, .suggest-empty { color: var(--color-text-muted); font-size: var(--fs-small); }
.suggest-empty { padding: var(--space-2) var(--space-3); }

.pager { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.pager-at { color: var(--color-text-muted); font-size: var(--fs-small); }

/* ==========================================================================
   Admin console (nav 'Admin' group) — utilitarian CRUD screens. Layout-only.
   ========================================================================== */
.subtabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle); }
.subtab { padding: var(--space-2) var(--space-3); text-decoration: none; color: var(--color-text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.subtab:hover { color: var(--color-text); }
.subtab.is-active { color: var(--vms-blue); border-bottom-color: var(--vms-blue); font-weight: var(--fw-bold); }
.subtab-count { display: inline-block; min-width: 1.4em; padding: 0 var(--space-1); border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--color-text-muted); font-size: var(--fs-small); text-align: center; }
.button.ghost { background: transparent; border: 1px solid var(--border-strong); color: var(--color-text-muted); }
.button.ghost:hover { border-color: var(--status-error-border); color: var(--status-error-fg); background: transparent; }
.row-actions { white-space: nowrap; text-align: right; }
.inline-post { display: inline-flex; gap: var(--space-2); align-items: center; margin: 0;
  flex-wrap: wrap; }   /* wrap rather than crush the controls in a narrow cell */
.inline-post select { min-height: auto; padding: 2px var(--space-2); font-size: var(--fs-small); width: auto; }
tr.is-inactive td { color: var(--color-text-muted); }
.perm-cell { font-size: var(--fs-small); color: var(--color-text-muted); max-width: 28rem;
  overflow-wrap: anywhere; }
.empty-cell { text-align: center; padding: var(--space-4); }

/* ==========================================================================
   Receivables & Reports (design-receivables-reports.md) — additive helpers.
   Values resolve to existing tokens; colour reinforces, never sole signal.
   ========================================================================== */
.num.age-warn { color: var(--status-warn-fg); }
.num.age-crit { color: var(--status-error-fg); font-weight: var(--fw-bold); }
.age-warn { color: var(--status-warn-fg); }
.age-crit { color: var(--status-error-fg); font-weight: var(--fw-bold); }
/* Reports hub — deterministic 2-up panel grid (R1). Odd panel out spans full
   width so a 1- or 3-panel subset never leaves a half-empty row; rows are
   matched-height and the footer link pins to the card bottom. */
.reports-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4); align-items: stretch; }
.reports-grid > .panel { margin-bottom: 0; display: flex; flex-direction: column; }
.reports-grid > .panel:last-child:nth-child(odd) { grid-column: 1 / -1; }
.reports-grid .panel-foot { margin-top: auto; }
@media (max-width: 60rem) {
  .reports-grid { grid-template-columns: 1fr; }
  .reports-grid > .panel:last-child:nth-child(odd) { grid-column: auto; }
}
/* Names/labels break only between words, never mid-word — overrides the global
   tbody td word-break in narrow Person/Dept panel columns. */
.cell-name { word-break: normal; overflow-wrap: break-word; }
.panel-foot { margin: var(--space-2) 0 0; font-size: var(--fs-small); }
.panel.is-deferred { background: var(--surface-sunken); border-style: dashed; margin-top: var(--space-4); }

/* Meetings — section bodies preserve authored whitespace (markdown source). */
.section-body { white-space: pre-wrap; }
.page-actions { display: inline-flex; gap: var(--space-2); align-items: center; }

/* New-project registration (design-project-registration.md) */
.stacked-form > section { margin-bottom: var(--space-5); }
.stacked-form > section > h2 { margin: 0 0 var(--space-3); font-size: var(--fs-h4); }
.registered-by { margin-top: var(--space-3); }
/* Provisional, server-assigned project number. Read-only; never an input. */
.num-readout {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  min-height: var(--control-min-h);
  padding: 0 var(--space-3);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}
.num-readout .num  { font-family: var(--font-mono); font-weight: var(--fw-bold);
                     font-size: var(--fs-h4); color: var(--color-text); }
.num-readout .note { font-size: var(--fs-small); color: var(--color-text-muted); }

/* ---------- Inline save (Admin > Lookups, Departments) -----------------------
   Saving posts in the background (HTMX) instead of reloading the page. The form
   greys out and stops accepting input while the request is in flight, so it is
   obvious something is happening and a double-click can't fire twice. */
.inline-post.htmx-request,
.dept-assign-bar.htmx-request { opacity: .55; pointer-events: none; }
.inline-post button[disabled] { cursor: default; }
.saved-flash {
  font-size: var(--fs-small); font-weight: var(--fw-bold);
  color: var(--status-success-fg);
  animation: saved-fade 2.5s forwards;
}
@keyframes saved-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.row-err { font-size: var(--fs-small); color: var(--status-error-fg); }
/* Motion removed, information kept: the global reduced-motion rule collapses
   animations to ~0s, which with `forwards` would jump straight to opacity 0 and
   hide the confirmation outright. Turn the animation off and leave it visible. */
@media (prefers-reduced-motion: reduce) { .saved-flash { animation: none; } }

/* ============================================================================
   Training & CPD (docs/design-training-cpd.md §9). Tabs/.tag/.button/.link-btn
   reuse shell.css + the existing components; only the new pieces live here.
   ============================================================================ */
.section-h { margin-top: var(--space-4); }
.section-note { font-size: var(--fs-small); font-weight: var(--fw-regular); }
.field-note { font-size: var(--fs-small); }
.empty-note { padding: var(--space-4); text-align: center; }
.chk-inline { flex-direction: row !important; align-items: center; gap: 6px; color: var(--color-text); }
.chk-inline input { width: auto; }

/* Progress strip */
.cpd-progress { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-3) 0 var(--space-4); }
.cpd-chip { display: flex; flex-direction: column; gap: 2px; min-width: 9rem; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card); }
.cpd-chip .cc-body { font-size: var(--fs-small); color: var(--color-text-muted); }
.cpd-chip .cc-fig { font-size: var(--fs-h4); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.cpd-chip .cc-fig .cc-req { color: var(--color-text-muted); font-weight: var(--fw-regular); }

/* People-picker */
.pp-field { display: flex; flex-direction: column; gap: var(--space-1); }
.pp-label { font-size: var(--fs-small); color: var(--color-text-muted); }
.people-picker { border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card); }
.pp-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap; padding: var(--space-2) var(--space-3); min-height: var(--control-min-h); }
.pp-summary::-webkit-details-marker { display: none; }
.pp-summary .pp-caret { margin-left: auto; transition: transform .12s ease; color: var(--color-text-muted); }
.people-picker[open] .pp-summary .pp-caret { transform: rotate(180deg); }
.pp-lead { font-weight: var(--fw-bold); }
.pp-lead .pp-sub, .pp-lead.pp-sub { font-weight: var(--fw-regular); color: var(--color-text-muted); }
.pp-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2);
  border-radius: var(--radius-pill); background: var(--status-info-bg); color: var(--status-info-fg);
  border: 1px solid var(--status-info-border); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.pp-chip .pp-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: var(--fs-body);
  line-height: 1; padding: 0 0 0 2px; min-height: 0; font-weight: var(--fw-bold); }
.pp-panel { border-top: 1px solid var(--border-subtle); padding: var(--space-2) var(--space-3); }
.pp-search { width: 100%; margin-bottom: var(--space-2); }
.pp-tools { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-1); }
.pp-tools .pp-count { margin-left: auto; font-size: var(--fs-small); color: var(--color-text-muted); }
.pp-list { list-style: none; margin: 0; padding: 0; max-height: 15rem; overflow-y: auto;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
.pp-opt { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-body); color: var(--color-text); }
.pp-opt:last-child { border-bottom: 0; }
.pp-opt:hover { background: var(--row-hover); }
.pp-opt.is-you { background: var(--surface-sunken); font-weight: var(--fw-bold); }
.pp-opt input { width: auto; }
.pp-opt-label { margin: 0; flex: 1; cursor: pointer; }
.pp-opt .pp-dept { margin-left: auto; font-size: var(--fs-small); color: var(--color-text-muted); }
.pp-opt[hidden] { display: none; }

/* Evidence stub */
.evidence-field { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--fs-small); color: var(--color-text-muted); }
.evidence-head { display: flex; align-items: center; gap: var(--space-2); }
.soon-pill { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-pill);
  background: var(--surface-sunken); border: 1px solid var(--border-strong); color: var(--color-text-muted);
  font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; }
.evidence-drop { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border: 1px dashed var(--grey-smoke); border-radius: var(--radius-md); background: var(--surface-sunken); }
.evidence-drop .ev-icon { font-size: 1.25rem; filter: grayscale(1); opacity: .7; }
.evidence-drop .ev-body { display: flex; flex-direction: column; gap: 2px; }
.evidence-drop .ev-title { color: var(--color-text); font-weight: var(--fw-bold); }
.evidence-preview { color: var(--color-text-muted); }

/* Matrix */
.matrix-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.matrix-controls { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.scope-toggle { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-small);
  color: var(--color-text-muted); margin: 0; }
.scope-toggle label { display: inline-flex; align-items: center; gap: var(--space-2); }
.scope-toggle select { width: auto; min-height: 34px; padding: 2px var(--space-2); font-size: var(--fs-small); }
.matrix-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--fs-small);
  color: var(--color-text-muted); margin: var(--space-2) 0 var(--space-3); align-items: center; }
.matrix-legend .lg { display: inline-flex; align-items: center; gap: var(--space-1); }
.matrix-wrap { overflow-x: auto; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); }
.matrix { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.matrix thead .grp th { background: var(--grey-light); border-bottom: 1px solid var(--grey-smoke);
  text-align: center; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); }
.matrix thead .grp th.tl { text-align: left; vertical-align: bottom; }
.matrix thead .sub th { background: var(--grey-smoke); color: var(--color-text-strong); font-size: var(--fs-small);
  padding: var(--space-1) var(--space-3); white-space: nowrap; }
.matrix tbody td { vertical-align: middle; font-size: var(--fs-table); }
.matrix td.m-person { font-weight: var(--fw-bold); white-space: nowrap; }
.matrix td.m-person .you-mark { font-weight: var(--fw-regular); color: var(--color-text-muted); font-size: var(--fs-small); }
.m-expand { background: transparent; border: 0; color: var(--vms-blue); cursor: pointer; font-size: var(--fs-body);
  padding: 0 var(--space-1); min-height: 0; font-weight: var(--fw-bold); }
.cell { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cell-ok { color: var(--status-success-fg); font-weight: var(--fw-bold); }
.cell-soon { color: var(--status-warn-fg); font-weight: var(--fw-bold); }
.cell-exp { color: var(--status-error-fg); font-weight: var(--fw-bold); }
.cell-held { color: var(--color-text); }
.cell-prog { color: var(--color-text); }
.cell-none { color: var(--color-text-muted); }
.cell-na { color: var(--grey-dark); }
.cell .gl { font-size: .9em; }
.m-count { color: var(--color-text); font-weight: var(--fw-bold); }
.m-count.zero { color: var(--color-text-muted); font-weight: var(--fw-regular); }
.matrix-detail > td { background: var(--surface-sunken); padding: var(--space-4); }
.matrix-detail[hidden] { display: none; }
.md-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-4); }
.md-block h4 { margin: 0 0 var(--space-2); font-size: var(--fs-small); text-transform: uppercase;
  letter-spacing: .04em; color: var(--color-text-muted); }
.md-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--fs-small); }
.md-list li { display: flex; gap: var(--space-2); align-items: baseline; justify-content: space-between; }
.md-actions { margin-top: var(--space-3); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.ev-link { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-small); }
.ev-add { color: var(--color-text-muted); }

/* ============================================================================
   HR cases / Employee Relations (spec §5.3)
   ============================================================================ */
.case-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center; font-size: var(--fs-body); }
.case-meta .muted { font-size: var(--fs-small); margin-right: 4px; }
.case-cols { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); align-items: start; }
@media (max-width: 860px) { .case-cols { grid-template-columns: 1fr; } }
.case-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.case-timeline > li { border-left: 3px solid var(--border-strong); padding: 0 0 var(--space-1) var(--space-3); }
.case-timeline > li.is-status { border-left-color: var(--vms-blue); }
.case-timeline .ct-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.case-timeline .ct-author { font-weight: var(--fw-bold); }
.case-timeline .ct-when { font-size: var(--fs-small); }
.case-timeline .ct-body { margin-top: 2px; white-space: pre-wrap; }
.tag.info { background: var(--status-info-bg); color: var(--status-info-fg); border: 1px solid var(--status-info-border); }
.who-sees { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); background: var(--surface-sunken);
  border-radius: var(--radius-md); font-size: var(--fs-small); }
.who-sees .who-hidden { color: var(--status-warn-fg); font-weight: var(--fw-bold); margin-left: var(--space-1); }
.who-list { list-style: none; margin: var(--space-1) 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.who-list li { padding: 2px var(--space-2); border-left: 2px solid var(--border-strong); font-size: var(--fs-small); }

/* ---- Searchable select (searchable-select.js enhances select[data-searchable]) ----
   The native select stays in the DOM as the submitted control; the combobox replaces it
   visually. Fallback without JS: the plain select renders untouched. */
.ss-wrap { position: relative; }
.ss-native { display: none; }
.ss-input { width: 100%; }
.ss-list { position: absolute; z-index: 30; left: 0; right: 0; margin: 2px 0 0; padding: 2px;
  list-style: none; background: var(--surface-card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow-1); max-height: 16rem; overflow-y: auto; }
.ss-list li[role="option"] { padding: 4px var(--space-2); border-radius: var(--radius-sm); cursor: pointer; }
.ss-list li[role="option"]:hover, .ss-list li.ss-active { background: var(--surface-sunken); }
.ss-list li[aria-selected="true"] { font-weight: var(--fw-bold); }
.ss-list .ss-more { padding: 4px var(--space-2); color: var(--color-text-muted); font-size: var(--fs-small); }