/* ============================================================
   Faultex dashboard suite — shared shell styles
   ============================================================ */

:root {
  /* White background + original gold accent. Pastel yellow tints used for
     soft shading (hover backgrounds, callout fills, pill backgrounds).
     Text/link uses --accent-2 (darker amber) because pure #e8b464 has poor
     contrast on white; backgrounds + fills use --accent (gold) for warmth. */
  --bg: #ffffff;
  --bg-tint: #fbf6e8;
  --surface: #ffffff;
  --surface-2: #fdf9ee;
  --line: rgba(22, 24, 29, 0.12);
  --line-strong: rgba(22, 24, 29, 0.22);
  --ink: #16181d;
  --ink-dim: #4a463f;
  --ink-mute: #6c665c;
  --accent: #e8b464;
  --accent-soft: rgba(232, 180, 100, 0.14);
  --accent-2: #b8761f;
  --accent-ink: #16181d;
  --crit: #c0392b;
  --crit-soft: rgba(192, 57, 43, 0.10);
  --high: #d99633;
  --high-soft: rgba(232, 180, 100, 0.18);
  --med: #8a8478;
  --med-soft: rgba(138, 132, 120, 0.12);
  --low: #a39d8e;
  --low-soft: rgba(163, 157, 142, 0.12);
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

[data-theme="dark"] {
  /* Charcoal — opt-in via the topbar moon toggle. Original gold accent. */
  --bg: #16181d;
  --bg-tint: #1d1f25;
  --surface: #1a1c22;
  --surface-2: #20232a;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.16);
  --ink: #f0eadc;
  --ink-dim: #b9b2a3;
  --ink-mute: #8a8476;   /* 4.77:1 on #16181d — WCAG AA for normal text (CS-046; was #7c7669 at 3.93:1) */
  --accent: #e8b464;
  --accent-soft: rgba(232, 180, 100, 0.14);
  --accent-2: #c8a558;
  --accent-ink: #16181d;
  --crit: #e07a5f;
  --crit-soft: rgba(224, 122, 95, 0.18);
  --high: #e8b464;
  --high-soft: rgba(232, 180, 100, 0.16);
  --med: #b9b2a3;
  --med-soft: rgba(185, 178, 163, 0.14);
  --low: #7c7669;
  --low-soft: rgba(124, 118, 105, 0.14);
}

* { box-sizing: border-box; }

/* Custom scrollbars — defaults in dark mode look bright/white on macOS &
   Windows when a USB mouse is plugged in, which clashes hard with the
   charcoal theme. We theme them with the same surface/line tokens so
   they blend in. The * selector covers any scrollable container; the
   html/body rules act as the page-level fallback. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 6px;
  border: 2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); }
*::-webkit-scrollbar-corner { background: transparent; }
[data-theme="dark"] *::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-color: var(--bg); }
[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.36); }
[data-theme="dark"] { scrollbar-color: rgba(255,255,255,0.22) transparent; }

html, body {
  margin: 0; padding: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* Full-height app shell: make body a viewport-tall flex column so the page
   surface stretches to the bottom of the window on tall / large screens
   (no dead band below the content) and reflows live on resize. body's
   in-flow children are #shell-root (the sticky .topbar) and <main class="page">;
   #page-loader is position:fixed and out of flow. Default align-items:stretch
   reproduces normal block stacking, so this is benign on the marketing / legal
   pages that link this stylesheet but have no .page (they simply don't stretch). */
body {
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }

/* Visible keyboard-focus ring (CS-045). :focus-visible only matches
   keyboard / assistive-tech focus, so mouse clicks stay ring-free. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Top bar ──────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky; top: 0; z-index: 50;
}
.topbar-left { display: flex; align-items: center; gap: 32px; }
.logo {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--serif); font-size: 17px; font-weight: 500; letter-spacing: -0.01em;
}
.logo-mark { width: 22px; height: 22px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-dim);
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.nav a:hover { color: var(--ink); background: var(--bg-tint); }
.nav a.on { color: var(--ink); background: var(--accent-soft); }
.nav a.on::before {
  content: "◆"; color: var(--accent); font-size: 8px;
  margin-right: 6px; vertical-align: 2px;
}

.topbar-right { display: flex; align-items: center; gap: 14px; }

/* Subscriber profile chip */
.profile-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-2);
  cursor: pointer;
  font-size: 12.5px;
  transition: background 0.15s;
  font-family: var(--sans);
  color: var(--ink);
}
.profile-chip:hover { background: var(--bg-tint); }
.profile-chip .avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  font-family: var(--serif); font-size: 11px; font-weight: 500;
}
.profile-chip .meta { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.profile-chip .meta b { font-weight: 600; font-size: 12.5px; color: var(--ink); }
.profile-chip .meta span { font-size: 10.5px; color: var(--ink-mute); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.04em; }
.profile-chip svg { color: var(--ink-mute); }

.profile-menu {
  position: absolute; right: 32px; top: 56px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 8px;
  min-width: 320px;
  max-width: 360px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  z-index: 100;
  display: none;
}
.pm-section-head {
  font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-mute); padding: 8px 8px 6px;
  font-weight: 500;
}
.pm-chips {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 0 6px 8px;
}
.pm-chip {
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 500;
}
.pm-chip.industry {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.pm-chip.muted { color: var(--ink-mute); }
.pm-divider { border-top: 1px solid var(--line); margin: 4px 0; }
.profile-menu.open { display: block; }
.profile-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.profile-menu-item:hover { background: var(--bg-tint); }
.profile-menu-item.on { background: var(--accent-soft); }
.profile-menu-item .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  font-family: var(--serif); font-size: 12px;
}
.profile-menu-item .meta { line-height: 1.25; }
.profile-menu-item .meta b { display: block; font-size: 13px; }
.profile-menu-item .meta span { font-size: 11px; color: var(--ink-mute); font-family: var(--mono); }

.icon-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.icon-btn:hover { background: var(--bg-tint); color: var(--ink); }

/* ── Global time-filter pill (topbar) ─────────────────────
 * A segmented control sitting alongside the org switcher; clicking
 * persists a window selection (24h / 7d / 30d / All) and reloads. */
.time-filter {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-tint);
}
.time-filter-label {
  font-family: var(--mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-mute);
  padding: 0 8px 0 6px;
}
.time-filter button {
  background: transparent; border: none;
  padding: 5px 10px;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-dim);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.time-filter button:hover { color: var(--ink); }
.time-filter button.on { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 720px) {
  .time-filter-label { display: none; }
  .time-filter button { padding: 4px 8px; }
}

/* Archive button — small inline action used on every risk card across
   Dashboard / Risk / Mitigation. Designed to sit unobtrusively next to
   the severity badge without competing for attention. */
.btn-archive {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-mute);
  border-radius: 6px;
  padding: 3px 8px;
  font-family: var(--mono); font-size: 10.5px;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.btn-archive:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn-archive svg { width: 11px; height: 11px; }
.btn-archive.unarchive { color: var(--accent-2); border-color: var(--accent-2); }
.btn-archive.unarchive:hover { color: var(--accent); }

/* Subtle link-style button — used for "Download template" next to the
   supplier upload button. Reads as a tertiary action so it doesn't
   compete with the primary Upload CTA. */
.btn-link-subtle {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-mute);
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 1px dotted transparent;
  transition: color 0.12s, border-color 0.12s;
}
.btn-link-subtle:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Demo-mode banner: now uses the existing .demo-lock pattern below
   (dashed-border lock-icon card) for consistency with Risk + Mitigation.
   The standalone .demo-card class was retired 2026-05-28. */

/* ── Page layout ─────────────────────────────────────────── */
/* Page content spreads to the viewport width with a tight side gutter.
   Previously capped at 1480px which left huge dead bands on ultrawide /
   4K displays. Side gutters tightened 2026-05-28 (was 40px) so dense
   tables / multi-column grids breathe right out to the edges. */
.page {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 18px 20px 56px;
  /* Fill the leftover viewport height under the sticky topbar so the page
     surface always reaches the window bottom; flex-shrink:0 keeps content-tall
     pages at their natural height and scrolling normally. flex-direction:column
     lets a per-page work area opt into flex:1 to absorb the remaining height. */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 24px;
  gap: 24px; flex-wrap: wrap;
}
.page-title { display: flex; flex-direction: column; gap: 6px; }
.page-title .eyebrow {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); font-weight: 500;
}
.page-title h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 32px; font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.page-title h1 em { font-style: italic; color: var(--ink-dim); }
.page-title .sub {
  color: var(--ink-dim); font-size: 13.5px;
  margin-top: 2px;
}

/* Tailoring strip — shows on every authed page */
.tailored-strip {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ink-dim);
  margin-bottom: 22px;
}
.tailored-strip .lbl {
  font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent); font-weight: 600;
}
.tailored-strip .chip {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink);
}
.tailored-strip .chip.muted { color: var(--ink-mute); }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}
.card-title {
  font-family: var(--serif);
  font-size: 17px; font-weight: 500;
  letter-spacing: -0.01em;
}
.card-eyebrow {
  font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-mute); font-weight: 500;
}

/* ── Severity pills ──────────────────────────────────────── */
.sev {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600;
}
.sev::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.sev.crit { color: var(--crit); background: var(--crit-soft); }
.sev.high { color: var(--high); background: var(--high-soft); }
.sev.med  { color: var(--med);  background: var(--med-soft); }
.sev.low  { color: var(--low);  background: var(--low-soft); }

/* ── Tailored badge (the "matched your profile" callout) ──
   Subtle treatment (2026-05-25): risks frequently match 3-5 of the
   subscriber's tracked axes (supplier, commodity, region, lane,
   regulator), which under the old accent-on-accent styling turned the
   dashboard + risk cards into a wall of yellow chips. Now they read
   as quiet metadata: thin neutral border, muted text, no leading
   arrow. Still scannable for "did this match my profile" but no
   longer dominant. */
.tag-tailored {
  display: inline-flex; align-items: center;
  padding: 1px 7px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-mute); font-weight: 500;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 13px; font-weight: 500;
  cursor: pointer; border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
  background: transparent;
  color: var(--ink);
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }

.tweak-seg button.on { color: var(--accent-ink); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink-dim); }
.btn-ghost:hover { background: var(--bg-tint); color: var(--ink); }
.btn-accent {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.btn-accent:hover { background: var(--accent-2); border-color: var(--accent-2); }

/* ── Demo gating: lock banner + pill ─────────────────────── */
/* Shown after the visible (unlocked) risks on Risk + Mitigation pages
   when the user is browsing a demo profile. Lifts a sign-up CTA into
   their flow without ripping the rest of the dashboard away. */
.demo-lock {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; margin-top: 14px;
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  border-radius: 10px;
}
.demo-lock-glyph {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.demo-lock-body { flex: 1; min-width: 0; }
.demo-lock-title { font-family: var(--serif); font-size: 15px; color: var(--ink); font-weight: 500; }
.demo-lock-sub   { font-size: 12.5px; color: var(--ink-dim); margin-top: 4px; line-height: 1.5; }
.demo-lock-cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 9px 14px;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 7px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, transform 0.12s;
}
.demo-lock-cta:hover { background: var(--accent-2); transform: translateY(-1px); }
@media (max-width: 700px) { .demo-lock { flex-direction: column; align-items: flex-start; } }

/* "Demo preview" pill in the topbar — gives users a constant reminder
   they're not signed in, plus a one-click path to start the trial. */
.demo-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-mute); letter-spacing: 0.07em; text-transform: uppercase;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.demo-pill b { color: var(--accent); font-weight: 600; }
.demo-pill .demo-pill-live {
  font-style: normal; text-transform: none; letter-spacing: 0;
  padding-left: 9px; margin-left: 1px;
  border-left: 1px solid var(--accent);
  color: var(--ink-dim); font-size: 10px;
}
.demo-pill:hover { background: var(--accent-soft); color: var(--ink); }

/* When demo is active, blur + dim the row immediately AFTER the visible
   slice so users see "more is here, just locked". The class is opt-in
   per page (Risk/Mitigation list views). */
.demo-blurred-row {
  filter: blur(3px) saturate(0.5);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

/* ── Page-load overlay ───────────────────────────────────── */
/* Reuses the spinner SVG from the onboarding "Building your signal feed"
   step. Shown when the user clicks any cross-page nav so they get instant
   feedback while the next page boots + hits /api/state. */
.page-loader {
  position: fixed; inset: 0; z-index: 1000;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: all;
  animation: page-loader-fade 0.18s ease-out;
}
[data-theme="dark"] .page-loader { background: rgba(22, 24, 29, 0.78); }
.page-loader.show { display: flex; }
@keyframes page-loader-fade { from { opacity: 0; } to { opacity: 1; } }
.page-loader svg { display: block; }

/* Shared spinner rings — used by the page-loader overlay, the onboarding
   generate step, and the login loader. Strokes track the active theme so
   the SVG reads on both white and charcoal backgrounds. */
.fx-spinner-ring { stroke: var(--line-strong); fill: none; }
.fx-spinner-ring-inner { stroke: var(--line); }

/* ── Utility ─────────────────────────────────────────────── */
.fade-up {
  opacity: 0; transform: translateY(8px);
  animation: fadeUp 0.5s ease-out forwards;
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
.fade-up.delay-1 { animation-delay: 0.06s; }
.fade-up.delay-2 { animation-delay: 0.12s; }
.fade-up.delay-3 { animation-delay: 0.18s; }
.fade-up.delay-4 { animation-delay: 0.24s; }

.muted { color: var(--ink-mute); }
.mono  { font-family: var(--mono); }
.serif { font-family: var(--serif); }

/* Screen-reader-only text (CS-042 prerequisite) — standard clip-rect
   pattern: visually hidden, still announced by assistive tech. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Live-data badge in the topbar ───────────────────────── */
.live-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink-mute);
  white-space: nowrap;
}
.live-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-mute);
}
/* Use a stable green so the badge is visually distinct from the amber accent */
.live-badge.ok { color: #6fb59c; border-color: rgba(111, 181, 156, 0.35); background: rgba(111, 181, 156, 0.10); }
.live-badge.ok .dot { background: #6fb59c; box-shadow: 0 0 0 3px rgba(111, 181, 156, 0.22); animation: live-pulse 2.4s ease-in-out infinite; }
.live-badge.offline { color: var(--crit); border-color: rgba(224, 122, 95, 0.35); background: var(--crit-soft); }
.live-badge.offline .dot { background: var(--crit); }
.live-badge.loading .dot { animation: live-pulse 1s ease-in-out infinite; }
@keyframes live-pulse { 50% { box-shadow: 0 0 0 7px transparent; } }

/* ─────────────────────────────────────────────────────────────────────
 * Phone breakpoint (≤640px) — Tier 1 mobile usability pass.
 *
 * Goal: every workflow completable on a 375px-wide phone in portrait.
 * Non-goal: pixel-perfect mobile design (that's Tier 2).
 *
 * Rules of engagement for this block:
 *   • Only override at ≤640px. Tablet (768px+) and desktop look identical
 *     to what they did before mobile work started — verified manually.
 *   • Prefer hiding non-essential controls over re-layouts. Theme toggle,
 *     notif bell, demo pill chrome, and live-badge text all drop on phone
 *     because the topbar is the most constrained surface and these are
 *     all dashboard-page UI that the user can reach via the profile menu
 *     if absolutely needed.
 *   • Don't touch JS — Tier 1 is a CSS-only pass. The profile-menu dropdown
 *     re-uses its existing show/hide; we just make it sheet-sized so it's
 *     reachable from one thumb.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Page wrapper: tighter side padding, less top padding. Bottom padding
     stays generous so the last card never butts against the screen edge. */
  .page { padding: 16px 14px 64px; }
  .page-head { margin-bottom: 16px; gap: 14px; }
  .page-title h1 { font-size: 26px; line-height: 1.15; }
  .page-title .sub { font-size: 13px; }

  /* Topbar: stack into two rows so the page-nav can scroll horizontally
     under the logo+profile row. Phones don't have room for the desktop
     "everything on one line" layout — flex-wrap + a logo→profile-chip row
     plus a nav row below gives every link a real tappable hit area. */
  .topbar {
    flex-wrap: wrap;
    padding: 10px 14px;
    gap: 8px;
  }
  .topbar-left {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    order: 2;
  }
  .topbar-right { order: 1; margin-left: auto; gap: 8px; }

  /* Nav: full-width row 2, horizontal scroll if 4 links overflow. Smaller
     pad + smaller text since 320px-414px is tight. */
  .nav {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    flex: 0 0 auto;
    padding: 7px 12px;
    font-size: 12.5px;
  }

  /* Logo: still visible but compacted. The wordmark trims to just the SVG
     mark on very narrow widths to make room for the profile chip on the
     same row. Keeping the word for ≥380px so brand recognition isn't lost. */
  .logo { font-size: 16px; gap: 8px; }
  @media (max-width: 379px) {
    .logo { font-size: 0; }                 /* hide wordmark */
    .logo-mark { width: 24px; height: 24px; }
  }

  /* Secondary topbar controls (theme toggle + notif bell) — hidden on phone
     to claw back ~70px of horizontal real-estate. Both are still reachable
     by going to Profile → preferences for theme, and notifications are not
     yet a live feature anyway. */
  .topbar-right .icon-btn { display: none; }

  /* Live badge: keep the green dot (live/offline signal is meaningful) but
     drop the "LIVE · 12H AGO" text since we can't fit it without crowding. */
  .live-badge { padding: 4px 6px; font-size: 0; gap: 0; border-radius: 999px; }
  .live-badge .dot { width: 8px; height: 8px; }

  /* Demo pill: keep visible but compact — visitors in demo need a constant
     CTA back to signup. Replace the two-line "DEMO PREVIEW / Sign up →" with
     just the "Sign up →" half on phone (the DEMO context is already implied
     by their session). */
  .demo-pill { padding: 6px 10px; font-size: 11px; }
  .demo-pill span:not(b) { display: none; }    /* hide "DEMO PREVIEW" eyebrow */
  .demo-pill .demo-pill-live { display: none; }/* hide "Live from <date>" on phones */

  /* Profile chip: avatar-only on phone. Org name + role drop. The menu
     opens to a near-full-width sheet so target areas inside stay big. */
  .profile-chip { padding: 4px 6px; gap: 0; }
  .profile-chip .meta { display: none; }
  .profile-chip > svg { display: none; }       /* drop the chevron */

  /* Profile menu: full-width sheet below the topbar instead of a 320px
     dropdown that overflows the viewport on phone. */
  .profile-menu {
    right: 8px; left: 8px;
    width: auto;
    max-width: none;
    max-height: 70vh;
    overflow-y: auto;
  }

  /* Cards / surfaces — slightly tighter inner padding so content has room. */
  .card { padding: 16px 16px; }
  .card-head { padding: 14px 16px 10px; }
  .card-body { padding: 14px 16px; }
}



/* ── Mitigation / Risk filter bar ─────────────────────────────
   Single-row segmented filter bar shared between site/Risk.html and
   site/Mitigation.html. Lived in both HTML files as byte-identical
   <style> blocks until the Phase-6 audit moved it here. The class
   prefix `mit-` comes from the original Mitigation-page implementation;
   kept as-is so HTML markup didn't need re-classing.

   Layout: nowrap flex with horizontal-scroll escape on narrow viewports.
   Search input + selects flex to absorb space; segmented buttons stay
   their natural width. Cap removed from search field so the bar
   spreads evenly across the row.
   ─────────────────────────────────────────────────────────── */
.mit-filters {
  display: flex; flex-wrap: nowrap; gap: 10px; align-items: center;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.mit-filters::-webkit-scrollbar { height: 4px; }
.mit-filters::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }
.mit-filter-input {
  flex: 1 1 220px; min-width: 180px;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  color: var(--ink); padding: 8px 12px; border-radius: 7px;
  font-family: var(--sans); font-size: 13px; outline: none;
}
.mit-filter-input:focus { border-color: var(--accent); }
.mit-filter-input::placeholder { color: var(--ink-mute); }
.mit-filter-seg {
  display: inline-flex; border: 1px solid var(--line-strong);
  border-radius: 7px; overflow: hidden; flex: 0 0 auto;
}
.mit-filter-seg button {
  background: transparent; border: none;
  padding: 7px 11px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-mute);
  cursor: pointer;
  border-right: 1px solid var(--line);
}
.mit-filter-seg button:last-child { border-right: none; }
.mit-filter-seg button:hover { color: var(--ink); }
.mit-filter-seg button.on { background: var(--accent-soft); color: var(--accent); }
.mit-filter-select {
  flex: 1 1 160px; min-width: 140px;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  color: var(--ink); padding: 7px 28px 7px 11px; border-radius: 7px;
  font-family: var(--sans); font-size: 12.5px; outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a93a6' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  cursor: pointer;
}
.mit-filter-reset {
  flex: 0 0 auto;
  background: transparent; border: 1px solid var(--line); color: var(--ink-mute);
  padding: 6px 12px; border-radius: 6px;
  font-family: var(--mono); font-size: 11px; cursor: pointer;
}
.mit-filter-reset:hover { color: var(--ink); border-color: var(--ink-mute); }

/* Skip link (CS-045): visually hidden until keyboard-focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 3000;
  background: var(--surface);
  color: var(--ink);
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 0 0 8px 0;
  font-size: 13px;
}
.skip-link:focus { left: 0; }

/* Shared category icon (rendered by riskCatIcon / the Categories view). */
.fx-ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: none; }

/* "Your …" matches — a gold "Your…" lead-in, then subtle gold-outlined pills
   (no box/shading): the dimension word in gold + the matched value in ink. */
.tt-relevant { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
.tt-relevant .tt-lead {
  color: var(--accent); font-weight: 600; font-size: 12px; margin-right: 2px;
  background: var(--accent-soft); padding: 2px 9px; border-radius: 6px;
}
.tt-relevant .tt-pill {
  display: inline-flex; align-items: baseline; gap: 5px;
  background: transparent; border: 1px solid var(--accent);
  border-radius: 999px; padding: 2px 10px; font-size: 11.5px;
}
.tt-relevant .tt-pill .k { color: var(--accent); font-weight: 500; }
.tt-relevant .tt-pill b { color: var(--ink-dim); font-weight: 600; }
.tt-relevant.compact { gap: 5px; margin-top: 8px; }
.tt-relevant.compact .tt-lead { font-size: 11px; }
.tt-relevant.compact .tt-pill { font-size: 11px; padding: 1px 8px; }