/* Nexgn Salary — Navy + Gold design system */

:root {
  /* Canvas */
  --bg: #eef1fa;
  --bg-2: #e2e7f5;
  --surface: #ffffff;
  --surface-2: #f5f7fc;
  --surface-sunken: #dde3f5;

  /* Ink — navy-based */
  --ink: #0d1f4e;
  --ink-2: #1e3566;
  --ink-3: #4a5c8a;
  --ink-4: #7a8aaa;
  --ink-5: #b0bacc;

  /* Lines */
  --line: #cfd8ee;
  --line-2: #dce3f5;
  --line-strong: #b4c0d8;

  /* Navy */
  --navy: #0d1f4e;
  --navy-2: #162760;
  --navy-3: #1e3a8a;
  --navy-soft: #e4e8f8;
  --navy-line: #7888c0;

  /* Yellow / Gold */
  --yellow: #f5c400;
  --yellow-2: #ffe550;
  --yellow-dark: #b89000;
  --yellow-soft: #fffbe5;
  --yellow-text: #8a6d00; /* AA-compliant gold for text on light surfaces (~4.9:1 on white) */

  /* Accent aliases — new components use --accent-*; these map to the gold tokens
     so the design-reference markup ports 1:1. Legacy --yellow-* stays for back-compat. */
  --accent: var(--yellow);
  --accent-2: var(--yellow-2);
  --accent-dark: var(--yellow-dark);
  --accent-soft: var(--yellow-soft);
  --accent-ink: var(--yellow-text);
  --accent-text-on: var(--navy);

  /* Backward compat — indigo maps to navy */
  --indigo: #0d1f4e;
  --indigo-2: #162760;
  --indigo-soft: #e4e8f8;
  --indigo-line: #7888c0;

  /* Status */
  --green: #0d6e35;
  --green-soft: #dff5ea;
  --green-line: #80ccaa;

  --red: #b52c2c;
  --red-soft: #fceaea;
  --red-line: #e8b0b0;

  --amber: #8a5f0a;
  --amber-soft: #fef3d9;
  --amber-line: #dfc98a;

  --blue: #1b5fbd;
  --blue-soft: #dceeff;

  /* Type */
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-sans: "Geist", "Inter", -apple-system, system-ui, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Radii */
  --r-1: 4px; --r-2: 6px; --r-3: 10px; --r-4: 14px; --r-5: 20px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(13,31,78,0.06), 0 0 0 1px var(--line);
  --shadow-2: 0 4px 16px -4px rgba(13,31,78,0.10), 0 0 0 1px var(--line);
  --shadow-3: 0 18px 48px -14px rgba(13,31,78,0.24), 0 0 0 1px var(--line-strong);
  --shadow-pop: 0 24px 64px -16px rgba(13,31,78,0.30), 0 0 0 1px var(--line-strong);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
#root { min-height: 100vh; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--yellow); color: var(--navy); }

/* ===== Layout ===== */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

/* ===== Sidebar ===== */
.sidebar {
  background: var(--navy);
  padding: 16px 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  /* NOT overflow-y:auto. The sidebar itself scrolling made the WHOLE column a
     scroll container: on any window shorter than its content (939px, and every
     new nav item lowers that) Windows paints a classic ~16px scrollbar as a
     permanent full-height grey strip at the sidebar/content boundary, and the
     identity chip — sign-out — is pushed below the fold. Only .sidebar-nav
     scrolls now. */
  overflow: hidden;
}
/* The scrolling region: everything between the pinned brand and the pinned
   identity chip. min-height:0 is required or a flex child refuses to shrink
   below its content and the scroll never engages. */
.sidebar-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22); border-radius: 4px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.34); }
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 14px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
/* Sidebar brand tile. Holds the NexgnMark X — a WHITE tile, per the design
   mock's sidebar (32px, radius 9, 19px mark). It used to be a gold tile with an
   italic serif "n"; the mark on white is why NexgnMark is called with
   tone="on-light" (gold is only ~1.6:1 on white, so the accent arm resolves to
   --yellow-dark to clear WCAG 1.4.11's 3:1 bar for graphical objects). */
.brand-mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.brand-name {
  font-family: var(--font-serif);
  font-size: 17px;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: #fff;
}
.brand-sub {
  font-size: 10px;
  color: rgba(255,255,255,0.42);
  margin-top: -1px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.nav-section { display: flex; flex-direction: column; gap: 1px; }
.nav-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.35);
  padding: 6px 10px 4px 10px;
  font-weight: 600;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  color: rgba(255,255,255,0.70);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: all 0.13s ease;
  position: relative;
}
.nav-item:hover { background: rgba(255,255,255,0.10); color: #fff; }
.nav-item.active {
  background: var(--yellow);
  color: var(--navy);
  font-weight: 600;
}
.nav-item .nav-count {
  margin-left: auto;
  font-size: 11px;
  color: rgba(255,255,255,0.40);
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,0.10);
  padding: 1px 6px; border-radius: 999px;
}
.nav-item.active .nav-count {
  background: rgba(13,31,78,0.15);
  color: var(--navy);
}
.nav-icon { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.8; }
.nav-item.active .nav-icon { opacity: 1; }
.nav-item:hover .nav-icon { opacity: 1; }
.sidebar-foot { margin-top: auto; padding-top: 8px; }

/* Role switcher */
.role-switcher {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.06);
}
.role-switcher-label {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(255,255,255,0.38);
  margin-bottom: 6px; font-weight: 600;
}
.role-switcher-current {
  display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 2px 0;
}
.role-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--yellow); color: var(--navy);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.role-name { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.88); }
.role-role { font-size: 11px; color: rgba(255,255,255,0.48); }
.role-chev { margin-left: auto; color: rgba(255,255,255,0.38); }

/* ===== Top bar ===== */
.topbar {
  height: 58px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 28px;
  background: var(--surface);
  position: sticky; top: 0; z-index: 5;
  box-shadow: 0 1px 0 var(--line);
}
.topbar-title {
  font-family: var(--font-serif);
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--navy);
  font-weight: 400;
  white-space: nowrap;
}
.topbar-trail { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cmdk-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink-4); font-size: 13px; min-width: 176px; flex-shrink: 1;
  transition: border-color 0.12s;
}
.cmdk-trigger:hover { border-color: var(--navy-line); }
.cmdk-kbd {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-4); border: 1px solid var(--line);
  padding: 1px 5px; border-radius: 4px; background: var(--bg-2);
}
.period-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 10px; border-radius: 999px;
  background: var(--navy); color: #fff;
  font-size: 12px; font-weight: 500;
}
.period-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }

/* ===== Main ===== */
.main { display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
.page { padding: 28px 36px 96px; max-width: 1440px; width: 100%; animation: fadeUp 0.28s ease backwards; }
.page-wide { max-width: 1560px; }

/* ===== Page header ===== */
.page-h {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 28px;
}
.page-h h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 33px; letter-spacing: -0.02em;
  line-height: 1.12; font-weight: 400; color: var(--navy);
  max-width: 22ch; text-wrap: balance;
}
.page-h .eyebrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--yellow-text); margin-bottom: 7px; font-weight: 600;
}
.page-h .sub { color: var(--ink-3); font-size: 14px; margin-top: 11px; max-width: 64ch; }
/* Inline hero summary line (counts · separators · anomaly chip). Opt-in modifier
   so existing plain-text .sub usages are untouched. */
.page-h .sub-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; max-width: none; }
.page-h .sub-inline strong { color: var(--ink); font-weight: 600; }
.page-h .sub-inline .dot-sep { color: var(--ink-5); }
.hero-anom { display: inline-flex; align-items: center; gap: 5px; color: var(--red); font-weight: 500; }
.hero-anom .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
/* Caution, not error: used for "already paid outside this app". Amber (not the
   red .hero-anom) because it is a factual state to heed, not a failed check.
   --amber #8a5f0a is ~5.6:1 on white, so it clears AA as text. */
/* ⚠️ .hero-warn began life as a small INLINE pill (one dot + a few words) and is
   still used that way exactly once — the Overview hero's "already paid outside
   this app." Everywhere else (11 places: the leaver banners, the leaver modal, the
   FNF notices, User Access) it wraps a BLOCK of prose containing <strong> runs.
   With `display: inline-flex` every one of those inline children becomes a FLEX
   ITEM, so as soon as the text wraps it fragments into ragged columns instead of
   flowing as a paragraph. It looks fine while short, which is why it survived —
   the same "invisible until it wraps" class as the .pill-yellow tone that was
   missing from ui.jsx's toneMap.
   Block is now the default (matching 11 of 12 call sites) and the inline pill is
   preserved by element selector, so no JSX changes and the safety-critical
   paid-outside line is untouched. */
.hero-warn { display: block; color: var(--amber); font-weight: 500; }
span.hero-warn { display: inline-flex; align-items: center; gap: 5px; }
.hero-warn .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 9px;
  font-size: 13px; font-weight: 500;
  border: 1px solid transparent;
  background: transparent;
  transition: all 0.12s ease;
  white-space: nowrap;
  cursor: pointer;
}
.btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-primary:hover { background: var(--navy-2); border-color: var(--navy-2); }
.btn-accent { background: var(--yellow); color: var(--navy); border-color: var(--yellow-dark); font-weight: 600; }
.btn-accent:hover { background: var(--yellow-2); }
.btn-secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-secondary:hover { background: var(--bg-2); border-color: var(--navy-line); }
.btn-ghost { color: var(--ink-3); border-color: transparent; }
.btn-ghost:hover { background: rgba(13,31,78,0.06); color: var(--ink); }
.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn-icon { padding: 6px; width: 32px; height: 32px; justify-content: center; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-lg { padding: 10px 20px; font-size: 14px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* A gold button at 45% opacity reads as a rendering fault rather than a disabled
   control — and on a form where the primary starts disabled, that is the first
   thing you see. Neutral instead. MUST stay after .btn:disabled: same
   specificity, so source order decides. */
.btn-accent:disabled {
  background: var(--bg-2); border-color: var(--line-strong);
  color: var(--ink-4); opacity: 1;
}

/* Topbar degradation. Five fixed items with no nowrap meant that below ~1175px
   the search trigger and the run pill WRAPPED into multi-line blobs taller than
   the 58px bar, pushing the pay-cycle select and the notification bell off the
   right edge entirely. Text truncates, the pill never wraps, and below 1280 the
   search collapses to its icon. */
.cmdk-trigger { min-width: 0; overflow: hidden; }
.cmdk-trigger > span:first-of-type {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.period-pill { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 1280px) {
  .cmdk-trigger > span:first-of-type { display: none; }
  .cmdk-trigger { min-width: 40px; justify-content: center; }
}

/* ===== Cards ===== */
.card {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
}
.card-lg { border-radius: 16px; }
.card-pad { padding: 22px 24px; }
.card-pad-lg { padding: 28px 32px; }
.card-head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 12px;
}
.card-head h3 {
  margin: 0; font-size: 14px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--navy);
}
.card-head .card-sub { font-size: 12px; color: var(--ink-4); }

/* ===== Pills ===== */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
  background: var(--bg-2); color: var(--ink-2);
  border: 1px solid var(--line);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.pill .pill-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.pill-green { background: var(--green-soft); color: var(--green); border-color: var(--green-line); }
.pill-green .pill-dot { background: var(--green); }
.pill-red { background: var(--red-soft); color: var(--red); border-color: var(--red-line); }
.pill-red .pill-dot { background: var(--red); }
.pill-amber { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-line); }
.pill-amber .pill-dot { background: var(--amber); }
.pill-indigo, .pill-navy { background: var(--navy-soft); color: var(--navy); border-color: var(--navy-line); }
.pill-indigo .pill-dot, .pill-navy .pill-dot { background: var(--navy); }
.pill-yellow { background: var(--yellow-soft); color: var(--yellow-text); border-color: var(--yellow); }
.pill-ink { background: var(--navy); color: #fff; border-color: var(--navy); }
.pill-default { background: var(--bg-2); color: var(--ink-3); border-color: var(--line); }
.pill-lg { padding: 4px 12px; font-size: 12px; }

/* ===== Money ===== */
.money { font-variant-numeric: tabular-nums; letter-spacing: -0.005em; }
.money-display {
  font-family: var(--font-serif); font-weight: 400;
  letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--navy);
}
.delta-up { color: var(--green); }
.delta-down { color: var(--red); }

/* ===== Tables ===== */
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-4); font-weight: 600;
  padding: 10px 14px; border-bottom: 2px solid var(--line);
  background: var(--surface-2); white-space: nowrap;
}
.table td {
  padding: 12px 14px; border-bottom: 1px solid var(--line-2);
  font-size: 13px; vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table-hover tbody tr:hover td { background: var(--navy-soft); cursor: pointer; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .mono { font-family: var(--font-mono); font-size: 12px; }
.table tfoot td { background: var(--surface-2); font-weight: 700; border-top: 2px solid var(--line); }
/* Pin the totals row to the bottom of a scrolling table so the figures that
   drive the bank file are always visible while scanning long registers. */
.table-stickyfoot tfoot td { position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -1px 0 var(--line); }
/* Pin column headers when a long table scrolls inside a bounded container. */
.table-stickyhead thead th { position: sticky; top: 0; z-index: 2; }

/* ===== In-cell numeric editor (Payroll Run: PLI % and LOP days) =====
   ONE shared copy, because the two cells sit side by side and any divergence
   reads as a rendering bug. The load-bearing rule is `appearance: none` +
   ::-webkit-inner-spin-button: a type="number" input renders Chrome's spinner
   arrows INSIDE the box, which consumed ~16px of a 42px field and clipped
   "100" to "10(" — the defect the owner reported. Do not restore the spinners
   to "help" — a dense financial table has no room for them, and the value is
   keyboard-editable regardless (arrow keys still step it). */
.cell-edit { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.cell-edit-input {
  appearance: none; -moz-appearance: textfield;
  border: 1px solid var(--line-strong); background: var(--surface);
  border-radius: 5px; padding: 3px 6px; text-align: right;
  font-size: 12px; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--ink); transition: border-color 0.12s, box-shadow 0.12s;
}
.cell-edit-input::-webkit-outer-spin-button,
.cell-edit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cell-edit-input:hover { border-color: var(--navy-3); }
.cell-edit-input:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(13,31,78,0.10);
}
/* Widths are sized to the max value each field accepts, in tabular digits:
   PLI is 0-100 (3 digits), LOP is 0-30 (2). */
.cell-edit-pct { width: 46px; }
.cell-edit-day { width: 38px; }
.cell-edit-suffix { font-size: 10px; color: var(--ink-4); font-weight: 600; }
.cell-edit-amt {
  font-size: 12px; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  min-width: 62px; text-align: right;
}

/* Skeleton loading bar — used in place of bare "Loading…" text. */
.skeleton-bar {
  height: 12px; border-radius: 6px; max-width: 100%;
  background: linear-gradient(90deg, var(--line-2) 25%, var(--surface-2) 37%, var(--line-2) 63%);
  background-size: 400% 100%; animation: skeleton 1.4s ease infinite;
}
@keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .skeleton-bar { animation: none; } }

/* ===== Stat grid ===== */
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-2); margin-bottom: 24px;
}
.stat {
  background: var(--surface); padding: 20px 22px;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: none; }
.stat-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-4); font-weight: 600; margin-bottom: 8px;
}
.stat-value {
  font-family: var(--font-serif); font-size: 26px;
  letter-spacing: -0.025em; line-height: 1.05; font-weight: 400; color: var(--navy);
}
.stat-foot { font-size: 12px; color: var(--ink-3); margin-top: 8px; display: flex; align-items: center; gap: 6px; }

/* Navy accent stat */
.stat-navy { background: var(--navy); }
.stat-navy .stat-label { color: rgba(255,255,255,0.50); }
.stat-navy .stat-value { color: var(--yellow); }
.stat-navy .stat-foot { color: rgba(255,255,255,0.55); }

/* Yellow accent stat */
.stat-yellow { background: var(--yellow-soft); border-right-color: rgba(245,196,0,0.3); }
.stat-yellow .stat-label { color: var(--yellow-text); }
.stat-yellow .stat-value { color: var(--navy); }

/* ===== Avatar ===== */
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; flex-shrink: 0; color: #fff;
}
.avatar-lg { width: 48px; height: 48px; font-size: 16px; }
.avatar-xl { width: 64px; height: 64px; font-size: 22px; }
.avatar-sm { width: 26px; height: 26px; font-size: 10px; }

/* ===== Forms ===== */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-4); font-weight: 600;
}
.input {
  border: 1px solid var(--line-strong); background: var(--surface);
  border-radius: 8px; padding: 8px 12px; font-size: 13px; width: 100%;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.input:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(13,31,78,0.10);
}

/* ===== Misc helpers ===== */
.divider { height: 1px; background: var(--line-2); margin: 16px 0; border: none; }
.kv {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 8px 0; font-size: 13px;
  border-bottom: 1px solid var(--line-2);
}
.kv:last-child { border-bottom: none; }
.kv-k { color: var(--ink-4); }
.kv-v { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--navy); }

.spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--line);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Auth surface (sign-in / no-access / session-expired / error) =====
   Split screen: a permanently-navy brand + proposition hero beside the card.
   Geometry, spacing and copy follow the design project's "Nexgn Overview" mock;
   its teal accent is substituted for the app's gold so sign-in and the 23 app
   screens share one accent. Deliberate deviations from the mock are commented.
   Fixed-width like the rest of the app (index.html is viewport width=1280). */
.auth-split {
  min-height: 100vh;
  display: grid; grid-template-columns: 1.04fr 0.96fr;
  background: var(--surface-2);
}
.auth-hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: clamp(26px, 4.4vh, 52px) clamp(34px, 4vw, 58px) clamp(22px, 3.4vh, 40px);
  /* Stops 1 and 2 are the mock's exactly (--navy IS the mock's #0d1f4e). The hero
     is meant to read dark so the white serif headline and gold accents carry; a
     lighter first stop flattens the panel. Only stop 3 deviates: the mock's
     #062744 is teal-tinted and muddies under a gold glow, so it stays in the
     navy family. */
  background: linear-gradient(158deg, var(--navy) 0%, #081536 52%, #081a3c 100%);
}
.auth-hero-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.auth-hero-glow-1 {
  width: 620px; height: 620px; left: -220px; bottom: -280px;
  /* gold, low alpha — gold is far brighter than the mock's teal at the same .30 */
  background: radial-gradient(circle, rgba(245, 196, 0, 0.16) 0%, rgba(245, 196, 0, 0) 68%);
}
.auth-hero-glow-2 {
  width: 520px; height: 520px; right: -200px; top: -240px;
  /* The mock's own value. #002d72 is the brand mark's navy (sampled from the
     Nexgn Services logo itself), deliberately deeper than --navy-3: this glow
     sits in the same corner as the lockup and a lighter one washes it out. */
  background: radial-gradient(circle, rgba(0, 45, 114, 0.75) 0%, rgba(0, 45, 114, 0) 70%);
}
.auth-hero-grid {
  position: absolute; inset: 0; opacity: 0.05; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.9) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.9) 1px, transparent 1px);
  background-size: 56px 56px;
}
.auth-lockup { position: relative; display: flex; align-items: center; gap: 14px; }
.auth-mark {
  width: 54px; height: 54px; border-radius: var(--r-4);
  background: #fff; display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.6);
}
.auth-mark-sm { width: 34px; height: 34px; border-radius: var(--r-3); box-shadow: none; border: 1px solid var(--line-2); }
.auth-lockup-name { font-size: 19px; font-weight: 600; letter-spacing: 0.22em; color: #fff; line-height: 1; }
/* Tracking carries the mock's spaced-out "S E R V I C E S" look without the
   literal spaces, which screen readers spell out letter by letter. */
.auth-lockup-sub { font-size: 8.5px; letter-spacing: 0.98em; color: rgba(255, 255, 255, 0.45); margin-top: 6px; }
.auth-hero-body { position: relative; margin-top: auto; padding-top: clamp(20px, 4vh, 48px); }
.auth-hero-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: clamp(10px, 1.7vh, 18px);
}
.auth-hero-title {
  margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; letter-spacing: -0.025em;
  color: #fff; max-width: 15ch; text-wrap: balance;
}
.auth-hero-lede {
  margin: clamp(12px, 1.8vh, 20px) 0 0;
  font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.60); max-width: 44ch;
}
.auth-hero-points {
  list-style: none; margin: clamp(20px, 3.4vh, 38px) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: clamp(9px, 1.5vh, 14px);
}
.auth-hero-points li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.78);
}
.auth-hero-tick {
  width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: grid; place-items: center; color: var(--yellow);
  background: rgba(245, 196, 0, 0.16); border: 1px solid rgba(245, 196, 0, 0.45);
}
.auth-hero-foot {
  position: relative; margin-top: auto; padding-top: clamp(18px, 3.4vh, 46px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  /* mock uses .42 (~3.9:1 on the hero's darkest stops) — fails AA at 11.5px
     normal weight, so lifted to .55 (~5.9:1). Same deviation class as the
     divider label and .auth-foot below. */
  font-size: 11.5px; color: rgba(255, 255, 255, 0.55);
}
.auth-hero-foot > span { padding-top: 18px; }
.auth-hero-fy { font-family: var(--font-mono); }
.auth-pane {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: clamp(20px, 4vh, 40px) 48px; overflow-y: auto;
}
.auth-card {
  width: 100%; max-width: 400px;
  background: var(--surface);
  border-radius: var(--r-5);
  overflow: hidden;                      /* clips .auth-card-bar to the radius */
  box-shadow: 0 24px 60px -22px rgba(13, 31, 78, 0.30), 0 0 0 1px var(--line-2);
  display: flex; flex-direction: column;
}
.auth-card-bar { height: 3px; background: linear-gradient(90deg, var(--navy) 0%, var(--yellow) 100%); }
.auth-card-body {
  padding: clamp(26px, 3.6vh, 38px) 36px clamp(22px, 3vh, 32px);
  display: flex; flex-direction: column;
}
.auth-card-brandrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.auth-card-brandname { font-family: var(--font-serif); font-size: 16px; font-weight: 500; color: var(--ink); }
.auth-card-foot {
  padding: 14px 36px; border-top: 1px solid var(--line-2); background: var(--surface-2);
  font-size: 11.5px; color: var(--ink-3); text-align: center;
}
.auth-card-foot a { color: var(--navy-3); font-weight: 500; }
/* Card content is left-aligned, per the mock (the pre-split card was centred). */
.auth-state { display: flex; flex-direction: column; width: 100%; }
.auth-title {
  font-family: var(--font-serif);
  font-size: 27px; font-weight: 400; color: var(--ink); letter-spacing: -0.02em;
  line-height: 1.15; margin: 0;
}
.auth-sub { font-size: 13.5px; color: var(--ink-3); margin-top: 9px; line-height: 1.55; }
.auth-note {
  font-size: 11.5px; color: var(--ink-3); margin-top: 18px; padding-top: 16px;
  line-height: 1.6; border-top: 1px solid var(--line-2);
}
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 18px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.auth-divider span {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  /* mock uses --ink-4 (~3.5:1 on white) — fails AA at this size, so --ink-3 */
  color: var(--ink-3); white-space: nowrap;
}
.auth-callout {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 13px 14px; border-radius: var(--r-3);
  background: var(--surface-2); border: 1px solid var(--line-2);
  font-size: 11.5px; line-height: 1.55; color: var(--ink-3);
}
.auth-callout svg { color: var(--yellow-text); }
.auth-pill {
  align-self: flex-start;
  font-size: 11px; font-weight: 600; letter-spacing: 0.01em;
  padding: 4px 11px; border-radius: 999px; margin-bottom: 14px;
}
.auth-pill-amber { background: var(--amber-soft); color: var(--amber); }
.auth-pill-red { background: var(--red-soft); color: var(--red); }
.auth-ms-btn {
  margin-top: 26px; width: 100%; height: 48px;
  display: flex; align-items: center; justify-content: center; gap: 11px;
  background: var(--navy); color: #fff;
  border: 1px solid var(--navy); border-radius: var(--r-3);
  padding: 0 16px; font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 20px -10px rgba(13, 31, 78, 0.7);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.auth-ms-btn:hover { background: var(--navy-2); transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(13, 31, 78, 0.5); }
.auth-ms-btn:active { transform: translateY(0); box-shadow: none; }
.auth-solid-btn {
  align-self: flex-start;
  margin-top: 20px; background: var(--navy); color: #fff; border: 1px solid var(--navy);
  border-radius: var(--r-3); padding: 10px 20px; font-size: 13px; font-weight: 500;
  transition: background 0.15s ease;
}
.auth-solid-btn:hover { background: var(--navy-2); }
.auth-ghost-btn {
  align-self: flex-start;
  margin-top: 20px; background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-strong); border-radius: var(--r-3);
  padding: 10px 20px; font-size: 13px; font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.auth-ghost-btn:hover { background: var(--bg-2); border-color: var(--navy-line); }
.auth-card button:focus-visible { outline: 2px solid var(--navy-3); outline-offset: 2px; }
.auth-spinner {
  align-self: center;
  margin-top: 22px; width: 36px; height: 36px;
  border: 2.5px solid var(--navy-soft); border-top-color: var(--navy);
  border-radius: 50%; animation: spin 0.7s linear infinite;
}
/* mock uses #98a4bd (~2.9:1 on the pane) — an AA fail, so --ink-3. Documented so
   a later "restore fidelity to the mock" pass does not reintroduce it. */
.auth-foot { font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em; }
.auth-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13, 31, 78, 0.60); backdrop-filter: blur(12px); padding: 24px;
}

/* ===== Identity chip (sidebar foot) ===== */
.identity { border-top: 1px solid rgba(255,255,255,0.10); padding-top: 12px; position: relative; }
.identity-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: var(--r-2); text-align: left;
}
.identity-btn:hover { background: rgba(255,255,255,0.06); }
.identity-avatar {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: var(--yellow); color: var(--navy);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.identity-name { font-size: 13px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.identity-role { font-size: 11px; color: rgba(255,255,255,0.55); }
.identity-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
  box-shadow: var(--shadow-pop); padding: 8px; z-index: 50;
}
.identity-menu-email { font-size: 11px; color: var(--ink-4); padding: 6px 8px 8px; word-break: break-all; border-bottom: 1px solid var(--line-2); }
.identity-signout {
  width: 100%; text-align: left; padding: 8px; margin-top: 4px; border-radius: var(--r-2);
  font-size: 13px; color: var(--red); font-weight: 500;
}
.identity-signout:hover { background: var(--red-soft); }

/* ---- Notification bell (topbar) ------------------------------------------
   The bell existed as a DEAD button until 2026-08-04; this styles the wired
   version. Deliberately reuses the .identity-menu recipe (surface + --line +
   --r-3 + --shadow-pop) so it reads as the same popover family rather than a
   third bespoke panel, and every colour is a token — no literals. */
.notif-btn { position: relative; }        /* positioning context for the badge */
.notif-badge {
  position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px;
  padding: 0 3px; border-radius: 8px; background: var(--red); color: #fff;
  font-size: 9px; font-weight: 700; line-height: 15px; text-align: center;
  /* Ring in the topbar's own navy so the badge reads as lifted off the icon. */
  box-shadow: 0 0 0 1.5px var(--navy);
}
/* Unavailable feed: amber "!", never a count. A number here would be fabricated. */
.notif-badge-warn { background: var(--amber); }

.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: 380px; max-width: 92vw;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
  box-shadow: var(--shadow-pop); z-index: 60; overflow: hidden;
  /* Column + a scrolling list, so the header and footer stay visible and only the
     list scrolls. Capped against the VIEWPORT: the same lesson as the Modal fix —
     a panel taller than the viewport puts its own content out of reach, and this
     one is anchored to a fixed topbar so it cannot be scrolled to. */
  display: flex; flex-direction: column; max-height: calc(100vh - 96px);
}
.notif-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 13px; border-bottom: 1px solid var(--line-2); flex-shrink: 0;
}
.notif-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.notif-markread {
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  padding: 4px 7px; border-radius: var(--r-2);
}
.notif-markread:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.notif-markread:disabled { opacity: 0.55; cursor: default; }
.notif-err {
  padding: 9px 13px; font-size: 11.5px; color: var(--amber);
  background: var(--amber-soft); border-bottom: 1px solid var(--amber-line);
}
/* min-height:0 is REQUIRED or this flex child refuses to shrink below its content
   and the panel grows past its own max-height (the Modal body lesson). */
.notif-list { overflow-y: auto; flex: 1; min-height: 0; }
.notif-item {
  display: flex; gap: 9px; padding: 10px 13px; border-bottom: 1px solid var(--line-2);
}
.notif-item:last-child { border-bottom: 0; }
/* Unread is marked by a tinted row AND a filled dot — never by colour alone. */
.notif-item-unread { background: var(--surface-2); }
.notif-dot {
  width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex-shrink: 0;
}
.notif-dot-navy { background: var(--navy); }
.notif-dot-amber { background: var(--amber); }
.notif-item-title { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.notif-item-detail { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.45; }
/* --ink-4 is ~3.5:1 and fails AA as text; --ink-3 (~6.6:1) is the documented
   replacement, applied here for the same reason as the 2026-07-24 auth pass. */
.notif-item-meta { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }
.notif-empty { padding: 18px 14px; font-size: 12px; color: var(--ink-3); line-height: 1.55; }
.notif-empty-warn { background: var(--amber-soft); color: var(--amber); }
.notif-foot {
  padding: 9px 13px; border-top: 1px solid var(--line-2); background: var(--surface-2);
  font-size: 10.5px; color: var(--ink-3); line-height: 1.5; flex-shrink: 0;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
/* ⚠️ `backwards`, NOT `both` — and this is a layout bug fix, not a nicety.
   With `both` the element RETAINS the final keyframe forever, and Chrome computes
   that retained `transform: none` as the IDENTITY MATRIX `matrix(1,0,0,1,0,0)`,
   which is a non-none transform. A non-none transform makes the element a
   CONTAINING BLOCK for `position: fixed` descendants — so `.cmdk-overlay`
   (`position: fixed; inset: 0`) sized itself to the `.page` (measured 1107px)
   instead of the viewport (768px), and centring inside it pushed the modal
   FOOTER — with the primary action button — off-screen and unreachable, because a
   fixed overlay cannot be scrolled to.
   This hit EVERY modal in the app on any viewport shorter than the page; the FNF
   record modal is simply the tallest and exposed it first.
   `backwards` is visually identical here: after the animation the element falls
   back to its base styles, and no element using .fadeIn declares its own opacity
   or transform, so the resting state is exactly the final keyframe (opacity 1,
   no transform) — minus the phantom identity matrix. */
.fadeIn { animation: fadeIn 0.18s ease-out backwards; }
/* Reduced-motion guard placed AFTER .fadeIn and the :hover rules above so it
   wins on cascade order (media queries add no specificity of their own). */
@media (prefers-reduced-motion: reduce) {
  .auth-spinner, .auth-card, .fadeIn { animation: none; }
  .auth-ms-btn, .auth-solid-btn, .auth-ghost-btn { transition: none; transform: none; }
  .auth-ms-btn:hover { transform: none; box-shadow: none; }
}

/* ===== Tabs ===== */
/* File pickers. The raw control renders as Chrome's own grey "Choose file"
   chrome, which reads as a browser artifact dropped into the page rather than
   part of the system. Styling ::file-selector-button keeps it a REAL <input> —
   so it stays keyboard-focusable and correctly announced — while matching
   .btn-secondary. A <label> dressed as a button would look identical and quietly
   remove the control from the tab order. */
.input[type="file"] { padding: 7px 10px; line-height: 1.4; cursor: pointer; }
.input[type="file"]::file-selector-button {
  font: inherit; font-size: 12px; font-weight: 600;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 5px 12px; margin-right: 12px; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.input[type="file"]::file-selector-button:hover {
  background: var(--bg-2); border-color: var(--navy-line);
}
.input[type="file"]:disabled { opacity: 0.45; cursor: not-allowed; }

/* Reading measure for prose inside a card. .page is up to 1440px wide, so body
   copy left unconstrained sets ~180 characters per line — roughly triple a
   comfortable measure. .page-h .sub already caps at 64ch; this is the same rule
   for card bodies. */
.measure { max-width: 64ch; }

/* A labelled separator between two alternative inputs ("or"). Reads as a choice
   rather than as a second required step. */
.or-rule { display: flex; align-items: center; gap: 12px; margin: 18px 0; max-width: 64ch; }
.or-rule::before, .or-rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.or-rule span { font-size: 11px; letter-spacing: 0.07em; color: var(--ink-4); font-weight: 600; }

.tabs { display: flex; border-bottom: 2px solid var(--line); margin-bottom: 24px; }
.tab {
  padding: 10px 16px; font-size: 13px; color: var(--ink-4);
  font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color 0.12s;
}
.tab:hover { color: var(--navy); }
.tab.active { color: var(--navy); border-bottom-color: var(--yellow); }
.tab .tab-count {
  margin-left: 6px; font-size: 11px; color: var(--ink-4);
  background: var(--bg-2); padding: 0 6px; border-radius: 999px;
}

/* ===== Command palette ===== */
.cmdk-overlay {
  position: fixed; inset: 0;
  background: rgba(13,31,78,0.40); backdrop-filter: blur(3px);
  display: grid; place-items: start center; padding-top: 12vh;
  z-index: 100; animation: fadeIn 0.12s ease-out;
}
.cmdk-panel {
  width: 600px; max-width: calc(100vw - 32px);
  background: var(--surface); border-radius: 16px;
  box-shadow: var(--shadow-pop); overflow: hidden;
}
.cmdk-input-row {
  padding: 16px 18px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.cmdk-input { flex: 1; border: none; outline: none; font-size: 16px; background: transparent; }
.cmdk-list { max-height: 360px; overflow-y: auto; padding: 8px; }
.cmdk-group-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-4); padding: 12px 10px 4px; font-weight: 600;
}
.cmdk-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.cmdk-item.active { background: var(--navy); color: #fff; }
.cmdk-item .cmdk-hint { margin-left: auto; font-size: 11px; color: var(--ink-4); }
.cmdk-item.active .cmdk-hint { color: rgba(255,255,255,0.55); }

/* ===== Scrubber timeline ===== */
.scrubber { position: relative; height: 76px; cursor: ew-resize; user-select: none; }
.scrubber-axis { position: absolute; left: 0; right: 0; bottom: 22px; height: 1px; background: var(--line); }
.scrubber-track { position: absolute; left: 0; right: 0; bottom: 22px; height: 1px; }
.scrubber-version {
  position: absolute; bottom: 17px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--ink-4);
  transform: translateX(-50%); transition: all 0.15s;
}
.scrubber-version.active { background: var(--navy); border-color: var(--navy); transform: translateX(-50%) scale(1.15); }
.scrubber-label { position: absolute; font-size: 10px; color: var(--ink-4); transform: translateX(-50%); bottom: 0; white-space: nowrap; }
.scrubber-area { position: absolute; left: 0; bottom: 22px; height: 50px; pointer-events: none; }
.scrubber-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--navy); transform: translateX(-1px); pointer-events: none; }
.scrubber-playhead-grip {
  position: absolute; top: -2px; left: -7px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--navy); border: 3px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.scrubber-playhead-amount {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--navy); color: #fff; padding: 4px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
}
.scrubber-playhead-amount::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: var(--navy);
}

/* ===== Salary chart ===== */
.area-chart { display: block; width: 100%; height: 200px; overflow: visible; }
.area-chart .grid-line { stroke: var(--line-2); stroke-width: 1; }
.area-chart .axis-label { fill: var(--ink-4); font-size: 10px; font-family: var(--font-mono); }
.area-chart .area-fill { fill: url(#area-gradient); }
.area-chart .area-line { stroke: var(--navy); stroke-width: 1.5; fill: none; }
.area-chart .version-dot { fill: var(--surface); stroke: var(--navy); stroke-width: 1.5; }
.area-chart .version-dot.current { fill: var(--navy); }

/* ===== Stack bar ===== */
.stack-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line-2); margin: 6px 0 14px; }
.stack-bar > span { display: block; height: 100%; }
.legend-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 16px; font-size: 12px; }
.legend-row .swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

/* ===== Utility classes ===== */
.row { display: flex; align-items: center; gap: 10px; }
.row-tight { display: flex; align-items: center; gap: 4px; }
.col { display: flex; flex-direction: column; gap: 10px; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.muted { color: var(--ink-4); }
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-serif); }
.small { font-size: 12px; }
.tiny { font-size: 11px; }
.eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-4); font-weight: 600; }
.grow { flex: 1; }
.nowrap { white-space: nowrap; }
.text-right { text-align: right; }

/* ===== Sparkline ===== */
.spark { height: 28px; width: 80px; }
.spark path { fill: none; stroke: currentColor; stroke-width: 1.25; }

/* ===== Audit feed ===== */
.audit-item { display: grid; grid-template-columns: 12px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-2); align-items: start; }
.audit-item:last-child { border-bottom: none; }
.audit-rail { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); margin-top: 6px; position: relative; }
.audit-rail::before { content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 1px; height: 60px; background: var(--line); }
.audit-item:last-child .audit-rail::before { display: none; }
.audit-headline { font-size: 13px; line-height: 1.5; }
.audit-meta { font-size: 11px; color: var(--ink-4); margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
.audit-diff { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; background: var(--navy-soft); padding: 4px 10px; border-radius: 6px; border: 1px solid var(--navy-line); }
.audit-old { color: var(--ink-4); text-decoration: line-through; }
.audit-new { color: var(--navy); font-weight: 500; }
.audit-time { font-size: 11px; color: var(--ink-4); white-space: nowrap; }

/* ===== Workflow stepper ===== */
.steps { display: flex; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.step { flex: 1; padding: 14px 18px; border-right: 1px solid var(--line); }
.step:last-child { border-right: none; }
.step-num { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); margin-bottom: 5px; }
.step-label { font-size: 13px; font-weight: 600; color: var(--navy); }
.step-meta { font-size: 11px; color: var(--ink-4); margin-top: 3px; }
.step.done .step-num::before { content: "✓ "; color: var(--green); }
.step.active { background: var(--navy); color: #fff; }
.step.active .step-num { color: rgba(255,255,255,0.55); }
.step.active .step-label { color: var(--yellow); }
.step.active .step-meta { color: rgba(255,255,255,0.55); }

/* ===== Section heads ===== */
.section-h { font-family: var(--font-serif); font-size: 20px; letter-spacing: -0.01em; margin: 0 0 14px; font-weight: 400; color: var(--navy); }

/* ===== Badges ===== */
.badge-rev { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; padding: 2px 7px; background: var(--navy); color: var(--yellow); border-radius: 4px; }

/* ===== CSV preview ===== */
.csv-preview { font-family: var(--font-mono); font-size: 11px; background: #07102a; color: #c8d4ee; border-radius: 10px; padding: 16px; overflow-x: auto; line-height: 1.75; }
.csv-preview .csv-h { color: var(--yellow); }
.csv-preview .csv-c1 { color: #7dd3a8; }
.csv-preview .csv-c2 { color: #94a3b8; }
.csv-preview .csv-c3 { color: #f0a060; }
.csv-preview .csv-c4 { color: #a78bfa; }
.csv-preview .csv-c5 { color: #e2e8f0; }

/* ===== Focus ring ===== */
.ring { box-shadow: 0 0 0 3px rgba(245,196,0,0.45), 0 0 0 1px var(--yellow-dark); }

/* ===== Incentives input cells ===== */
.inc-input {
  border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 8px; font-size: 12px; width: 100%;
  background: var(--surface); transition: border-color 0.12s;
  font-family: var(--font-sans);
}
.inc-input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 2px rgba(13,31,78,0.10); }
input.inc-input[type="number"] { text-align: right; }

/* ===== Team cost bar ===== */
.team-bar-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.team-bar-row:last-child { border-bottom: none; }
.team-bar-track { flex: 1; height: 6px; background: var(--line-2); border-radius: 3px; overflow: hidden; }
.team-bar-fill { height: 100%; border-radius: 3px; background: var(--navy); transition: width 0.4s ease; }

/* ===== Popover ===== */
.popover { position: absolute; background: var(--navy); color: #fff; border-radius: 8px; padding: 8px 12px; font-size: 12px; z-index: 50; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-pop); }

/* =========================================================================
   UI revamp (2026-07) — reference-derived primitives. Design owner: Fable.
   All motion below is reduced-motion-guarded at the end of this block.
   ========================================================================= */

/* ===== Motion keyframes ===== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pulseDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,196,0,0.5); } 70% { box-shadow: 0 0 0 6px rgba(245,196,0,0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes aiDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ===== KPI cards (hero screens; replaces flat .stat-grid) ===== */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 22px; }
.kpi {
  background: var(--surface); border-radius: 14px; padding: 22px; box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden;
}
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; color: var(--ink-4); }
.kpi-icon { width: 26px; height: 26px; border-radius: 7px; background: var(--navy-soft); color: var(--navy); display: grid; place-items: center; flex-shrink: 0; }
.kpi-icon.amber { background: var(--amber-soft); color: var(--amber); }
.kpi-icon.green { background: var(--green-soft); color: var(--green); }
.kpi-value { font-family: var(--font-serif); font-size: 28px; letter-spacing: -0.025em; line-height: 1; color: var(--navy); white-space: nowrap; }
.kpi-foot { display: flex; align-items: center; gap: 9px; margin-top: 2px; font-size: 12px; color: var(--ink-4); }
.kpi-delta { font-weight: 600; }
.kpi-spark { width: 66px; height: 22px; flex-shrink: 0; overflow: visible; }
.kpi-spark polyline { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Navy accent KPI (e.g. Net to disburse) */
.kpi-navy { background: var(--navy); }
.kpi-navy .kpi-label { color: rgba(255,255,255,0.55); }
.kpi-navy .kpi-value { color: var(--accent); }
.kpi-navy .kpi-foot { color: rgba(255,255,255,0.55); }
.kpi-navy .kpi-icon { background: rgba(255,255,255,0.10); color: #fff; }
/* Compact 6-across variant (Payroll Run / Register) */
.kpi-sm { padding: 15px 16px; border-radius: 12px; box-shadow: var(--shadow-1); gap: 6px; }
.kpi-sm .kpi-value { font-size: 22px; }

/* ===== Run stepper (circular badges + connecting bars) ===== */
.stepper { display: grid; grid-template-columns: repeat(5, 1fr); padding: 4px 10px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-2); overflow: hidden; }
.stepper.flush { box-shadow: none; border-radius: 0; padding: 6px 10px 2px; }
.stp { padding: 14px 12px; }
.stp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.stp-dot {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font: 700 10px var(--font-mono); background: var(--surface); color: var(--ink-4);
  border: 1.5px solid var(--line-strong); flex-shrink: 0;
}
.stp-bar { height: 1.5px; flex: 1; background: var(--line); }
.stp.done .stp-dot { background: var(--green-soft); color: var(--green); border-color: var(--green-line); }
.stp.done .stp-bar { background: var(--green-line); }
.stp.active .stp-dot { background: var(--navy); color: #fff; border-color: var(--navy); }
.stp:last-child .stp-bar { background: transparent; }
.stp-label { font-size: 12.5px; font-weight: 600; color: var(--navy); }
.stp.pending .stp-label { color: var(--ink-4); }
.stp-meta { font-size: 11px; color: var(--ink-4); margin-top: 2px; }

/* ===== Table column-grouping (payroll breakdown) ===== */
.table th.thg-gold { color: var(--yellow-text); background: var(--yellow-soft); border-bottom-color: var(--yellow-dark); }
.table th.thg-navy { color: var(--navy); background: var(--navy-soft); border-bottom-color: var(--navy-line); font-weight: 700; }
.table th.thg-red { color: var(--red); background: var(--red-soft); border-bottom-color: var(--red-line); }
.table th.thg-green { color: var(--green); background: var(--green-soft); border-bottom-color: var(--green-line); font-weight: 700; }
.table td.tdg-gold { background: var(--yellow-soft); }
.table td.tdg-gross { background: rgba(13,31,78,0.03); font-weight: 700; color: var(--navy); }
.table td.tdg-net { background: rgba(13,110,53,0.04); font-weight: 700; color: var(--green); }
.table tfoot td.tfg-gold { background: var(--yellow-soft); }
.table tfoot td.tfg-navy { background: var(--navy-soft); color: var(--navy); }
.table tfoot td.tfg-green { background: var(--green-soft); color: var(--green); }
/* Sticky first column (employee) — opaque, above scrolling cells */
.table .td-sticky { position: sticky; left: 0; z-index: 2; background: var(--surface); }
.table thead th.td-sticky { z-index: 6; background: var(--surface-2); }
.table tfoot td.td-sticky { z-index: 5; background: var(--surface-2); }
/* Employee identity cell (avatar + name + mono id/designation) */
.emp-cell { display: flex; align-items: center; gap: 8px; }
.emp-cell .emp-meta { min-width: 0; }
.emp-cell .emp-name { font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.emp-cell .emp-id { font-size: 10.5px; color: var(--ink-4); font-family: var(--font-mono); }
.flag-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* ===== Right-rail rows + activity icons ===== */
.rail-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.rail-row:last-child { border-bottom: none; }
.rail-k { font-size: 13px; font-weight: 500; color: var(--ink); }
.rail-sub { font-size: 11px; color: var(--ink-4); margin-top: 1px; }
.rail-v { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--navy); }
.act-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.act-row:last-child { border-bottom: none; }
.act-icon { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; background: var(--bg-2); color: var(--ink-2); margin-top: 1px; }
.act-icon.green { background: var(--green-soft); color: var(--green); }
.act-icon.navy { background: var(--navy-soft); color: var(--navy); }
.act-icon.gold { background: var(--yellow-soft); color: var(--yellow-text); }

/* ===== AI Assistant ===== */
.ai-launch {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--accent-dark); background: var(--accent-soft); color: var(--accent-ink);
  font-size: 12.5px; font-weight: 600; transition: background 0.12s, color 0.12s;
}
.ai-launch:hover { background: var(--accent); color: var(--accent-text-on); }
.ai-launch .ai-kbd { font-family: var(--font-mono); font-size: 10px; opacity: 0.7; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; }
.ai-scrim { position: fixed; inset: 0; z-index: 79; background: rgba(13,31,78,0.12); }
.ai-panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: 414px; max-width: 94vw; z-index: 80;
  background: var(--surface); box-shadow: var(--shadow-3); display: flex; flex-direction: column;
  animation: slideInRight 0.26s cubic-bezier(0.2,0.8,0.2,1) backwards;
}
.ai-head { padding: 14px 16px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--line-2); }
.ai-head-avatar { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; background: var(--accent); color: var(--navy); display: grid; place-items: center; }
.ai-head-title { font-size: 14.5px; font-weight: 600; color: var(--navy); line-height: 1.1; }
.ai-head-sub { font-size: 11.5px; color: var(--ink-4); margin-top: 1px; }
.ai-context { padding: 8px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-3); }
.ai-thread { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.ai-msg { display: flex; gap: 9px; align-items: flex-start; }
.ai-msg.user { flex-direction: row-reverse; }
.ai-avatar { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; background: var(--accent); color: var(--navy); display: grid; place-items: center; margin-top: 1px; }
.ai-avatar.user { background: var(--navy); color: #fff; font-size: 10px; font-weight: 700; }
.ai-bubble { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 4px 12px 12px 12px; padding: 11px 13px; font-size: 13px; line-height: 1.5; color: var(--ink); animation: bubbleIn 0.22s ease backwards; }
.ai-bubble-user { background: var(--navy); color: #fff; border-radius: 12px 4px 12px 12px; padding: 10px 13px; font-size: 13px; line-height: 1.5; max-width: 82%; animation: bubbleIn 0.22s ease backwards; }
.ai-rows { margin-top: 8px; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--surface); }
.ai-row { padding: 9px 12px; border-bottom: 1px solid var(--line-2); }
.ai-row:last-child { border-bottom: none; }
.ai-row-k { font-size: 12px; font-weight: 600; color: var(--navy); margin-bottom: 2px; }
.ai-row-v { font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.ai-note { margin-top: 8px; font-size: 12px; color: var(--accent-ink); font-weight: 500; display: flex; gap: 6px; align-items: flex-start; }
.ai-actions { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 7px; }
.ai-action { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 8px; font-size: 12px; font-weight: 500; border: 1px solid var(--line-strong); background: var(--surface); color: var(--navy); }
.ai-action:hover { background: var(--navy-soft); border-color: var(--navy-line); }
.ai-typing { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 4px 12px 12px 12px; padding: 13px 14px; display: flex; gap: 4px; align-items: center; }
.ai-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); animation: aiDot 1.1s infinite; }
.ai-dot:nth-child(2) { animation-delay: 0.18s; }
.ai-dot:nth-child(3) { animation-delay: 0.36s; }
.ai-suggests { padding: 0 16px 10px; display: flex; flex-direction: column; gap: 7px; }
.ai-suggests-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-4); font-weight: 600; padding: 2px; }
.ai-suggest { text-align: left; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 12.5px; color: var(--ink); }
.ai-suggest:hover { border-color: var(--navy-line); background: var(--surface-2); }
.ai-composer-wrap { padding: 12px 14px; border-top: 1px solid var(--line-2); }
.ai-composer { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 12px; padding: 6px 6px 6px 13px; background: var(--surface); }
.ai-composer:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(13,31,78,0.10); }
.ai-composer input { flex: 1; border: none; outline: none; background: transparent; font-size: 13px; color: var(--ink); font-family: var(--font-sans); }
.ai-send { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; border: none; background: var(--navy); color: #fff; }
.ai-send:hover { background: var(--navy-2); }
.ai-send:disabled { opacity: 0.4; }
.ai-disclaim { font-size: 10.5px; color: var(--ink-4); text-align: center; margin-top: 8px; }
.ai-beta { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--navy-soft); color: var(--navy); border: 1px solid var(--navy-line); }

/* ===== Reduced-motion guard for revamp animations ===== */
@media (prefers-reduced-motion: reduce) {
  .page, .ai-panel, .ai-bubble, .ai-bubble-user { animation: none; }
  .period-pill .dot.live, .ai-dot { animation: none; }
}