/* ============================================================================
   fid-tokens.css — Frontline Intelligence design tokens + shared components
   ----------------------------------------------------------------------------
   Redesign Phase 1 (2026-08-18).

   LOAD ORDER MATTERS. This sheet is linked AFTER the large inline <style> block
   in index.html, so its single-class selectors win cascade ties without needing
   !important. Do not move it above that block.

   SCOPE. Everything here is namespaced `fid-` / `--fid-`. It adds a layer; it
   does not restyle existing markup. Panes migrate to these components one at a
   time, so the old and new systems coexist deliberately.

   COLOUR RULE (brief §6). Colour carries STATE, not decoration. Do not use
   red/amber/green merely to make a metric card colourful — reserve semantic
   colour for status or threshold meaning. Orange is the brand accent, current
   selection and primary action; it is NOT a generic warning colour.

   Every foreground/background pair below is verified at >= 4.5:1 (WCAG AA) on
   its intended surface — on its own tint, on white, and on the navy shell.
   ========================================================================== */

:root {
  /* ── Brand (mirrors the inline :root so components work standalone) ────── */
  --fid-navy:        #02123A;
  --fid-navy-deep:   #011030;
  --fid-navy-mid:    #163256;
  --fid-orange:      #FF5C00;

  /* ── Content canvas ─────────────────────────────────────────────────────
     Brief §6: "Move the page surface toward a lighter content canvas within
     the navy shell to reduce the long-dark-page effect while keeping the
     brand frame." The shell stays navy; the work surface becomes light. */
  --fid-canvas:      #F4F7FC;
  --fid-surface:     #FFFFFF;
  --fid-surface-2:   #F8FAFD;
  --fid-line:        #E1E9F5;
  --fid-line-strong: #C9D6EA;

  /* ── Text ───────────────────────────────────────────────────────────────── */
  --fid-text:        #17233A;
  --fid-text-2:      #4A5568;
  /* #6B7A94 measured 4.34:1 on white and 3.83:1 on the neutral tint — both
     below the 4.5:1 AA floor for body text, and this token carries every
     coverage line, denominator and provenance note in the redesign. Darkened
     on the same hue: 5.22:1 on white, 4.61:1 on the neutral tint, >=4.55:1 on
     every other tint background used here. */
  --fid-text-3:      #606D85;
  --fid-text-on-navy:    #FFFFFF;
  --fid-text-on-navy-2:  #A9B6CC;

  /* Brand orange behind white text. See .fid-btn.primary. */
  --fid-brand-btn:   #CF4B00;

  /* Form-control boundary. See .fid-select / .fid-input. */
  --fid-form-line:   #768BAF;

  /* ── SEMANTIC STATE FAMILIES ─────────────────────────────────────────────
     neutral  captured · inactive · historical · no action required
     info     routed · active work in progress · informational
     action   human action required · waiting too long · watch
     measure  measurement window running · waiting for impact
     good     improving · completed · positive measured impact
     bad      worsening · urgent operational risk · failed control
     brand    current selection · primary action  (never a warning)          */

  --fid-neutral-fg:    #4A5568;  --fid-neutral-bg:  #EEF1F6;  --fid-neutral-solid: #8A97B0;  --fid-neutral-on-navy: #A9B6CC;
  --fid-info-fg:       #1B4E8F;  --fid-info-bg:     #E6EFFB;  --fid-info-solid:    #2E6FD0;  --fid-info-on-navy:    #8FBBF2;
  --fid-action-fg:     #8A5000;  --fid-action-bg:   #FDF1DC;  --fid-action-solid:  #D98A00;  --fid-action-on-navy:  #F5C067;
  --fid-measure-fg:    #5B3A9B;  --fid-measure-bg:  #F0EAFB;  --fid-measure-solid: #7C4DD8;  --fid-measure-on-navy: #C4A9F5;
  --fid-good-fg:       #1A6B45;  --fid-good-bg:     #E4F4EC;  --fid-good-solid:    #18915C;  --fid-good-on-navy:    #6DD9A4;
  --fid-bad-fg:        #A32020;  --fid-bad-bg:      #FCEAEA;  --fid-bad-solid:     #D93030;  --fid-bad-on-navy:     #FF9A9A;
  --fid-brand-fg:      #B33F00;  --fid-brand-bg:    #FFEEE4;  --fid-brand-solid:   #FF5C00;  --fid-brand-on-navy:   #FF8A3D;

  /* ── Geometry — standardised so every module matches (brief §6) ─────────── */
  --fid-r-sm: 6px;  --fid-r:  10px;  --fid-r-lg: 14px;
  --fid-s-1: 4px;   --fid-s-2: 8px;  --fid-s-3: 12px;
  --fid-s-4: 16px;  --fid-s-5: 24px; --fid-s-6: 32px;
  --fid-shadow:    0 1px 2px rgba(2,18,58,.06), 0 1px 3px rgba(2,18,58,.05);
  --fid-shadow-lg: 0 20px 60px rgba(2,18,58,.30);

  /* ── Type ───────────────────────────────────────────────────────────────── */
  --fid-fs-micro: 9px;  --fid-fs-xs: 10px; --fid-fs-sm: 11px;
  --fid-fs-md:    12px; --fid-fs-lg: 14px; --fid-fs-xl: 18px;
  --fid-fs-num:   26px;

  /* Above the sticky header (100) and chat cards (500); below every modal
     (600-720). The nav drawer must clear the header but never a dialog. */
  --fid-z-drawer-nav: 520;
  --fid-z-drawer:     760;   /* evidence drawer sits above legacy modals */
  --fid-z-toast:      900;
}

/* ── Accessibility baseline ───────────────────────────────────────────────
   The audit found no visible focus style anywhere in the application. Every
   interactive element in this layer gets one. */
.fid-scope :focus-visible,
.fid-drawer :focus-visible,
.fid-nav :focus-visible {
  outline: 2px solid var(--fid-brand-solid);
  outline-offset: 2px;
  border-radius: var(--fid-r-sm);
}
@media (prefers-reduced-motion: reduce) {
  .fid-drawer, .fid-drawer-panel, .fid-nav-drawer { transition: none !important; }
}
.fid-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   STATUS CHIP
   One vocabulary, used identically everywhere. Status is never colour-only —
   each chip carries a text label, and the dot is supplementary.
   ═════════════════════════════════════════════════════════════════════════ */
.fid-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: var(--fid-fs-xs); font-weight: 700; line-height: 1.6;
  letter-spacing: .02em; white-space: nowrap;
  border: 1px solid transparent;
}
.fid-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.fid-chip.no-dot::before { display: none; }

.fid-chip.neutral { color: var(--fid-neutral-fg); background: var(--fid-neutral-bg); border-color: #DCE3ED; }
.fid-chip.info    { color: var(--fid-info-fg);    background: var(--fid-info-bg);    border-color: #CFE0F7; }
.fid-chip.action  { color: var(--fid-action-fg);  background: var(--fid-action-bg);  border-color: #F5DFB4; }
.fid-chip.measure { color: var(--fid-measure-fg); background: var(--fid-measure-bg); border-color: #DDD0F5; }
.fid-chip.good    { color: var(--fid-good-fg);    background: var(--fid-good-bg);    border-color: #C6E8D6; }
.fid-chip.bad     { color: var(--fid-bad-fg);     background: var(--fid-bad-bg);     border-color: #F5CFCF; }
.fid-chip.brand   { color: var(--fid-brand-fg);   background: var(--fid-brand-bg);   border-color: #FFD5BF; }

/* ══════════════════════════════════════════════════════════════════════════
   CARD + PAGE HEADER
   ═════════════════════════════════════════════════════════════════════════ */
.fid-card {
  background: var(--fid-surface); border: 1px solid var(--fid-line);
  border-radius: var(--fid-r); padding: var(--fid-s-4);
  box-shadow: var(--fid-shadow); color: var(--fid-text);
}
.fid-card + .fid-card { margin-top: var(--fid-s-2); }
.fid-card-h {
  display: flex; align-items: baseline; gap: var(--fid-s-2);
  margin: 0 0 var(--fid-s-2);
}
.fid-card-title {
  font-size: var(--fid-fs-md); font-weight: 800; color: var(--fid-navy);
  letter-spacing: .01em;
}
.fid-card-sub { font-size: var(--fid-fs-xs); color: var(--fid-text-3); font-weight: 600; }
.fid-card-h .fid-spacer { margin-left: auto; }

/* Page header pattern: title, one-line purpose, controls, then work surface. */
.fid-page-h {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--fid-s-3); padding: var(--fid-s-3) 0 var(--fid-s-3);
  border-bottom: 1px solid rgba(255,255,255,.10); margin-bottom: var(--fid-s-4);
}
.fid-page-h-text { flex: 1 1 320px; min-width: 0; }
.fid-page-title {
  font-size: var(--fid-fs-xl); font-weight: 800;
  color: var(--fid-text-on-navy); line-height: 1.2;
}
.fid-page-purpose {
  font-size: var(--fid-fs-sm); color: var(--fid-text-on-navy-2);
  margin-top: 3px; line-height: 1.5;
}
.fid-page-h-controls {
  display: flex; align-items: center; gap: var(--fid-s-2); flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS — one scale, replacing the 40+ ad-hoc styles found in the audit
   ═════════════════════════════════════════════════════════════════════════ */
.fid-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--fid-r-sm);
  font-family: inherit; font-size: var(--fid-fs-sm); font-weight: 700;
  cursor: pointer; border: 1px solid var(--fid-line-strong);
  background: var(--fid-surface); color: var(--fid-navy);
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.fid-btn:hover { background: var(--fid-surface-2); border-color: #A9BDD9; }
.fid-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Exactly ONE dominant action per queue item (brief §8 acceptance criteria). */
/* The brand orange #FF5C00 carries white text at only 3.1:1 — below AA for
   any text, and these buttons render at 10-11px. The fill is darkened on the
   same hue to 4.51:1 for the interactive variant ONLY; the brand orange itself
   is unchanged everywhere it is used as an accent rather than behind text. */
.fid-btn.primary {
  background: var(--fid-brand-btn); border-color: var(--fid-brand-btn); color: #fff;
}
.fid-btn.primary:hover { background: #B33F00; border-color: #B33F00; }
.fid-btn.ghost { background: transparent; border-color: transparent; color: var(--fid-info-fg); }
.fid-btn.ghost:hover { background: var(--fid-info-bg); }
.fid-btn.sm { padding: 4px 9px; font-size: var(--fid-fs-xs); }

/* ══════════════════════════════════════════════════════════════════════════
   LIFECYCLE RAIL
   Captured → Structured → Routed → Actioned → Measuring → Impact known.
   Reused across issue, KBA, training and feedback detail.
   ═════════════════════════════════════════════════════════════════════════ */
.fid-rail { display: flex; align-items: stretch; gap: 2px; margin: var(--fid-s-3) 0; flex-wrap: wrap; }
.fid-rail-step {
  flex: 1 1 92px; min-width: 84px; padding: 6px 8px 7px;
  background: var(--fid-neutral-bg); border-top: 3px solid var(--fid-line-strong);
  font-size: var(--fid-fs-micro); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--fid-text-3);
}
.fid-rail-step:first-child { border-radius: var(--fid-r-sm) 0 0 var(--fid-r-sm); }
.fid-rail-step:last-child  { border-radius: 0 var(--fid-r-sm) var(--fid-r-sm) 0; }
.fid-rail-step.done    { background: var(--fid-good-bg);    border-top-color: var(--fid-good-solid);    color: var(--fid-good-fg); }
.fid-rail-step.current { background: var(--fid-info-bg);    border-top-color: var(--fid-info-solid);    color: var(--fid-info-fg); }
.fid-rail-step.measuring { background: var(--fid-measure-bg); border-top-color: var(--fid-measure-solid); color: var(--fid-measure-fg); }
.fid-rail-meta { font-size: var(--fid-fs-xs); color: var(--fid-text-3); margin-top: 2px; text-transform: none; letter-spacing: 0; font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
   ATTENTION ITEM — the ranked work-queue row
   ═════════════════════════════════════════════════════════════════════════ */
.fid-att {
  display: flex; gap: var(--fid-s-3); align-items: flex-start;
  background: var(--fid-surface); border: 1px solid var(--fid-line);
  border-left: 4px solid var(--fid-action-solid);
  border-radius: var(--fid-r); padding: var(--fid-s-3) var(--fid-s-4);
  margin-bottom: var(--fid-s-2);
}
.fid-att.sev-high { border-left-color: var(--fid-bad-solid); }
.fid-att.sev-low  { border-left-color: var(--fid-info-solid); }
.fid-att.handled  { opacity: .55; border-left-color: var(--fid-good-solid); background: var(--fid-surface-2); }
.fid-att-score {
  flex-shrink: 0; min-width: 46px; text-align: center;
  background: var(--fid-neutral-bg); border-radius: var(--fid-r-sm); padding: 5px 4px;
}
.fid-att-score b { display: block; font-size: var(--fid-fs-lg); color: var(--fid-navy); line-height: 1.1; }
.fid-att-score span { font-size: var(--fid-fs-micro); color: var(--fid-text-3); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.fid-att-body { flex: 1; min-width: 0; }
.fid-att-name { font-size: var(--fid-fs-lg); font-weight: 800; color: var(--fid-navy); }
.fid-att-meta { font-size: var(--fid-fs-xs); color: var(--fid-text-3); margin-top: 1px; }
.fid-att-reasons { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--fid-s-2); }
.fid-att-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }

/* Zero-point context reasons must READ as context, never as a charge. */
.fid-chip.context {
  color: var(--fid-text-3); background: transparent;
  border: 1px dashed var(--fid-line-strong); font-weight: 600;
}
.fid-chip.context::before { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   METRIC CARD — value, direction, period, coverage, source
   "Denominators matter" (brief §2): survey-based and AI-derived metrics must
   display coverage where interpretation depends on it.
   ═════════════════════════════════════════════════════════════════════════ */
.fid-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--fid-s-2); }
.fid-metric {
  background: var(--fid-surface); border: 1px solid var(--fid-line);
  border-radius: var(--fid-r); padding: var(--fid-s-3) var(--fid-s-4);
}
.fid-metric-label {
  font-size: var(--fid-fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--fid-text-3);
  display: flex; align-items: center; gap: 4px;
}
.fid-metric-val {
  font-size: var(--fid-fs-num); font-weight: 800; color: var(--fid-navy);
  line-height: 1.15; margin-top: 3px; display: flex; align-items: baseline; gap: 6px;
}
.fid-metric-unit { font-size: var(--fid-fs-lg); font-weight: 700; color: var(--fid-text-2); }
.fid-metric-dir { font-size: var(--fid-fs-sm); font-weight: 800; }
.fid-metric-dir.good { color: var(--fid-good-fg); }
.fid-metric-dir.bad  { color: var(--fid-bad-fg); }
.fid-metric-dir.flat { color: var(--fid-text-3); }
.fid-metric-foot {
  font-size: var(--fid-fs-xs); color: var(--fid-text-3); margin-top: 5px;
  display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center;
}
.fid-metric-cov { color: var(--fid-text-3); font-weight: 600; }
/* Insufficient sample must NOT render as a confident coloured percentage. */
.fid-metric.low-sample .fid-metric-val { color: var(--fid-text-3); }
.fid-metric.low-sample .fid-metric-dir { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   AI INSIGHT CARD — one conclusion, why it matters, evidence path
   "No silent AI certainty": every insight exposes evidence and provenance.
   ═════════════════════════════════════════════════════════════════════════ */
.fid-ai {
  background: linear-gradient(180deg, #F7F4FE 0%, var(--fid-surface) 100%);
  border: 1px solid #E2D9F7; border-left: 4px solid var(--fid-measure-solid);
  border-radius: var(--fid-r); padding: var(--fid-s-3) var(--fid-s-4);
}
.fid-ai-lbl {
  font-size: var(--fid-fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--fid-measure-fg);
  display: flex; align-items: center; gap: 6px; margin-bottom: 5px;
}
.fid-ai-concl { font-size: var(--fid-fs-lg); font-weight: 700; color: var(--fid-navy); line-height: 1.45; }
.fid-ai-why   { font-size: var(--fid-fs-md); color: var(--fid-text-2); line-height: 1.55; margin-top: 5px; }
.fid-ai-foot  { display: flex; align-items: center; gap: var(--fid-s-2); margin-top: var(--fid-s-2); flex-wrap: wrap; }
.fid-ai-prov  { font-size: var(--fid-fs-xs); color: var(--fid-text-3); }

/* ══════════════════════════════════════════════════════════════════════════
   IMPACT CARD — verdict, before/after, coverage, next recommendation
   ═════════════════════════════════════════════════════════════════════════ */
.fid-impact { border-radius: var(--fid-r); border: 1px solid var(--fid-line); padding: var(--fid-s-3) var(--fid-s-4); background: var(--fid-surface); }
.fid-impact.good    { border-left: 4px solid var(--fid-good-solid); }
.fid-impact.bad     { border-left: 4px solid var(--fid-bad-solid); }
.fid-impact.flat    { border-left: 4px solid var(--fid-neutral-solid); }
.fid-impact.measure { border-left: 4px solid var(--fid-measure-solid); }
.fid-impact-verdict { font-size: var(--fid-fs-md); font-weight: 800; color: var(--fid-navy); }
.fid-impact-nums    { font-size: var(--fid-fs-xl); font-weight: 800; margin: 3px 0; color: var(--fid-navy); }
.fid-impact-nums .from { color: var(--fid-text-3); }
.fid-impact-nums .arrow { color: var(--fid-text-3); margin: 0 6px; font-weight: 600; }
.fid-impact-note    { font-size: var(--fid-fs-xs); color: var(--fid-text-3); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════════════
   ATTRIBUTION BLOCK — Raised by / Affected area / Root cause owner
   Prevents a reporter being read as the cause. See dashboard.py _attribution.
   ═════════════════════════════════════════════════════════════════════════ */
.fid-attrib {
  display: flex; flex-wrap: wrap; gap: var(--fid-s-2) var(--fid-s-5);
  background: var(--fid-surface-2); border: 1px solid var(--fid-line);
  border-radius: var(--fid-r-sm); padding: var(--fid-s-2) var(--fid-s-3);
  margin: var(--fid-s-2) 0;
}
.fid-attrib-cell { min-width: 118px; }
.fid-attrib-k {
  font-size: var(--fid-fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--fid-text-3);
}
.fid-attrib-v { font-size: var(--fid-fs-md); font-weight: 700; color: var(--fid-navy); margin-top: 1px; }
.fid-attrib-v.none { color: var(--fid-text-3); font-weight: 600; font-style: italic; }
.fid-attrib-note { flex-basis: 100%; font-size: var(--fid-fs-xs); color: var(--fid-text-3); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════════════
   EVIDENCE DRAWER — the shared "why is this here" surface
   Side sheet on desktop, full-height sheet on small screens.
   ═════════════════════════════════════════════════════════════════════════ */
.fid-drawer {
  position: fixed; inset: 0; z-index: var(--fid-z-drawer);
  background: rgba(2,18,58,.55); display: none;
}
.fid-drawer.open { display: block; }
.fid-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(560px, 100vw); background: var(--fid-canvas);
  display: flex; flex-direction: column;
  box-shadow: var(--fid-shadow-lg);
  transform: translateX(100%); transition: transform .18s ease-out;
}
.fid-drawer.open .fid-drawer-panel { transform: translateX(0); }
.fid-drawer-h {
  background: var(--fid-navy); padding: var(--fid-s-4);
  display: flex; align-items: flex-start; gap: var(--fid-s-3); flex-shrink: 0;
}
.fid-drawer-eyebrow {
  font-size: var(--fid-fs-micro); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fid-brand-on-navy); margin-bottom: 3px;
}
.fid-drawer-title { font-size: var(--fid-fs-xl); font-weight: 800; color: #fff; line-height: 1.25; }
.fid-drawer-sub   { font-size: var(--fid-fs-sm); color: var(--fid-text-on-navy-2); margin-top: 3px; }
.fid-drawer-x {
  background: none; border: none; color: rgba(255,255,255,.6);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0;
}
.fid-drawer-x:hover { color: #fff; }
.fid-drawer-body { padding: var(--fid-s-4); overflow-y: auto; flex: 1; }
.fid-drawer-foot {
  padding: var(--fid-s-3) var(--fid-s-4); background: var(--fid-surface);
  border-top: 1px solid var(--fid-line); display: flex; gap: var(--fid-s-2);
  justify-content: flex-end; flex-shrink: 0; flex-wrap: wrap;
}
.fid-ev-sec { margin-bottom: var(--fid-s-4); }
.fid-ev-h {
  font-size: var(--fid-fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--fid-text-3); margin-bottom: var(--fid-s-2);
  padding-bottom: 4px; border-bottom: 1px solid var(--fid-line);
}
.fid-ev-row {
  display: flex; gap: var(--fid-s-2); padding: 7px 0;
  border-bottom: 1px solid var(--fid-line); font-size: var(--fid-fs-md);
  color: var(--fid-text); line-height: 1.5;
}
.fid-ev-row:last-child { border-bottom: none; }
.fid-ev-row .k { color: var(--fid-text-3); font-weight: 700; min-width: 108px; flex-shrink: 0; }
.fid-ev-row .v { flex: 1; min-width: 0; word-break: break-word; }
.fid-ev-pts { margin-left: auto; font-weight: 800; color: var(--fid-navy); flex-shrink: 0; }
.fid-ev-pts.zero { color: var(--fid-text-3); font-weight: 600; }
.fid-ev-src { font-size: var(--fid-fs-xs); color: var(--fid-text-3); margin-top: 2px; }

/* ══════════════════════════════════════════════════════════════════════════
   EMPTY STATE — "no actions today" should read as success, never a blank page
   ═════════════════════════════════════════════════════════════════════════ */
.fid-empty {
  background: var(--fid-surface); border: 1px dashed var(--fid-line-strong);
  border-radius: var(--fid-r); padding: var(--fid-s-5) var(--fid-s-4);
  text-align: center; color: var(--fid-text-2);
}
.fid-empty.done { border-style: solid; border-color: #C6E8D6; background: var(--fid-good-bg); }
.fid-empty-icon { font-size: 22px; line-height: 1; margin-bottom: 6px; }
.fid-empty-title { font-size: var(--fid-fs-lg); font-weight: 800; color: var(--fid-navy); }
.fid-empty.done .fid-empty-title { color: var(--fid-good-fg); }
.fid-empty-txt { font-size: var(--fid-fs-md); margin-top: 4px; line-height: 1.55; max-width: 46ch; margin-inline: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   SKELETON — preserve page structure while loading, don't shift controls
   ═════════════════════════════════════════════════════════════════════════ */
.fid-skel {
  background: linear-gradient(90deg, #EDF1F8 25%, #F6F9FD 50%, #EDF1F8 75%);
  background-size: 200% 100%; animation: fid-shimmer 1.3s linear infinite;
  border-radius: var(--fid-r-sm); height: 12px; margin: 6px 0;
}
.fid-skel.row { height: 58px; border-radius: var(--fid-r); margin-bottom: var(--fid-s-2); }
@keyframes fid-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .fid-skel { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   FRESHNESS BADGE — every page shows where its data came from and when
   ═════════════════════════════════════════════════════════════════════════ */
.fid-fresh {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 3px 9px; border-radius: 999px; font-size: var(--fid-fs-xs);
  font-weight: 700; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06); color: var(--fid-text-on-navy-2);
}
.fid-fresh:hover { background: rgba(255,255,255,.12); }
.fid-fresh.ok      { color: var(--fid-good-on-navy); }
.fid-fresh.stale   { color: var(--fid-action-on-navy); border-color: rgba(245,192,103,.5); }
.fid-fresh.unknown { color: var(--fid-neutral-on-navy); }
/* Stale data must be loud, not a footnote. */
.fid-stale-banner {
  background: var(--fid-action-bg); border: 1px solid #F5DFB4;
  border-left: 4px solid var(--fid-action-solid); border-radius: var(--fid-r);
  padding: var(--fid-s-3) var(--fid-s-4); margin-bottom: var(--fid-s-3);
  font-size: var(--fid-fs-md); color: var(--fid-action-fg); line-height: 1.55;
}
.fid-stale-banner b { color: #6E3F00; }

/* ══════════════════════════════════════════════════════════════════════════
   ROLE-AWARE GLOBAL NAVIGATION
   Replaces the flex-nowrap tab strip that overflowed at ~1385px against a
   1280px viewport. Wraps instead of scrolling; groups instead of listing.
   ═════════════════════════════════════════════════════════════════════════ */
.fid-nav {
  background: var(--fid-navy-deep); border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; gap: 2px;
  padding: 0 var(--fid-s-3);
  flex-wrap: wrap;            /* the actual overflow fix — wrap, never scroll */
  overflow: visible;
  position: sticky; top: 46px; z-index: 90;
}
.fid-nav-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 13px; font-size: var(--fid-fs-sm); font-weight: 700;
  color: rgba(255,255,255,.55); cursor: pointer; background: none; border: none;
  border-bottom: 2px solid transparent; font-family: inherit; white-space: nowrap;
  transition: color .12s, border-color .12s;
}
.fid-nav-item:hover { color: rgba(255,255,255,.85); border-bottom-color: rgba(255,92,0,.35); }
.fid-nav-item[aria-current="page"] { color: #fff; border-bottom-color: var(--fid-orange); }
.fid-nav-item .fid-nav-count {
  background: var(--fid-brand-solid); color: #fff; border-radius: 999px;
  font-size: var(--fid-fs-micro); font-weight: 800; padding: 1px 6px; min-width: 16px; text-align: center;
}
.fid-nav-spacer { margin-left: auto; }

/* Secondary destinations live behind "More" so the primary row stays short. */
.fid-nav-more { position: relative; }
.fid-nav-menu {
  position: absolute; top: 100%; right: 0; min-width: 210px;
  background: var(--fid-surface); border: 1px solid var(--fid-line);
  border-radius: var(--fid-r); box-shadow: var(--fid-shadow-lg);
  padding: 5px; z-index: var(--fid-z-drawer-nav); display: none;
}
.fid-nav-more.open .fid-nav-menu { display: block; }
.fid-nav-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 8px 10px; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: var(--fid-fs-md); font-weight: 600;
  color: var(--fid-text); border-radius: var(--fid-r-sm);
}
.fid-nav-menu button:hover { background: var(--fid-info-bg); color: var(--fid-info-fg); }
.fid-nav-menu .fid-nav-group {
  font-size: var(--fid-fs-micro); font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--fid-text-3); padding: 7px 10px 3px;
}

/* Persistent capture launcher — the front door to the intelligence loop. */
.fid-capture-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--fid-brand-btn);
  /* --fid-orange behind white text measured 3.1:1. See .fid-btn.primary. */
  background: var(--fid-brand-btn); color: #fff; cursor: pointer;
  font-family: inherit; font-size: var(--fid-fs-sm); font-weight: 700; white-space: nowrap;
}
.fid-capture-btn:hover { background: #B33F00; border-color: #B33F00; }
.fid-capture-btn.subtle {
  background: transparent; color: var(--fid-brand-on-navy);
  border-color: rgba(255,138,61,.55);
}
.fid-capture-btn.subtle:hover { background: rgba(255,92,0,.14); }

/* ── Responsive ─────────────────────────────────────────────────────────────
   Brief §3.2: no page requires horizontal document scrolling at 1280px;
   below tablet the nav collapses and queues stack; metric grids reduce
   columns rather than shrink typography. */
@media (max-width: 900px) {
  .fid-att { flex-wrap: wrap; }
  .fid-att-actions { width: 100%; justify-content: flex-end; }
}
@media (max-width: 700px) {
  .fid-nav { padding: 0 var(--fid-s-2); position: static; }
  .fid-nav-item { padding: 9px 10px; font-size: var(--fid-fs-xs); }
  .fid-drawer-panel { width: 100vw; }
  .fid-metrics { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .fid-page-h { flex-direction: column; gap: var(--fid-s-2); }
  .fid-rail-step { flex-basis: 33%; }
  .fid-attrib { gap: var(--fid-s-2); }
}

/* Dense analytical tables may scroll INSIDE the table only, never the page. */
.fid-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fid-tablewrap > table { min-width: 100%; }

/* Print: the redesign brief flagged Admin printing to ~46 pages. Collapse
   chrome and drawers so printed output is the work surface only. */
@media print {
  .fid-nav, .fid-drawer, .fid-capture-btn, .fid-btn { display: none !important; }
  .fid-card, .fid-att, .fid-metric { box-shadow: none; break-inside: avoid; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION HEAD ON THE NAVY CANVAS
   Panes render directly on the navy page background, so a section title needs
   light text. Using .fid-card-title (navy) outside a white card renders
   navy-on-navy and disappears entirely.
   ═════════════════════════════════════════════════════════════════════════ */
.fid-sec-h {
  display: flex; align-items: baseline; gap: var(--fid-s-2);
  margin: var(--fid-s-4) 0 var(--fid-s-2); flex-wrap: wrap;
}
.fid-sec-title {
  font-size: var(--fid-fs-lg); font-weight: 800; color: var(--fid-text-on-navy);
  letter-spacing: .01em;
}
.fid-sec-sub { font-size: var(--fid-fs-xs); color: var(--fid-text-on-navy-2); font-weight: 600; }
/* Explanatory notes that sit on the navy canvas rather than on a light surface.
   ONLY the direct-child case. The earlier `.fid-scope > div > .fid-ev-src` arm
   tried to guess the backdrop from DOM position and got it wrong twice: it
   matched a .fid-card that was a direct child of the scope (2.05:1), and it
   matched the attendee picker whose host sits on the legacy form's near-white
   background (1.96:1). A selector cannot see what colour is painted behind it,
   so it no longer tries — anything nested opts in explicitly via .fid-on-navy. */
.fid-scope > .fid-ev-src,
.fid-on-navy .fid-ev-src,
.fid-ev-src.fid-on-navy { color: var(--fid-text-on-navy-2); }
/* A scope host injected into a light legacy surface opts back out. */
.fid-scope.fid-on-light > .fid-ev-src,
.fid-on-light .fid-ev-src { color: var(--fid-text-3); }

/* ══════════════════════════════════════════════════════════════════════════
   ROW CARD — a card laid out as [icon | body | actions]
   Used by the My View focus list and the Coaching focus themes. It needs the
   same wrapping behaviour as .fid-att: on a narrow viewport the action column
   must drop to its own full-width row rather than pushing the card past the
   viewport. Without this the buttons overflowed to 409px on a 390px screen.
   ═════════════════════════════════════════════════════════════════════════ */
.fid-row-card {
  display: flex; gap: var(--fid-s-3); align-items: flex-start;
  margin-bottom: var(--fid-s-2);
}
.fid-row-card > .fid-row-body { flex: 1; min-width: 0; }
@media (max-width: 900px) {
  .fid-row-card { flex-wrap: wrap; }
  .fid-row-card .fid-att-actions { width: 100%; justify-content: flex-end; }
}
/* Belt and braces: action clusters never force a container wider than itself. */
.fid-att-actions { max-width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   OPPORTUNITY MATRIX  (redesign Phase 5)
   Positioned HTML rather than a scaled SVG: a viewBox scales its own text with
   the container, which rendered the axis labels at roughly 6px and letterboxed
   the plot into a narrow strip in the centre of the card. Percentages give the
   same positions at any width and leave the labels as real text.
   ═════════════════════════════════════════════════════════════════════════ */
.fid-mx {
  display: grid; grid-template-columns: 16px 1fr; grid-template-rows: 1fr 18px;
  gap: 4px; margin: 4px 0 8px;
}
.fid-mx-y {
  grid-column: 1; grid-row: 1; writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: var(--fid-fs-xs); color: var(--fid-text-3); font-weight: 600;
  /* rotate(180deg) flips the block, so flex-end puts the label at the TOP of
     the axis — beside the high-pain end it describes. */
  display: flex; align-items: flex-start; justify-content: flex-end; white-space: nowrap;
}
.fid-mx-plot {
  grid-column: 2; grid-row: 1; position: relative; height: 200px;
  border-left: 1px solid var(--fid-line-strong);
  border-bottom: 1px solid var(--fid-line-strong);
  background: var(--fid-surface);
}
.fid-mx-x {
  grid-column: 2; grid-row: 2; display: flex; justify-content: space-between;
  font-size: var(--fid-fs-xs); color: var(--fid-text-3); font-weight: 600;
}
/* The quadrant the caption points at, drawn at the same thresholds that decide
   which points turn red — so the claim is visible rather than asserted. */
.fid-mx-quad {
  position: absolute; top: 0; right: 0; background: var(--fid-bad-bg); opacity: .55;
  pointer-events: none;
}
.fid-mx-hline, .fid-mx-vline { position: absolute; pointer-events: none; }
.fid-mx-hline { left: 0; right: 0; border-top: 1px dashed var(--fid-line-strong); }
.fid-mx-vline { top: 0; bottom: 0; border-left: 1px dashed var(--fid-line-strong); }
.fid-mx-dot {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, 50%);
  background: var(--fid-info-solid); border: 1.5px solid var(--fid-surface);
  cursor: help;
}
.fid-mx-dot.hot { width: 14px; height: 14px; background: var(--fid-bad-solid); }
.fid-mx-dot:hover { outline: 2px solid var(--fid-navy); outline-offset: 1px; }
/* Hover-only detail is not available on touch or to a screen reader, so the
   same points are always readable as a list. */
.fid-mx-tbl > summary {
  cursor: pointer; font-size: var(--fid-fs-xs); font-weight: 700;
  color: var(--fid-info-fg); margin-top: 4px;
}
@media (max-width: 700px) {
  .fid-mx-plot { height: 150px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FORM CONTROLS + BAR  (redesign Phase 6)
   The redesign layer had no form primitives — every earlier phase only ever
   read. Phase 6 assigns owners and adjudicates, so it needs inputs that match
   the rest of the system rather than borrowing the legacy pane's styles.
   ═════════════════════════════════════════════════════════════════════════ */
.fid-select, .fid-input {
  font-family: inherit; font-size: var(--fid-fs-sm); color: var(--fid-text);
  /* NOT --fid-line-strong (#C9D6EA): that measures 1.47:1 on white, and WCAG
     1.4.11 requires 3:1 for the boundary of a form control. Dividers may stay
     light; something you are meant to click into may not. */
  background: var(--fid-surface); border: 1.5px solid var(--fid-form-line);
  border-radius: var(--fid-r-sm); padding: 7px 10px; box-sizing: border-box;
}
.fid-select:focus, .fid-input:focus {
  outline: 2px solid var(--fid-info-solid); outline-offset: 1px;
  border-color: var(--fid-info-solid);
}
.fid-input { line-height: 1.5; resize: vertical; }

/* Proportion bar for cause frequency. Deliberately not a chart: it sits inside
   an evidence row where the number beside it is the fact and the bar is only a
   shape hint. */
.fid-bar {
  height: 6px; border-radius: 999px; background: var(--fid-neutral-bg);
  overflow: hidden; margin: 3px 0 2px;
}
.fid-bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: var(--fid-info-solid); min-width: 2px;
}

/* The card header is a single flex row, so a status chip on the right pushes
   past a narrow viewport instead of dropping below the title — the CCMF cluster
   header overflowed to 396px on a 390px screen. Same fix as .fid-row-card. */
@media (max-width: 700px) {
  .fid-card-h { flex-wrap: wrap; row-gap: 4px; }
  .fid-card-h .fid-spacer { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 7 — narrative clamp, bounded tables, danger zone
   ═════════════════════════════════════════════════════════════════════════ */

/* The exec AI narrative is three full paragraphs with no clamp of any kind,
   sitting above everything actionable on the page. Clamped to a readable
   opening with an explicit "read the full briefing" — the text is not hidden,
   it just stops being the first thing between you and a decision. */
.fid-clamp {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.fid-clamp.fid-clamp-open {
  display: block; -webkit-line-clamp: unset; overflow: visible;
}

/* Rows past a stated cap. Hidden, never removed — "show all" must be able to
   bring them back without a refetch. */
.fid-row-hidden { display: none !important; }
.fid-cap-note { margin-top: 6px; }

/* Danger zone. Deliberately unlike every other card on the platform: if it
   looks the same as the rest, it reads as the same kind of action. */
.fid-card.fid-danger {
  border: 2px solid var(--fid-bad-solid);
  background: var(--fid-bad-bg);
}
.fid-card.fid-danger .fid-ev-row { border-color: rgba(192, 57, 43, .25); }
.fid-card.fid-danger .fid-btn {
  border-color: var(--fid-bad-solid); color: var(--fid-bad-fg);
  background: var(--fid-surface);
}
.fid-card.fid-danger .fid-btn:hover { background: #FFECEA; }
.fid-card.fid-danger code {
  font-size: var(--fid-fs-xs); background: var(--fid-surface);
  padding: 1px 4px; border-radius: 3px;
}

/* Data table. There was a .fid-tablewrap but no table style — every earlier
   phase rendered rows as cards. The paginated user list is the first place the
   redesign genuinely wants a table. */
.fid-table { width: 100%; border-collapse: collapse; font-size: var(--fid-fs-sm); }
.fid-table th {
  text-align: left; font-size: var(--fid-fs-micro); font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--fid-text-3);
  padding: 6px 8px; border-bottom: 1px solid var(--fid-line-strong);
  white-space: nowrap;
}
.fid-table td {
  padding: 7px 8px; border-bottom: 1px solid var(--fid-line);
  color: var(--fid-text); vertical-align: middle;
}
.fid-table tr:last-child td { border-bottom: 0; }
.fid-table tbody tr:hover { background: var(--fid-surface-2); }

/* The danger-zone rows put several action buttons in an .fid-ev-row, which is a
   fixed two-column grid — three buttons pushed the card to 428px on a 390px
   screen. Wrap them into their own full-width row instead. */
.fid-card.fid-danger .fid-ev-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start;
}
.fid-card.fid-danger .fid-ev-row > .k { flex: 0 0 100%; }
.fid-card.fid-danger .fid-ev-row > .v { flex: 1 1 100%; }
.fid-card.fid-danger .fid-ev-row > .fid-btn { flex: 0 0 auto; }

/* ── Operational episode chain (Integrity & Trust Package D) ──────────────────
   trigger → failure → impact → response. A fixed-width label column so the
   four steps read as a sequence rather than four unrelated sentences.
   --fid-info-fg on --fid-info-bg is a validated pair in this file. */
.fid-ep-step {
  flex: 0 0 66px;
  font-size: var(--fid-fs-xs);
  font-weight: 700;
  color: var(--fid-info-fg);
  background: var(--fid-info-bg);
  border-radius: 6px;
  padding: 1px 6px;
  text-align: center;
  cursor: help;
}