/* ==========================================================================
   FCA Regulatory Reporting Centre — shared stylesheet for the screen designs
   ==========================================================================

   One sheet, one system. Every screen file under `screens/` links this file
   and uses only the classes defined here, so the whole set reads as one
   console rather than a dozen mock-ups.

   Every value below was measured from the running console. The file each
   token came from is named in `screens/README.md`, section "Design tokens
   measured from the console" — the short form is:

     website/app/components/v2/tokens.css     the shell, the surfaces, the ink,
                                              the pills, the table, the stepper,
                                              the stat tile, the fields, the
                                              timeline, the radii, the shadows
     website/app/components/v2/new/nav-data.js  the hub accent for Compliance
                                              & Regulatory, which is the hub the
                                              centre lives in
     website/public/assets/css/theme.min.css  the DashUI page theme the existing
                                              FCA pages are drawn in
     website/public/assets/css/style.css      the console's own link colour
     website/app/root.jsx                     the families the console loads
     website/app/routes/fca-reporting/*.jsx   the page conventions the centre
                                              extends

   Self-contained: no imports, no CDN, no script, no icon font. The console
   loads Manrope, Sora, Inter and Poppins itself (website/app/root.jsx and
   website/app/components/v2/tokens.css); this sheet names the same families
   and follows each with a real fallback stack, so a screen file opened on its
   own still renders correctly in the system face.

   Single theme. The console has no `prefers-color-scheme` block anywhere in
   its stylesheets; its dark palette is opt-in through a `data-theme="dark"`
   attribute that the staff console never sets. So this sheet paints one light
   palette explicitly and does not guess at a dark one.

   British English throughout, and the platform's own words: a customer sends,
   a beneficiary receives, a partner pays out, a refusal is a sentence.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces ------------------------------------------------------------- */
  --fca-page:            #f6f7fb;   /* the ground behind every page          */
  --fca-page-2:          #eef0f6;   /* the recessed ground: toolbars, footers */
  --fca-surface:         #ffffff;   /* cards, tables, the top bar            */
  --fca-surface-2:       #fafbff;   /* table headers, form footers, wells    */
  --fca-rail:            #0b1220;   /* the console's icon rail, top of gradient */
  --fca-rail-2:          #131c2f;   /* bottom of the rail gradient           */

  /* Ink ------------------------------------------------------------------ */
  --fca-ink:             #0f172a;   /* body text, figures, headings          */
  --fca-ink-2:           #475569;   /* secondary text, consequence lines     */
  --fca-muted:           #94a3b8;   /* labels, column headers, meta          */
  --fca-ink-4:           #cbd5e1;   /* separators in text, disabled glyphs   */
  --fca-rail-ink:        #cbd5e1;
  --fca-rail-ink-mute:   #6b7693;

  /* Lines ---------------------------------------------------------------- */
  --fca-line:            #e6e8ef;   /* card and table borders                */
  --fca-line-2:          #eef0f6;   /* row rules inside a card               */

  /* Brand and semantics -------------------------------------------------- */
  --fca-brand:           #4361ee;   /* the console's product blue            */
  --fca-brand-soft:      #eaf0ff;
  --fca-accent:          #ec4899;   /* the Compliance & Regulatory hub accent.
                                       Change this one line and the whole
                                       centre re-tints, exactly as the console
                                       re-tints per hub.                     */
  --fca-accent-soft:     #fdf2f8;
  --fca-success:         #10b981;
  --fca-success-soft:    #d1fae5;
  --fca-success-ink:     #065f46;
  --fca-warning:         #f59e0b;
  --fca-warning-soft:    #fef3c7;
  --fca-warning-ink:     #92400e;
  --fca-danger:          #ef4444;
  --fca-danger-soft:     #fee2e2;
  --fca-danger-ink:      #991b1b;
  --fca-info:            #0ea5e9;
  --fca-info-soft:       #e0f2fe;
  --fca-info-ink:        #075985;

  /* The legacy page theme the current FCA pages are drawn in. Kept so a
     screen can show a control that has not been redrawn yet without
     inventing a colour for it. */
  --fca-legacy-primary:  #203a82;
  --fca-legacy-body:     #f1f5f9;

  /* Type ----------------------------------------------------------------- */
  --fca-font:            'Manrope', 'Inter', -apple-system, BlinkMacSystemFont,
                         'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fca-font-display:    'Sora', 'Manrope', -apple-system, BlinkMacSystemFont,
                         'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fca-font-mono:       ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
                         'Liberation Mono', 'Courier New', monospace;

  --fca-text-xs:         10.5px;    /* column headers, pills, eyebrows       */
  --fca-text-sm:         11.5px;    /* meta, consequence lines, hashes       */
  --fca-text-base:       13px;      /* table cells, controls, body           */
  --fca-text-md:         13.5px;    /* nav rows, timeline first lines        */
  --fca-text-lg:         16px;      /* card titles                           */
  --fca-text-xl:         19px;      /* section titles, hub title             */
  --fca-text-2xl:        26px;      /* page title                            */
  --fca-figure:          28px;      /* a KPI figure                          */

  /* Spacing — a 4px base with the console's 6 / 10 / 14 / 18 / 22 half-steps */
  --fca-s-05:            2px;
  --fca-s-1:             4px;
  --fca-s-15:            6px;
  --fca-s-2:             8px;
  --fca-s-25:            10px;
  --fca-s-3:             12px;
  --fca-s-35:            14px;
  --fca-s-4:             16px;
  --fca-s-45:            18px;
  --fca-s-5:             22px;
  --fca-s-6:             24px;
  --fca-s-7:             28px;
  --fca-s-8:             40px;

  /* Radii ---------------------------------------------------------------- */
  --fca-radius:          12px;
  --fca-radius-sm:       8px;
  --fca-radius-xs:       6px;
  --fca-radius-lg:       16px;
  --fca-radius-pill:     999px;

  /* Shadows -------------------------------------------------------------- */
  --fca-shadow-xs:       0 1px 2px rgba(15, 23, 42, 0.04);
  --fca-shadow-sm:       0 2px 6px rgba(15, 23, 42, 0.06);
  --fca-shadow-md:       0 8px 24px -8px rgba(15, 23, 42, 0.10);
  --fca-shadow-lg:       0 24px 60px -20px rgba(15, 23, 42, 0.18);

  /* Shell measurements --------------------------------------------------- */
  --fca-rail-w:          72px;
  --fca-nav-w:           296px;
  --fca-topbar-h:        60px;
}


/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fca-page);
  color: var(--fca-ink);
  font-family: var(--fca-font);
  font-size: var(--fca-text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--fca-font-display);
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 0;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

button, input, select, textarea { font: inherit; color: inherit; }

table { border-collapse: collapse; width: 100%; }

hr { border: 0; border-top: 1px solid var(--fca-line); margin: var(--fca-s-5) 0; }

:focus-visible {
  outline: 2px solid var(--fca-accent);
  outline-offset: 2px;
}

.fca-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* --------------------------------------------------------------------------
   3. THE SHELL — rail, centre nav, top bar, content
   The three-column grid, the 72px rail, the 296px second column and the 60px
   top bar are the console's own measurements.
   -------------------------------------------------------------------------- */

.fca-app {
  display: grid;
  grid-template-columns: var(--fca-rail-w) var(--fca-nav-w) 1fr;
  height: 100vh;
  overflow: hidden;
}

/* --- 3.1 The console rail (hubs) ---------------------------------------- */

.fca-rail {
  background: linear-gradient(180deg, var(--fca-rail) 0%, var(--fca-rail-2) 100%);
  color: var(--fca-rail-ink);
  padding: var(--fca-s-35) var(--fca-s-3);
  display: flex;
  flex-direction: column;
  gap: var(--fca-s-1);
  overflow: hidden;
}

.fca-rail__brand {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--fca-brand) 0%, #7c3aed 100%);
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--fca-font-display);
  font-weight: 800; font-size: 17px;
  letter-spacing: -0.04em;
  box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
  margin-bottom: var(--fca-s-2);
}

.fca-rail__hub {
  width: 48px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--fca-radius-sm);
  color: var(--fca-rail-ink-mute);
  font-family: var(--fca-font-display);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
}
.fca-rail__hub:hover { background: rgba(255, 255, 255, 0.06); color: var(--fca-rail-ink); text-decoration: none; }
.fca-rail__hub.is-current {
  background: color-mix(in srgb, var(--fca-accent) 22%, transparent);
  color: #fff;
  box-shadow: inset 2px 0 0 var(--fca-accent);
}
.fca-rail__spacer { flex: 1; }

/* --- 3.2 The centre's nav column ---------------------------------------- */

.fca-nav {
  background: var(--fca-surface);
  border-right: 1px solid var(--fca-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fca-nav__header {
  position: relative;
  padding: var(--fca-s-45) var(--fca-s-5) var(--fca-s-35);
  border-bottom: 1px solid var(--fca-line-2);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--fca-accent) 8%, var(--fca-surface)) 0%,
    var(--fca-surface) 70%);
  overflow: hidden;
}
.fca-nav__header::after {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--fca-accent) 14%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.fca-nav__eyebrow {
  font-size: var(--fca-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fca-accent);
  margin-bottom: var(--fca-s-1);
}
.fca-nav__title { font-size: var(--fca-text-xl); font-weight: 700; }
.fca-nav__meta { font-size: 12px; color: var(--fca-ink-2); margin-top: var(--fca-s-05); }

.fca-nav__list { flex: 1; overflow-y: auto; padding: var(--fca-s-2) var(--fca-s-3) var(--fca-s-6); }

.fca-nav__group {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--fca-muted);
  padding: var(--fca-s-15) var(--fca-s-1);
  margin-top: var(--fca-s-2);
}

/* A menu row is label + count. Nothing else goes in the rail. */
.fca-nav__row {
  display: flex; align-items: center; gap: var(--fca-s-25);
  width: 100%;
  padding: var(--fca-s-2) var(--fca-s-3);
  border: 0; background: transparent;
  border-radius: var(--fca-radius-sm);
  color: var(--fca-ink);
  font-size: var(--fca-text-md); font-weight: 500;
  text-align: left; text-decoration: none;
  cursor: pointer;
}
.fca-nav__row:hover { background: var(--fca-surface-2); text-decoration: none; }
.fca-nav__row.is-current {
  background: color-mix(in srgb, var(--fca-accent) 10%, var(--fca-surface));
  color: var(--fca-accent);
  font-weight: 700;
}
.fca-nav__label { flex: 1; min-width: 0; }
.fca-nav__count {
  font-family: var(--fca-font-mono);
  font-size: var(--fca-text-sm); font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fca-muted);
  background: var(--fca-page);
  border-radius: var(--fca-radius-pill);
  padding: 1px var(--fca-s-2);
}
.fca-nav__row.is-current .fca-nav__count { background: #fff; color: var(--fca-accent); }
.fca-nav__count.is-attention { background: var(--fca-danger-soft); color: var(--fca-danger-ink); }

/* --- 3.3 Main column, top bar, content ---------------------------------- */

.fca-main {
  background: var(--fca-page);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.fca-topbar {
  height: var(--fca-topbar-h);
  flex-shrink: 0;
  background: var(--fca-surface);
  border-bottom: 1px solid var(--fca-line);
  display: flex; align-items: center; gap: var(--fca-s-3);
  padding: 0 var(--fca-s-5);
}

.fca-crumbs {
  display: flex; align-items: center; gap: var(--fca-s-15);
  font-size: var(--fca-text-base);
  color: var(--fca-ink-2);
  min-width: 0;
}
.fca-crumbs a { color: var(--fca-ink-2); }
.fca-crumbs__sep { color: var(--fca-ink-4); font-weight: 300; }
.fca-crumbs__current { color: var(--fca-ink); font-weight: 600; }

.fca-env {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  background: var(--fca-warning-soft);
  color: var(--fca-warning-ink);
  border: 1px solid #fde68a;
  border-radius: var(--fca-radius-pill);
  font-size: var(--fca-text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.fca-env::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: var(--fca-warning);
}

.fca-topbar__right {
  margin-left: auto;
  display: flex; align-items: center; gap: var(--fca-s-4);
  min-width: 0;
}

/* The firm the console is filing for. Every screen carries it, because a
   return is filed by a named legal entity under a named FRN. Screen files
   leave the placeholder exactly as it is — a design file must not assert a
   real firm's name and FRN. */
.fca-firm { text-align: right; line-height: 1.3; min-width: 0; }
.fca-firm__name {
  font-family: var(--fca-font-display);
  font-size: var(--fca-text-base); font-weight: 700;
  color: var(--fca-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fca-firm__frn {
  font-size: var(--fca-text-sm);
  color: var(--fca-muted);
  font-variant-numeric: tabular-nums;
}
.fca-placeholder {
  border-bottom: 1px dashed var(--fca-ink-4);
  color: var(--fca-ink-2);
}

.fca-whoami { display: flex; align-items: center; gap: var(--fca-s-25); }
.fca-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--fca-brand) 0%, #7c3aed 100%);
  color: #fff;
  font-family: var(--fca-font-display);
  font-weight: 700; font-size: var(--fca-text-base);
  flex-shrink: 0;
}
.fca-whoami__text { line-height: 1.3; }
.fca-whoami__name { font-size: 12.5px; font-weight: 600; }
.fca-whoami__role {
  font-size: var(--fca-text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fca-accent);
}

.fca-content {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: var(--fca-s-6) var(--fca-s-7) 64px;
}
/*
 * Spacing between direct children of an FCA page's outer container. A page
 * that wraps every section in .fca-section gets its bottom margins already;
 * a page that renders bare .fca-card / .fca-grid / .fca-banner siblings
 * (capital-resources.jsx, notifications.jsx) had no rule and stacked flush,
 * so top cards read as being inside the bottom card. The "* + *" selector
 * only adds space BETWEEN siblings (never above the first), and vertical
 * margins collapse with the existing .fca-section margin-bottom so pages
 * that already space themselves are unaffected.
 *
 * Both wrapper conventions are covered — the newer .fca-content (used by
 * calendar / catalogue / documents / notifications / exceptions / …) and
 * the older .fca-page / .fca-page--<name> (still used by archive /
 * regdata-users / return-workspace / settings). One rule, two entry points.
 */
.fca-content > * + *,
.fca-page > * + * { margin-top: var(--fca-s-6); }
/*
 * Bare .fca-card siblings need the same treatment when they are stacked
 * directly (some pages nest their cards inside a wrapper div that is not
 * .fca-content itself). The rule only kicks in for stacked cards and does
 * not touch cards that sit inside .fca-grid columns.
 */
.fca-card + .fca-card { margin-top: var(--fca-s-4); }
/*
 * Older pages wrap sections in .fca-panel instead of .fca-section. Give
 * .fca-panel a matching bottom margin so panel siblings do not stack
 * flush the way archive / settings currently do.
 */
.fca-panel + .fca-panel,
.fca-panel + .fca-section,
.fca-section + .fca-panel { margin-top: var(--fca-s-6); }

.fca-page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--fca-s-4);
  margin-bottom: var(--fca-s-45);
}
.fca-page-header h1 { font-size: var(--fca-text-2xl); }
.fca-page-header__sub {
  color: var(--fca-ink-2);
  font-size: var(--fca-text-md);
  margin-top: var(--fca-s-1);
}
.fca-page-actions { display: flex; gap: var(--fca-s-2); flex-shrink: 0; }


/* --------------------------------------------------------------------------
   4. TYPOGRAPHY AND FIGURES
   -------------------------------------------------------------------------- */

.fca-section { margin-bottom: var(--fca-s-7); }
.fca-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--fca-s-3);
  margin-bottom: var(--fca-s-3);
}
.fca-section__title { font-size: var(--fca-text-xl); }
.fca-section__note { font-size: var(--fca-text-sm); color: var(--fca-ink-2); }

.fca-eyebrow {
  font-size: var(--fca-text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--fca-muted);
}
.fca-muted { color: var(--fca-ink-2); }
.fca-meta { font-size: var(--fca-text-sm); color: var(--fca-muted); }
.fca-sentence { font-size: var(--fca-text-base); color: var(--fca-ink-2); line-height: 1.55; }
.fca-code {
  font-family: var(--fca-font-mono);
  font-size: var(--fca-text-sm);
  background: var(--fca-page);
  border-radius: var(--fca-radius-xs);
  padding: 1px 5px;
}

/* A figure is never shown without its currency, and never without the period
   it measures. `.fca-figure` is the pair; `.fca-figure__period` is the
   period. Both are required. */
.fca-figure {
  font-family: var(--fca-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-weight: 700;
  color: var(--fca-ink);
  white-space: nowrap;
}
.fca-figure__ccy {
  font-size: 0.72em;
  font-weight: 700;
  color: var(--fca-muted);
  margin-right: 0.35em;
  letter-spacing: 0.04em;
}
.fca-figure__period {
  display: block;
  font-family: var(--fca-font);
  font-size: var(--fca-text-sm);
  font-weight: 500;
  color: var(--fca-muted);
  margin-top: var(--fca-s-05);
  white-space: normal;
}
.fca-figure.is-negative { color: var(--fca-danger-ink); }

/* Not measured is not zero. The em dash carries a reason beside it, always. */
.fca-nomeasure {
  font-family: var(--fca-font);
  font-weight: 700;
  color: var(--fca-muted);
}
.fca-nomeasure__why {
  display: block;
  font-size: var(--fca-text-sm);
  font-weight: 500;
  color: var(--fca-ink-2);
  margin-top: var(--fca-s-1);
  white-space: normal;
}


/* --------------------------------------------------------------------------
   5. CARDS AND KPI TILES
   -------------------------------------------------------------------------- */

.fca-card {
  background: var(--fca-surface);
  border: 1px solid var(--fca-line);
  border-radius: var(--fca-radius);
  box-shadow: var(--fca-shadow-xs);
  overflow: hidden;
}
.fca-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--fca-s-3);
  padding: var(--fca-s-35) var(--fca-s-45);
  border-bottom: 1px solid var(--fca-line-2);
  background: var(--fca-surface-2);
}
.fca-card__title { font-size: var(--fca-text-lg); }
.fca-card__body { padding: var(--fca-s-45); }
.fca-card__foot {
  padding: var(--fca-s-3) var(--fca-s-45);
  border-top: 1px solid var(--fca-line-2);
  background: var(--fca-surface-2);
  font-size: 12px; color: var(--fca-ink-2);
  display: flex; align-items: center; justify-content: space-between; gap: var(--fca-s-3);
}
.fca-card--accent { border-top: 3px solid var(--fca-accent); }

.fca-grid { display: grid; gap: var(--fca-s-4); }
.fca-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fca-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fca-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fca-grid--main-side { grid-template-columns: minmax(0, 1fr) 320px; }
/* Each card only as tall as its own content, rather than as tall as its
   tallest neighbour. */
.fca-grid--top { align-items: start; }

.fca-kpi {
  background: var(--fca-surface);
  border: 1px solid var(--fca-line);
  border-radius: var(--fca-radius);
  padding: var(--fca-s-4) var(--fca-s-45);
  min-width: 0;
}
.fca-kpi__label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fca-muted);
}
.fca-kpi__value {
  font-size: var(--fca-figure);
  line-height: 1.15;
  margin-top: var(--fca-s-1);
  min-width: 0;
}
/* Mono digits are much wider than the console's proportional display face, so
   a figure in a four-across tile row scales down rather than clipping. */
.fca-kpi__value .fca-figure { font-size: clamp(17px, 1.55vw, 22px); }
.fca-kpi__value .fca-nomeasure { font-size: 22px; }
.fca-kpi__basis {
  font-size: var(--fca-text-sm);
  color: var(--fca-ink-2);
  margin-top: var(--fca-s-15);
}
.fca-kpi--unmeasured { border-style: dashed; background: var(--fca-surface-2); }
.fca-kpi--unmeasured .fca-kpi__value { color: var(--fca-muted); }
.fca-kpi--good  { box-shadow: inset 3px 0 0 var(--fca-success); }
.fca-kpi--warn  { box-shadow: inset 3px 0 0 var(--fca-warning); }
.fca-kpi--bad   { box-shadow: inset 3px 0 0 var(--fca-danger); }


/* --------------------------------------------------------------------------
   6. THE TEN DASHBOARD STATE PILLS
   Ten states, ten distinct hues, each with its own dot. The pill always
   carries its word, so the state never depends on colour alone.
   -------------------------------------------------------------------------- */

.fca-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  border-radius: var(--fca-radius-pill);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.fca-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0;
}

.fca-pill--upcoming            { background: #eef2f7; color: #475569; border-color: #dde3ec; }
.fca-pill--upcoming::before    { background: #94a3b8; }

.fca-pill--due-soon            { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.fca-pill--due-soon::before    { background: #f59e0b; }

.fca-pill--draft               { background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }
.fca-pill--draft::before       { background: #6366f1; }

.fca-pill--validation-failed         { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.fca-pill--validation-failed::before { background: #ef4444; }

.fca-pill--awaiting-approval         { background: #cffafe; color: #155e75; border-color: #a5f3fc; }
.fca-pill--awaiting-approval::before { background: #06b6d4; }

.fca-pill--ready-to-file       { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.fca-pill--ready-to-file::before { background: #7c3aed; }

.fca-pill--submitted           { background: #eaf0ff; color: #1e3a8a; border-color: #c7d7fe; }
.fca-pill--submitted::before   { background: #4361ee; }

.fca-pill--accepted            { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.fca-pill--accepted::before    { background: #10b981; }

.fca-pill--rejected            { background: #ffe4e6; color: #9f1239; border-color: #fecdd3; }
.fca-pill--rejected::before    { background: #e11d48; }

.fca-pill--resubmission-required         { background: #ffedd5; color: #9a3412; border-color: #fed7aa; }
.fca-pill--resubmission-required::before { background: #f97316; }

/* Two neutral pills that are not dashboard states: a return that does not
   apply to this firm, and a period the firm has asserted as nil. */
.fca-pill--not-applicable      { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }
.fca-pill--not-applicable::before { background: #9ca3af; }
.fca-pill--nil                 { background: var(--fca-surface); color: var(--fca-ink-2); border-color: var(--fca-line); }
.fca-pill--nil::before         { background: var(--fca-ink-4); }

/* A pill on a dark ground (the rail) keeps its hue but drops the tint. */
.fca-pill--outline { background: transparent; border-color: currentColor; }


/* --------------------------------------------------------------------------
   7. THE THIRTEEN-STAGE STEPPER
   Reporting Period, Data Collection, Calculation, Validation, Exceptions,
   Evidence, Maker Review, Checker Approval, MLRO/CFO Approval, Export,
   Submission, FCA Acknowledgement, Locked Archive.
   Two shapes: a horizontal rail across the top of a return workspace, and a
   stacked list for a side column. Both take the same four state classes.
   -------------------------------------------------------------------------- */

.fca-stepper {
  display: flex;
  align-items: flex-start;
  background: var(--fca-surface);
  border: 1px solid var(--fca-line);
  border-radius: var(--fca-radius);
  padding: var(--fca-s-4) var(--fca-s-45) var(--fca-s-3);
  margin-bottom: var(--fca-s-5);
  overflow-x: auto;
}

.fca-step {
  flex: 1 1 0;
  min-width: 66px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fca-s-15);
  text-align: center;
  padding: 0 5px;
}
/* the connector between two nodes */
.fca-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(50% + 16px); right: calc(-50% + 16px);
  top: 13px;
  height: 2px;
  background: var(--fca-line);
}
.fca-step.is-done:not(:last-child)::after { background: var(--fca-success); }
.fca-step.is-locked:not(:last-child)::after { background: var(--fca-ink-4); }

.fca-step__node {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--fca-page);
  border: 2px solid var(--fca-page);
  color: var(--fca-muted);
  display: grid; place-items: center;
  font-family: var(--fca-font-display);
  font-weight: 700; font-size: var(--fca-text-base);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.fca-step__label {
  font-size: var(--fca-text-xs);
  font-weight: 700;
  line-height: 1.25;
  color: var(--fca-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Thirteen stages across one row leave about 66px a label. Uppercase does not
   fit that; sentence case does, and a long stage name hyphenates rather than
   overlapping its neighbour. */
.fca-stepper:not(.fca-stepper--stacked) .fca-step__label {
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  hyphens: auto;
  overflow-wrap: break-word;
}
.fca-step__state {
  font-size: var(--fca-text-sm);
  font-weight: 500;
  color: var(--fca-ink-2);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
}

/* done — a drawn tick, no icon font */
.fca-step.is-done .fca-step__node {
  background: var(--fca-success);
  border-color: #fff;
  color: transparent;
}
.fca-step.is-done .fca-step__node::after {
  content: '';
  position: absolute;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.fca-step.is-done .fca-step__label { color: var(--fca-success-ink); }

/* current */
.fca-step.is-current .fca-step__node {
  background: var(--fca-accent);
  border-color: #fff;
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fca-accent) 22%, transparent);
}
.fca-step.is-current .fca-step__label { color: var(--fca-accent); }

/* blocked — the stage cannot proceed, and the reason is on the row */
.fca-step.is-blocked .fca-step__node {
  background: var(--fca-danger-soft);
  border-color: var(--fca-danger);
  color: var(--fca-danger-ink);
}
.fca-step.is-blocked .fca-step__node::after {
  content: '';
  position: absolute;
  width: 10px; height: 2px;
  background: var(--fca-danger);
  border-radius: 1px;
}
.fca-step.is-blocked .fca-step__label { color: var(--fca-danger-ink); }
.fca-step.is-blocked .fca-step__state { color: var(--fca-danger-ink); }

/* locked — a drawn padlock, no icon font */
.fca-step.is-locked .fca-step__node {
  background: #475569;
  border-color: #fff;
  color: transparent;
}
.fca-step.is-locked .fca-step__node::before {
  content: '';
  position: absolute;
  width: 8px; height: 6px;
  border: 2px solid #fff;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  transform: translateY(-4px);
}
.fca-step.is-locked .fca-step__node::after {
  content: '';
  position: absolute;
  width: 12px; height: 8px;
  background: #fff;
  border-radius: 2px;
  transform: translateY(3px);
}
.fca-step.is-locked .fca-step__label { color: #475569; }

/* Stacked variant for a side column: node, label, state sentence in a row. */
.fca-stepper--stacked {
  display: block;
  padding: var(--fca-s-2) 0;
  overflow: visible;
}
.fca-stepper--stacked .fca-step {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: var(--fca-s-3);
  padding: var(--fca-s-25) var(--fca-s-45);
  min-width: 0;
}
.fca-stepper--stacked .fca-step:not(:last-child)::after {
  left: 33px; right: auto;
  top: 32px; bottom: -6px;
  width: 2px; height: auto;
}
.fca-stepper--stacked .fca-step__body { min-width: 0; }
.fca-stepper--stacked .fca-step__label { display: block; }


/* --------------------------------------------------------------------------
   8. TABLES — dense, sticky header, right-aligned tabular figures
   -------------------------------------------------------------------------- */

.fca-table-card {
  background: var(--fca-surface);
  border: 1px solid var(--fca-line);
  border-radius: var(--fca-radius);
  overflow: hidden;
  box-shadow: var(--fca-shadow-xs);
}
.fca-table-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--fca-s-3);
  padding: var(--fca-s-3) var(--fca-s-4);
  border-bottom: 1px solid var(--fca-line-2);
  background: var(--fca-surface-2);
  font-size: 12.5px; color: var(--fca-ink-2);
}
.fca-table-toolbar__left,
.fca-table-toolbar__right { display: flex; align-items: center; gap: var(--fca-s-15); }

.fca-table-scroll {
  overflow: auto;
  max-height: 62vh;
}
.fca-table-scroll--tall { max-height: none; }

.fca-table { width: 100%; }
.fca-table th, .fca-table td { white-space: nowrap; }
.fca-table td.is-wrap, .fca-table th.is-wrap { white-space: normal; min-width: 160px; }
/* For a table with more columns than the content area can hold: the columns
   keep their width and the card scrolls sideways, as the console's do. */
.fca-table--wide { min-width: 1180px; }

.fca-table thead th {
  position: sticky; top: 0; z-index: 2;
  text-align: left;
  padding: var(--fca-s-25) var(--fca-s-4);
  font-size: var(--fca-text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fca-muted);
  background: var(--fca-surface-2);
  border-bottom: 1px solid var(--fca-line);
}
.fca-table thead th.is-num { text-align: right; }

.fca-table tbody tr { border-bottom: 1px solid var(--fca-line-2); }
.fca-table tbody tr:last-child { border-bottom: 0; }
.fca-table tbody tr:hover { background: var(--fca-surface-2); }
.fca-table tbody tr.is-attention { background: color-mix(in srgb, var(--fca-danger) 4%, #fff); }
.fca-table tbody tr.is-attention:hover { background: color-mix(in srgb, var(--fca-danger) 7%, #fff); }

.fca-table tbody td {
  padding: var(--fca-s-3) var(--fca-s-4);
  font-size: var(--fca-text-base);
  vertical-align: middle;
}
.fca-table td.is-num {
  text-align: right;
  font-family: var(--fca-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  font-weight: 700;
  color: var(--fca-ink);
}
.fca-table td.is-code {
  font-family: var(--fca-font-display);
  font-weight: 700;
  color: var(--fca-ink);
}
.fca-table td.is-actions { text-align: right; }
.fca-table--dense tbody td { padding: var(--fca-s-2) var(--fca-s-3); }
.fca-table--dense thead th { padding: var(--fca-s-2) var(--fca-s-3); }

.fca-table tfoot td {
  padding: var(--fca-s-3) var(--fca-s-4);
  background: var(--fca-surface-2);
  border-top: 2px solid var(--fca-line);
  font-weight: 700;
  font-size: var(--fca-text-base);
}
.fca-table tfoot td.is-num {
  text-align: right;
  font-family: var(--fca-font-mono);
  font-variant-numeric: tabular-nums;
}

.fca-table-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--fca-s-3);
  padding: var(--fca-s-25) var(--fca-s-4);
  background: var(--fca-surface-2);
  border-top: 1px solid var(--fca-line-2);
  font-size: 12px; color: var(--fca-ink-2);
}

/* Two-line cell: the thing, then what qualifies it. */
.fca-cell-2 { line-height: 1.35; }
.fca-cell-2 strong { font-weight: 700; }
.fca-cell-2 span {
  display: block;
  font-size: var(--fca-text-sm);
  color: var(--fca-muted);
}

/* An empty table states what the query established. */
.fca-empty {
  padding: var(--fca-s-8) var(--fca-s-5);
  text-align: center;
  color: var(--fca-ink-2);
}
.fca-empty strong { display: block; font-size: var(--fca-text-lg); color: var(--fca-ink); margin-bottom: var(--fca-s-15); }


/* --------------------------------------------------------------------------
   9. VARIANCE TABLE — prior, current, delta, delta per cent, threshold flag
   -------------------------------------------------------------------------- */

.fca-table--variance td.is-delta,
.fca-table--variance td.is-pct {
  text-align: right;
  font-family: var(--fca-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.fca-delta-up   { color: var(--fca-danger-ink); }   /* a rise in a fraud or  */
.fca-delta-down { color: var(--fca-success-ink); }  /* exposure figure reads */
.fca-delta-flat { color: var(--fca-muted); }        /* as the worse direction */
.fca-delta-up::before   { content: '+'; }
.fca-delta-down::before { content: '\2212'; }       /* a true minus sign      */
.fca-delta-flat::before { content: '\00B1'; }

.fca-threshold {
  display: inline-flex; align-items: center; gap: var(--fca-s-15);
  font-size: var(--fca-text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--fca-radius-xs);
  border: 1px solid transparent;
}
.fca-threshold--within { background: var(--fca-surface-2); color: var(--fca-ink-2); border-color: var(--fca-line); }
.fca-threshold--over   { background: var(--fca-warning-soft); color: var(--fca-warning-ink); border-color: #fde68a; }
.fca-threshold--breach { background: var(--fca-danger-soft); color: var(--fca-danger-ink); border-color: #fecaca; }
.fca-threshold__rule { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--fca-ink-2); }


/* --------------------------------------------------------------------------
   10. FORMS — label, control, one consequence line
   -------------------------------------------------------------------------- */

.fca-fieldset {
  padding: var(--fca-s-45) var(--fca-s-5);
  border-bottom: 1px solid var(--fca-line-2);
}
.fca-fieldset:last-child { border-bottom: 0; }
.fca-fieldset__title {
  font-size: var(--fca-text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--fca-accent);
  margin-bottom: var(--fca-s-35);
}

.fca-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fca-s-35); margin-bottom: var(--fca-s-35); }
.fca-field-row--full { grid-template-columns: 1fr; }
.fca-field-row--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.fca-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fca-field__label {
  font-size: 12px; font-weight: 600;
  color: var(--fca-ink);
  display: flex; align-items: center; gap: var(--fca-s-1);
}
.fca-field__ref {
  font-family: var(--fca-font-mono);
  font-size: var(--fca-text-xs); font-weight: 700;
  color: var(--fca-muted);
}
.fca-req { color: var(--fca-accent); font-weight: 700; }

.fca-input, .fca-select, .fca-textarea {
  padding: 9px var(--fca-s-3);
  border-radius: 7px;
  border: 1px solid var(--fca-line);
  background: var(--fca-surface);
  font-family: inherit;
  font-size: var(--fca-text-base);
  color: var(--fca-ink);
  width: 100%;
}
.fca-input:hover, .fca-select:hover, .fca-textarea:hover { border-color: var(--fca-muted); }
.fca-input:focus, .fca-select:focus, .fca-textarea:focus {
  outline: none;
  border-color: var(--fca-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fca-accent) 14%, transparent);
}
.fca-input:disabled, .fca-select:disabled, .fca-textarea:disabled {
  background: var(--fca-page-2);
  color: var(--fca-ink-2);
  cursor: not-allowed;
}
.fca-input.is-num, .fca-input--money {
  text-align: right;
  font-family: var(--fca-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.fca-input.is-error { border-color: var(--fca-danger); }
.fca-textarea { min-height: 76px; resize: vertical; }

/* Exactly one consequence line under the control, in the platform's words.
   No side panels, no explainer boxes. */
.fca-consequence { font-size: var(--fca-text-sm); color: var(--fca-ink-2); line-height: 1.45; }
.fca-consequence--warn { color: var(--fca-warning-ink); }
.fca-consequence--danger { color: var(--fca-danger-ink); }

/* A refusal is a sentence beside the control the person pressed. Never a
   toast, never a redirect, never a blank page. */
.fca-refusal {
  display: flex; align-items: flex-start; gap: var(--fca-s-2);
  padding: var(--fca-s-25) var(--fca-s-3);
  background: var(--fca-danger-soft);
  border: 1px solid #fecaca;
  border-left: 3px solid var(--fca-danger);
  border-radius: var(--fca-radius-xs);
  color: var(--fca-danger-ink);
  font-size: var(--fca-text-sm);
  line-height: 1.5;
  max-width: 62ch;
}
.fca-refusal strong { font-weight: 700; }
.fca-refusal--inline { display: inline-flex; margin-left: var(--fca-s-3); }
.fca-refusal__what { display: block; margin-top: var(--fca-s-1); font-weight: 500; }

.fca-inline-control { display: flex; align-items: center; gap: var(--fca-s-3); flex-wrap: wrap; }

.fca-check { display: flex; align-items: flex-start; gap: var(--fca-s-2); font-size: var(--fca-text-base); }
.fca-check input { margin: 3px 0 0; accent-color: var(--fca-accent); }
.fca-check__body { min-width: 0; }
.fca-check__body span { display: block; font-size: var(--fca-text-sm); color: var(--fca-ink-2); margin-top: 2px; }


/* --------------------------------------------------------------------------
   11. BUTTONS
   -------------------------------------------------------------------------- */

.fca-btn {
  display: inline-flex; align-items: center; gap: var(--fca-s-15);
  padding: var(--fca-s-2) var(--fca-s-35);
  border-radius: var(--fca-radius-sm);
  border: 1px solid var(--fca-line);
  background: var(--fca-surface);
  color: var(--fca-ink);
  font-family: inherit;
  font-size: var(--fca-text-base); font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.fca-btn:hover { border-color: var(--fca-accent); color: var(--fca-accent); text-decoration: none; }

.fca-btn--primary {
  background: var(--fca-accent);
  border-color: var(--fca-accent);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--fca-accent) 30%, transparent);
}
.fca-btn--primary:hover { filter: brightness(1.06); color: #fff; }

.fca-btn--secondary { background: var(--fca-surface); border-color: var(--fca-line); color: var(--fca-ink); }
.fca-btn--secondary:hover { border-color: var(--fca-ink-2); color: var(--fca-ink); }

.fca-btn--danger { border-color: var(--fca-danger); color: var(--fca-danger); background: var(--fca-surface); }
.fca-btn--danger:hover { background: var(--fca-danger); color: #fff; }

.fca-btn--sm { padding: 5px var(--fca-s-25); font-size: 12px; }
.fca-btn--block { width: 100%; justify-content: center; }
.fca-btn--link { border-color: transparent; background: transparent; color: var(--fca-brand); padding-left: 0; padding-right: 0; }

.fca-btn:disabled,
.fca-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  filter: none;
}
.fca-btn:disabled:hover,
.fca-btn.is-disabled:hover { border-color: var(--fca-line); color: var(--fca-ink); }

/* A disabled control always says why it is disabled, next to itself. */
.fca-btn-reason {
  display: inline-flex; align-items: center; gap: var(--fca-s-2);
  flex-wrap: wrap;
}
.fca-btn-reason__why {
  font-size: var(--fca-text-sm);
  color: var(--fca-ink-2);
  max-width: 46ch;
  line-height: 1.45;
}

.fca-btn-group { display: inline-flex; gap: var(--fca-s-2); flex-wrap: wrap; }


/* --------------------------------------------------------------------------
   12. BANNERS AND THE ISSUES ROW
   -------------------------------------------------------------------------- */

.fca-banner {
  display: flex; align-items: flex-start; gap: var(--fca-s-3);
  padding: var(--fca-s-3) var(--fca-s-4);
  border-radius: var(--fca-radius-sm);
  border: 1px solid;
  font-size: var(--fca-text-base);
  line-height: 1.5;
  margin-bottom: var(--fca-s-4);
}
.fca-banner__mark {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--fca-font-display);
  font-size: 12px; font-weight: 800;
  color: #fff;
  margin-top: 1px;
}
.fca-banner__body { min-width: 0; flex: 1; }
.fca-banner__title { font-weight: 700; margin-bottom: 2px; }
.fca-banner__actions { flex-shrink: 0; display: flex; gap: var(--fca-s-2); align-items: center; }

.fca-banner--info    { background: var(--fca-info-soft); border-color: #bae6fd; color: var(--fca-info-ink); }
.fca-banner--info .fca-banner__mark { background: var(--fca-info); }
.fca-banner--warning { background: var(--fca-warning-soft); border-color: #fde68a; color: var(--fca-warning-ink); }
.fca-banner--warning .fca-banner__mark { background: var(--fca-warning); }
.fca-banner--danger  { background: var(--fca-danger-soft); border-color: #fecaca; color: var(--fca-danger-ink); }
.fca-banner--danger .fca-banner__mark { background: var(--fca-danger); }

/* Settings > Issues: the platform raises a row when it could not do something.
   An Issue is never called an alert, an error or a notification. */
.fca-issues {
  background: var(--fca-surface);
  border: 1px solid var(--fca-line);
  border-radius: var(--fca-radius);
  overflow: hidden;
}
.fca-issue {
  display: grid;
  /* Issue code (col 2) is a monospaced token like FCA_BANK_HOLIDAYS_MISSING
     which needs ~220px in the mono font; the earlier 150px cell overflowed
     into the "what" column and read as overlapping text. `max-content` lets
     each code carry its natural width without truncation, and `minmax(0,1fr)`
     on the what column still gives the long descriptive sentence room to
     wrap rather than shove past the code. */
  grid-template-columns: 8px max-content minmax(0, 1fr) 150px auto;
  align-items: center;
  gap: var(--fca-s-3);
  padding: var(--fca-s-3) var(--fca-s-4) var(--fca-s-3) 0;
  border-bottom: 1px solid var(--fca-line-2);
}
@media (max-width: 900px) {
  .fca-issue {
    grid-template-columns: 8px 1fr;
    row-gap: var(--fca-s-2);
  }
  .fca-issue__code,
  .fca-issue__what,
  .fca-issue__when,
  .fca-issue__act { grid-column: 2; }
}
.fca-issue:last-child { border-bottom: 0; }
.fca-issue__severity { align-self: stretch; background: var(--fca-muted); }
.fca-issue--high .fca-issue__severity { background: var(--fca-danger); }
.fca-issue--medium .fca-issue__severity { background: var(--fca-warning); }
.fca-issue--low .fca-issue__severity { background: var(--fca-info); }
.fca-issue__code {
  font-family: var(--fca-font-mono);
  font-size: var(--fca-text-sm); font-weight: 700;
  color: var(--fca-ink-2);
  padding-left: var(--fca-s-4);
}
.fca-issue__what { min-width: 0; line-height: 1.4; }
.fca-issue__what strong { display: block; font-weight: 700; }
.fca-issue__what span { font-size: var(--fca-text-sm); color: var(--fca-ink-2); }
.fca-issue__when { font-size: var(--fca-text-sm); color: var(--fca-muted); }
.fca-issue__act { display: flex; gap: var(--fca-s-2); }


/* --------------------------------------------------------------------------
   13. TIMELINE / AUDIT TRAIL
   -------------------------------------------------------------------------- */

.fca-timeline {
  background: var(--fca-surface);
  border: 1px solid var(--fca-line);
  border-radius: var(--fca-radius);
}
.fca-timeline__event {
  display: flex; gap: var(--fca-s-35);
  padding: var(--fca-s-4) var(--fca-s-5);
  border-bottom: 1px solid var(--fca-line-2);
  position: relative;
}
.fca-timeline__event:last-child { border-bottom: 0; }
.fca-timeline__event::before {
  content: '';
  position: absolute;
  left: 33px; top: 0; bottom: 0;
  width: 2px;
  background: var(--fca-line);
}
.fca-timeline__event:first-child::before { top: 50%; }
.fca-timeline__event:last-child::before { bottom: 50%; }

.fca-timeline__marker {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--fca-surface);
  border: 2px solid var(--fca-accent);
  flex-shrink: 0;
  z-index: 1;
  margin-top: 2px;
  display: grid; place-items: center;
}
.fca-timeline__marker::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fca-accent);
}
.fca-timeline__marker.is-success { border-color: var(--fca-success); }
.fca-timeline__marker.is-success::after { background: var(--fca-success); }
.fca-timeline__marker.is-warn { border-color: var(--fca-warning); }
.fca-timeline__marker.is-warn::after { background: var(--fca-warning); }
.fca-timeline__marker.is-danger { border-color: var(--fca-danger); }
.fca-timeline__marker.is-danger::after { background: var(--fca-danger); }

.fca-timeline__body { flex: 1; min-width: 0; }
.fca-timeline__line1 { font-size: var(--fca-text-md); color: var(--fca-ink); }
.fca-timeline__line1 strong { font-weight: 700; }
.fca-timeline__line2 { font-size: 12px; color: var(--fca-ink-2); margin-top: var(--fca-s-1); line-height: 1.5; }
.fca-timeline__meta {
  display: flex; gap: var(--fca-s-3); align-items: center; flex-wrap: wrap;
  margin-top: var(--fca-s-15);
  font-size: 11px; color: var(--fca-muted);
}
.fca-timeline__hash {
  font-family: var(--fca-font-mono);
  font-size: 10.5px;
  color: var(--fca-muted);
}


/* --------------------------------------------------------------------------
   14. EVIDENCE FILE LIST
   -------------------------------------------------------------------------- */

.fca-files {
  background: var(--fca-surface);
  border: 1px solid var(--fca-line);
  border-radius: var(--fca-radius);
  overflow: hidden;
}
.fca-file {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 224px 158px auto;
  align-items: center;
  gap: var(--fca-s-35);
  padding: var(--fca-s-3) var(--fca-s-4);
  border-bottom: 1px solid var(--fca-line-2);
}
.fca-file:last-child { border-bottom: 0; }
.fca-file__kind {
  width: 34px; height: 34px;
  border-radius: var(--fca-radius-xs);
  display: grid; place-items: center;
  background: var(--fca-page);
  color: var(--fca-ink-2);
  font-family: var(--fca-font-display);
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.02em;
}
.fca-file__name { min-width: 0; line-height: 1.35; }
.fca-file__name strong {
  display: block; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fca-file__name span { font-size: var(--fca-text-sm); color: var(--fca-ink-2); }
.fca-file__hash {
  font-family: var(--fca-font-mono);
  font-size: 10.5px;
  color: var(--fca-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fca-file__hash b { display: block; font-weight: 700; color: var(--fca-ink-2); font-family: var(--fca-font); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.fca-file__who { font-size: var(--fca-text-sm); color: var(--fca-ink-2); line-height: 1.35; }
.fca-file__who b { display: block; font-weight: 700; color: var(--fca-ink); font-size: 12.5px; }
.fca-file__act { display: flex; gap: var(--fca-s-15); }
.fca-file--missing { background: color-mix(in srgb, var(--fca-warning) 6%, #fff); }


/* --------------------------------------------------------------------------
   15. KEYING SHEET — field, value, source, tick
   The sheet a person keys from when they type the return into RegData.
   -------------------------------------------------------------------------- */

.fca-keying { background: var(--fca-surface); }
.fca-keying__head {
  padding: var(--fca-s-4) var(--fca-s-5);
  border-bottom: 2px solid var(--fca-ink);
}
.fca-keying__head h2 { font-size: var(--fca-text-xl); }
.fca-keying__head dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fca-s-3) var(--fca-s-5);
  margin: var(--fca-s-3) 0 0;
}
.fca-keying__head dt {
  font-size: var(--fca-text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fca-muted);
}
.fca-keying__head dd { margin: 2px 0 0; font-size: var(--fca-text-base); font-weight: 600; }

.fca-keying table { width: 100%; }
.fca-keying thead th {
  text-align: left;
  padding: var(--fca-s-2) var(--fca-s-4);
  font-size: var(--fca-text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fca-muted);
  border-bottom: 1px solid var(--fca-ink);
}
.fca-keying tbody td {
  padding: var(--fca-s-25) var(--fca-s-4);
  border-bottom: 1px solid var(--fca-line);
  font-size: var(--fca-text-base);
  vertical-align: top;
}
.fca-keying td.is-ref {
  font-family: var(--fca-font-mono);
  font-size: var(--fca-text-sm); font-weight: 700;
  color: var(--fca-ink-2);
  white-space: nowrap;
}
.fca-keying td.is-value {
  text-align: right;
  font-family: var(--fca-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}
.fca-keying td.is-source { font-size: var(--fca-text-sm); color: var(--fca-ink-2); }
.fca-keying td.is-tick { width: 44px; text-align: center; }
.fca-tick {
  display: inline-block;
  width: 16px; height: 16px;
  border: 1.5px solid var(--fca-ink-2);
  border-radius: 3px;
}
.fca-keying__foot {
  padding: var(--fca-s-4) var(--fca-s-5);
  border-top: 2px solid var(--fca-ink);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fca-s-5);
  font-size: var(--fca-text-sm);
}
.fca-sign-line {
  margin-top: var(--fca-s-8);
  border-top: 1px solid var(--fca-ink);
  padding-top: var(--fca-s-15);
  color: var(--fca-ink-2);
}


/* --------------------------------------------------------------------------
   16. CALENDAR MONTH GRID AND DUE-DATE LIST
   -------------------------------------------------------------------------- */

.fca-calendar {
  background: var(--fca-surface);
  border: 1px solid var(--fca-line);
  border-radius: var(--fca-radius);
  overflow: hidden;
}
.fca-calendar__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--fca-s-3);
  padding: var(--fca-s-3) var(--fca-s-4);
  border-bottom: 1px solid var(--fca-line-2);
  background: var(--fca-surface-2);
}
.fca-calendar__month { font-size: var(--fca-text-lg); }
.fca-calendar__dow {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--fca-line);
}
.fca-calendar__dow span {
  padding: var(--fca-s-2);
  text-align: center;
  font-size: var(--fca-text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fca-muted);
}
.fca-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.fca-cal-day {
  min-height: 96px;
  padding: var(--fca-s-15) var(--fca-s-2) var(--fca-s-2);
  border-right: 1px solid var(--fca-line-2);
  border-bottom: 1px solid var(--fca-line-2);
  display: flex; flex-direction: column; gap: var(--fca-s-1);
  min-width: 0;
}
.fca-cal-day:nth-child(7n) { border-right: 0; }
.fca-cal-day__n {
  font-family: var(--fca-font-mono);
  font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fca-ink-2);
}
.fca-cal-day.is-outside { background: var(--fca-page-2); }
.fca-cal-day.is-outside .fca-cal-day__n { color: var(--fca-ink-4); }
/* A day the firm is not open, or a bank holiday: the day-count basis skips it. */
.fca-cal-day.is-nonbusiness { background: repeating-linear-gradient(135deg, #fff, #fff 6px, var(--fca-page-2) 6px, var(--fca-page-2) 12px); }
.fca-cal-day.is-today { box-shadow: inset 0 0 0 2px var(--fca-accent); }
.fca-cal-day.is-today .fca-cal-day__n { color: var(--fca-accent); }

.fca-cal-mark {
  display: block;
  font-size: 10.5px; font-weight: 700;
  line-height: 1.25;
  padding: 2px 5px;
  border-radius: 4px;
  border-left: 3px solid var(--fca-muted);
  background: var(--fca-page);
  color: var(--fca-ink-2);
  /* A due date is never half a sentence: the mark wraps rather than clipping. */
  white-space: normal;
  overflow-wrap: anywhere;
}
.fca-cal-mark--due     { border-left-color: var(--fca-warning); background: var(--fca-warning-soft); color: var(--fca-warning-ink); }
.fca-cal-mark--overdue { border-left-color: var(--fca-danger); background: var(--fca-danger-soft); color: var(--fca-danger-ink); }
.fca-cal-mark--filed   { border-left-color: var(--fca-success); background: var(--fca-success-soft); color: var(--fca-success-ink); }
.fca-cal-mark--period  { border-left-color: var(--fca-brand); background: var(--fca-brand-soft); color: #1e3a8a; }
.fca-cal-day__note { font-size: 10px; color: var(--fca-muted); }

.fca-duelist { display: flex; flex-direction: column; }
.fca-due {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--fca-s-35);
  padding: var(--fca-s-3) var(--fca-s-4);
  border-bottom: 1px solid var(--fca-line-2);
}
.fca-due:last-child { border-bottom: 0; }
.fca-due__date {
  text-align: center;
  line-height: 1.1;
  padding: var(--fca-s-15) 0;
  border-radius: var(--fca-radius-xs);
  background: var(--fca-page);
}
.fca-due__date b {
  display: block;
  font-family: var(--fca-font-display);
  font-size: 19px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.fca-due__date span {
  display: block;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fca-muted);
}
.fca-due--soon .fca-due__date { background: var(--fca-warning-soft); color: var(--fca-warning-ink); }
.fca-due--soon .fca-due__date span { color: var(--fca-warning-ink); }
.fca-due--late .fca-due__date { background: var(--fca-danger-soft); color: var(--fca-danger-ink); }
.fca-due--late .fca-due__date span { color: var(--fca-danger-ink); }
.fca-due__what { min-width: 0; line-height: 1.4; }
.fca-due__what strong { display: block; }
.fca-due__what span { font-size: var(--fca-text-sm); color: var(--fca-ink-2); }
.fca-due__act { display: flex; align-items: center; gap: var(--fca-s-2); }


/* --------------------------------------------------------------------------
   17. THE DUAL-CONTROL MODAL — maker, checker, reason
   `.fca-modal-layer` covers the viewport. `.fca-modal-layer--inline` renders
   the same box in the flow of the page, which is how the component sample
   shows it without script.
   -------------------------------------------------------------------------- */

.fca-modal-layer {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.42);
  display: grid; place-items: center;
  padding: var(--fca-s-5);
  z-index: 1000;
}
.fca-modal-layer--inline {
  position: static;
  background: transparent;
  padding: 0;
  display: block;
}

.fca-modal {
  width: 100%;
  max-width: 560px;
  background: var(--fca-surface);
  border: 1px solid var(--fca-line);
  border-radius: var(--fca-radius);
  box-shadow: var(--fca-shadow-lg);
  overflow: hidden;
}
.fca-modal-layer--inline .fca-modal { box-shadow: var(--fca-shadow-md); }

.fca-modal__head {
  padding: var(--fca-s-4) var(--fca-s-5);
  border-bottom: 1px solid var(--fca-line-2);
  background: linear-gradient(135deg, color-mix(in srgb, var(--fca-accent) 10%, #fff), #fff);
}
.fca-modal__head h3 { font-size: var(--fca-text-lg); }
.fca-modal__head p { font-size: var(--fca-text-sm); color: var(--fca-ink-2); margin-top: var(--fca-s-1); }
.fca-modal__body { padding: var(--fca-s-45) var(--fca-s-5); }
.fca-modal__foot {
  padding: var(--fca-s-35) var(--fca-s-5);
  border-top: 1px solid var(--fca-line);
  background: var(--fca-surface-2);
  display: flex; align-items: center; justify-content: space-between; gap: var(--fca-s-3);
}
.fca-modal__foot-note { font-size: var(--fca-text-sm); color: var(--fca-ink-2); max-width: 40ch; }

/* The two-party block: who made it, who is checking it. */
.fca-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fca-s-3);
  margin-bottom: var(--fca-s-4);
}
.fca-dual__party {
  border: 1px solid var(--fca-line);
  border-radius: var(--fca-radius-sm);
  padding: var(--fca-s-3);
  background: var(--fca-surface-2);
}
.fca-dual__role {
  font-size: var(--fca-text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fca-muted);
}
.fca-dual__who { display: flex; align-items: center; gap: var(--fca-s-2); margin-top: var(--fca-s-15); }
.fca-dual__who .fca-avatar { width: 28px; height: 28px; font-size: 10px; }
.fca-dual__name { font-weight: 700; font-size: 12.5px; line-height: 1.3; }
.fca-dual__name span { display: block; font-weight: 500; font-size: var(--fca-text-sm); color: var(--fca-ink-2); }
.fca-dual__party.is-pending { border-style: dashed; background: var(--fca-surface); }


/* --------------------------------------------------------------------------
   18. SMALL PARTS USED ACROSS SCREENS
   -------------------------------------------------------------------------- */

.fca-tabs {
  display: flex; gap: var(--fca-s-15);
  border-bottom: 1px solid var(--fca-line);
  margin-bottom: var(--fca-s-4);
  overflow-x: auto;
}
.fca-tab {
  padding: var(--fca-s-25) var(--fca-s-35);
  border: 0; background: transparent;
  border-bottom: 2px solid transparent;
  color: var(--fca-ink-2);
  font-size: var(--fca-text-base); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  text-decoration: none;
}
.fca-tab:hover { color: var(--fca-ink); text-decoration: none; }
.fca-tab.is-current { color: var(--fca-accent); border-bottom-color: var(--fca-accent); }
.fca-tab__count { color: var(--fca-muted); font-weight: 700; margin-left: var(--fca-s-1); font-variant-numeric: tabular-nums; }

.fca-chip {
  display: inline-flex; align-items: center; gap: var(--fca-s-15);
  padding: 3px var(--fca-s-25);
  background: var(--fca-surface-2);
  border: 1px solid var(--fca-line);
  border-radius: var(--fca-radius-pill);
  font-size: 12px; font-weight: 600;
  color: var(--fca-ink);
  white-space: nowrap;
}
.fca-chip--accent { background: var(--fca-accent-soft); border-color: color-mix(in srgb, var(--fca-accent) 30%, #fff); color: var(--fca-accent); }

/* Provenance: every figure can say where it came from. */
.fca-source {
  font-size: var(--fca-text-sm);
  color: var(--fca-muted);
  line-height: 1.4;
}
.fca-source b { font-weight: 700; color: var(--fca-ink-2); }

.fca-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--fca-s-15) var(--fca-s-4); }
.fca-kv dt { font-size: var(--fca-text-sm); color: var(--fca-muted); }
.fca-kv dd { margin: 0; font-size: var(--fca-text-base); font-weight: 600; }

.fca-calc-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--fca-s-3);
  padding: var(--fca-s-2) 0;
  font-size: var(--fca-text-base);
  border-bottom: 1px solid var(--fca-line-2);
}
.fca-calc-row:last-child { border-bottom: 0; }
.fca-calc-row--total { border-top: 2px solid var(--fca-line); border-bottom: 0; margin-top: var(--fca-s-2); padding-top: var(--fca-s-3); font-weight: 700; }
.fca-calc-row__label { color: var(--fca-ink-2); min-width: 0; }
.fca-calc-row--total .fca-calc-row__label { color: var(--fca-ink); }


/* --------------------------------------------------------------------------
   19. NARROW VIEWPORTS
   The console is a desktop console; these rules only stop a narrow window
   from breaking a screen open for review.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .fca-app { grid-template-columns: var(--fca-rail-w) 1fr; }
  .fca-nav { display: none; }
  .fca-grid--main-side,
  .fca-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .fca-app { grid-template-columns: 1fr; height: auto; overflow: visible; }
  .fca-rail { display: none; }
  .fca-content { padding: var(--fca-s-4) var(--fca-s-4) var(--fca-s-8); }
  .fca-grid--2, .fca-grid--3, .fca-grid--4, .fca-grid--main-side { grid-template-columns: minmax(0, 1fr); }
  .fca-field-row, .fca-field-row--thirds, .fca-dual { grid-template-columns: minmax(0, 1fr); }
  .fca-page-header { flex-direction: column; align-items: flex-start; }
  .fca-issue { grid-template-columns: 8px minmax(0, 1fr); row-gap: var(--fca-s-15); }
  .fca-file { grid-template-columns: 40px minmax(0, 1fr); row-gap: var(--fca-s-15); }
  .fca-keying__head dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fca-keying__foot { grid-template-columns: minmax(0, 1fr); }
}


/* --------------------------------------------------------------------------
   20. PRINT — the keying sheet and the inspection export
   A keying sheet is typed from on paper or on a second screen; an inspection
   export is handed to a regulator. Both print without the console around them.
   -------------------------------------------------------------------------- */

@media print {
  :root { --fca-page: #fff; --fca-surface: #fff; --fca-surface-2: #fff; }

  .fca-rail,
  .fca-nav,
  .fca-topbar,
  .fca-page-actions,
  .fca-table-toolbar,
  .fca-tabs,
  .fca-btn,
  .fca-btn-group,
  .fca-issue__act,
  .fca-file__act,
  .fca-due__act,
  .fca-no-print { display: none !important; }

  .fca-app { display: block; height: auto; overflow: visible; }
  .fca-main { display: block; overflow: visible; }
  .fca-content { overflow: visible; padding: 0; }

  body { background: #fff; color: #000; font-size: 10.5pt; }

  .fca-card,
  .fca-table-card,
  .fca-files,
  .fca-timeline,
  .fca-keying,
  .fca-calendar {
    border: 1px solid #999;
    border-radius: 0;
    box-shadow: none;
    break-inside: avoid;
  }

  .fca-table-scroll { max-height: none; overflow: visible; }
  .fca-table thead th { position: static; background: #fff; border-bottom: 1px solid #000; color: #000; }
  .fca-table tbody tr { border-bottom: 1px solid #ccc; }
  .fca-table tbody tr, .fca-keying tbody tr, .fca-file, .fca-issue { break-inside: avoid; }

  /* Pills print as outlined words: a tint does not survive a mono printer. */
  .fca-pill {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
  }
  .fca-pill::before { display: none; }

  .fca-keying { break-before: page; }
  .fca-keying:first-child { break-before: auto; }
  .fca-keying__head { border-bottom-color: #000; }
  .fca-keying tbody td { border-bottom-color: #bbb; }
  .fca-tick { border-color: #000; }

  .fca-print-only { display: block !important; }
  .fca-print-foot {
    display: block !important;
    margin-top: var(--fca-s-5);
    padding-top: var(--fca-s-2);
    border-top: 1px solid #000;
    font-size: 9pt;
    color: #000;
  }

  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 8pt; }
}

.fca-print-only, .fca-print-foot { display: none; }


/* --------------------------------------------------------------------------
   21. THE BUILD NOTE BLOCK
   Appended for the screen files. A screen design carries a note for the
   developer who builds it: the leaf that opens the page, the readers behind
   each figure, the controls and their actions, the refusal sentences, and the
   hermetic legs the requirement needs. It is closed by default, it is never
   part of the console, and it never prints.
   -------------------------------------------------------------------------- */

/* Build notes are developer/design-pack documentation, never shown to the
   operator. Hidden across every FCA route without touching the JSX (which
   the mocks pin) so a screen-reader also skips it (display:none is
   stronger than [hidden] for accessibility trees). */
.fca-buildnotes { display: none; }

/* Machine-readable-snapshot panels (the collapsible dev-only tables that
   pin data-block scrapers) are hidden globally. Tests reach into them by
   data-attribute and do not need CSS layout; the operator never needs to
   see them. */
.fca-panel--audit { display: none; }

/* Status / severity / etc. count-tile strips render an ugly grid of raw
   numbers on top of a page that already prints the same counts in its
   own toolbar. Kept in the DOM by fca-tiles[data-block] for test
   scraping, hidden from the render. */
.fca-tiles[data-block] { display: none; }
.fca-buildnotes--legacy-styling {
  margin-top: var(--fca-s-7);
  border: 1px dashed var(--fca-ink-4);
  border-radius: var(--fca-radius);
  background: var(--fca-surface-2);
}
.fca-buildnotes > summary {
  padding: var(--fca-s-3) var(--fca-s-45);
  cursor: pointer;
  font-family: var(--fca-font-display);
  font-size: var(--fca-text-base);
  font-weight: 700;
  color: var(--fca-ink-2);
  list-style: none;
}
.fca-buildnotes > summary::-webkit-details-marker { display: none; }
.fca-buildnotes > summary::before { content: '\25B8\00A0'; color: var(--fca-muted); }
.fca-buildnotes[open] > summary::before { content: '\25BE\00A0'; }
.fca-buildnotes__body {
  padding: 0 var(--fca-s-45) var(--fca-s-45);
  border-top: 1px solid var(--fca-line);
  margin-top: var(--fca-s-1);
}
.fca-buildnotes__body h4 {
  font-family: var(--fca-font);
  font-size: var(--fca-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fca-accent);
  margin: var(--fca-s-4) 0 var(--fca-s-15);
}
.fca-buildnotes__body ul { margin: 0; padding: 0; }
.fca-buildnotes__body li {
  position: relative;
  padding-left: var(--fca-s-4);
  margin-bottom: var(--fca-s-1);
  font-size: var(--fca-text-sm);
  color: var(--fca-ink-2);
  line-height: 1.55;
}
.fca-buildnotes__body li::before {
  content: '\2014';
  position: absolute; left: 0;
  color: var(--fca-ink-4);
}
.fca-buildnotes__body li b { font-weight: 700; color: var(--fca-ink); }

/* The keying sheet's value column is right-aligned in the body; its column
   header has to agree, and a screen file may not carry an inline style. */
.fca-keying thead th.is-value { text-align: right; }

@media print {
  .fca-buildnotes { display: none !important; }
}

/* A side column that is read before the main column: the form's block list on
   the left, the block itself on the right. The mirror of .fca-grid--main-side,
   and it collapses on the same two breakpoints. Used by the field-by-field
   figures screen, where the block list is the navigation (22 §3.12). */
.fca-grid--side-main { grid-template-columns: 320px minmax(0, 1fr); }
@media (max-width: 1180px) {
  .fca-grid--side-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .fca-grid--side-main { grid-template-columns: minmax(0, 1fr); }
}

/* ── The Issues row, the evidence row and the due-date row in a narrow box ──
   Measured in a headless browser at 950 and 1440 pixels on 10 September 2026.
   .fca-issue, .fca-file and .fca-due each carry fixed columns — 150px for the
   code and the date, 224px for the hash, 158px for the person, 76px for the
   date block — beside one flexible column. Inside a half-width card, inside
   .fca-grid--main-side, or at 950 pixels across, that flexible column is left
   with as little as 52 measured pixels and the sentence in it is clipped with
   no ellipsis and no scroll. Each list is now a named size container, and each
   row folds onto two lines at the width below which its own flexible column
   stops being readable: 780px for the evidence row, 740px for the Issues row,
   440px for the due-date row. The file name, truncated with an ellipsis at
   full width, wraps instead. Nothing changes above those widths.
   Sample: _components.html section 18. */
.fca-issues  { container: fca-issues / inline-size; }
.fca-files   { container: fca-files / inline-size; }
.fca-duelist { container: fca-duelist / inline-size; }

@container fca-issues (max-width: 740px) {
  .fca-issue {
    grid-template-columns: 8px minmax(0, 1fr);
    align-items: start;
    row-gap: var(--fca-s-1);
  }
  .fca-issue__severity { grid-row: 1 / -1; }
  .fca-issue__code,
  .fca-issue__what,
  .fca-issue__when,
  .fca-issue__act { grid-column: 2; }
  .fca-issue__code { padding-left: 0; }
}

@container fca-files (max-width: 780px) {
  .fca-file {
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    row-gap: var(--fca-s-1);
  }
  .fca-file__kind { grid-row: 1 / -1; }
  .fca-file__name,
  .fca-file__hash,
  .fca-file__who,
  .fca-file__act { grid-column: 2; }
  .fca-file__name strong {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
  .fca-file__hash { white-space: normal; overflow-wrap: anywhere; }
}

@container fca-duelist (max-width: 440px) {
  .fca-due {
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: start;
    row-gap: var(--fca-s-15);
  }
  .fca-due__what,
  .fca-due__act { grid-column: 2; }
}

/* A hash and a file name have no space and no hyphen in them, so a key-value
   list holding one cannot wrap it and the whole card is pushed wider than its
   column — measured at 1440 pixels on 10 September 2026 on a keying-sheet file
   name inside a half-width card. Text that fits is untouched; only a word with
   no break in it that cannot fit is broken. */
.fca-kv dd { overflow-wrap: anywhere; }