/* Wawalu Evolution — AI FinOps executive view.
   Layers on styles.css: the header, nav, eyebrow, filter, hint, and focus tokens
   are shared so this tab reads as one system with Decisions and Releases.

   GLYPH ROLES — one silhouette family per job, and no glyph does two jobs.
   These marks are rendered type at 10–13px. At that size a reader separates
   them by *outer silhouette and fill area*, not by interior detail: the inner
   stroke of ◈ closes up, and ◇/◈/◆ collapse into one mark. So the vocabulary is
   two families, and the mirror rule decides fill inside each:

     OUTLINE = a static classification.  FILLED WASH = a live signal.

     DIAMOND = PROVENANCE — where a figure came from.
       ◇ bundled synthetic example (a classification that never changes)
       ◆ computed from the file this reader brought (their live data)
     CIRCLE = STATUS — how much this page currently knows. Fill is the ramp,
     because fill area is the channel that survives caption size:
       ○ nothing yet · ◌ reading · ◔ a little · ◐ part · ● measured
     TRIANGLE = DIRECTION or an available action (▲ ▼ ▶ ▸ ▾); × = refused.

   WORKSPACE DESTINATIONS CARRY NO GLYPH. Four geometric marks at 11px asked a
   reader to disambiguate silhouettes in order to learn what four words already
   said. The name is the identity, "Current" is the state, and the thick left
   rule below is the non-colour cue for it.

   `tests/evolution-glyph-roles.test.js` holds this table to the page: a glyph
   that appears in two roles, or a chip whose label does not survive its glyph
   being deleted, fails there rather than shipping.

   The four category colors are a validated categorical set for this surface
   (#f3f1eb): every adjacent pair clears the CVD and normal-vision separation
   floors. Two of them sit below 3:1 contrast against the page, so identity is
   never carried by color alone — every segment has a visible legend label with
   its own value, and the department table repeats the same numbers as text. */
:root {
  --cat-high-value:#1baf7a;
  --cat-over-provisioned:#eda100;
  --cat-inefficient:#2a78d6;
  --cat-out-of-scope:#e34948;
  --panel-border:#d1cfc7;
  --ink-muted:#6f6f69;
  /* Import-flow roles. Every value below already shipped inline in this file;
     naming them stops the stage, requirement, and diagnostic states from
     re-deriving the panel's green/amber/red by hand. No new hue is introduced. */
  --import-ink:#244c3c;        /* body text inside the local-import panel */
  --import-accent:#315f50;     /* the panel's structural rule and marker edge */
  --import-line:#9eb9aa;       /* panel and control borders */
  --import-wash:#eef6f2;       /* resolved / active fill inside the panel */
  --state-warn-ink:#614a12;    /* unresolved-but-recoverable text */
  --state-warn-line:#9b791c;
  --state-warn-wash:#fffaf0;
  --state-error-ink:#6f2821;   /* rejected-input text */
  --state-error-line:#b4453a;
  --state-error-wash:#fdf4f3;
}
/* The portfolio-comparability region on the import panel. Its verdict is
   carried by the word and the glyph beside it; the tint below is the third
   redundant carrier, never the first, so the region reads the same to someone
   who sees no colour at all. */
.portfolio-comparability { grid-column:1/-1; margin:18px 0 0; border:1px solid var(--import-line); border-left:5px solid var(--import-accent); border-radius:11px; padding:15px 17px; background:#fff; color:var(--import-ink); }
.portfolio-comparability[data-verdict="not_yet"] { border-left-color:var(--state-warn-line); }
.portfolio-comparability[data-verdict="no"] { border-left-color:var(--state-error-line); }
.portfolio-comparability-heading h3 { margin:2px 0 10px; font-size:17px; }
.portfolio-comparability-chooser { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin:0 0 12px; }
.portfolio-comparability-chooser label { font:700 11px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.portfolio-comparability-chooser-note { flex-basis:100%; margin:0; color:var(--ink-muted); font-size:12px; line-height:1.5; }
.portfolio-sample-teaches { margin:0 0 10px; color:var(--ink-muted); font-size:12px; line-height:1.55; }
.portfolio-contract-defect { margin:0 0 10px; border:1px solid var(--state-error-line); border-left:5px solid var(--state-error-line); border-radius:9px; padding:10px 12px; background:var(--state-error-wash); color:var(--state-error-ink); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.portfolio-verdict { display:flex; align-items:baseline; gap:8px; margin:0 0 10px; font-size:18px; }
.portfolio-verdict-shape { flex:none; font-weight:750; }
.portfolio-answers { display:grid; gap:11px; margin:0; padding:0; list-style:none; counter-reset:none; }
.portfolio-answer { border-top:1px solid var(--import-line); padding:9px 0 0; }
.portfolio-answer-question { margin:0; color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.portfolio-answer-headline { margin:4px 0 0; font-size:14px; line-height:1.5; font-weight:650; overflow-wrap:anywhere; }
.portfolio-answer-detail { margin:3px 0 0; color:var(--ink-muted); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.portfolio-action-jump { margin:12px 0 0; }
.portfolio-disclosure { margin:12px 0 0; border-top:1px solid var(--import-line); padding:9px 0 0; font-size:12px; }
.portfolio-disclosure summary { cursor:pointer; font-weight:650; }
.portfolio-provider-list,.portfolio-errors { display:grid; gap:7px; margin:10px 0 0; padding:0; list-style:none; }
.portfolio-provider { display:flex; flex-wrap:wrap; gap:2px 10px; border:1px solid var(--import-line); border-radius:8px; padding:7px 10px; background:var(--import-wash); line-height:1.5; }
.portfolio-provider[data-state="covered"] { background:#fff; }
.portfolio-provider-name { font-weight:700; }
.portfolio-provider-state { font-weight:650; }
.portfolio-provider-window,.portfolio-provider-count,.portfolio-provider-provenance { color:var(--ink-muted); font-size:11px; }
.portfolio-errors li { color:var(--state-error-ink); line-height:1.55; overflow-wrap:anywhere; }
.portfolio-basis,.portfolio-comparability-source { margin:10px 0 0; color:var(--ink-muted); font-size:11px; line-height:1.55; overflow-wrap:anywhere; }
/* The partial-evidence finding on the import panel. Same three redundant
   carriers as the region above it — the state word first, the glyph second, the
   tint last — so nothing here is only a colour. The partial stamp is deliberately
   loud: an unlabelled subtotal read as a total is the mistake this region
   exists to prevent. */
.partial-evidence { grid-column:1/-1; margin:18px 0 0; border:1px solid var(--import-line); border-left:5px solid var(--import-accent); border-radius:11px; padding:15px 17px; background:#fff; color:var(--import-ink); }
.partial-evidence[data-state="partial"] { border-left-color:var(--state-warn-line); }
.partial-evidence[data-state="insufficient_evidence"] { border-left-color:var(--state-error-line); }
.partial-evidence-heading h3 { margin:2px 0 10px; font-size:17px; }
.pe-headline { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; margin:0 0 12px; font-size:14px; line-height:1.55; }
.pe-headline-shape { flex:none; font-size:18px; font-weight:750; }
.pe-headline-word { font-size:16px; }
.pe-headline-text { flex-basis:100%; color:var(--ink-muted); overflow-wrap:anywhere; }
.pe-material { border-top:1px solid var(--import-line); border-bottom:1px solid var(--import-line); padding:10px 0; }
.pe-material-label,.pe-slot-label,.pe-evidence-kind { margin:0; color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.pe-material-figure { margin:4px 0 0; font:700 24px/1.25 ui-monospace,monospace; overflow-wrap:anywhere; }
.pe-material-partial { margin:7px 0 0; border:1px solid var(--state-warn-line); border-left:5px solid var(--state-warn-line); border-radius:9px; padding:8px 11px; background:var(--state-warn-wash); font-size:12px; line-height:1.55; font-weight:650; overflow-wrap:anywhere; }
.pe-material-basis { margin:7px 0 0; color:var(--ink-muted); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.pe-action { margin:12px 0 0; font-size:14px; line-height:1.55; font-weight:650; overflow-wrap:anywhere; }
.pe-slot-label { margin-top:12px; }
.pe-confidence { margin:4px 0 0; font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
.pe-action-jump { margin:10px 0 0; }
.pe-peer { margin:12px 0 0; color:var(--ink-muted); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.pe-disclosure { margin:12px 0 0; border-top:1px solid var(--import-line); padding:9px 0 0; font-size:12px; }
.pe-disclosure summary { cursor:pointer; font-weight:650; }
.pe-disclosure-heading { margin:11px 0 0; font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); }
.pe-exclusion-list,.pe-usable-list,.pe-review-gaps,.pe-contract-errors { display:grid; gap:7px; margin:7px 0 0; padding:0; list-style:none; }
.pe-exclusion,.pe-usable { display:flex; flex-wrap:wrap; gap:2px 10px; border:1px solid var(--import-line); border-radius:8px; padding:7px 10px; background:var(--import-wash); line-height:1.5; }
.pe-evidence-kind { flex-basis:100%; }
.pe-usable { background:#fff; }
.pe-exclusion-label,.pe-usable-label { font-weight:700; }
.pe-exclusion-reason { flex-basis:100%; color:var(--ink-muted); font-size:11px; overflow-wrap:anywhere; }
.pe-usable-window,.pe-usable-provenance { color:var(--ink-muted); font-size:11px; }
.pe-review-gaps li,.pe-contract-errors li { line-height:1.55; overflow-wrap:anywhere; }
.pe-contract-errors li { color:var(--state-error-ink); }
.pe-definition,.pe-arithmetic,.pe-provenance,.partial-evidence-source { margin:10px 0 0; color:var(--ink-muted); font-size:11px; line-height:1.55; overflow-wrap:anywhere; }
.pe-arithmetic { font-family:ui-monospace,monospace; }
.nav-evolution { display:inline-flex; align-items:center; gap:7px; }
.nav-evolution::before { content:""; width:6px; height:6px; border-radius:2px; background:#1baf7a; }

/* One column at every width. The score card used to sit in a second column
   here; it now follows the populated example result, so the hero is copy only
   and the first thing under it is an answer rather than a pending card. */
.finops-hero { display:grid; gap:48px; padding:clamp(60px,8vw,104px) 0 40px; }
.finops-hero h1 { margin-bottom:22px; }
/* Still scoped to the copy block rather than to `.finops-hero>div>p`: the rule
   sizes body copy, and the hero has carried other children before. */
.finops-hero .hero-copy>p { max-width:680px; margin:0; color:#555550; font-size:18px; line-height:1.65; }
.finops-hero .hero-copy>p.finops-provenance { margin-top:18px; color:var(--ink-muted); font:600 12px/1.6 ui-monospace,monospace; }

/* The literacy grade, readable in one glance. Bounded rather than full-bleed:
   a 66px letter stretched across a desktop column reads as the page's verdict,
   which is the prominence this card gave up when it left the hero. */
.score-card { display:grid; gap:6px; width:min(100%,360px); margin:0 0 24px; border:1px solid var(--panel-border); border-radius:16px; padding:22px; background:rgba(255,255,255,.72); box-shadow:0 14px 40px rgba(38,38,31,.04); }
.score-grade { margin:6px 0 0; font-size:66px; line-height:.9; letter-spacing:-.05em; font-weight:750; }
.score-card[data-band="good"] .score-grade { color:#17845c; }
.score-card[data-band="watch"] .score-grade { color:#8a6d0a; }
.score-card[data-band="poor"] .score-grade { color:#a5322f; }
.score-card[data-band="review"] { border-style:dashed; background:#fbf5e8; }
.score-card[data-band="review"] .score-grade { color:#6d5510; }
.score-value { margin:8px 0 0; font-size:15px; font-weight:650; }
/* Coverage and confidence, immediately subordinate to the letter: a 10px
   uppercase label over a 13px value, which is the same figure-and-caption pair
   the KPI cards on this page already use, so the card reads as one system with
   them rather than as a fifth tile. Both values wrap; neither truncates. */
.score-figures { display:grid; gap:11px; margin:10px 0 0; }
.score-figure-label { margin:0; color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.09em; text-transform:uppercase; }
.score-coverage,.score-confidence { margin:4px 0 0; font-size:13px; font-weight:650; line-height:1.5; overflow-wrap:anywhere; }
/* The band as an outline chip. The word and the range inside it are the whole
   message; the border colour is the third carrier and never the first. */
.score-band { display:inline-flex; flex-wrap:wrap; gap:2px 8px; width:fit-content; max-width:100%; margin:12px 0 0; border:1px solid var(--ink-muted); border-radius:99px; padding:4px 11px; background:#fff; color:var(--ink-muted); font:700 11px/1.45 ui-monospace,monospace; overflow-wrap:anywhere; }
.score-card[data-band="good"] .score-band { border-color:#17845c; color:#17845c; }
.score-card[data-band="watch"] .score-band { border-color:#8a6d0a; color:#8a6d0a; }
.score-card[data-band="poor"] .score-band { border-color:#a5322f; color:#a5322f; }
.score-card[data-band="review"] .score-band { border-style:dashed; border-color:#6d5510; color:#6d5510; }
.score-why { margin:12px 0 0; font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
/* #1008: the reader's own classification of their own departments. On the card
   and never behind a disclosure — it is what earns the letter above it. Each
   select is a 44px target with the site focus token, and the stated assumption
   for the picked category sits under it as ordinary text, so the reason a weight
   is what it is survives greyscale and a stylesheet that failed to load. */
.score-classify { margin:12px 0 0; border-top:1px solid var(--panel-border); padding-top:10px; }
.score-classify-title { margin:0; max-width:60ch; font-size:13px; line-height:1.55; }
.score-classify-list { display:grid; gap:12px; margin:11px 0 0; padding:0; list-style:none; }
.score-classify-label { display:block; font-size:12px; font-weight:700; line-height:1.5; overflow-wrap:anywhere; }
.score-classify-select { min-height:44px; max-width:100%; margin:5px 0 0; border:1px solid var(--ink-muted); border-radius:9px; padding:6px 10px; background:#fff; font-size:13px; }
.score-classify-select:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.score-classify-assumption:empty { display:none; }
.score-classify-assumption { margin:5px 0 0; max-width:70ch; font-size:12px; line-height:1.5; color:var(--ink-muted); overflow-wrap:anywhere; }
/* The detail disclosure. The summary is a 44px target with its own visible
   edge and focus ring, so the control is discernible before it is operated. */
.score-detail { margin:12px 0 0; border-top:1px solid var(--panel-border); padding-top:10px; }
.score-detail>summary { display:flex; align-items:center; min-height:44px; border:1px solid var(--ink-muted); border-radius:9px; padding:6px 10px; background:#fff; color:var(--ink-muted); font:700 10px/1.5 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; overflow-wrap:anywhere; }
.score-detail>summary:hover { background:var(--import-wash); }
.score-detail>summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.score-detail-list { display:grid; gap:7px; margin:11px 0 0; padding:0; list-style:none; }
.score-detail-list li { font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
/* A department the rubric never reached, told by the leading rule as well as
   by the words in the row, so the two kinds of row separate in monochrome. */
.score-detail-list li[data-graded="false"] { border-left:3px solid var(--state-warn-line); padding-left:9px; color:var(--state-warn-ink); }
.score-detail-rule { margin:11px 0 0; color:var(--ink-muted); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.score-detail-rule[hidden] { display:none; }
.score-action { margin:12px 0 0; font-size:13px; color:var(--ink-muted); }
.score-peer { margin:2px 0 0; color:var(--ink-muted); font:600 11px/1.5 ui-monospace,monospace; }
/* A provisional letter is never shown bare: the mark travels with the glyph so
   the caveat cannot be cropped away from the grade it qualifies. */
.score-card[data-grade-state="provisional"] .score-grade::after { content:"*"; font-size:.5em; vertical-align:super; }

.proof-point { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,1fr); gap:20px 32px; margin:0 0 24px; border:1px solid #8ead9d; border-left:6px solid #315f50; border-radius:16px; padding:clamp(22px,4vw,32px); background:linear-gradient(145deg,#f1f8f4,#fff 62%); box-shadow:0 14px 40px rgba(38,38,31,.04); }
.proof-point-copy h2 { max-width:650px; margin:7px 0 10px; font-size:clamp(22px,3vw,30px); line-height:1.2; }
.proof-point-copy>p:last-child { max-width:620px; margin:0; color:#4c5650; font-size:14px; line-height:1.55; }
.proof-point-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 22px; margin:0; }
.proof-point-facts div { min-width:0; }
.proof-point-facts dt { color:var(--ink-muted); font:700 9px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.proof-point-facts dd { margin:5px 0 0; font-size:14px; font-weight:700; line-height:1.4; overflow-wrap:anywhere; }
.proof-point-link { grid-column:1/-1; justify-self:start; }
#recommendation-evidence { scroll-margin-top:24px; }

.kpi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:16px; }
.kpi { border:1px solid var(--panel-border); border-radius:14px; padding:20px; background:rgba(255,255,255,.68); }
.kpi-alert { border-color:#e6c3c2; background:#fdf5f4; }
.kpi-label { margin:0; color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.09em; text-transform:uppercase; }
.kpi-value { margin:12px 0 0; font-size:32px; font-weight:750; letter-spacing:-.035em; overflow-wrap:anywhere; }
.kpi-alert .kpi-value { color:#a5322f; }
.kpi-note { margin:8px 0 0; color:var(--ink-muted); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
/* A card the import could not fill. The dashed edge is the shape channel, the
   "unmeasured" chip is the word, and the value drops out of the 32px numeral
   size so it stops reading as a measurement at a glance. */
.kpi[data-available="false"] { border-style:dashed; border-color:var(--state-warn-line); background:var(--state-warn-wash); }
.kpi-flag { display:inline-flex; align-items:baseline; gap:6px; width:fit-content; margin:10px 0 0; border:1px solid var(--state-warn-line); border-radius:99px; padding:3px 9px; background:#fff; color:var(--state-warn-ink); font:700 11px/1.4 ui-monospace,monospace; }
.kpi-flag[hidden] { display:none; }
.kpi-flag-shape { flex:none; font-weight:750; }
.kpi[data-available="false"] .kpi-value { margin-top:6px; font-size:17px; letter-spacing:0; color:var(--state-warn-ink); }
/* The one prioritized peer finding, under the percentile it follows from. The
   rule on the leading edge is the shape channel, so an import that is behind its
   cohort still reads as a call to act in monochrome and at 200% zoom, where the
   only other signal would be a colour nobody can see. */
.kpi-finding { border-left:3px solid var(--ink-muted); margin:12px 0 0; padding:2px 0 2px 11px; }
.kpi-finding[hidden] { display:none; }
.kpi-finding[data-peer-standing="behind_cohort"] { border-left-color:var(--state-warn-line); }
.kpi-finding-heading { margin:0; color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.09em; text-transform:uppercase; }
.kpi-finding-gap { margin:6px 0 0; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.kpi-finding-action { margin:6px 0 0; font-size:13px; font-weight:650; line-height:1.5; overflow-wrap:anywhere; }
.kpi-finding[data-peer-standing="behind_cohort"] .kpi-finding-action { color:var(--state-warn-ink); }
.kpi-finding-evidence { margin:6px 0 0; color:var(--ink-muted); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
/* What qualifies a peer position, between the numeral and the next step. The
   distinction lives in the words — "Close match" against "Broad match", "High"
   against "Low confidence" — so the chip's border and weight reinforce a
   difference a reader can already read, including in monochrome. */
.kpi-trust { display:inline-flex; flex-wrap:wrap; gap:2px 8px; width:fit-content; max-width:100%; margin:10px 0 0; border:1px solid var(--ink-muted); border-radius:99px; padding:3px 10px; background:#fff; font:700 11px/1.45 ui-monospace,monospace; overflow-wrap:anywhere; }
.kpi-trust[data-comparability="broad"] { border-style:dashed; }
.kpi-segment { margin:8px 0 0; color:var(--ink-muted); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
/* The distance from the median. Weighted like the action it argues for, because
   "62nd percentile" is where an organization sits and this is whether the gap is
   worth a meeting. */
.kpi-delta { margin:6px 0 0; font-size:13px; font-weight:650; line-height:1.5; overflow-wrap:anywhere; }
.kpi-needed { border-left:3px solid var(--state-warn-line); margin:10px 0 0; padding:0 0 0 11px; color:var(--state-warn-ink); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.kpi-cohort-version { margin:10px 0 0; color:var(--ink-muted); font:600 11px/1.5 ui-monospace,monospace; overflow-wrap:anywhere; }
.kpi-trust[hidden],.kpi-segment[hidden],.kpi-delta[hidden],.kpi-needed[hidden],
.kpi-cohort-version[hidden],.kpi-disclosure[hidden] { display:none; }
/* Method and supporting metrics, one keystroke away and native. */
.kpi-disclosure { margin:12px 0 0; border-top:1px solid var(--panel-border); padding-top:10px; }
.kpi-disclosure-summary { cursor:pointer; color:var(--ink-muted); font:700 10px/1.5 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.kpi-disclosure>summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.kpi-disclosure-heading { margin:12px 0 0; color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.09em; text-transform:uppercase; }
.kpi-disclosure-list { margin:6px 0 0; padding-left:18px; }
.kpi-disclosure-item { margin:5px 0 0; font-size:12px; line-height:1.55; overflow-wrap:anywhere; }

.finops-panel { margin-top:24px; border:1px solid var(--panel-border); border-radius:18px; padding:30px; background:rgba(255,255,255,.68); box-shadow:0 14px 40px rgba(38,38,31,.04); }

/* The guided result. Read before every panel below it, so it carries the only
   heavy rule on the page; the readiness note is a word and a border, never a
   colour alone, so it survives monochrome and a screen reader alike. */
.guided-result { margin-top:24px; border-left:6px solid #315f50; }
/* An inset card, not a full-bleed band: the panel's own padding is 30px and
   21px below 760px, so a fixed negative margin lands at a different inset per
   breakpoint, and one wide enough to actually reach the edge would paint its
   background outside the panel's 18px rounded corners. */
.recurring-review-workspace { margin:0 0 26px; border:1px solid var(--panel-border); border-radius:14px; padding:22px 20px 24px; background:#f6faf7; }
.monthly-review-projection { margin:0 0 26px; border:1px solid var(--panel-border); border-radius:14px; padding:22px 20px 24px; background:#f5f8fc; }
.monthly-review-projection h2 { margin:4px 0 16px; font-size:clamp(24px,4vw,34px); line-height:1.12; letter-spacing:-.025em; }
.monthly-review-projection p { max-width:76ch; line-height:1.55; }
.monthly-review-status,.monthly-review-state-label { display:inline-flex; margin:0 0 16px; border-radius:5px; padding:4px 9px; background:var(--import-wash); color:var(--import-ink); font:700 11px/1.4 ui-monospace,monospace; letter-spacing:.04em; text-transform:uppercase; }
.monthly-review-projection[data-state="worsening"] .monthly-review-status,.monthly-review-projection[data-state="empty"] .monthly-review-state-label,.monthly-review-projection[data-state="loading"] .monthly-review-state-label { background:var(--state-warn-wash); color:var(--state-warn-ink); }
.monthly-review-projection[data-state="error"] .monthly-review-state-label,.monthly-review-projection[data-state="implausible_extreme"] .monthly-review-state-label { background:var(--state-error-wash); color:var(--state-error-ink); }
.monthly-review-state-action { margin:0; color:var(--ink-muted); }
.monthly-review-benchmark { border-top:1px solid var(--panel-border); padding-top:16px; }
.monthly-review-benchmark h3,.monthly-review-projection-action h3 { margin:0 0 7px; color:var(--ink-muted); font:700 11px/1.4 ui-monospace,monospace; letter-spacing:.09em; text-transform:uppercase; }
.monthly-review-finding { margin:0; font-size:17px; font-weight:650; }
.monthly-review-finding-evidence { margin:7px 0 0; color:var(--ink-muted); font-size:13px; }
.monthly-review-value { margin:8px 0 0; font:700 clamp(30px,6vw,44px)/1.05 system-ui,sans-serif; letter-spacing:-.035em; }
.monthly-review-comparison { margin:7px 0 0; color:var(--ink-muted); font-size:13px; }
.monthly-review-savings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:620px; margin:18px 0 0; }
.monthly-review-savings-metric { border:1px solid var(--panel-border); border-radius:10px; padding:14px; background:#fff; }
.monthly-review-savings-metric dt { color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.monthly-review-savings-metric dd { margin:5px 0 0; font:750 clamp(22px,4vw,32px)/1.1 system-ui,sans-serif; letter-spacing:-.025em; overflow-wrap:anywhere; }
.monthly-review-savings-claim { margin:8px 0 0; color:var(--ink-muted); font-size:13px; }
.monthly-review-projection-action { margin-top:20px; border-left:5px solid var(--import-accent); padding:15px 16px; background:#fff; }
.monthly-review-action-statement { margin:0; font-size:17px; font-weight:700; }
.monthly-review-disposition { margin:0 0 8px; color:#244c3c; font-weight:800; text-transform:uppercase; }
.monthly-review-cycle-controls { display:grid; gap:14px; max-width:760px; margin:16px 0; }
.monthly-review-cycle-choice { display:grid; grid-template-columns:auto 1fr; gap:4px 10px; border:1px solid var(--panel-border); border-radius:10px; padding:15px; background:#fff; }
.monthly-review-cycle-choice input { width:20px; height:20px; margin:2px 0 0; accent-color:var(--import-accent); }
.monthly-review-cycle-choice .monthly-review-comparison { grid-column:2; }
.monthly-review-cycle-controls button,.monthly-review-projection > button { width:max-content; min-height:44px; border:0; border-radius:9px; padding:9px 15px; background:var(--import-accent); color:#fff; font-weight:750; cursor:pointer; }
.monthly-review-cycle-controls button[disabled] { opacity:.55; cursor:not-allowed; }
.monthly-review-cycle-controls button:focus-visible,.monthly-review-cycle-choice input:focus-visible,.monthly-review-projection > button:focus-visible,#monthly-review-projection-title:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.monthly-review-department-link { display:inline-flex; min-height:44px; align-items:center; margin-top:12px; color:#1f70c1; font-weight:750; text-underline-offset:4px; }
.monthly-review-context-links { display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:10px; }
.monthly-review-context-link { display:inline-flex; min-height:44px; align-items:center; color:#1f70c1; font-weight:750; text-underline-offset:4px; }
.monthly-review-department-link:focus-visible,.monthly-review-return:focus-visible,.monthly-review-context-link:focus-visible,.monthly-review-projection-provenance summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.monthly-review-return { display:inline-flex; min-height:44px; align-items:center; margin-bottom:16px; color:#1f70c1; font-weight:750; text-underline-offset:4px; }
.monthly-review-evidence { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:14px; margin:0; }
.monthly-review-fact { min-width:0; border-top:1px solid var(--panel-border); padding-top:10px; }
.monthly-review-fact dt { color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.monthly-review-fact dd { margin:4px 0 0; line-height:1.5; overflow-wrap:anywhere; }
.monthly-review-projection-provenance { margin-top:18px; border:1px solid var(--panel-border); border-radius:9px; background:#fff; }
.monthly-review-projection-provenance summary { border-radius:8px; padding:11px 13px; cursor:pointer; font-weight:650; }
.monthly-review-provenance-content { display:grid; gap:12px; padding:3px 13px 14px; }
.monthly-review-boundary { margin:0; color:var(--ink-muted); font-size:12px; }
@media (max-width:560px) {
  .monthly-review-cycle-controls button,.monthly-review-projection > button { width:100%; }
  .monthly-review-savings { grid-template-columns:1fr; }
  .monthly-review-context-links { display:grid; }
}
.recurring-review-workspace[data-state="blocked"],.recurring-review-workspace[data-state="insufficient_evidence"] { background:#fff9ec; }
/* By id: `.guided-result h2` is equally specific and later in the file, so it
   would otherwise win and this heading would render at the size of the headline
   it leads rather than above it. */
#recurring-review-question { margin:4px 0 18px; font-size:clamp(25px,4vw,36px); }
.recurring-review-metric { padding:16px; border-left:5px solid #315f50; background:#fff; }
.recurring-review-workspace:not([data-state="ready"]) .recurring-review-metric { border-left-color:#8a6a2f; }
.recurring-review-label,.recurring-review-period,.recurring-review-confidence,.recurring-review-provenance,.recurring-review-complete-note { margin:0; color:var(--ink-muted); font-size:13px; line-height:1.5; }
.recurring-review-value { margin:4px 0; font:700 clamp(24px,5vw,38px)/1.15 inherit; letter-spacing:-.02em; }
.recurring-review-finding,.recurring-review-action { margin-top:20px; max-width:72ch; }
.recurring-review-finding h3,.recurring-review-action h3 { margin:0 0 6px; font-size:14px; }
.recurring-review-finding-text,.recurring-review-action p { margin:0 0 8px; line-height:1.55; }
.recurring-review-complete { min-height:44px; margin-top:8px; border:0; border-radius:8px; padding:10px 16px; background:#315f50; color:#fff; font:700 14px/1.4 inherit; cursor:pointer; }
.recurring-review-complete:disabled { background:#52645e; cursor:default; }
.recurring-review-complete:focus-visible,.recurring-review-details>summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.recurring-review-status { min-height:1.5em; margin:6px 0 0; font-weight:600; }
.recurring-review-details { margin-top:12px; border-top:1px solid var(--panel-border); padding-top:10px; }
.recurring-review-details>summary { border-radius:6px; padding:6px; cursor:pointer; font-weight:650; }
.recurring-review-facts { margin:10px 6px 0; display:grid; gap:10px; }
.recurring-review-fact dt { color:var(--ink-muted); font-size:12px; font-weight:700; text-transform:uppercase; }
.recurring-review-fact dd { margin:2px 0 0; overflow-wrap:anywhere; line-height:1.5; }
.guided-result[data-decision-ready="false"] { border-left-color:#8a6a2f; }
.guided-result h2 { margin:6px 0 10px; font-size:clamp(24px,3.4vw,32px); line-height:1.15; }
.guided-result-finding { margin:0 0 12px; max-width:70ch; font-size:17px; line-height:1.55; color:var(--ink); }
.guided-result-readiness { margin:0 0 20px; padding:8px 12px; border:1px dashed #8a6a2f; border-radius:10px; font:600 13px/1.45 inherit; color:#6d5322; }
.guided-result-readiness[data-ready="true"] { border-style:solid; border-color:#315f50; color:#255043; }
.guided-result-slots { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:18px; }
.guided-result-slot { border-top:1px solid var(--panel-border); padding-top:12px; }
.guided-result-label { margin:0 0 6px; color:#65717d; font:700 11px/1.4 ui-monospace,monospace; letter-spacing:.11em; text-transform:uppercase; }
.guided-result-figure { margin:0; font-size:16px; line-height:1.5; }
.guided-result-figure[data-available="false"], .guided-result-figure[data-satisfied="false"] { color:var(--state-warn-ink); }
.guided-result-detail { margin:6px 0 0; color:var(--ink-muted); font-size:13px; line-height:1.5; }
.guided-result-action-control { min-height:44px; margin-top:12px; border:1px solid #315f50; border-radius:8px; padding:9px 14px; background:#315f50; color:#fff; font:700 13px/1.4 inherit; cursor:pointer; }
.guided-result-action-control:focus-visible,.guided-result-support>summary:focus-visible,.guided-disclosure-question:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.guided-result-support { margin-top:20px; border-top:1px solid var(--panel-border); padding-top:14px; }
.guided-result-support>summary { border-radius:7px; padding:6px 8px; cursor:pointer; font-weight:600; }
.guided-result-support>summary:hover { background:var(--import-wash); }
.guided-result-support-note { margin:10px 0; max-width:70ch; color:var(--ink-muted); font-size:13px; line-height:1.55; }

/* The portfolio-primary brief. Same slot grid as the guided result above — one
   auto-fitting track list, so a narrow viewport stacks the slots in reading
   order without a media query and the aligned total keeps the full width it
   needs. State is a word and a shape in the markup; these rules only tint what
   the text already says. */
.portfolio-brief { margin-top:24px; border-left:6px solid #315f50; }
.portfolio-brief[data-state="partial"] { border-left-color:#8a6a2f; }
.portfolio-brief[data-state="blocked"] { border-left-color:#8c3a3a; }
.portfolio-brief h2 { margin:6px 0 10px; font-size:clamp(24px,3.4vw,32px); line-height:1.15; }
.portfolio-brief-reason:empty { display:none; }
.portfolio-brief-reason { margin:0 0 12px; max-width:70ch; color:var(--ink-muted); font-size:14px; line-height:1.55; }
.portfolio-brief-total { margin:0 0 20px; }
.portfolio-brief-total-label { margin:0 0 4px; color:#65717d; font:700 11px/1.4 ui-monospace,monospace; letter-spacing:.11em; text-transform:uppercase; }
.portfolio-brief-total-value { margin:0; font-size:clamp(28px,5vw,40px); font-weight:700; line-height:1.1; }
.portfolio-brief-total-value[data-available="false"] { color:var(--state-warn-ink); font-size:clamp(20px,3vw,26px); }
.portfolio-brief-slots { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:18px; }
.portfolio-brief-slot { border-top:1px solid var(--panel-border); padding-top:12px; }
.portfolio-brief-label { margin:0 0 6px; color:#65717d; font:700 11px/1.4 ui-monospace,monospace; letter-spacing:.11em; text-transform:uppercase; }
.portfolio-brief-value { margin:0; font-size:16px; line-height:1.5; }
.portfolio-brief-value[data-available="false"] { color:var(--state-warn-ink); }
.portfolio-brief-detail { margin:6px 0 0; max-width:70ch; color:var(--ink-muted); font-size:13px; line-height:1.5; }
.portfolio-brief-action { margin-top:20px; border-top:1px solid var(--panel-border); padding-top:12px; }
.portfolio-brief-action-text { margin:0; max-width:70ch; font-size:17px; line-height:1.5; }
.portfolio-brief-action-text[data-available="false"] { color:var(--state-warn-ink); }
.portfolio-brief-provenance { margin-top:20px; }
.portfolio-brief-provenance-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:4px 18px; margin:8px 0 0; }
.portfolio-brief-provenance-term { margin:0; color:#65717d; font:700 11px/1.5 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.portfolio-brief-provenance-detail { margin:0 0 6px; overflow-wrap:anywhere; color:var(--ink-muted); font-size:13px; line-height:1.5; }
.portfolio-brief-disclosures { margin-top:20px; display:grid; gap:8px; }
.portfolio-brief-disclosure { border:1px solid var(--panel-border); border-radius:10px; }
.portfolio-brief-disclosure-summary { min-height:44px; display:flex; gap:8px; align-items:center; border-radius:9px; padding:8px 10px; cursor:pointer; font-weight:600; }
.portfolio-brief-disclosure-summary:hover { background:var(--import-wash); }
.portfolio-brief-disclosure-summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.portfolio-brief-disclosure[data-open="true"]>.portfolio-brief-disclosure-summary .portfolio-brief-disclosure-shape { transform:rotate(90deg); }
.portfolio-brief-disclosure-shape { display:inline-block; }
.portfolio-brief-disclosure-note, .portfolio-brief-disclosure-empty { margin:0 10px 10px; max-width:70ch; color:var(--ink-muted); font-size:13px; line-height:1.55; }
.portfolio-brief-disclosure-rows { margin:0 10px 12px; }
.portfolio-brief-disclosure-term { margin:8px 0 2px; font:700 13px/1.45 inherit; }
.portfolio-brief-disclosure-detail { margin:0; max-width:70ch; color:var(--ink-muted); font-size:13px; line-height:1.55; }

/* Supporting panels, each behind its own disclosure.
   Benchmark, department, spend mix, savings, and recommendation evidence are
   the questions a leader opens to check the guided finding — not the ones they
   should have to scroll past to reach it. Each block ships closed, in the rank
   order the contract declares and the guided index publishes, so the page has
   one reading order rather than two.

   The summary is the whole interactive surface: 44px tall, a real focus ring,
   and a step and a question in text. State is never carried by the triangle
   alone — the step word, the question, and the border weight all change. */
.support-disclosure { margin:22px 0; border:1px solid var(--panel-border); border-radius:12px; background:#fff; }
.support-disclosure>summary { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; min-height:44px; border-radius:11px; padding:11px 16px; cursor:pointer; }
.support-disclosure>summary:hover { background:#faf9f5; }
.support-disclosure>summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.support-disclosure[open] { border-color:#b3b0a6; }
.support-disclosure[open]>summary { border-bottom:1px solid var(--panel-border); border-radius:11px 11px 0 0; }
/* A panel the contract cannot answer stays listed and stays openable: the
   question exists, and hiding it would tell a leader that it does not. */
.support-disclosure[data-disclosure-permitted="false"]>summary { color:var(--ink-muted); }
.support-disclosure-step { color:var(--ink-muted); font:750 11px/1.5 ui-monospace,monospace; letter-spacing:.04em; text-transform:uppercase; }
.support-disclosure-question { font-size:14px; font-weight:700; }
/* The panels inside already carry their own padding and heading; the wrapper
   only has to stop them re-drawing a second border inside this one. */
.support-disclosure>section { margin:0; border:0; border-radius:0 0 11px 11px; }
.guided-result-disclosures { margin:0; padding-left:22px; display:grid; gap:10px; }
.guided-disclosure-question { display:block; font-weight:600; }
.guided-disclosure-note { display:block; color:var(--ink-muted); font-size:13px; line-height:1.5; }
.guided-disclosure[data-permitted="false"] .guided-disclosure-note { color:var(--state-warn-ink); }
/* Support means disclosed, not merely labelled. The elements keep their
   established DOM positions and state, but leave both the visual and
   accessibility trees until the native disclosure is opened. */
#guided-result[data-support-expanded="false"]~[data-panel-role="support"],
#guided-result[data-support-expanded="false"]~* [data-panel-role="support"] { display:none; }
.local-import { border-color:#9eb9aa; background:linear-gradient(145deg,#f7fbf8,#fff 55%); }
.local-export-activation { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:24px 0; border:1px solid var(--import-line); border-radius:12px; padding:20px; background:#fff; }
.local-export-activation>div:first-child { display:grid; gap:6px; max-width:64ch; }
.local-export-activation p { margin:0; }
.local-export-activation-lead { font-size:17px; line-height:1.45; }
#local-export-activation-status { color:var(--ink-muted); font-size:12px; line-height:1.55; }
.local-export-activation-actions { display:grid; flex:0 0 auto; gap:8px; min-width:220px; }
.local-import button.local-export-primary { border-color:var(--import-ink); background:var(--import-ink); color:#fff; }
.local-import button.local-export-primary:hover { background:#183b2e; }
.local-export-activation[data-state="reading"] { border-color:var(--ink-muted); }
.local-export-activation[data-state="ready"] { border-left:6px solid var(--import-accent); }
.local-export-activation[data-state="error"] { border-color:var(--state-error-line); background:var(--state-error-wash); }
.own-data-preflight { display:grid; gap:14px; margin:24px 0; border:1px solid var(--import-line); border-left:6px solid var(--import-accent); border-radius:12px; padding:20px; background:var(--import-wash); }
.own-data-preflight[data-outcome="loading"] { border-left-color:var(--ink-muted); border-left-style:dashed; }
.own-data-preflight[data-outcome="provider-export-only"],.own-data-preflight[data-outcome="insufficient-evidence"] { border-left-color:var(--state-warn-line); background:var(--state-warn-wash); }
.own-data-preflight[data-outcome="validation-error"] { border-left-color:var(--state-error-line); background:var(--state-error-wash); }
.own-data-preflight:focus { outline:3px solid var(--focus-ring); outline-offset:3px; }
.own-data-preflight h3,.own-data-preflight h4,.own-data-preflight p { margin:0; }
.own-data-preflight-status { width:fit-content; border-radius:5px; padding:4px 9px; background:var(--import-wash); color:var(--import-ink); font:700 11px/1.4 ui-monospace,monospace; }
.own-data-preflight[data-outcome="loading"] .own-data-preflight-status { background:transparent; color:var(--ink-muted); }
.own-data-preflight[data-outcome="provider-export-only"] .own-data-preflight-status,.own-data-preflight[data-outcome="insufficient-evidence"] .own-data-preflight-status { background:transparent; color:var(--state-warn-ink); }
.own-data-preflight[data-outcome="validation-error"] .own-data-preflight-status { background:transparent; color:var(--state-error-ink); }
.own-data-preflight-finding { display:grid; gap:4px; font-size:16px; line-height:1.5; }
.own-data-preflight-verdict { font-size:20px; }
.own-data-preflight-measures { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; }
.own-data-preflight-measures div { border-top:1px solid var(--import-line); padding-top:10px; }
.own-data-preflight-measures dt { color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.own-data-preflight-measures dd { margin:5px 0 0; font-size:13px; line-height:1.55; }
.own-data-preflight-boundary { color:var(--ink-muted); font-size:13px; line-height:1.55; }
.own-data-preflight-sources { display:grid; gap:6px; }
.own-data-preflight-sources h4 { font-size:13px; }
.own-data-preflight-sources ul,.own-data-preflight-boundary ul { display:grid; gap:5px; margin:0; padding-left:20px; }
.own-data-preflight-boundary { display:grid; gap:5px; }
.own-data-preflight-sources li[data-available="false"] { color:var(--ink-muted); }
.own-data-preflight-action { display:grid; gap:3px; border-left:5px solid var(--import-accent); padding:3px 0 3px 12px; }
.own-data-preflight[data-outcome="provider-export-only"] .own-data-preflight-action,.own-data-preflight[data-outcome="insufficient-evidence"] .own-data-preflight-action { border-left-color:var(--state-warn-line); }
.own-data-preflight[data-outcome="validation-error"] .own-data-preflight-action { border-left-color:var(--state-error-line); }
.own-data-preflight-disclosure { border-top:1px solid var(--import-line); padding-top:10px; }
.own-data-preflight-disclosure>summary { display:flex; justify-content:space-between; gap:16px; cursor:pointer; color:var(--import-ink); font:700 12px/1.55 ui-monospace,monospace; }
.own-data-preflight-disclosure>summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.own-data-preflight-disclosure>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:12px; }
@media(max-width:640px) { .own-data-preflight { padding:16px; } .own-data-preflight-measures,.own-data-preflight-disclosure>div { grid-template-columns:1fr; } }
@media(max-width:640px) { .local-export-activation { align-items:stretch; flex-direction:column; padding:16px; } .local-export-activation-actions { width:100%; min-width:0; } .local-export-activation-actions button { width:100%; } }
.local-import-heading,.local-result-heading { display:flex; align-items:start; justify-content:space-between; gap:24px; }
/* Static classifications are outlined; dynamic status chips use filled washes. */
/* Chip silhouette follows design-system/claude-design/review-08-foundations:
   filled wash = dynamic signal. Which data the page is showing is a live state,
   so each mode gets a wash; the bare outline is only the pre-JS default. */
.sample-badge { display:inline-flex; align-items:center; gap:6px; flex:none; border:1px solid #789284; border-radius:99px; padding:6px 10px; background:transparent; color:#315f50; font:750 10px/1.3 ui-monospace,monospace; text-transform:uppercase; }
.sample-badge[data-mode="example"] { border-color:var(--state-warn-line); background:var(--state-warn-wash); color:var(--state-warn-ink); }
.sample-badge[data-mode="example-dataset"] { border-color:var(--state-warn-line); background:var(--state-warn-wash); color:var(--state-warn-ink); }
.sample-badge[data-mode="local"] { border-color:var(--import-accent); background:var(--import-wash); color:var(--import-ink); }
.sample-marker { display:flex; align-items:baseline; gap:8px; grid-column:1/-1; margin:0 0 4px; border:1px solid var(--state-warn-line); border-left:5px solid var(--state-warn-line); border-radius:9px; padding:10px 13px; background:var(--state-warn-wash); color:var(--state-warn-ink); font-size:12px; line-height:1.5; }
.sample-marker-shape { flex:none; font-weight:750; }
/* Imported, in the same three channels the badge above uses and in the roles
   the import panel already ships: the word and the filled shape carry it, this
   only tints it. #244c3c on #eef6f2 is 8.8:1, AA at this 12px weight. */
.sample-marker[data-source="import"] { border-color:var(--import-line); border-left-color:var(--import-accent); background:var(--import-wash); color:var(--import-ink); }
/* What one provider export answers, before a byte is selected. Three sentences
   in the heading block that already exists — no panel, no border, no expander:
   it is read on the way to the file picker, not opened. */
.pre-upload-disclosure { display:grid; gap:5px; margin:12px 0 0; padding:0; list-style:none; color:var(--ink-muted); font-size:12px; line-height:1.5; }
.pre-upload-statement { padding-left:15px; text-indent:-15px; }
.pre-upload-statement::before { content:"· "; font-weight:750; }
/* The below-floor state: what is shown *instead of* a savings figure. Dashed,
   like every other withheld number on this page, and carrying the word
   "withheld" in its own text so the tint is never the signal. */
.local-attribution-fallback { display:grid; gap:7px; margin-top:12px; border:1px solid var(--state-warn-line); border-style:dashed; border-radius:9px; padding:13px 15px; background:var(--state-warn-wash); color:var(--state-warn-ink); font-size:12px; line-height:1.5; }
.local-attribution-fallback[hidden] { display:none; }
.local-attribution-fallback p { margin:0; }
.attribution-fallback-headline { font-weight:750; }
.attribution-fallback-facts { display:grid; gap:4px; margin:0; padding-left:17px; }
/* The confidence word beside the recoverable figure, and the unattributed share
   a degraded finding carries verbatim. It sits inside the impact block so the
   qualifier cannot be lifted off the number it qualifies. */
.local-attribution-note { margin:0; color:var(--state-warn-ink); font:700 11px/1.5 ui-monospace,monospace; }
.local-attribution-note[hidden] { display:none; }
.local-attribution-note[data-state="suppressed"] { color:var(--state-error-ink); }

/* ---------------------------------------------------------------------------
   One confidence treatment, four slots.

   The same three states on the KPI row, the spend-mix panel, the findings list,
   and the recoverable figure. Three channels carry every state, and any one of
   them read alone sorts the three correctly:

     word        "full confidence" / "partial confidence" / "withheld"
     shape       none / ◑ half-filled / ◌ empty outline
     border      none / dashed / dotted

   So the hue is the fourth channel, not the first. Full confidence is the
   baseline: a sentence, no chip, no tint, no border — a badge on an ordinary
   number teaches a reader that the unbadged ones are broken.

   Degraded borrows the warn role, never the error role. A 68%-coverage finding
   is qualified, not failed, and --state-error-* is reserved for the withheld
   state where a number is genuinely absent.

   Chips are outlines, per the Claude Design foundations card: filled wash is a
   dynamic signal, outline is static classification, and a finding's confidence
   is a classification of the finding. They keep the lowercase-mono status voice
   the same card names as the brand.

   Measured against #fff (the finding, mix, and evidence panels) and the KPI
   card's rgba(255,255,255,.68) over #f3f1eb:
     degraded text  #614a12  8.41:1 on #fff, 7.45:1 on #f3f1eb
     degraded edge  #9b791c  4.08:1 on #fff, 3.61:1 on #f3f1eb
     withheld text  #6f2821 10.49:1 on #fff, 9.29:1 on #f3f1eb
     withheld edge  #b4453a  5.45:1 on #fff, 4.83:1 on #f3f1eb
     baseline text  #6f6f69  5.06:1 on #fff, 4.48:1 on #f3f1eb
   --------------------------------------------------------------------------- */
/* Its own row above the three facts, because it qualifies the whole finding.
   `grid-column` places a grid item; it does not reorder one, so the document
   sequence the screen reader follows is still the sequence on screen. */
.local-finding-facts .local-impact-coverage { grid-column:1/-1; }
/* The attributed/unattributed pair spans the row and sits immediately after the
   figure it qualifies, in the DOM and not with `order`. At every width it stays
   in the same block as the headline number rather than being reflowed below the
   supporting facts, because a partially attributed result read without its
   split is a number that looks broken instead of qualified. */
.local-attribution-split { display:flex; flex-wrap:wrap; gap:8px 24px; grid-column:1/-1; margin:0; border-top:1px solid var(--panel-border); padding-top:10px; }
.local-attribution-split[hidden] { display:none; }
.local-attribution-split .attribution-split-term { flex:none; display:flex; align-items:baseline; gap:6px; margin:0; color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.local-attribution-split .attribution-split-value { margin:0 24px 0 0; font-size:15px; font-weight:750; overflow-wrap:anywhere; }
.local-attribution-split .attribution-split-value[data-part="unattributed"] { color:var(--ink-muted); }
@media (max-width:560px) {
  /* Narrow: one pair per line, still directly under the figure. */
  .local-attribution-split { display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:4px 10px; }
  .local-attribution-split .attribution-split-value { margin:0; }
}
/* What moved, kept until the next recalculation replaces it. */
.local-result-change { margin:12px 0 0; border:1px solid var(--import-line); border-left-width:4px; border-radius:9px; padding:12px 14px; background:#fff; }
.local-result-change[hidden] { display:none; }
.local-result-change .result-change-headline { margin:0; font:750 12px/1.4 inherit; }
.local-result-change .result-change-list { display:grid; gap:4px; margin:8px 0 0; padding:0; list-style:none; }
.local-result-change .result-change-item { display:flex; flex-wrap:wrap; gap:4px 10px; font-size:12px; line-height:1.5; }
.local-result-change .result-change-label { color:var(--ink-muted); font:700 10px/1.5 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.local-result-change .result-change-move { font-weight:750; overflow-wrap:anywhere; }
/* Adding an optional file from the result. Secondary weight: the result is the
   thing on screen, and this sharpens it rather than replacing it. */
.local-result-upgrade { margin:12px 0 0; }
.local-result-add { display:inline-flex; align-items:center; min-height:44px; border:1px solid var(--import-ink); border-radius:7px; padding:9px 14px; background:#fff; font:700 12px/1.4 inherit; cursor:pointer; }
.local-result-add:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.local-result-add-note { margin:6px 0 0; color:var(--ink-muted); font-size:12px; line-height:1.5; }
.coverage-lead { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin:0 0 8px; color:var(--ink-muted); font:700 11.5px/1.5 ui-monospace,monospace; }
.coverage-lead[hidden] { display:none; }
.coverage-lead[data-confidence="degraded"] { color:var(--state-warn-ink); }
.coverage-lead[data-confidence="suppressed"] { color:var(--state-error-ink); }
.coverage-lead-figure { overflow-wrap:anywhere; }
/* The withheld sentence is prose, not a status: it wraps to its own full line
   and drops the mono weight so it reads as an explanation. */
.coverage-lead-reason { flex-basis:100%; font:400 12px/1.5 Inter,ui-sans-serif,system-ui,sans-serif; }
.confidence-chip { display:inline-flex; align-items:baseline; gap:5px; flex:none; border:1px solid currentColor; border-radius:5px; padding:2px 7px; background:#fff; font:700 10.5px/1.4 ui-monospace,monospace; }
.confidence-chip[data-confidence="degraded"] { border-style:dashed; border-color:var(--state-warn-line); color:var(--state-warn-ink); }
.confidence-chip[data-confidence="suppressed"] { border-style:dotted; border-color:var(--state-error-line); color:var(--state-error-ink); }
.confidence-chip-shape { flex:none; font-weight:750; }
/* A provider or group name long enough to break the row is truncated by the
   chip's sibling, never by the chip: the state word always survives. */
.confidence-chip-label { white-space:nowrap; }

/* The single upgrade action. One sentence, one control, and one closed
   disclosure for everything else that could still be supplied.

   Deliberately not an alert: no warn wash, no error edge, no dashed border. It
   is an offer to make a good result better, and dressing it as a defect is the
   exact reading this issue exists to remove. Neutral panel edge, ink sentence
   (#171713, 17.97:1 on #fff), muted eyebrow. */
.coverage-upgrade { margin-top:18px; border:1px solid var(--panel-border); border-radius:9px; padding:14px 16px; background:#fff; }
.coverage-upgrade[hidden] { display:none; }
.coverage-upgrade .eyebrow { margin:0; }
.coverage-upgrade-action { margin:6px 0 0; color:#171713; font-size:14px; font-weight:700; line-height:1.5; overflow-wrap:anywhere; }
.coverage-upgrade-jump { display:inline-flex; align-items:center; min-height:44px; margin-top:12px; border:1px solid #6b5c3e; border-radius:7px; padding:9px 14px; background:#fff; font:700 12px/1.4 inherit; cursor:pointer; }
.coverage-upgrade-jump[hidden] { display:none; }
.coverage-upgrade-more { margin-top:12px; }
.coverage-upgrade-more[hidden] { display:none; }
.coverage-upgrade-more summary { display:flex; align-items:center; min-height:44px; cursor:pointer; font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.coverage-upgrade-rest { display:grid; gap:6px; margin:0; padding-left:17px; font-size:12px; font-weight:400; line-height:1.5; }
.coverage-upgrade-jump:focus-visible,.coverage-upgrade-more summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.privacy-boundary { display:grid; gap:3px; margin:22px 0; border:1px solid #b9cec4; border-left:5px solid #315f50; border-radius:10px; padding:14px 16px; background:#eef6f2; font-size:13px; line-height:1.5; }
.privacy-boundary span { color:#496056; }
/* The forwardable form of the boundary above (#745). Three labelled rows, sized
   to be copied out of the page and pasted into a review thread, and tinted with
   the same pair as the note it backs so the two read as one claim. */
.data-guarantee { margin:0 0 22px; }
.data-guarantee-body { display:grid; gap:10px; padding:4px 2px 2px; }
.data-guarantee-body h3 { margin:0; font-size:14px; }
.data-guarantee-list { display:grid; gap:4px; margin:0; font-size:13px; line-height:1.55; }
.data-guarantee-list dt { font-weight:750; color:#244c3c; }
.data-guarantee-list dt:not(:first-of-type) { margin-top:8px; }
.data-guarantee-list dd { margin:0; color:#496056; }
.data-guarantee-list code { font-size:12px; word-break:break-all; }
.data-guarantee-source { margin:0; color:var(--ink-muted); font-size:11px; line-height:1.5; }
/* Wraps, because the row now holds one picker, one clearly-synthetic exit, and
   one full-width disclosure holding every other way to start. Without the wrap
   the disclosure would be squeezed into a column beside the picker and stop
   reading as the container it is. */
.local-import-controls { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:20px; }
.local-import-controls>div { display:grid; gap:7px; }
.local-import-controls label { font-size:13px; font-weight:750; }
.local-import-controls input { max-width:100%; min-height:44px; border:1px solid #aaa79d; border-radius:9px; padding:8px; background:#fff; }
.local-import-controls p { margin:0; color:var(--ink-muted); font-size:11px; line-height:1.5; }
.local-import button { min-height:42px; border:1px solid #7f9c8c; border-radius:8px; padding:9px 13px; background:#fff; color:#244c3c; font-weight:750; cursor:pointer; }
.local-import button:hover { background:#edf5f1; }
/* The one entry action for a visitor with no export in hand; filled so it reads
   as the primary offer beside the file picker, not a second-tier control. */
/* Deliberately subordinate. Analyzing the reader's own export is the primary
   path; the example is the exit for someone with no file in hand, so it reads
   as a quiet outlined control rather than the filled one it used to be. It
   still meets the 44px target and keeps its own focus ring. */
.local-import button.local-example-action { border-color:var(--import-line); border-style:dashed; background:transparent; color:var(--ink-muted); font-weight:700; }
.local-import button.local-example-action:hover { border-color:var(--import-ink); background:transparent; color:var(--import-ink); }
/* The shared focus token, not the accent blue this panel used to hard-code.
   #2a78d6 measured 4.02:1 against the panel wash where var(--focus-ring)
   measures 6.04:1, and one focus ring per site is one thing to learn. */
.local-import button:focus-visible,.local-import input:focus-visible,.local-import summary:focus-visible,.local-disclosures summary:focus-visible,.local-results h3:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
/* The synthetic path names itself in the control, not only in a note beside it:
   a reader who tabs to this button hears what the data is before they press it. */
.local-example-basis { font-weight:600; }

/* Where to get a provider export, behind one disclosure beside the picker.
   A reader who already has their file never opens it; a reader who does not
   compares vendors down a column, so each package is a name followed by the
   same four labelled rows. The term label carries weight rather than colour,
   and the summary is a 44px target like every other disclosure here. */
.export-package-help { flex-basis:100%; margin-top:6px; border-top:1px solid var(--import-line); padding-top:12px; }
.export-package-help>summary { display:flex; align-items:center; min-height:44px; border-radius:8px; padding:6px 8px; color:var(--import-ink); font-size:13px; font-weight:750; cursor:pointer; }
.export-package-help>summary:hover { background:var(--import-wash); }
.export-package-promise { margin:10px 2px; color:var(--import-ink); font-size:13px; }
.export-package-list { margin:0 0 12px; }
.export-package-name { margin-top:14px; font-size:13px; font-weight:750; }
.export-package-detail { margin:6px 0 0 14px; color:var(--ink-muted); font-size:12.5px; line-height:1.5; }
.export-package-term { color:var(--import-ink); font-weight:700; }
.export-package-support { font-style:italic; }
.export-package-source { margin:0 2px; font-size:12.5px; }

/* The organizational query-source chooser, styled as a sibling of the package
   guidance above it because it answers the same question about a different
   file. The status line is never signalled by colour alone: it carries the
   verdict in words and a leading mark, and the tint only agrees with them. */
.org-query-source-help { flex-basis:100%; margin-top:6px; border-top:1px solid var(--import-line); padding-top:12px; }
.org-query-source-help>summary { display:flex; align-items:center; min-height:44px; border-radius:8px; padding:6px 8px; color:var(--import-ink); font-size:13px; font-weight:750; cursor:pointer; }
.org-query-source-help>summary:hover { background:var(--import-wash); }
.org-query-source-promise { margin:10px 2px; color:var(--import-ink); font-size:13px; }
.org-query-source-field { display:flex; align-items:center; gap:8px; margin:10px 2px; font-size:13px; }
.org-query-source-field>select { min-height:44px; border:1px solid var(--import-line); border-radius:8px; padding:4px 8px; font:inherit; }
.org-query-source-status { margin:8px 2px; border-left:3px solid var(--import-line); padding-left:8px; color:var(--import-ink); font-size:12.5px; }
.org-query-source-status[data-status="supported"]::before { content:"\2713\00a0"; font-weight:750; }
.org-query-source-status:not([data-status="supported"])::before { content:"\2717\00a0"; font-weight:750; }
.org-query-source-list { margin:0 0 12px; }
.org-query-source-term { margin-top:10px; color:var(--import-ink); font-size:12.5px; font-weight:750; }
.org-query-source-value { margin:4px 0 0 14px; color:var(--ink-muted); font-size:12.5px; line-height:1.5; }
.org-query-source-declined-title { margin:0 2px; color:var(--import-ink); font-size:12.5px; font-weight:700; }
.org-query-source-declined { margin:6px 0 12px 18px; padding:0; color:var(--ink-muted); font-size:12.5px; line-height:1.5; }

/* What a chosen Shiplog delivery-history export turned out to be.
   Three states, and each one is a word plus a leading shape before it is a
   tint: the border colour below only ever agrees with the glyph and the label
   the view already wrote, so a greyscale print and a colour-blind reader get the
   same verdict as everyone else. */
.delivery-history { flex-basis:100%; margin:12px 0 0; border:1px solid var(--import-line); border-left-width:4px; border-radius:10px; padding:12px 14px; background:var(--import-wash); }
.delivery-history[data-outcome="accepted"] { border-left-color:#1d6f4b; }
.delivery-history[data-outcome="incomplete"] { border-left-color:#8a6100; }
.delivery-history[data-outcome="incompatible"] { border-left-color:#96261f; }
.delivery-history>h3 { margin:0 0 8px; color:var(--import-ink); font-size:13px; font-weight:750; }
.delivery-history-verdict { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; margin:0; color:var(--import-ink); font-size:13px; line-height:1.5; }
.delivery-history-shape { font-size:15px; font-weight:750; }
.delivery-history-counts { margin:8px 0 0; color:var(--ink-muted); font-size:12.5px; font-variant-numeric:tabular-nums; }
.delivery-history-latest { margin:6px 0 0; color:var(--import-ink); font-size:12.5px; }
.delivery-history-provenance { margin:6px 0 0; color:var(--ink-muted); font-size:12.5px; line-height:1.5; }
.delivery-history-notes { margin:8px 0 0 18px; padding:0; color:var(--ink-muted); font-size:12.5px; line-height:1.5; }
.delivery-history-note { margin-top:4px; }

/* Every other way to start, behind one disclosure.
   The reader's own export is the page's first step, so the template downloads,
   the example conversation exports, and the saved-briefing reopen live here
   instead of competing with the picker. They keep their full width once open —
   this is a container, not a compact menu — and the summary is a real target at
   44px so it is operable by touch and by switch. */
.import-alternatives { flex-basis:100%; margin-top:6px; border-top:1px solid var(--import-line); padding-top:12px; }
.import-alternatives>summary { display:flex; align-items:center; min-height:44px; border-radius:8px; padding:6px 8px; color:var(--import-ink); font-size:13px; font-weight:750; cursor:pointer; }
.import-alternatives>summary:hover { background:var(--import-wash); }
.import-alternatives[open]>summary { margin-bottom:12px; }
.import-alternatives>*:not(summary) { margin-top:14px; }

/* Stage indicator — position, name, and word for every step. Colour is the
   fourth signal, never the first. */
.import-stages { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; padding:0; list-style:none; }
.import-stage { display:flex; align-items:baseline; gap:8px; flex:1 1 190px; min-width:0; border:1px solid var(--import-line); border-radius:9px; padding:10px 12px; background:#fff; }
.import-stage .stage-shape { flex:none; font-weight:750; }
.import-stage .stage-index { color:var(--ink-muted); font:700 9px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.import-stage .stage-name { min-width:0; font-size:13px; font-weight:750; overflow-wrap:anywhere; }
.import-stage .stage-status { margin-left:auto; color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; white-space:nowrap; }
.import-stage[data-state="current"] { border-color:var(--import-accent); box-shadow:inset 4px 0 var(--import-accent); background:var(--import-wash); }
.import-stage[data-state="current"] .stage-status,.import-stage[data-state="complete"] .stage-status { color:var(--import-ink); }
.import-stage[data-state="complete"] { border-color:var(--import-line); background:var(--import-wash); }
.import-stage[data-state="remaining"] { border-style:dashed; }

/* Step 2 — the column review. The table is the reader's own file, so nothing in
   it is decoration: header, target, where the proposal came from, and one real
   value. Every state ships a word; the tint is the fourth signal, never first. */
.import-mapping { margin:18px 0; border:1px solid var(--import-accent); border-radius:12px; padding:18px; background:#fff; }
.import-mapping-heading h3 { margin:4px 0 6px; font-size:19px; }
.import-mapping-file { font:700 12px/1.5 ui-monospace,monospace; overflow-wrap:anywhere; }
.import-mapping-summary,.import-mapping-file-line { margin:0 0 8px; color:var(--ink-muted); font-size:13px; }
.import-mapping-summary span { display:block; }
.import-mapping-summary .import-mapping-outcome { color:var(--import-ink); font-weight:700; }
.import-mapping-kind { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin:12px 0; }
.import-mapping-kind label { font-weight:750; }
.import-mapping-kind select { min-height:44px; border:1px solid var(--import-line); border-radius:9px; padding:8px 10px; background:#fff; font:inherit; }
.import-mapping-kind p { flex:1 1 240px; margin:0; color:var(--ink-muted); font-size:12px; }
.import-mapping-issues { margin:12px 0; border:1px solid var(--import-line); border-radius:10px; padding:12px 14px; background:var(--import-wash); }
.import-mapping-issues[data-tone="blocker"] { border-color:#a8321f; background:#fdf2f0; }
.import-mapping-issue-heading { margin:0 0 8px; font-size:13px; }
.import-mapping-issue-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.import-mapping-issue { display:grid; grid-template-columns:18px 1fr; gap:2px 8px; }
.import-mapping-issue .issue-shape { grid-row:1/3; font-weight:750; }
.import-mapping-issue .issue-consequence { color:var(--ink-muted); font-size:13px; }
.import-mapping-scroll { overflow-x:auto; }
.import-mapping-table { width:100%; border-collapse:collapse; text-align:left; }
.import-mapping-table caption { padding-bottom:8px; color:var(--ink-muted); font-size:12px; text-align:left; }
.import-mapping-table th,.import-mapping-table td { border-bottom:1px solid var(--import-line); padding:10px 12px 10px 0; vertical-align:top; }
.import-mapping-table thead th { color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.import-mapping-column { min-width:150px; }
.import-mapping-column-index { display:block; color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; }
.import-mapping-column-name { display:block; font-weight:750; overflow-wrap:anywhere; }
.import-mapping-column-note { display:block; color:var(--ink-muted); font-size:12px; }
.import-mapping-select { width:100%; min-height:44px; border:1px solid var(--import-line); border-radius:9px; padding:8px 10px; background:#fff; font:inherit; }
.import-mapping-select[aria-invalid="true"] { border-color:#a8321f; box-shadow:inset 3px 0 #a8321f; }
.import-mapping-message { margin:6px 0 0; color:#8f2b1a; font-size:12px; font-weight:700; }
.import-mapping-origin-word { font:700 11px/1.4 ui-monospace,monospace; white-space:nowrap; }
.import-mapping-row[data-origin="unset"] .import-mapping-origin-word { color:var(--ink-muted); }
.import-mapping-sample { max-width:280px; }
.import-mapping-sample-value { overflow-wrap:anywhere; }
.import-mapping-sample-note,.import-mapping-sample-empty { display:block; color:var(--ink-muted); font-size:12px; }
.import-mapping-status { margin:12px 0 0; color:var(--import-ink); font-size:13px; font-weight:700; }
.import-mapping-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
/* Detected structural columns. The tint reads data-detected; the glyph and the
   sentence inside every row say the same thing, so color carries nothing alone. */
.corpus-structure { margin:18px 0; border:1px solid var(--import-line); border-radius:12px; padding:18px; background:#fff; }
.corpus-structure-heading h3 { margin:4px 0 6px; font-size:19px; }
.corpus-structure-dialect,.corpus-structure-counts { margin:0 0 6px; color:var(--ink-muted); font-size:13px; }
.corpus-structure-fields { display:grid; gap:8px; margin:12px 0; padding:0; list-style:none; }
.corpus-structure-field { display:grid; grid-template-columns:18px 1fr; gap:8px; font-size:14px; }
.corpus-structure-field[data-detected="false"] { color:var(--ink-muted); }
.corpus-structure-shape { font-weight:750; }
.corpus-structure-action { margin:12px 0 0; color:var(--import-ink); font-size:13px; font-weight:700; }
.corpus-structure-source { margin:8px 0 0; color:var(--ink-muted); font-size:12px; }
.import-mapping-actions button { min-height:44px; border:1px solid var(--import-line); border-radius:9px; padding:10px 16px; background:#fff; font:inherit; font-weight:750; }
.import-mapping-actions #import-mapping-confirm { border-color:var(--import-accent); background:var(--import-accent); color:#fff; }
.import-mapping-actions button[disabled] { border-color:var(--import-line); background:var(--import-wash); color:var(--ink-muted); cursor:not-allowed; }
.import-mapping select:focus-visible,.import-mapping button:focus-visible,.import-mapping h3:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }

/* Requirement rows — the mapping summary. Each unresolved row carries the jump
   that moves focus to the control which resolves it. */
.mapping-requirements { display:grid; gap:8px; margin:16px 0 0; padding:0; list-style:none; }
.mapping-requirement { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 10px; border:1px solid var(--import-line); border-radius:9px; padding:10px 12px; background:#fff; }
.mapping-requirement .requirement-shape { flex:none; font-weight:750; }
.mapping-requirement .requirement-name { min-width:0; flex:1 1 180px; font-size:13px; font-weight:750; overflow-wrap:anywhere; }
.mapping-requirement .requirement-status { color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; }
.mapping-requirement[data-state="ready"] { border-color:var(--import-accent); background:var(--import-wash); }
.mapping-requirement[data-state="ready"] .requirement-status { color:var(--import-ink); }
.mapping-requirement[data-state="missing"] { border-color:var(--state-warn-line); border-style:dashed; background:var(--state-warn-wash); }
.mapping-requirement[data-state="missing"] .requirement-status { color:var(--state-warn-ink); }
/* Required and optional are told apart by a word first. The tint below only
   reinforces a distinction the label already carries, so the row survives
   monochrome, and the gain sentence spans the row because it is about the
   whole input rather than about the status cell beside it. */
.mapping-requirement .requirement-kind { flex:none; border:1px solid var(--import-line); border-radius:999px; padding:2px 8px; font:750 10px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.mapping-requirement[data-kind="required"] .requirement-kind { border-color:var(--import-ink); color:var(--import-ink); }
.mapping-requirement[data-kind="optional"] .requirement-kind { border-style:dashed; color:var(--ink-muted); }
.mapping-requirement .requirement-gain { flex:1 1 100%; color:var(--ink-muted); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.local-import .requirement-jump { min-height:34px; margin:0; border-color:var(--state-warn-line); padding:5px 11px; color:var(--state-warn-ink); font-size:12px; }

/* Per-field diagnostic: at the control, described by it, recoverable from it. */
.local-import-field { display:grid; gap:7px; min-width:0; }
.local-import .field-error { display:grid; gap:4px; margin:0; border:1px solid var(--state-error-line); border-left:5px solid var(--state-error-line); border-radius:9px; padding:11px 13px; background:var(--state-error-wash); color:var(--state-error-ink); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.local-import .field-error[hidden] { display:none; }
.local-import .field-error-label { font:750 10px/1.4 ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; }
.field-recovery { display:flex; flex-wrap:wrap; gap:8px; }
.field-recovery-note { flex-basis:100%; margin:0; color:var(--state-error-ink); font-size:12px; line-height:1.5; }
.field-recovery[hidden] { display:none; }
.local-import .field-recovery-action { min-height:38px; margin:0; border-color:var(--state-error-line); padding:7px 12px; color:var(--state-error-ink); font-size:12px; }
.local-import .field-recovery-action:hover { background:var(--state-error-wash); }
.local-import-alert { display:grid; gap:3px; margin-top:12px; border:1px solid var(--state-error-line); border-left:5px solid var(--state-error-line); border-radius:9px; padding:13px 15px; background:var(--state-error-wash); color:var(--state-error-ink); font-size:12px; line-height:1.5; }
.local-import-alert:empty { display:none; }

/* The number and the sentence that says what kind of number it is. */
.local-finding-facts .metric-basis { display:grid; gap:3px; margin:8px 0 0; font-size:12px; font-weight:400; }
.metric-basis-label { justify-self:start; border:1px solid var(--state-warn-line); border-radius:5px; padding:3px 8px; background:var(--state-warn-wash); color:var(--state-warn-ink); font:750 10px/1.3 ui-monospace,monospace; text-transform:uppercase; }
.metric-basis-label[data-real="true"] { border-color:var(--import-accent); background:var(--import-wash); color:var(--import-ink); }
.metric-basis-detail { color:var(--ink-muted); font-size:12px; font-weight:400; line-height:1.5; }
/* Scoped to the figure itself. `.local-impact dd` also matches the coverage
   lead, the attribution note, and the metric basis that share the block, and a
   24px stat numeral is the wrong role for all three. */
.local-finding-facts #local-recoverable[data-real="false"] { color:var(--state-warn-ink); }
.local-finding-status .status-shape { font-weight:750; }

/* Provenance recedes into disclosure; the redaction promise does not. */
.local-provenance-detail { margin-top:18px; border-top:1px solid #d8e2dc; padding-top:14px; }
.local-provenance-detail summary { cursor:pointer; color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.local-provenance-detail p { margin:12px 0 0; font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.local-provenance-detail .local-redaction-note { color:var(--ink-muted); }
/* The ceiling sentence sits under the picker, in the same muted voice as the
   help text it follows. It is painted, never authored here. */
.local-file-limits { margin:0; color:var(--ink-muted); font-size:11px; line-height:1.5; }
.local-file-limits:empty { display:none; }
/* Import progress and its cancel. The phase word and the percentage both ship as
   text, so nothing here is signalled by the bar alone. */
.local-import-progress { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; border:1px solid #aaa79d; border-radius:9px; padding:11px 15px; background:#f7f6f1; }
.local-import-progress-line { display:flex; align-items:center; gap:10px; margin:0; color:var(--ink-muted); font-size:12px; line-height:1.5; }
.local-import-progress progress { width:140px; height:9px; }
.local-import-progress[data-coarse="true"] progress { opacity:.6; }
.local-import-progress button { min-height:44px; }
.local-import-state { display:grid; gap:3px; margin-top:18px; border:1px dashed #aaa79d; border-radius:9px; padding:13px 15px; color:var(--ink-muted); font-size:12px; line-height:1.5; }
.local-import-state[data-state="error"] { border-color:var(--state-error-line); background:var(--state-error-wash); color:var(--state-error-ink); }
/* A hard failure is announced from the assertive region below, which empties
   this one; an empty box must not leave a tinted frame behind. */
.local-import-state:empty { display:none; }
.local-import-state[data-state="loading"] { background:#f7f6f1; }
.local-results { margin-top:26px; border-top:1px solid #d6e0da; padding-top:24px; }
.local-result-heading h3 { margin:5px 0 0; font-size:24px; }
.local-export-actions { display:flex; gap:8px; }
.local-result-notice { display:grid; gap:3px; margin-top:20px; border:1px solid #b88e2e; border-left:5px solid #9b791c; border-radius:9px; padding:13px 15px; background:#fffaf0; color:#614a12; font-size:12px; line-height:1.5; }
.local-result-notice[data-state="error"] { border-color:#b4453a; background:#fdf4f3; color:#6f2821; }
/* Provenance. One rule for one label, wherever it is placed; the word "Example
   data" and the replacement instruction always ship together, and the shape
   repeats what the tint says so colour is never the only signal. */
.dataset-provenance { display:grid; grid-template-columns:auto 1fr; gap:2px 8px; margin:16px 0 0; border:1px solid var(--state-warn-line); border-left:5px solid var(--state-warn-ink); border-radius:9px; padding:12px 14px; background:var(--state-warn-wash); color:var(--state-warn-ink); font-size:12px; line-height:1.5; }
.dataset-provenance .provenance-shape { grid-row:1/4; font-weight:750; }
.dataset-provenance .provenance-label { font:750 11px/1.4 ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; }
.dataset-provenance .provenance-swap { font-weight:700; }
/* The trust verdict: coverage, what is missing, one action. Nothing is carried
   by tint alone — the state word and the numbers are always in the text. */
.local-trust { margin-top:20px; border:1px solid #b9b2a4; border-top:5px solid #6b5c3e; border-radius:12px; padding:clamp(18px,3vw,24px); background:#fff; }
.local-trust h4 { max-width:760px; margin:6px 0 0; font-size:clamp(19px,2.8vw,25px); line-height:1.2; letter-spacing:-.025em; }
.local-trust-coverage { margin:12px 0 0; font-size:clamp(26px,4vw,38px); font-weight:750; letter-spacing:-.03em; line-height:1.1; }
.local-trust-coverage[data-available="false"] { color:var(--state-warn-ink); font-size:18px; }
.local-trust-inputs { margin:4px 0 0; color:var(--ink-muted); font:600 12px/1.5 ui-monospace,monospace; overflow-wrap:anywhere; }
.local-trust-answer { margin:10px 0 0; font-size:14px; line-height:1.5; }
.local-trust[data-state="all_clear"] { border-top-color:#315f50; }
.local-trust-findings-section { margin-top:18px; padding-top:16px; border-top:1px solid #e0dbd0; }
.local-trust-findings { display:grid; gap:8px; margin:8px 0 0; padding:0; list-style:none; }
.local-trust-finding { border:1px solid #d8d6cf; border-radius:9px; overflow:hidden; }
.local-trust-finding[data-blocking="true"] { border-color:#b98a8a; }
.local-trust-choice { display:flex; align-items:center; gap:10px; width:100%; padding:11px 13px; border:0; background:#fff; text-align:left; cursor:pointer; }
.local-trust-choice[aria-expanded="true"] { background:#f4f1e9; box-shadow:inset 4px 0 #6b5c3e; }
.local-trust-rank { color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; }
.local-trust-title { flex:1; font-size:13px; }
.local-trust-impact { color:#8a2b2b; font:750 12px/1.4 ui-monospace,monospace; white-space:nowrap; }
.local-trust-confidence { color:var(--ink-muted); font:600 10px/1.4 ui-monospace,monospace; white-space:nowrap; }
.local-trust-detail { display:grid; gap:8px; border-top:1px solid #e0dbd0; padding:14px; background:#f7f8f4; }
.local-trust-detail p { margin:0; font-size:12px; line-height:1.5; }
.local-trust-detail-rows { display:grid; gap:5px; margin:0; padding:0; list-style:none; }
.local-trust-detail-rows li { display:flex; gap:10px; justify-content:space-between; font:600 11px/1.5 ui-monospace,monospace; }
.local-trust-next { margin-top:18px; padding-top:16px; border-top:1px solid #e0dbd0; }
.local-trust-action { margin:5px 0 0; font-size:14px; font-weight:700; line-height:1.5; }
.local-trust-action[data-available="false"] { color:var(--state-warn-ink); font-weight:400; }
.local-trust-jump { margin-top:10px; padding:7px 13px; border:1px solid #6b5c3e; border-radius:7px; background:#fff; font:700 12px/1.4 inherit; cursor:pointer; }
/* The ranked position. Withheld is a state with a sentence in it, never a
   greyed-out card: the warn tint is carried by a word either way. */
.local-cohort-position { margin-top:20px; border:1px solid #b9b2a4; border-top:5px solid #6b5c3e; border-radius:12px; padding:clamp(18px,3vw,24px); background:#fff; }
.local-cohort-position h4 { max-width:760px; margin:6px 0 0; font-size:clamp(17px,2.4vw,21px); line-height:1.25; letter-spacing:-.02em; }
.local-cohort-position[data-state="withheld"] { border-top-color:var(--state-warn-ink,#8a6d2b); }
.local-cohort-headline { margin:10px 0 0; font-size:15px; font-weight:700; line-height:1.5; }
.local-cohort-detail { margin:6px 0 0; color:var(--ink-muted); font:600 12px/1.6 ui-monospace,monospace; overflow-wrap:anywhere; }
.local-cohort-next { margin:10px 0 0; font-size:14px; line-height:1.5; }
.local-cohort-note { margin:12px 0 0; padding-top:10px; border-top:1px solid #e0dbd0; color:var(--ink-muted); font-size:12px; line-height:1.6; }
/* The declaration control. Its refusal is banded and worded, never coloured
   alone: the sentence names the accepted values whatever the rule renders as. */
.local-cohort-declare { margin:12px 0 0; padding:14px; border:1px dashed #b9b2a4; border-radius:10px; background:#fbf9f5; }
.local-cohort-declare-lead { margin:0; font-size:14px; line-height:1.55; }
.local-cohort-declare-field { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline; margin:10px 0 0; font-size:14px; }
.local-cohort-declare-field label { font-weight:700; }
.local-cohort-declare-field :is(select,input) { min-width:min(100%,320px); padding:6px 8px; font:inherit; }
.intake-facts { margin:0; padding:0; border:0; }
.intake-facts legend { padding:0; font-size:14px; font-weight:700; }
.local-cohort-declare-message { margin:10px 0 0; padding-left:10px; border-left:3px solid #b9b2a4; font-size:13px; line-height:1.55; }
.local-cohort-declare-message[data-state="refused"] { border-left-color:var(--state-warn-ink,#8a6d2b); }
/* The landing surface: the question first, then the one number that answers it. */
/* The briefing, read top to bottom: the question, the answer block that cannot
   be split, the action and its owner, the disclosed detail, then the two lines
   that say what graded it and where it ran. The DOM is authored in that order —
   nothing below reorders anything, because a screen reader and a Tab key read
   the DOM and not the stylesheet. */
.local-lead-finding { margin-top:20px; border:1px solid #9eb9aa; border-top:5px solid #315f50; border-radius:12px; padding:clamp(18px,3vw,24px); background:#fff; }
/* The question outranks the figure. It is one display step above the metric so
   the headline is the question and the figure is its answer, not the reverse.
   Interpolated inside the page's existing clamp display family (the steps on
   either side are the 30px panel head and the 82px hero); no new hue, weight or
   spacing value is introduced. */
.local-lead-finding h4 { max-width:760px; margin:6px 0 0; font-size:clamp(26px,4.2vw,38px); line-height:1.15; letter-spacing:-.03em; }
.local-lead-status { margin:12px 0 0; max-width:660px; color:var(--state-warn-ink); font-size:14px; line-height:1.55; font-weight:650; }
.local-lead-status[hidden] { display:none; }

/* THE ANSWER BLOCK. One container, so the figure, the grade and the coverage
   cannot be separated by a reflow, a paint order, or a page break. */
.local-lead-answer { margin:16px 0 0; border:1px solid var(--import-line); border-left:4px solid var(--import-accent); border-radius:10px; padding:14px 16px 15px; background:#fff; break-inside:avoid; }
.local-lead-answer .eyebrow { color:var(--import-ink); }
.local-lead-metric { margin:8px 0 0; color:#8a2b2b; font-size:clamp(22px,3.4vw,30px); font-weight:750; letter-spacing:-.025em; line-height:1.2; overflow-wrap:anywhere; }
/* The grade, in four channels: shape, word, value, and only then colour. */
.local-lead-grade { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 12px; margin:12px 0 0; }
.local-lead-grade-chip { display:inline-flex; align-items:baseline; gap:6px; border-radius:6px; padding:3px 9px; background:color-mix(in srgb,var(--ink-muted) 12%,transparent); color:#3f3f3a; font:700 12px/1.5 ui-monospace,monospace; }
/* Filled wash, not an outline: the design mirror's chip rule reserves the wash
   for a dynamic signal, and confidence is recomputed for every analysis. */
.local-lead-grade-chip[data-confidence="high"] { background:var(--import-wash); color:var(--import-ink); }
.local-lead-grade-chip[data-confidence="moderate"] { background:var(--state-warn-wash); color:var(--state-warn-ink); }
.local-lead-grade-chip[data-confidence="low"] { background:var(--state-warn-wash); color:var(--state-warn-ink); }
.local-lead-grade-chip[data-confidence="insufficient"] { background:var(--state-error-wash); color:var(--state-error-ink); }
.local-lead-grade-shape { font-size:13px; line-height:1; }
.local-lead-grade-value { font-size:15px; font-weight:750; letter-spacing:-.01em; overflow-wrap:anywhere; }
.local-lead-coverage { margin:8px 0 0; font-size:14px; line-height:1.5; font-weight:650; overflow-wrap:anywhere; }
/* One weight below the coverage line: it qualifies the grade, it is not a
   second grade. Never hidden — see briefing-board.test.js (#1024). */
.local-lead-derived { margin:6px 0 0; font-size:13px; line-height:1.5; font-weight:550; overflow-wrap:anywhere; }

.local-lead-next { margin-top:18px; padding-top:16px; border-top:1px solid #d8e2dc; break-inside:avoid; }
.local-lead-action { margin:5px 0 0; font-size:16px; font-weight:750; line-height:1.45; }
.local-lead-action[data-available="false"] { color:var(--state-warn-ink); font-size:14px; font-weight:400; }
.local-lead-role { margin:6px 0 0; color:var(--import-ink); font:700 12px/1.5 ui-monospace,monospace; letter-spacing:.04em; }
.local-lead-role[hidden] { display:none; }

/* Supporting detail. Native disclosure, so expanded/collapsed is conveyed by
   the element itself rather than by an attribute somebody has to remember to
   keep in sync. Every summary names what it reveals. */
.local-lead-support { display:grid; gap:8px; margin-top:16px; }
.local-lead-detail[hidden] { display:none; }
.local-lead-detail>summary { display:list-item; border-radius:7px; padding:6px 8px; color:var(--import-ink); font-size:13px; font-weight:700; line-height:1.5; cursor:pointer; }
.local-lead-detail>summary:hover { background:var(--import-wash); }
.local-lead-detail>summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }
.local-lead-arithmetic { margin:6px 0 0; padding:0 8px; font-size:13px; line-height:1.5; color:#41544b; overflow-wrap:anywhere; }
.local-lead-arithmetic[hidden] { display:none; }
.local-lead-method { margin:6px 0 0; padding:0 8px; font-size:13px; line-height:1.55; color:#41544b; overflow-wrap:anywhere; }

/* Persistent and small, never disclosed. */
.local-lead-basis,.local-lead-provenance { margin:12px 0 0; color:var(--ink-muted); font:600 11px/1.6 ui-monospace,monospace; overflow-wrap:anywhere; }
.local-lead-provenance { margin-top:4px; max-width:760px; }

.local-lead-finding[data-state="unavailable"] .local-lead-metric { color:var(--state-warn-ink); font-size:16px; }
/* Loading: a skeleton drawn over the real slots, so nothing moves when the
   figures arrive. The text is still in the DOM and still transparent-on-wash
   rather than removed, which is what keeps the block's height honest. */
.local-lead-finding[data-state="loading"] .local-lead-metric,
.local-lead-finding[data-state="loading"] .local-lead-coverage,
.local-lead-finding[data-state="loading"] .local-lead-action,
.local-lead-finding[data-state="loading"] .local-lead-grade-value {
  border-radius:6px; background:color-mix(in srgb,var(--ink-muted) 14%,transparent); color:transparent;
}
.local-lead-finding[data-state="loading"] .local-lead-metric { min-height:1.2em; }
.local-lead-finding[data-state="empty"] .local-lead-answer,
.local-lead-finding[data-state="empty"] .local-lead-next,
.local-lead-finding[data-state="empty"] .local-lead-support,
.local-lead-finding[data-state="error"] .local-lead-answer,
.local-lead-finding[data-state="error"] .local-lead-next,
.local-lead-finding[data-state="error"] .local-lead-support { display:none; }
.local-lead-finding[data-state="error"] { border-color:var(--state-error-line); }
.local-lead-finding[data-state="error"] .local-lead-status { color:var(--state-error-ink); }
.local-lead-finding[data-state="empty"] .local-lead-status { color:#41544b; font-weight:400; }
/* A briefing reopened from a file. Deliberately unlike .local-lead-finding:
   dashed border, muted paper, smaller figure. A returning visitor should be able
   to tell the two apart before reading a word — and the eyebrow and heading say
   it in words as well, because the treatment is a reinforcement, not the signal. */
.restored-briefing { margin-top:24px; border:2px dashed #9aa7b4; border-radius:12px; padding:clamp(16px,2.6vw,22px); background:#f6f7f9; }
.restored-briefing h3 { max-width:760px; margin:6px 0 0; font-size:clamp(18px,2.6vw,23px); line-height:1.25; letter-spacing:-.02em; }
.restored-briefing h3:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.restored-briefing-captured { margin:8px 0 0; font-size:13px; font-weight:650; color:#41505f; overflow-wrap:anywhere; }
.restored-briefing-dataset { margin:8px 0 0; font-size:13px; font-weight:700; color:#72520a; }
.restored-briefing-question { margin:14px 0 0; font-size:15px; font-weight:700; line-height:1.4; }
.restored-briefing-metric { margin:8px 0 0; font-size:clamp(16px,2.2vw,20px); font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
.restored-briefing-coverage { margin:8px 0 0; font-size:13px; font-weight:650; line-height:1.5; }
.restored-briefing-arithmetic { margin:6px 0 0; font-size:12px; line-height:1.5; color:#4a5763; overflow-wrap:anywhere; }
.restored-briefing-action { margin:10px 0 0; font-size:13px; line-height:1.5; }
/* The delta's direction is in its sentence; this only tints what the words
   already say, and the not-comparable state is a word too, not a missing tint. */
.restored-briefing-delta { margin:14px 0 0; padding-top:12px; border-top:1px solid #d3d9df; font-size:14px; font-weight:700; line-height:1.5; }
.restored-briefing-delta[data-comparable="false"] { font-weight:400; color:var(--state-warn-ink); }
.restored-briefing-close { margin-top:16px; }
.local-finding { margin-top:20px; border:1px solid #9eb9aa; border-top:5px solid #315f50; border-radius:12px; padding:clamp(18px,3vw,24px); background:#fff; }
.local-finding-lead { display:flex; align-items:start; justify-content:space-between; gap:18px; }
.local-finding-lead h4 { max-width:760px; margin:7px 0 0; font-size:clamp(20px,3vw,27px); line-height:1.25; letter-spacing:-.025em; }
/* Filled wash denotes a dynamic confidence signal; its text carries the state. */
.local-finding-status { flex:none; border-radius:5px; padding:6px 9px; background:#fff0c7; color:#72520a; font:750 10px/1.3 ui-monospace,monospace; text-transform:uppercase; }
.local-finding-facts { display:grid; grid-template-columns:1.5fr .9fr 1fr; gap:14px 20px; margin:22px 0 0; padding-top:18px; border-top:1px solid #d8e2dc; }
.local-finding-facts div { min-width:0; }
.local-finding-facts dt { color:var(--ink-muted); font:700 9px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.local-finding-facts dd { margin:5px 0 0; font-size:13px; font-weight:700; line-height:1.45; overflow-wrap:anywhere; }
.local-finding-facts #local-recoverable { color:#8a2b2b; font-size:24px; letter-spacing:-.025em; }
/* THE SUPPORTING RAIL. Everything here is subordinate to the trust verdict and
   the leading finding above it, and the treatment says so before a word is read:
   a hairline rule instead of a card edge, no fill of its own, and a label that
   names it as supporting. It introduces no colour, type step or spacing value
   that was not already on this page. */
.local-secondary-evidence { margin-top:24px; padding-top:16px; border-top:1px solid var(--panel-border); }
.local-secondary-evidence>.eyebrow { color:var(--ink-muted); }
/* The rail's provenance note leads it rather than trailing it — see the markup
   comment. Kept at the same weight as every other copy of this note, because a
   quieter "Example data" on the block a reader skims fastest is the one place it
   must not be quieter. */
.local-secondary-evidence>.dataset-provenance { margin-top:10px; }
.local-state-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
.local-state-grid article { border:1px solid #d4ddd8; border-left:5px solid #315f50; border-radius:10px; padding:16px; background:#fff; }
.local-state-grid article[data-state="missing"] { border-left-color:#9b791c; background:#fffaf0; }
.local-state-grid article[data-state="incompatible"] { border-left-color:#a5322f; background:#fdf5f4; }
/* The benchmark card writes `available`/`unavailable`, which had no rule at all:
   a cohort the analysis could not establish was drawn exactly like one it could.
   Warn, not error — an absent benchmark is a bound on the claim, not a file this
   page failed to read. The shape and the answer word carry it either way. */
.local-state-grid article[data-state="unavailable"] { border-left-color:#9b791c; background:#fffaf0; }
.local-state-grid article[data-state="unavailable"] h4 { color:var(--state-warn-ink); }
.local-state-grid h4 { margin:6px 0; font-size:18px; }
.local-state-grid p:last-child { margin:0; color:var(--ink-muted); font-size:12px; line-height:1.5; }
.local-department-evidence { margin-top:12px; border:1px solid #d4ddd8; border-radius:11px; padding:18px; background:#fff; }
.local-department-evidence h4 { margin:5px 0; font-size:19px; }
.local-department-evidence>div>p:last-child { margin:0; color:var(--ink-muted); font-size:12px; }
.local-department-list { display:grid; gap:8px; margin:16px 0 0; padding:0; list-style:none; }
.local-department-item { border:1px solid #d8d6cf; border-radius:9px; overflow:hidden; }
.local-import .local-department-choice { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:10px; width:100%; min-height:52px; margin:0; border:0; border-radius:0; padding:11px 13px; background:#fff; color:var(--ink); text-align:left; }
.local-import .local-department-choice:hover { background:#f7f8f4; }
.local-department-rank { color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; }
.local-department-choice strong { min-width:0; font-size:13px; overflow-wrap:anywhere; }
.local-department-amount { color:#8a2b2b; font:750 11px/1.4 ui-monospace,monospace; white-space:nowrap; }
.local-department-chevron { width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .15s ease; }
.local-department-choice[aria-expanded="true"] { background:#edf5f1; box-shadow:inset 4px 0 #315f50; }
.local-department-choice[aria-expanded="true"] .local-department-chevron { transform:rotate(225deg); }
.local-department-detail { border-top:1px solid #d8e2dc; padding:16px; background:#f7f8f4; }
.local-department-detail>p { margin:0; font-size:12px; line-height:1.5; }
.local-department-detail dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0 0; }
.local-department-detail dt { color:var(--ink-muted); font:700 9px/1.4 ui-monospace,monospace; text-transform:uppercase; }
.local-department-detail dd { margin:4px 0 0; font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
.local-disclosures { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:12px; }
.local-disclosures details { border:1px solid #d8d6cf; border-radius:9px; padding:13px; background:#fff; }
.local-disclosures summary { cursor:pointer; font-size:12px; font-weight:750; }
/* The count is the state, in the same mono caption role the rest of this page
   uses for a measured quantity. Three states, and colour is the last channel of
   the three: the word ("none", "not analyzed", "12 warnings") is first, the
   dashed edge second — the same "not filled in yet" grammar the waiting cards on
   this page already use — and only then the muted ink. */
.disclosure-count { color:var(--ink-muted); font:700 11px/1.4 ui-monospace,monospace; }
.local-disclosures details[data-state="filled"] .disclosure-count { color:var(--import-ink); }
.local-disclosures details[data-state="empty"],
.local-disclosures details[data-state="unavailable"] { border-style:dashed; background:#fcfcfa; }
.local-disclosures details[data-state="unavailable"] .disclosure-count { color:var(--state-warn-ink); }
.local-disclosures ul { margin:12px 0 0; padding-left:20px; font-size:12px; line-height:1.55; }
/* The executive panel contract (src/finops-panel-contract.js). A declared panel
   is never removed: when its inputs are absent the figures go and this sentence
   takes their place, so the question and what it costs to answer both stay on
   screen. Wraps rather than truncates, at every width. */
.panel-unavailable { display:grid; gap:6px; margin:0 0 4px; border:1px dashed #9a978d; border-left:5px solid #6f6f69; border-radius:11px; padding:14px 16px; background:#faf9f5; font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
.panel-unavailable[hidden] { display:none; }
.panel-unavailable-headline { color:#4a4a44; font:750 10px/1.4 ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; }
.panel-unavailable-question { font-weight:700; }
.panel-unavailable-need { color:#3f4a44; }
.panel-unavailable-rest { color:var(--ink-muted); font-size:12px; }
/* Exactly one panel on the page carries this line, and it says "start here" in
   words before it says it in weight — so the ranking survives a greyscale print
   and reaches a screen reader in reading order rather than as an emphasis. */
.panel-unavailable-priority { color:var(--import-accent); font:750 11px/1.5 ui-monospace,monospace; }
[data-next-action="primary"] .panel-unavailable { border-left-color:var(--import-accent); border-left-width:6px; }
[data-next-action="primary"] .panel-unavailable-need { font-weight:650; }
[data-panel-state="unavailable"] { border-style:dashed; }
.kpi[data-panel-state="unavailable"] .panel-unavailable { border:0; border-left:3px solid #6f6f69; border-radius:0; padding:8px 0 8px 12px; background:none; font-size:12px; }

/* ---------------------------------------------------------------------------
   The shared panel status treatment (src/panel-status-view.js).

   One block, six states, and no colour doing a job on its own. The chip carries
   a word and a glyph as well as a tone; the silhouette follows the foundations
   card's rule — filled wash for a signal that moves (reading, partly attributed,
   failed), outline for a classification that holds until the reader brings
   another file (computed, awaiting input, no records).

   The tones are the roles this stylesheet already declares. `awaiting input`
   and `no records` deliberately resolve to the same neutral inks as a caption,
   so an unanswerable panel reads as quiet rather than as damaged; only `error`
   reaches for --state-error-*. That separation is the whole point of the block.
   --------------------------------------------------------------------------- */
.panel-status {
  display:grid; gap:8px; margin:0 0 16px; border:1px solid var(--panel-border);
  border-left:5px solid var(--ink-muted); border-radius:11px; padding:12px 15px;
  background:rgba(255,255,255,.55); font-size:13px; line-height:1.55; overflow-wrap:anywhere;
}
/* Waiting is not damage. Dashed says "not filled in yet" in the same grammar the
   contract note and the review-band score card already use. */
.panel-status[data-status="unavailable"],.panel-status[data-status="empty"] { border-style:dashed; background:#faf9f5; }
.panel-status[data-status="loading"] { border-left-color:#174f83; }
.panel-status[data-status="computed"] { border-color:var(--import-line); border-left-color:var(--import-accent); background:var(--import-wash); }
.panel-status[data-status="partial"] { border-color:var(--state-warn-line); border-left-color:var(--state-warn-ink); background:var(--state-warn-wash); }
.panel-status[data-status="error"] { border-color:var(--state-error-line); border-left-color:var(--state-error-ink); background:var(--state-error-wash); }

.panel-status-line { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 10px; margin:0; }
.panel-status-summary { flex:1 1 260px; color:#3f3f3a; }
.panel-status[data-status="error"] .panel-status-summary { color:var(--state-error-ink); }

.panel-status-chip {
  flex:none; display:inline-flex; align-items:baseline; gap:6px; border-radius:5px;
  padding:2px 9px; font:750 10px/1.6 ui-monospace,monospace; letter-spacing:.05em;
  text-transform:uppercase; white-space:nowrap;
}
/* Static classification: an outline, no fill. */
.panel-status-chip[data-silhouette="outline"] { border:1px solid var(--panel-border); color:#4a4a44; }
.panel-status[data-status="computed"] .panel-status-chip { border-color:var(--import-line); color:var(--import-ink); }
/* Dynamic signal: a wash, no outline. */
.panel-status-chip[data-silhouette="filled"] { background:color-mix(in srgb,var(--ink-muted) 12%,transparent); color:#4a4a44; }
.panel-status[data-status="partial"] .panel-status-chip { background:color-mix(in srgb,var(--state-warn-ink) 14%,transparent); color:var(--state-warn-ink); }
.panel-status[data-status="error"] .panel-status-chip { background:color-mix(in srgb,var(--state-error-ink) 12%,transparent); color:var(--state-error-ink); }
.panel-status[data-status="loading"] .panel-status-chip { background:#e9f1f8; color:#174f83; }
.panel-status-shape { font-weight:750; }

/* Provenance at a glance: count, period, coverage, confidence on one line, each
   under its own label so no value is read without the thing it measures. */
.panel-status-facts { display:flex; flex-wrap:wrap; gap:4px 22px; margin:0; }
.panel-status-fact dt { color:var(--ink-muted); font:700 10px/1.5 ui-monospace,monospace; letter-spacing:.07em; text-transform:uppercase; }
.panel-status-fact dd { margin:0; font-size:13px; font-weight:650; }
/* An implausible figure is marked in text ("· check this") by the view; the rule
   underline is the second channel, never the only one. */
.panel-status-fact[data-implausible] dd { color:var(--state-error-ink); text-decoration:underline dotted; text-underline-offset:3px; }
.panel-status-caveat { margin:0; color:var(--state-error-ink); font-size:12px; line-height:1.5; }

/* The one next action. Exactly one block on the page is "primary", so the label
   itself is the ranking and a monochrome print keeps it. */
.panel-status-next { display:grid; gap:3px; margin:0; }
.panel-status-next-label { color:var(--ink-muted); font:750 10px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.panel-status-next[data-priority="primary"] { border-left:4px solid var(--import-accent); padding:2px 0 2px 12px; }
.panel-status-next[data-priority="primary"] .panel-status-next-label { color:var(--import-accent); }
.panel-status-next[data-priority="primary"] .panel-status-next-text { font-weight:650; }

.panel-status-detail > summary { cursor:pointer; color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.panel-status-detail > summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; border-radius:4px; }
.panel-status-detail p { margin:8px 0 0; color:var(--ink-muted); font-size:12px; line-height:1.55; }

/* Narrow: the facts stack rather than wrapping mid-pair, and the block loses the
   inset so the copy keeps its measure at 320px. */
@media (max-width:640px) {
  .panel-status { padding:11px 12px; }
  .panel-status-facts { gap:6px 16px; }
  .panel-status-fact { flex:1 1 130px; }
}
/* Inside a KPI card the block is a rule and a caption, not a second card. */
.kpi .panel-status { border:0; border-left:3px solid var(--ink-muted); border-radius:0; margin-bottom:10px; padding:6px 0 6px 11px; background:none; font-size:12px; }
/* The static worked example, marked before it is read rather than after. Above
   a leader's own thinner import the marker stops being a footnote. */
.proof-point-illustrative { display:grid; grid-column:1/-1; gap:5px; margin:0 0 4px; border-left:4px solid #8c6b1f; padding:2px 0 2px 12px; font-size:12px; line-height:1.5; }
.proof-point-illustrative strong { color:#6d5210; font:750 10px/1.4 ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; }
.proof-point-illustrative span { color:#4c5650; overflow-wrap:anywhere; }
.proof-point-illustrative[data-basis="illustrative-over-import"] { border-left-width:6px; border-radius:0 10px 10px 0; padding:12px 14px; background:#fdf6e6; }
.proof-point-illustrative[data-basis="illustrative-over-import"] strong { color:#5c4409; }
/* The one status region, now directly under the hero. It leads the page, so the
   title is a reading size rather than a caption size, and the state travels as
   a shape and a word in the label above it — the left border only repeats them. */
.finops-load-state { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 22px; border:1px solid #d1cfc7; border-left:5px solid #6f6f69; border-radius:11px; padding:16px 18px; background:#faf9f5; }
.finops-load-state>div { display:grid; gap:3px; }
.finops-load-state span { color:var(--ink-muted); font-size:12px; line-height:1.5; }
.finops-load-state strong { color:var(--ink); font-size:17px; line-height:1.35; }
.finops-load-state .eyebrow { display:flex; align-items:baseline; gap:6px; margin:0; }
.finops-load-shape { flex:none; font-size:13px; font-weight:750; }
.finops-load-state[data-state="error"] { border-color:#b4453a; background:#fdf4f3; color:#6f2821; }
.finops-load-state[data-state="ready"] { border-left-color:#315f50; }
.finops-load-actions { display:flex; flex:none; flex-wrap:wrap; gap:9px; }
.finops-load-state button { flex:none; min-height:44px; border:1px solid currentColor; border-radius:8px; padding:9px 13px; background:#fff; color:var(--state-error-ink); font-weight:750; cursor:pointer; }
.finops-load-state[data-state="loading"] button,.finops-load-state[data-state="ready"] button { color:var(--ink); }
.finops-load-state button:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.finops-load-state button[disabled] { opacity:.55; cursor:default; }

/* WHERE DO WE STAND? — the headline answer, and the only block on this view
   drawn at headline weight.
   The hierarchy is carried by SIZE and WEIGHT inside one bordered block, not by
   position in a grid: at a narrow width the two figures stack, and when they do
   the label stays 10px monospace caps, the value stays clamp()-large and 750
   weight, and the basis stays 13px muted — three visibly different sizes rather
   than one undifferentiated column. That is what makes the reflow keep the
   hierarchy instead of flattening it.
   No transition, no transform, and no animation anywhere in this block, so
   there is nothing for a reduced-motion query to have to switch off. */
.stand { display:grid; gap:14px; margin:0 0 14px; border:1px solid var(--import-line); border-left:6px solid var(--import-accent); border-radius:16px; padding:clamp(20px,3.4vw,30px); background:linear-gradient(150deg,var(--import-wash),#fff 52%); }
.stand[data-position="withheld"] { border-left-color:var(--state-warn-line); }
/* EVERY STATE THIS REGION CAN REACH, DRAWN.
   `pending` is the authored state before the composer has run; `partial` is a
   headline that composed with a figure missing; `withheld` is a position the
   data does not entitle the page to state. All three break the rail's line
   rather than only tinting it, because a solid rail in a lighter colour is a
   state a reader in greyscale cannot see. There is deliberately no error state
   drawn here: this headline composes from bundled modules and never waits on a
   fetch, so the one region allowed to report a failed load is #finops-load-state
   below — inventing an error silhouette here would draw a state the data cannot
   produce. */
.stand[data-state="pending"],.stand[data-state="partial"] { border-left-style:dashed; }
.stand[data-state="partial"] { border-left-color:var(--state-warn-line); }
/* THE ANSWER BLOCK. Four rows in one column at every width, so there is no
   breakpoint at which the figure sits beside anything and no width at which the
   block scrolls sideways. The figure is `clamp`ed on the large end for a
   projector and wraps rather than truncates on the small one — no ellipsis, no
   fixed width, no `white-space:nowrap` anywhere in this block. Nothing here is
   revealed on hover: every one of the four is on screen in every state. */
.answer-block { display:grid; gap:10px; margin:0 0 4px; }
.answer-question { max-width:26ch; margin:0; font-size:clamp(24px,3.6vw,34px); font-weight:750; line-height:1.14; letter-spacing:-.01em; overflow-wrap:anywhere; }
/* ONE ANNOUNCEMENT. The label, the number with its unit, and the as-of basis
   are one paragraph, so a screen reader speaks them together rather than as
   three fragments a reader has to reassemble. */
.answer-figure { display:grid; gap:4px; margin:0; overflow-wrap:anywhere; }
.answer-figure-label { color:var(--muted); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
/* THE PAGE'S DISPLAY STEP FOR A FIGURE, which the first screen's headline figure
   now joins (#1497) rather than growing a second one. The id is added to the
   SELECTOR, not given a copy of the declaration — a step only one element uses is
   a step that drifts — and it outranks `.stand-figure-value`, which the element
   keeps so its no-clip and grid rules still apply. */
.answer-figure-value,#finops-recoverable-value { color:var(--ink); font-size:clamp(38px,7vw,68px); font-weight:800; line-height:1.05; }
/* And the same descent when there is no figure to state, for the same reason:
   "Not stated" set at 68px is a headline claiming to be a measurement. */
.answer-block[data-available="false"] .answer-figure-value,#finops-recoverable-figure[data-available="false"]>#finops-recoverable-value { color:var(--state-warn-ink); font-size:clamp(20px,3vw,26px); }
.answer-figure-direction { max-width:62ch; color:var(--ink); font-size:15px; font-weight:650; line-height:1.5; overflow-wrap:anywhere; }
/* THE RANK: the numeral clamp, the 15px body step for the confidence sentence,
   that step inside a control for the action — a descent at 320px and at 200%
   zoom. The basis joins the label on the caption step; at 14px it read as a
   near-peer of the sentence below it. */
.answer-figure-basis { color:var(--muted); font-size:13px; font-weight:600; line-height:1.5; }
.answer-confidence { max-width:62ch; margin:0; color:var(--ink); font-size:15px; line-height:1.5; overflow-wrap:anywhere; }
/* The reproduction line qualifies the confidence sentence above it, so it is one
   step quieter than that sentence and never louder. `data-checked="false"` is
   the state where the page could not confirm the check ran: it is drawn in the
   warn ink the rest of this page uses for a withheld claim, so the fact is
   carried by the wording AND by the colour rather than by the colour alone. */
.answer-reproduction { max-width:62ch; margin:0; color:var(--muted); font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.answer-reproduction[data-checked="false"] { color:var(--state-warn-ink); font-weight:650; }
.answer-action { justify-self:start; margin-top:4px; min-height:44px; border:1px solid var(--import-accent); border-radius:9px; padding:11px 18px; background:var(--import-accent); color:#fff; font-size:15px; font-weight:700; text-decoration:none; overflow-wrap:anywhere; }
.answer-action:hover { background:var(--import-ink); border-color:var(--import-ink); }
.answer-action:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
/* Where the two numbers came from, one step under the action. It reuses
   .stand-disclosure whole — same border, same summary, same state chip, same
   focus ring — so the answer region's disclosure and the layers below it are one
   control to learn. The only thing true of THIS one and not of those is where it
   sits, so that is the only thing declared here. */
.answer-block>.answer-provenance { margin-top:2px; }
.briefing-readiness { display:grid; gap:8px; max-width:72ch; border-top:1px solid var(--import-line); padding-top:14px; }
.briefing-readiness h3,.briefing-readiness p { margin:0; overflow-wrap:anywhere; }
.briefing-readiness h3 { font-size:20px; }
.briefing-readiness-verdict { color:var(--import-ink); font-size:18px; }
.briefing-readiness[data-state="insufficient-evidence"] .briefing-readiness-verdict,
.briefing-readiness[data-state="unsupported-input"] .briefing-readiness-verdict { color:var(--state-warn-ink); }
.briefing-readiness-sequence { display:grid; gap:7px; margin:2px 0; padding-left:22px; }
.briefing-readiness-sequence li>span { color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.briefing-readiness-boundary { color:var(--muted); font-size:13px; }
.briefing-projection { display:grid; gap:8px; border-top:1px solid var(--import-line); padding-top:12px; }
.briefing-projection p { margin:0; }
.briefing-projection[data-state="error"] [role="status"] { color:var(--state-warn-ink); }
.briefing-projection pre { max-height:24rem; overflow:auto; padding:12px; border:1px solid var(--import-line); white-space:pre-wrap; }
/* The printable sheet is offered only once there is a payload to print. The
   link is authored in markup so it is a real anchor before any script runs, and
   withdrawn by the region's own state rather than by a second branch in JS: a
   pending or failed projection that still hands a reader a "print this" link
   sends them to an error page for a figure this region already knows it does
   not have. The status line above says which of the two it is. */
.briefing-projection:not([data-state="ready"]) .briefing-projection-open { display:none; }
/* The four named entry points. Wrapping inline links, in source order, so the
   keyboard order and the visual order are one order at every width. */
.answer-doors { display:flex; flex-wrap:wrap; gap:8px 14px; margin:0 0 4px; }
.answer-door { color:var(--import-ink); font-size:14px; font-weight:650; overflow-wrap:anywhere; }
.answer-door:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }
.stand-head { display:grid; gap:6px; }
.stand-head .eyebrow { margin:0; }
/* `overflow-wrap` on all three, because the extremes that actually arrive here
   are long: a question carrying a department name with no spaces in it, a
   currency figure with many digits, and a confidence label at its lowest class
   spelled out in full. They wrap; nothing is clamped, ellipsed, or cut off. */
.stand-head h2 { max-width:22ch; margin:0; font-size:clamp(26px,4vw,38px); line-height:1.12; letter-spacing:-.01em; overflow-wrap:anywhere; }
.stand-answer { margin:0; max-width:52ch; color:var(--ink); font-size:clamp(17px,2.2vw,21px); font-weight:700; line-height:1.35; overflow-wrap:anywhere; }

/* Guided first analysis. Its source order is its reading order at every width:
   scenario, finding, trust, action, then supporting detail. These rules only
   compose roles and tokens already shipped above. The mirror's chip rule is
   preserved: confidence is a filled dynamic signal; provenance is an outlined
   classification. Words and distinct shapes carry both meanings without hue. */
#finops-guided-choice { display:grid; gap:14px; }
#finops-guided-choice>h2 { max-width:28ch; margin:0; font-size:clamp(24px,3.4vw,34px); line-height:1.15; overflow-wrap:anywhere; }
#finops-guided-chooser { display:grid; gap:8px; }
#finops-guided-chooser>label { margin:0; }
#finops-guided-select { width:min(100%,34rem); min-height:44px; border:1px solid var(--panel-border); border-radius:8px; padding:9px 36px 9px 12px; background:#fff; color:var(--ink); font:650 14px/1.4 ui-monospace,monospace; }
#finops-guided-select:focus-visible,.guided-retry:focus-visible,.guided-analysis a:focus-visible,
.guided-support>summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.guided-analysis { display:grid; gap:18px; margin-top:6px; }
/* #1466 removed this panel's headline finding, benchmark, trust pair and
   call-to-action treatment: the answer they competed with is stated once, in
   the canonical briefing. What is left is the line naming the loaded export. */
.guided-lede { margin:0; max-width:64ch; color:var(--ink); font-size:15px; line-height:1.55; overflow-wrap:anywhere; }
.guided-label { color:var(--ink-muted); font:700 10px/1.5 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.guided-value { max-width:70ch; font-size:13px; font-weight:650; line-height:1.5; overflow-wrap:anywhere; }
.guided-shape { flex:none; font-weight:750; }
.guided-analysis a { min-height:44px; display:inline-flex; align-items:center; color:var(--import-ink); font-weight:700; overflow-wrap:anywhere; }
.guided-support { border-top:1px solid var(--panel-border); padding-top:4px; }
.guided-support>summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--ink); font:700 12px/1.5 ui-monospace,monospace; }
.guided-support[open]>summary { margin-bottom:10px; }
.guided-state-message { display:grid; justify-items:start; gap:7px; border:1px dashed var(--panel-border); border-radius:10px; padding:14px 16px; background:#fff; }
.guided-state-label { display:grid; grid-template-columns:auto 1fr; gap:2px 8px; margin:0; }
.guided-state-label .guided-value { grid-column:1/-1; color:var(--ink); font-size:17px; font-weight:750; }
.guided-state-remedy { margin:0; max-width:58ch; color:var(--ink-muted); font-size:13px; line-height:1.5; }
#finops-guided-chooser[data-state="error"] .guided-state-message { border-style:solid; border-color:var(--state-error-line); }
#finops-guided-chooser[data-state="extreme"] .guided-state-message { border-color:var(--state-warn-line); }
.guided-retry { min-height:44px; border:1px solid currentColor; border-radius:8px; padding:9px 13px; background:#fff; color:var(--state-error-ink); font-weight:750; cursor:pointer; }
/* The entitlement line. Both indicators are words, so the colour and the border
   are decoration on a state the reader can already read, hear, and print. */
.stand-entitlement { display:flex; flex-wrap:wrap; gap:6px 10px; margin:0; }
.stand-entitlement-item { max-width:100%; border:1px solid var(--import-line); border-radius:999px; padding:3px 10px; color:var(--import-ink); font:700 10px/1.6 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; overflow-wrap:anywhere; }
.stand-entitlement[data-evidence="synthetic-cohort"] .stand-entitlement-item,
.stand-entitlement[data-confidence="unavailable"] .stand-entitlement-item { border-style:dashed; border-color:var(--state-warn-line); color:var(--state-warn-ink); }
/* An author `display` beats the UA `[hidden]` rule, and every block the first
   screen withholds before it has figures sets one. No new custom property and
   no new value: this only restores what `hidden` already means. */
.pre-analysis-withheld[hidden] { display:none; }
.stand-figures { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px 26px; break-inside:avoid; }
.stand-figure { display:grid; align-content:start; gap:6px; border-top:3px solid var(--import-accent); padding-top:10px; }
.stand-figure-label { margin:0; color:var(--import-ink); font:700 10px/1.5 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.stand-figure-value { margin:0; color:var(--ink); font-size:clamp(22px,3vw,30px); font-weight:750; line-height:1.15; overflow-wrap:anywhere; }
.stand-figure-value[data-available="false"] { color:var(--state-warn-ink); font-size:clamp(16px,2vw,18px); font-weight:700; }
/* A figure's edge is dashed by what the reader can SEE is unavailable. The
   position figure keeps an unrendered value slot for copy/export consumers, and
   an element with no box must not paint a warning border for one that has one —
   so the hidden slot is excluded and the visible briefing states its own case. */
.stand-figure:has(>.stand-figure-value[data-available="false"]:not([hidden])),.stand-figure:has(>.peer-brief[data-state="unavailable"]) { border-top-style:dashed; border-top-color:var(--state-warn-line); }
.stand-figure-basis { margin:0; max-width:60ch; color:var(--ink-muted); font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
/* --ink-muted is 4.48:1 on this page's #f3f1eb — the file already records that
   at the trust-ladder note above, and 13px body text at 4.48:1 misses AA by two
   hundredths. The canonical answer states its provenance and its demoted
   readiness detail in that role, so both are darkened one step here rather than
   page-wide: no new token, same hue family, 5.27:1 on #f3f1eb. (#1465) */
#finops-analysis-readiness .stand-figure-basis,#finops-analysis-readiness .figure-source-legend { color:#64645e; }
.peer-brief { display:grid; gap:8px; }
.peer-brief-status { width:fit-content; margin:0; border-radius:99px; padding:3px 9px; background:var(--import-wash); color:var(--import-ink); font:700 10px/1.5 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.peer-brief[data-state="low-confidence"] .peer-brief-status,.peer-brief[data-state="unavailable"] .peer-brief-status { background:var(--state-warn-wash); color:var(--state-warn-ink); }
.peer-brief[data-state="low-confidence"] .peer-brief-next,.peer-brief[data-state="unavailable"] .peer-brief-next { border-left-color:var(--state-warn-line); }
/* The lead answer is a SENTENCE in a column the figures grid narrows to 260px,
   not the single-line number `.stand-figure-value` sets its ramp for. At that
   ramp (30px/1.15) it wraps to ~8 lines whose descenders collide and it drives
   the whole figures row ~110px taller than the values beside it. Traded down a
   step: still the largest and heaviest thing in its cell, so it still leads the
   label above it and the 13px lines below it, with leading a wrapped line can
   survive. tests/finops-headline-accessibility.test.js holds the no-clip rule. */
.peer-brief-answer { max-width:34ch; font-size:clamp(17px,1.9vw,21px); line-height:1.3; }
/* Both lines carry a department name an import supplied, so both wrap inside
   the column the way every other basis line on this page does. */
.peer-brief-metric,.peer-brief-next { margin:0; max-width:62ch; color:var(--ink-muted); font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
.peer-brief-next { border-left:3px solid var(--import-accent); padding-left:10px; color:var(--ink); font-weight:700; }
.peer-brief-evidence { margin-top:2px; border-top:1px solid var(--panel-border); padding-top:8px; }
.peer-brief-evidence>summary { width:fit-content; cursor:pointer; color:var(--import-ink); font-size:13px; font-weight:700; }
.peer-brief-evidence>summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; border-radius:4px; }
.peer-brief-evidence dl { display:grid; gap:8px; margin:10px 0 0; }
.peer-brief-method { margin:10px 0 0; color:var(--ink-muted); font-size:13px; line-height:1.55; }
.peer-brief-evidence dl>div { display:grid; gap:2px; }
.peer-brief-evidence dt { color:var(--import-ink); font:700 10px/1.5 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.peer-brief-evidence dd { margin:0; color:var(--ink-muted); font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
.stand-glance-lines { display:grid; gap:4px; }
.stand-team { display:grid; align-content:start; gap:6px; border-top:3px solid var(--import-accent); padding-top:10px; }
.stand-team[data-available="false"] { border-top-style:dashed; border-top-color:var(--state-warn-line); }
.stand-team-name { margin:0; color:var(--ink); font-size:clamp(19px,2.5vw,24px); font-weight:750; line-height:1.2; overflow-wrap:anywhere; }
.stand-team[data-available="false"] .stand-team-name { color:var(--state-warn-ink); font-size:16px; font-weight:700; }
.stand-team-detail { margin:0; max-width:60ch; color:var(--ink-muted); font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
/* The imported-state headline. Five rows, always five: a slot the export could
   not supply carries the contract's own sentence, and it is marked with a
   dashed rule and a stated provenance label rather than by colour alone. */
.stand-imported { display:grid; align-content:start; gap:8px; border-top:3px solid var(--import-accent); padding-top:10px; }
.stand-imported-question { margin:0; max-width:60ch; color:var(--ink); font-size:clamp(17px,2.2vw,21px); font-weight:750; line-height:1.25; }
.stand-imported-slots { display:grid; margin:0; gap:4px; }
/* Provenance for the names in the sentence above: readable, secondary, and not
   behind a disclosure. The contract line is a step quieter than the column it
   qualifies, never hidden. */
.stand-imported-naming { margin:8px 0 0; max-width:70ch; color:var(--ink); font-size:14px; line-height:1.45; }
.stand-imported-naming-contract { margin:2px 0 0; max-width:70ch; color:var(--muted); font-size:13px; line-height:1.45; }
.org-unit-underived { color:var(--muted); font-weight:500; }
.imported-headline-label { color:var(--ink-muted); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.imported-headline-slot { display:grid; margin:0 0 8px; gap:2px; border-left:3px solid var(--import-accent); padding-left:10px; }
.imported-headline-slot[data-supported="false"] { border-left-style:dashed; border-left-color:var(--state-warn-line); }
.imported-headline-value { color:var(--ink); font-size:16px; font-weight:700; overflow-wrap:anywhere; }
.imported-headline-slot[data-supported="false"] .imported-headline-value { color:var(--state-warn-ink); font-weight:600; }
.imported-headline-basis { max-width:60ch; color:var(--ink-muted); font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
/* ONE READING ORDER, and it is the DOM's. The rows are painted in the order the
   contract publishes them — question, the recoverable figure, the one action,
   then the support — so what a sighted reader meets, what a screen reader reads
   and what the Tab key walks are the same sequence. The scale below is the only
   thing that says which of them leads: no `order`, no absolute positioning, no
   reversed flex direction appears in this block, because every one of those
   would put a reader who sees the page and a reader who hears it in different
   orders. The lead step is the one `.stand-figure-value` already ships. */
.imported-headline-slot[data-role="lead"] .imported-headline-value { font-size:clamp(22px,3vw,30px); font-weight:750; line-height:1.15; }
.imported-headline-slot[data-role="action"] .imported-headline-value { font-size:17px; }
.imported-headline-slot[data-role="support"] .imported-headline-value { font-size:14px; }
.imported-headline-slot[data-role="support"] .imported-headline-basis { color:var(--ink-muted); }
.imported-headline-label[data-role="lead"] { color:var(--import-ink); }
/* THE BRIEF'S ONE PROVENANCE MARKER, in three states. Colour is the LAST
   carrier: the words say the whole thing on their own ("From your file", "You
   entered this", "Not in your file"), the silhouette says it again in grayscale
   — FILLED wash for a figure computed from the file in front of the reader,
   SOLID outline for a fact the reader declared, DASHED outline for a stated
   absence — and only then do the palette roles differ. The silhouettes follow
   the Claude Design foundations card: a filled wash is a dynamic signal, an
   outline is a static classification. Every value here already ships in this
   sheet; no hue, size or spacing step is introduced.
   It WRAPS rather than clips. The marker is a block-level item of the row's own
   grid, so at narrow widths it falls beneath the figure it qualifies instead of
   truncating it, and `overflow-wrap` keeps a 30-digit figure or a long declared
   label inside the column rather than scrolling the row sideways. */
.brief-provenance { display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:1px 6px; justify-self:start; min-width:0; max-width:100%; border:1px solid var(--ink-muted); border-radius:5px; padding:3px 8px; font-family:ui-monospace,Menlo,monospace; font-size:11.5px; font-weight:700; line-height:1.5; overflow-wrap:anywhere; }
.brief-provenance-shape { flex:none; }
.brief-provenance-detail { font-weight:600; }
.brief-provenance[data-silhouette="filled"] { border-color:var(--import-accent); background:var(--import-wash); color:var(--import-ink); }
.brief-provenance[data-silhouette="outline"] { border-color:var(--ink-muted); background:transparent; color:var(--ink-muted); }
.brief-provenance[data-silhouette="dashed"] { border-style:dashed; border-color:var(--state-warn-line); background:transparent; color:var(--state-warn-ink); }
.brief-provenance-line { display:grid; justify-items:start; margin:0; max-width:60ch; }
/* The trust ladder (#1104). Two rules and no new token: the rungs are the chips
   above, and the current one is told apart by its words and its mark before its
   fill. Wrapping rather than scrolling, so three chips survive a narrow column
   without a rung leaving the screen. */
.trust-ladder { display:grid; gap:6px; max-width:60ch; border-top:1px dashed var(--import-line); padding-top:10px; break-inside:avoid; }
.trust-ladder-rungs { display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.stand-imported-movement { margin:0; max-width:60ch; color:var(--ink); font-size:16px; font-weight:700; line-height:1.4; overflow-wrap:anywhere; }
/* Which months the movement was computed from, directly under the figure. It is
   ordinary text in the reading order, one step down from the sentence above it
   and one step up from the basis line below, and the arrow inside it is
   decoration the markup marks aria-hidden with the word "to" beside it. */
.stand-imported-window { margin:0; max-width:60ch; color:var(--ink); font-size:13px; font-weight:700; line-height:1.5; font-variant-numeric:tabular-nums; }
.stand-imported-window-arrow { padding:0 2px; color:var(--ink-muted); }
.stand-imported-basis { margin:0; max-width:60ch; color:var(--ink-muted); font-size:13px; line-height:1.55; }
/* The per-month working. Same disclosure treatment and the same focus ring as
   the completeness working below it: a summary is not one of the elements
   styles.css gives a ring to, so a keyboard reader would otherwise reach this
   control and not see where they were. */
.stand-imported-detail>summary { color:var(--ink-muted); font-size:13px; font-weight:700; cursor:pointer; }
.stand-imported-detail>summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; border-radius:4px; }
.stand-imported-series { display:grid; margin:8px 0 0; gap:2px; padding-left:18px; }
.stand-imported-period { color:var(--ink-muted); font-size:13px; font-variant-numeric:tabular-nums; }
.stand-imported-series .stand-imported-period:last-child { color:var(--ink); font-weight:700; }
/* The completeness score. The tier line and the prioritized next action are
   ordinary paragraphs in the open; only the slot-by-slot working sits behind
   the disclosure. A slot that fell back is marked by the word "Fell back" and a
   dashed rule, never by colour alone. */
.stand-imported-next { margin:0; max-width:60ch; border-left:3px solid var(--import-accent); padding-left:10px; color:var(--ink); font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.completeness-detail>summary { color:var(--ink-muted); font-size:13px; font-weight:700; cursor:pointer; }
/* A summary is not one of the elements styles.css gives a focus ring to, so
   this control had none: a keyboard reader could reach the working and not see
   where they were. Same ring, same offset as every other disclosure here. */
.completeness-detail>summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; border-radius:4px; }
.completeness-slots { display:grid; margin:8px 0 0; gap:2px; }
.completeness-slot-label { color:var(--ink-muted); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.completeness-slot { display:grid; margin:0 0 8px; gap:2px; border-left:3px solid var(--import-accent); padding-left:10px; }
.completeness-slot[data-satisfied="false"] { border-left-style:dashed; border-left-color:var(--state-warn-line); }
.completeness-verdict { color:var(--ink); font-size:13px; font-weight:700; }
.completeness-slot[data-satisfied="false"] .completeness-verdict { color:var(--state-warn-ink); }
.completeness-reason { max-width:60ch; color:var(--ink-muted); font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
.stand-next { display:grid; justify-items:start; gap:6px; }
.stand-action { display:inline-block; border:1px solid var(--import-accent); border-radius:9px; padding:11px 18px; background:var(--import-accent); color:#fff; font-size:15px; font-weight:700; text-decoration:none; }
.stand-action:hover { background:var(--import-ink); border-color:var(--import-ink); }
.stand-action:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.stand-action-basis { margin:0; max-width:64ch; color:var(--ink-muted); font-size:13px; line-height:1.55; }
/* The one-press route to the trajectory view. Secondary to the ranked action
   beside it — a link, not a second filled button — and it wraps rather than
   overflowing at narrow widths, where `.stand-next` is already a single column. */
.stand-trajectory { justify-self:start; max-width:44ch; color:var(--import-accent); font-size:14px; font-weight:650; line-height:1.45; text-decoration:underline; text-underline-offset:3px; }
.stand-trajectory:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.stand-sample { max-width:72ch; }
.stand-withheld { display:grid; justify-items:start; gap:8px; border:1px dashed var(--state-warn-line); border-radius:12px; padding:14px 16px; background:var(--state-warn-wash,#fdf8ec); }
.stand-withheld-heading { margin:0; color:var(--state-warn-ink); font:700 11px/1.5 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.stand-withheld-missing { margin:0; max-width:62ch; color:var(--ink); font-size:16px; font-weight:700; line-height:1.4; overflow-wrap:anywhere; }
.stand-withheld-action { border:1px solid var(--import-accent); border-radius:9px; padding:10px 16px; background:#fff; color:var(--import-ink); font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.stand-withheld-action:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.stand-withheld-next { margin:0; max-width:62ch; color:var(--ink-muted); font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
/* Six siblings, never nested: every one of them is one interaction away from
   the headline above. */
.stand-disclosures { display:grid; gap:6px; }
/* The two follow-on questions moved into this group in #832. `.support-disclosure`
   carries `margin:22px 0` for the standalone sections it wraps elsewhere; inside
   a grid those margins do not collapse, so each one would sit 44px+6px from its
   neighbour and read as two loose blocks appended to a tight stack. The group
   owns the rhythm, so the member gives its margins up and keeps everything else
   — border, summary, open state, hover — exactly as it ships everywhere else. */
.stand-disclosures>.support-disclosure { margin:0; }
.stand-disclosure { border:1px solid var(--panel-border); border-radius:10px; background:#fff; }
.stand-disclosure>summary { cursor:pointer; list-style:none; padding:9px 13px; }
.stand-disclosure>summary::-webkit-details-marker { display:none; }
.stand-disclosure>summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; border-radius:10px; }
.stand-disclosure-heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:6px 14px; margin:0; font-size:14px; font-weight:700; line-height:1.4; }
.stand-disclosure-state { flex:none; color:var(--import-ink); font:700 10px/1.6 ui-monospace,monospace; letter-spacing:.07em; text-transform:uppercase; }
.stand-disclosure-list { display:grid; gap:9px; margin:0; padding:0 13px 13px; }
.stand-disclosure-list>div { display:grid; gap:2px; }
.stand-disclosure-list dt { color:var(--import-ink); font:700 10px/1.5 ui-monospace,monospace; letter-spacing:.07em; text-transform:uppercase; }
.stand-disclosure-list dd { margin:0; max-width:74ch; color:var(--ink-muted); font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
/* ONE HIERARCHY ACROSS THE SPINE.
   Four regions open this page — the headline that answers it and the three
   steps under it — and until #727 all four wore the same silhouette: a 5–6px
   accent rail over the same wash, told apart only by type size. The page's own
   h1 sat above all of them at 82px, so the largest thing on screen was the
   product's name and the answer was third.

   The rule now, and it is the one from design-system/claude-design's
   foundations card: FILLED WASH = DYNAMIC SIGNAL, OUTLINE = STATIC
   CLASSIFICATION. The headline is this page's live claim, so it keeps the wash
   and the 6px accent rail. A supporting step classifies evidence behind that
   claim, so it takes the outline — a flat white surface behind a neutral 3px
   rail — and its heading drops to the subordinate rung. The rail is
   `--ink-muted` rather than `--panel-border`: it is a meaningful indicator, so
   it owes 3:1, and the hairline panel edge measures 1.55:1 on white.

   NO DE-EMPHASIS RESTS ON TINT. Every step changes TWO channels at once: a type
   rung AND a surface, both of which survive greyscale, print, and a 320px
   column. Nothing is dimmed to achieve it — the ink stays `--ink` and
   `--ink-muted`, which measure 14.6:1 and 5.0:1 on white, so subordinate is a
   position in the hierarchy and never a contrast concession. Every size, colour
   and rail width below already ships elsewhere in this file; no rung, hex, or
   spacing step is introduced. */
[data-subordinate="true"] h1,
[data-subordinate="true"] h2 { font-size:clamp(18px,2.2vw,22px); line-height:1.2; }
/* Two steps size their own heading further down this file, at the same
   specificity as the rule above and therefore later in the cascade. Named
   explicitly so the rung wins where it has to, rather than silently losing to a
   rule three thousand lines away. */
.first-run[data-subordinate="true"] .first-run-head h2,
.next-step[data-subordinate="true"] .next-step-head h2 { font-size:clamp(18px,2.2vw,22px); }
/* #832 moved the two follow-on questions inside the answer region, so their
   headings dropped from h2 to h3 — an h2 in there would open a second top-rung
   section inside the section it belongs to. The rung they are DRAWN at does not
   change: this is the same clamp the rule above gives every subordinate heading,
   named for those two headings rather than for `h3`, so no other h3 on the page
   moves a pixel. */
/* AND THE ONE ROLE CLASS THAT OUTRANKED THE ANSWER (#1687). `.answer-question`
   is this page's headline-question rung — clamp(24px,3.6vw,34px) — and a demoted
   region wearing it kept drawing at 34px while the canonical answer's own h2 sat
   at the browser default 24px, so heading rank said "subordinate" and type size
   said "headline". The rule above only reaches h1 and h2; this reaches the role
   wherever it is used, at any rank, inside anything already declared
   subordinate. No new size: it is the same rung as every line above. */
.next-step[data-subordinate="true"] .next-step-head h3,
.finops-journey[data-subordinate="true"] .fjc-head h3,
[data-subordinate="true"] .answer-question { font-size:clamp(18px,2.2vw,22px); line-height:1.2; }
.first-run[data-subordinate="true"],
.next-step[data-subordinate="true"] { border-left-width:3px; border-left-color:var(--ink-muted); background:#fff; }
/* THE HERO'S LEADING SPACE, BUDGETED IN THE PIXELS IT COSTS THE ANSWER.
   This rule read `padding-top:0` while the hero sat UNDER the answer, where the
   region above it supplied the separation. #832 puts the hero back at the top of
   `<main>`, and zero there is a real defect rather than a saving: `.site-header`
   ends in a 1px rule and `.eyebrow` is `margin:0`, so the page's first line of
   type would sit flush on that hairline.
   The unmodified `.finops-hero` step is `clamp(60px,8vw,104px)`. Restoring it
   would spend up to 104px of a ~640-720px first viewport — 14% of the fold — on
   space above a title, which is the cost this issue exists to stop paying. 24px
   is the trade: it is `main,.page`'s own top-padding step, already shipping in
   styles.css, it clears the header rule by 24px, and it costs under 4% of the
   fold instead of 14%. The whole hero measures about 210px at a 1440px width,
   so the answer region's heading and first figure still open the first screen. */
.finops-hero[data-subordinate="true"] { padding-top:24px; }
/* AND THE HERO'S TYPE, for the same reason and on the same condition (#1497).
   The page name sat at the site display step `clamp(44px,7.3vw,82px)` — larger at
   every width than the recoverable figure below it, so the biggest thing on a
   screen that exists to answer "are we wasting money?" was a slogan. Stepped down
   to the step `.coach-hero h1` already ships, not a new one. The figure's ramp
   beats it at the floor (38 > 32), the ceiling (68 > 52) and between (7vw >
   5.6vw), so the number leads at every width rather than only at one. */
.finops-hero[data-subordinate="true"] h1 { font-size:clamp(32px,5.6vw,52px); }

/* The demoted first-run block. It keeps every word; it stops competing for the
   eye with the headline above it. */
.first-run[data-subordinate="true"] .first-run-answer { font-size:clamp(15px,1.6vw,17px); }
/* `.stand-figure-value` joins the same rung for the same reason (#1687): it is
   the page's ONE largest-number role, and three regions below the answer were
   drawing a figure of their own at its full clamp(22px,3vw,30px) — the same
   emphasis as the $51,254 the page exists to state. Demoted here rather than
   restyled per region, so the role stays exclusive to whatever is not
   subordinate, which on this page is the answer. The unavailable state keeps its
   warn ink, its 700 weight and its dashed rail; only the ramp moves. */
.first-run[data-subordinate="true"] .first-run-value,
[data-subordinate="true"] .stand-figure-value { font-size:clamp(16px,1.8vw,19px); }

/* The first-run synthetic result: the populated answer a visitor with no export
   meets above the fold. It reads as one block — label, sample marker, three
   slots, the ranked action, the method disclosure, and two next steps — because
   a figure that can be reflowed away from the sentence saying it is invented is
   a figure that can be quoted as real. Hence the single bordered container and
   `break-inside:avoid` on the answer grid rather than six loose siblings. */
.first-run { display:grid; gap:16px; margin:0 0 8px; border:1px solid var(--import-line); border-left:5px solid var(--import-accent); border-radius:14px; padding:clamp(18px,3vw,26px); background:linear-gradient(150deg,var(--import-wash),#fff 58%); }
.first-run[data-state="unavailable"] { border-color:var(--state-error-line); border-left-color:var(--state-error-line); background:var(--state-error-wash); }
/* Empty is not an error, and it is not drawn as one. A dataset with nothing in
   it needs a neutral rule and a sentence, not a red block that reads as a
   failure a reader is meant to retry. The dashed edge is the same "nothing to
   resolve here" silhouette the unavailable slots already use. */
.first-run[data-state="empty"] { border-style:dashed; border-left-style:solid; border-color:var(--panel-border); border-left-color:var(--ink-muted); background:#fbfaf6; }
.first-run-head { display:grid; gap:6px; }
.first-run-head .eyebrow { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; margin:0; }
.first-run-shape { flex:none; font-size:13px; font-weight:750; }
.first-run-head h2 { max-width:26ch; margin:0; font-size:clamp(22px,3.2vw,31px); line-height:1.18; }
.first-run-sample { margin:0; }
/* The answer: the one sentence a reader who stops here has still read. Sized
   between the heading above it and the slot figures below, so the type scale
   itself says which of the three is the conclusion. */
.first-run-answer { margin:0; max-width:44ch; color:var(--ink); font-size:clamp(17px,2.1vw,21px); font-weight:700; line-height:1.35; overflow-wrap:anywhere; }
.first-run-answer[data-available="false"] { max-width:60ch; color:var(--state-warn-ink); font-size:16px; }
.first-run-answer-detail { margin:-8px 0 0; max-width:70ch; color:var(--ink-muted); font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
/* Three slots, and the whole grid is one print/column unit: the share, the
   scenario, and the unavailable peer position qualify each other. */
.first-run-slots { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px 22px; break-inside:avoid; }
.first-run-slot { display:grid; align-content:start; gap:5px; border-top:2px solid var(--import-accent); padding-top:10px; }
.first-run-slot-label { margin:0; color:var(--import-ink); font:700 10px/1.5 ui-monospace,monospace; letter-spacing:.07em; text-transform:uppercase; }
.first-run-value { margin:0; color:var(--ink); font-size:clamp(19px,2.4vw,25px); font-weight:750; line-height:1.2; overflow-wrap:anywhere; }
/* An unavailable value is never only a tint or a dash: it says the word, in the
   slot, at a weight that reads as a state rather than as a measurement. */
.first-run-value[data-available="false"] { color:var(--state-warn-ink); font-size:17px; font-weight:700; }
.first-run-slot:has(>.first-run-value[data-available="false"]) { border-top-style:dashed; border-top-color:var(--state-warn-line); }
.first-run-detail { margin:0; color:var(--ink-muted); font-size:12.5px; line-height:1.55; overflow-wrap:anywhere; }
/* WHERE EACH FIGURE CAME FROM — read from the example's files, derived here, or
   absent from them (#1025).

   NO NEW TOKEN ENTERS THE PAGE HERE. The chip is `.brief-provenance`, already
   defined above for the imported brief, on two of the silhouettes it already
   ships: solid outline for derived, dashed for absent. That is the Claude Design
   foundations rule unchanged — outline is a static classification, and where a
   figure came from is a classification of the figure rather than a reading that
   moves — which is also why the filled wash is NOT borrowed: it means "computed
   from the file this reader brought", a state a bundled example can never be in.

   The words carry the whole meaning on their own and the silhouette is the
   second channel, so the three states stay apart in greyscale, on a mono
   printer, and to a reader who sees no colour. DIRECT CARRIES NO CHIP: the
   legend below the answer states the convention and names what is unmarked, and
   eight badges over eight figures would cost the reading order more than they
   returned. The tint is the last carrier, never the first.

   The marker is caption scale (11–12.5px, `--ink-muted`) and the working sits
   behind a shut disclosure, so nothing here competes with the answer above it. */
.figure-source { margin:0; }
.figure-source>summary { display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; width:fit-content; min-width:0; max-width:100%; border-radius:5px; padding:2px; list-style:none; overflow-wrap:anywhere; cursor:pointer; }
.figure-source>summary::-webkit-details-marker { display:none; }
.figure-source>summary:hover { background:var(--import-wash); }
.figure-source>summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.figure-source-state { flex:none; color:var(--ink-muted); font:700 11px/1.5 ui-monospace,Menlo,monospace; }
.figure-source-shape { flex:none; }
/* The working. A rule down its left edge rather than a box, so an opened marker
   reads as a footnote hanging off its figure instead of a second card competing
   with the slot it belongs to. */
.figure-source-detail { display:grid; gap:6px; margin:6px 0 0; max-width:70ch; border-left:2px solid var(--import-line); padding-left:11px; }
.figure-source[data-source="missing"] .figure-source-detail { border-left-color:var(--state-warn-line); }
.figure-source-detail dt { margin:0; color:var(--import-ink); font:700 10px/1.5 ui-monospace,monospace; letter-spacing:.07em; text-transform:uppercase; }
.figure-source-detail dd { margin:2px 0 0; color:var(--ink-muted); font-size:12.5px; line-height:1.55; overflow-wrap:anywhere; }
/* The legend, and it is what makes an unmarked figure a claim rather than a gap. */
.figure-source-legend { margin:0; max-width:70ch; color:var(--ink-muted); font-size:12.5px; line-height:1.55; overflow-wrap:anywhere; }
/* CORRECTING A DERIVED VALUE (#1026). No new hue, silhouette or type step: the
   chip beside every value is the .brief-provenance the markers above already
   ship, and the cells only need room to hold a value, its chip and its controls
   without the three running together. The table scrolls rather than squeezing on
   a narrow viewport, because a correction control clipped off the right edge is
   a control a phone reader does not have, and a long typed value wraps inside
   its cell rather than pushing the row wider. NO FOCUS RULE IS DECLARED HERE:
   styles.css already rings every input and button on the site, and a second
   treatment for these two would be the one place the ring could drift. */
.figure-corrections { margin:14px 0 0; max-width:70ch; }
.figure-corrections-headline, .figure-corrections-confidence { margin:6px 0 0; font-size:12.5px; line-height:1.55; overflow-wrap:anywhere; }
.figure-corrections-confidence { color:var(--ink-muted); }
.figure-corrections-table { width:100%; margin:8px 0 0; border-collapse:collapse; font-size:12.5px; display:block; overflow-x:auto; }
.figure-corrections-caption { caption-side:top; text-align:left; margin:0 0 6px; color:var(--ink-muted); font-size:12px; line-height:1.5; }
.figure-corrections-table th, .figure-corrections-table td { text-align:left; vertical-align:top; padding:6px 10px 6px 0; border-bottom:1px solid var(--import-line); font-weight:400; }
.figure-corrections-value { display:block; overflow-wrap:anywhere; }
.figure-corrections-cell .brief-provenance { margin-top:4px; }
.figure-corrections-control { margin:4px 6px 0 0; }
.figure-corrections-input { width:100%; max-width:34ch; }
/* THE BAND CHIP. Four channels, and the tint is the last of them: the glyph
   differs per state, the word names the band, the figure below repeats it, and
   only then does the fill say it again. Take the colour away — greyscale print,
   forced colours, a reader who cannot separate green from amber — and the chip
   still says which band this is.

   The silhouette follows the Claude Design foundations rule: filled wash for a
   dynamic signal (a measured band, which moves when the data moves), outline
   for a static classification (withheld — the absence of a position is a
   category, not a reading). The border weight is a second non-colour channel:
   1px for a band that is fine, 2px for one that is behind. */
.first-run-band { display:flex; flex-wrap:wrap; margin:0; }
.first-run-band[hidden] { display:none; }
.first-run-band[data-band] { display:inline-flex; align-items:baseline; gap:5px; align-self:start; max-width:100%; border:1px solid var(--import-line); border-radius:99px; padding:3px 11px; background:#fff; color:var(--import-ink); font:750 11px/1.5 ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; overflow-wrap:anywhere; }
.first-run-band-shape { flex:none; font-size:10px; letter-spacing:0; }
/* Ahead and middle: the panel's own ink on the panel's own wash. Told apart by
   the glyph (▲ / ◆) and the word, never by the fill alone. */
.first-run-band[data-band="ahead"] { border-color:var(--import-accent); background:var(--import-wash); color:var(--import-ink); }
/* `--panel-border` is the token this panel reaches for by habit, and at 1.56:1
   against the page it is decoration, not an indicator — so the middle band uses
   `--ink-muted` for its edge instead. Same scale, no new value, and the chip's
   boundary now carries its 3:1 like every other state's. */
.first-run-band[data-band="middle"] { border-color:var(--ink-muted); background:#f4f3ee; color:#3b3b35; }
/* Behind: the warn pair, and a heavier edge than the two above it. */
.first-run-band[data-band="behind"] { border:2px solid var(--state-warn-line); background:var(--state-warn-wash); color:var(--state-warn-ink); }
/* Two or more bands behind is a different fact, not a darker shade of the same
   one: a doubled glyph, the error pair, and the same heavy edge. */
.first-run-band[data-band="critical"] { border:2px solid var(--state-error-line); background:var(--state-error-wash); color:var(--state-error-ink); }
/* Withheld: an outline silhouette, a dashed edge, and the words for it. Not a
   blank, not a dash, and not the same chip greyed out — a reader has to be able
   to tell "we did not compare" from "this is loading". */
.first-run-band[data-band="withheld"] { border:2px dashed var(--ink-muted); background:#fff; color:#5b5b55; }
.first-run-recommendation { display:grid; gap:5px; border-left:3px solid var(--import-accent); padding:2px 0 2px 13px; break-inside:avoid; }
.first-run-recommendation .eyebrow { margin:0; }
.first-run-action-text { margin:0; max-width:70ch; color:var(--ink); font-size:16px; font-weight:650; line-height:1.5; }
.first-run-action-text[data-available="false"] { color:var(--state-warn-ink); font-weight:700; }
.first-run-role { margin:0; color:var(--ink-muted); font:700 12px/1.5 ui-monospace,monospace; }
/* Confidence sits below the action rather than beside the figures: it qualifies
   the whole answer, not one slot, and reading it before the answer would be
   reading a caveat with nothing to caveat. Its value is deliberately quieter
   than the headline figures — it is a bound on them, not a fourth measurement. */
.first-run-confidence { display:grid; gap:5px; border-top:2px solid var(--import-accent); padding-top:10px; break-inside:avoid; }
.first-run-confidence>.first-run-value { font-size:17px; }
/* The disclosure control. The summary carries a real `h3` and a state chip, so
   it is one line in the heading outline and one line a reader can act on. The
   UA marker goes because the chip's own glyph is the marker — one triangle, not
   two, and the one that stays is the one that travels with a word. */
.first-run-method>summary { list-style:none; cursor:pointer; color:var(--import-ink); font-size:13px; font-weight:700; }
.first-run-method>summary::marker { content:""; }
.first-run-method>summary::-webkit-details-marker { display:none; }
.first-run-method-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; margin:0; color:var(--import-ink); font-size:13px; font-weight:700; line-height:1.5; }
/* Filled wash, because expanded/collapsed is a dynamic signal rather than a
   static classification — the rule the Claude Design foundations card sets for
   chip silhouettes. The word and the glyph are the channels; the wash only
   repeats them. */
.first-run-method-state { display:inline-flex; align-items:baseline; gap:5px; flex:none; border:1px solid transparent; border-radius:99px; padding:2px 9px; background:#e2ebe6; color:var(--import-ink); font:700 10.5px/1.5 ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; }
.first-run-method-state[data-disclosure="expanded"] { background:var(--import-accent); color:#fff; }
.first-run-method-shape { font-size:10px; }
.first-run-method>summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; border-radius:5px; }
/* The print rendering is an inert sibling, not disclosure content. Both halves
   of its visibility switch are author rules, so the paper rule never has to
   override the browser's implementation of the HTML `hidden` attribute. */
.first-run-method-print { display:none; }
.first-run-method-print-heading { margin:0 0 8px; color:var(--import-ink); font:700 11px/1.6 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.first-run-support { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px 22px; }
.first-run-method-list { display:grid; gap:10px; margin:12px 0 0; }
.first-run-method-list dt { color:var(--ink-muted); font:700 10px/1.5 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.first-run-method-list dd { margin:3px 0 0; max-width:80ch; color:#4c5650; font-size:12.5px; line-height:1.6; overflow-wrap:anywhere; }
/* Two choices, not four, and told apart by more than one channel: the filled
   accent, the position, and the note under each say which is which. */
.first-run-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px 22px; }
.first-run-choice { display:grid; align-content:start; gap:7px; }
.first-run-choice button { min-height:46px; border-radius:9px; padding:11px 15px; font-size:14px; font-weight:750; cursor:pointer; }
.first-run-primary { border:1px solid var(--import-accent); background:var(--import-accent); color:#fff; }
.first-run-primary:hover { background:#25493d; }
.first-run-secondary { border:1px solid var(--import-line); border-style:dashed; background:transparent; color:var(--import-ink); }
.first-run-secondary:hover { border-color:var(--import-accent); border-style:solid; }
.first-run-choice button:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.first-run-action-note { margin:0; color:var(--ink-muted); font-size:12px; line-height:1.55; }
/* The hand-off out of this page: the same answer, formatted as the sheet a
   reader carries into a meeting. Drawn as a link rather than a third button —
   the two above put data into this page, this one leaves it, and a reader should
   be able to tell those apart before they press anything. Full-width at every
   size, so the row above never becomes three cramped columns on a narrow
   viewport. */
.first-run-handoff { display:grid; align-content:start; gap:7px; margin:14px 0 0; border:1px solid var(--import-line); border-radius:11px; padding:13px 16px; background:#fbfcfb; }
.first-run-handoff-heading { margin:0; color:var(--ink); font-size:13px; font-weight:750; letter-spacing:0.01em; }
.first-run-handoff-action { justify-self:start; min-height:44px; display:inline-flex; align-items:center; border:1px solid var(--import-line); border-radius:9px; padding:10px 15px; background:#fff; color:var(--import-ink); font-size:13.5px; font-weight:700; text-decoration:none; }
.first-run-handoff-action:hover { border-color:var(--import-accent); color:var(--import-accent); }
.first-run-handoff-action:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.first-run-handoff-note { margin:0; max-width:78ch; color:var(--ink-muted); font-size:12px; line-height:1.55; }
/* The .first-run-conversion rules were deleted with the region the answer spine
   retired. #finops-contact carries the ask and has its own rules below. */
/* WHERE TO GO NEXT. Quieter than the brief above it — no gradient, a single
   accent rule — because it is not a second answer. The one thing in it drawn at
   button weight is the rank-1 door, which is the whole point of the region: a
   reader who takes one action from this block takes the right one. */
.finops-destinations { display:grid; gap:14px; margin:0 0 22px; border:1px solid var(--import-line); border-left:5px solid var(--import-accent); border-radius:13px; padding:clamp(16px,2.6vw,22px); background:#fbfcfb; }
/* THE PROMOTED EVIDENCE PANEL — the one supporting panel that backs the figure
   at the top of this screen. Composed from scales already on this sheet: this
   panel's own --import-accent rule one step thicker at the 6px .proof-point
   uses, white instead of its tint, and the elevation .score-card already
   carries. No new hue, radius, type size, or spacing step. It sits ABOVE the
   withheld-state rule deliberately — a ranking nobody could compute keeps the
   amber edge and wash, and the promotion contributes structure, never a state
   colour. */
.finops-destinations[data-headline-evidence="true"] { background:#fff; border-left-width:6px; box-shadow:0 14px 40px rgba(38,38,31,.04); }
/* The confidence-and-provenance line, in the metadata type role this sheet
   already uses for a basis sentence. `min-width:0` with `overflow-wrap:anywhere`
   is what holds a 400-character provenance inside the panel at 320px instead of
   pushing the page sideways; the chip never shrinks, so the label survives. */
.dest-headline-evidence { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; margin:0; }
.dest-headline-evidence-chip { flex:none; border:1px solid var(--import-line); border-radius:99px; padding:3px 11px; background:#e2ebe6; color:var(--import-ink); font:700 11px/1.5 ui-monospace,monospace; letter-spacing:.04em; }
.dest-headline-evidence-text { min-width:0; max-width:80ch; color:var(--ink-muted); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
/* The layers the promoted panel outranks: flat wash, no elevation, and they
   stay shut. Weight is the only thing that changes — every word, control, and
   figure in them is untouched. */
.support-disclosure[data-headline-evidence="false"] { background:#faf9f5; }
.support-disclosure[data-headline-evidence="false"]>summary:hover { background:#f3f1eb; }
/* A ranking nobody could compute is drawn as the withheld state every other
   figure on this page uses: dashed edge, and the word in the text. */
.finops-destinations[data-state="unavailable"] { border-style:dashed; border-left-style:solid; border-color:var(--state-warn-line); border-left-color:var(--state-warn-ink); background:var(--state-warn-wash); }
.finops-destinations-head { display:grid; gap:5px; }
.finops-destinations-head h2 { max-width:30ch; margin:0; font-size:clamp(19px,2.5vw,25px); line-height:1.2; }
.finops-destinations-head .eyebrow { margin:0; }
#finops-destinations-body { display:grid; gap:12px; }
.dest-unavailable { margin:0; max-width:70ch; color:var(--state-warn-ink); font-size:14px; font-weight:700; line-height:1.5; }
.dest-finding { margin:0; max-width:62ch; color:var(--ink); font-size:clamp(15px,1.8vw,17px); font-weight:700; line-height:1.4; overflow-wrap:anywhere; }
.dest-why { margin:0; max-width:74ch; color:var(--ink-muted); font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
/* The prioritized door. The accent bar, the eyebrow that says "rank 1 of 3",
   and the filled control are three channels saying the same thing, so the
   ordering survives greyscale, a screen reader, and a printed page. */
.dest-primary-block { display:grid; justify-items:start; gap:8px; border-left:3px solid var(--import-accent); padding:2px 0 2px 13px; break-inside:avoid; }
.dest-primary-eyebrow { margin:0; }
.dest-primary { display:inline-flex; align-items:baseline; gap:8px; min-height:44px; border:1px solid var(--import-accent); border-radius:9px; padding:11px 16px; background:var(--import-accent); color:#fff; font-size:14px; font-weight:750; text-decoration:none; }
.dest-primary:hover { background:#25493d; }
.dest-primary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.dest-shape { flex:none; font-size:11px; font-weight:750; }
.dest-primary-label { margin:0; max-width:64ch; color:var(--ink); font-size:14px; font-weight:650; line-height:1.5; }
.dest-primary-answers { margin:0; max-width:74ch; color:var(--ink-muted); font-size:12.5px; line-height:1.6; }
.dest-primary-because { margin:0; max-width:74ch; color:var(--import-ink); font-size:12.5px; font-weight:650; line-height:1.6; }
.dest-confidence { display:flex; align-items:baseline; gap:8px; margin:0; }
.dest-confidence-value { border:1px solid var(--import-line); border-radius:99px; padding:3px 11px; background:#e2ebe6; color:var(--import-ink); font:700 11px/1.5 ui-monospace,monospace; letter-spacing:.04em; }
.dest-confidence-basis { margin:0; max-width:80ch; color:var(--ink-muted); font-size:12px; line-height:1.6; }
/* Both disclosures, same silhouette as the brief's own method disclosure: the
   summary carries a real heading and a chip whose glyph replaces the UA marker. */
.dest-disclosure>summary { list-style:none; cursor:pointer; color:var(--import-ink); font-size:13px; font-weight:700; }
.dest-disclosure>summary::marker { content:""; }
.dest-disclosure>summary::-webkit-details-marker { display:none; }
.dest-disclosure>summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; border-radius:5px; }
.dest-disclosure-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; margin:0; color:var(--import-ink); font-size:13px; font-weight:700; line-height:1.5; }
.dest-disclosure-state { display:inline-flex; align-items:baseline; gap:5px; flex:none; border-radius:99px; padding:2px 9px; background:#e2ebe6; color:var(--import-ink); font:700 10.5px/1.5 ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; }
.dest-others { display:grid; gap:12px; margin:12px 0 0; padding:0 0 0 20px; }
.dest-other { color:var(--ink-muted); }
.dest-other-link { display:inline-flex; align-items:baseline; gap:7px; color:var(--import-ink); font-size:13.5px; font-weight:700; }
.dest-other-answers { margin:3px 0 0; max-width:76ch; font-size:12.5px; line-height:1.6; }
/* What the door will not tell you, dashed like every other bounded claim here. */
.dest-other-limit { margin:4px 0 0; max-width:76ch; border-left:2px dashed var(--state-warn-line); padding-left:9px; color:var(--state-warn-ink); font-size:12px; line-height:1.55; }
/* THE WORKSPACE RAIL. Quieter than both regions above it, and deliberately not
   drawn as a panel: no gradient, no accent rule down the side, the page's own
   soft neutral fill. It is wayfinding, and wayfinding that competes with the
   answer for attention is a fifth thing to read rather than a way around.

   Composed entirely from tokens this stylesheet already declares — the neutral
   #f7f6f1 the import panel's own sub-surfaces use, --panel-border, --import-ink,
   --import-accent, --ink-muted, --focus-ring — so it inherits every contrast
   decision already made on this surface and introduces no sixth hue. */
.workspace-nav { display:grid; gap:12px; margin:0 0 22px; border:1px solid var(--panel-border); border-radius:13px; padding:clamp(14px,2.2vw,19px); background:#f7f6f1; }
.workspace-nav-head { display:grid; gap:5px; }
/* Mono at the nav end of the type scale, which is the role this surface already
   gives mono: wordmark and navigation. It is a real h2 so the landmark has a
   visible accessible name, sized so it reads as a label rather than as a third
   question competing with the two above it. */
.workspace-nav-title { margin:0; color:var(--import-ink); font:700 12.5px/1.4 ui-monospace,monospace; letter-spacing:.07em; text-transform:uppercase; }
.workspace-nav-note { margin:0; max-width:76ch; color:var(--ink-muted); font-size:12.5px; line-height:1.6; }
.workspace-nav-note strong { color:var(--import-ink); }
/* Wrapping, at every width, with no track that can collapse. Four doors whose
   labels are two or three words each fit one line on a desktop and stack into
   two or three rows at 320px; nothing here is a fixed column, nothing is
   `nowrap`, and every label may break inside a word rather than push the page
   sideways. A rail a reader has to scroll horizontally to see is a rail that
   hides half the workspace on the device most likely to need it. */
.workspace-nav-list { display:flex; flex-wrap:wrap; gap:9px; margin:0; padding:0; list-style:none; }
/* THE FRONT DOOR (#1327). The region carried no rule of its own, so its finding,
   evidence, doors and working stacked flush as one block: one gap is the fix.
   Its rows take the panel ink because the muted ink is 4.48:1 on the page ground
   and 8.55:1 is AA with room; depth is carried by size and by the disclosure. A
   door's question is subordinate to its name, scoped to the outline doors — in
   the one filled recommendation that label is white on the accent. */
.finops-front-door { display:grid; justify-items:start; gap:14px; }
.finops-front-door dd { color:var(--import-ink); }
.workspace-dest .front-door-question { color:var(--ink-muted); font-weight:400; }
.workspace-nav-item { display:flex; min-width:0; }
.workspace-dest { display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; min-width:0; min-height:44px; border:1px solid var(--import-line); border-radius:9px; padding:10px 14px; background:#fff; color:var(--import-ink); font-size:13.5px; font-weight:700; line-height:1.4; text-decoration:none; overflow-wrap:anywhere; }
.workspace-dest:hover { border-color:var(--import-accent); }
.workspace-dest:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
/* THE CURRENT DESTINATION. Four channels beside the word "Current" and `aria-current`, none of them a hue
   alone: a thicker left rule, extra weight, and a line under the name. The weight
   stays 750 and the rule stays scoped to `.workspace-dest` — this is the door's
   own emphasis, not a restyle of every element drawing --import-accent. */
.workspace-dest[aria-current="true"] { border-color:var(--import-accent); border-left:5px solid var(--import-accent); padding-left:10px; background:var(--import-wash); font-weight:750; text-decoration:underline; text-underline-offset:3px; }
/* No `.workspace-dest-shape`: the four doors carry no glyph. See the rail's own
   note in finops-workspace-nav.js. This is the disclosure triangle beside the
   rail's one summary, which is an affordance and not a destination mark. */
.workspace-nav-detail-shape { flex:none; font-size:11px; font-weight:750; }
.workspace-dest-name { min-width:0; }
.workspace-dest-state { flex:none; border-radius:99px; padding:2px 8px; background:var(--import-accent); color:#fff; font:700 10px/1.5 ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; }
/* The recommendation, echoing the clause that ranked the door above. Outline
   rather than filled: it classifies the door, it is not a live state of it. */
.workspace-dest-recommended { flex:none; border:1px solid var(--import-accent); border-radius:99px; padding:2px 8px; color:var(--import-ink); font:700 10px/1.5 ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; }
/* No `.workspace-dest-kind`: the "Opens another page" chip went with the off-page
   door, now that act-and-verify is a destination on this page (#819). */
.workspace-nav-detail>summary { list-style:none; cursor:pointer; color:var(--import-ink); font-size:13px; font-weight:700; }
.workspace-nav-detail>summary::marker { content:""; }
.workspace-nav-detail>summary::-webkit-details-marker { display:none; }
.workspace-nav-detail>summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; border-radius:5px; }
.workspace-nav-detail-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; margin:0; color:var(--import-ink); font-size:13px; font-weight:700; line-height:1.5; }
.workspace-nav-detail-state { display:inline-flex; align-items:baseline; gap:5px; flex:none; border-radius:99px; padding:2px 9px; background:#e2ebe6; color:var(--import-ink); font:700 10.5px/1.5 ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; }
.workspace-nav-detail-state[data-disclosure="expanded"] { background:var(--import-accent); color:#fff; }
.workspace-nav-detail-list { display:grid; gap:11px; margin:12px 0 0; }
.workspace-nav-detail-list dt { color:var(--ink-muted); font:700 10px/1.5 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.workspace-nav-answers { margin:3px 0 0; max-width:80ch; color:#4c5650; font-size:12.5px; line-height:1.6; overflow-wrap:anywhere; }
/* What a door will not tell you, dashed like every other bounded claim here. */
.workspace-nav-limit { margin:4px 0 0; max-width:80ch; border-left:2px dashed var(--state-warn-line); padding-left:9px; color:var(--state-warn-ink); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
/* The region the rail sent the reader to, marked down its own side so the place
   they landed agrees with the door they pressed. Decoration only — the state
   itself is stated in words back in the rail. */
section[data-workspace-current="true"] { box-shadow:-6px 0 0 0 var(--import-wash); }
.dest-derivation { display:grid; gap:10px; margin:12px 0 0; }
.dest-derivation dt { color:var(--ink-muted); font:700 10px/1.5 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.dest-derivation dd { margin:3px 0 0; max-width:80ch; color:#4c5650; font-size:12.5px; line-height:1.6; overflow-wrap:anywhere; }
.finops-panel .section-heading>p:last-child { max-width:720px; margin:12px 0 0; color:var(--ink-muted); line-height:1.55; }
.finops-panel .list-heading { align-items:end; margin-bottom:16px; }
.finops-panel .list-heading .section-heading { margin-bottom:0; }
.finops-panel .filter { flex:0 0 auto; min-width:190px; }
.portfolio-intro { display:flex; align-items:end; justify-content:space-between; gap:28px; }
.portfolio-filters { display:flex; gap:12px; }
.portfolio-filters .filter { display:grid; gap:6px; }
.portfolio-filters label { color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; text-transform:uppercase; }
.portfolio-filters select { min-height:42px; border:1px solid #aaa79d; border-radius:8px; padding:8px 34px 8px 10px; background:#fff; color:#24241f; font:650 13px/1.3 inherit; }
.portfolio-filters select:focus-visible,.portfolio-details summary:focus-visible { outline:3px solid #2a78d6; outline-offset:3px; }
.portfolio-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:26px 0 10px; }
.portfolio-summary div { display:grid; gap:6px; border:1px solid #d8d6cf; border-radius:11px; padding:15px; background:#fff; }
.portfolio-summary div::before { content:""; width:30px; border-top:4px solid #54544e; }
.portfolio-summary [data-kind="completed"]::before { border-top-style:dashed; }
.portfolio-summary [data-kind="verified"]::before { border-top-style:double; border-top-width:6px; }
.portfolio-summary span { color:var(--ink-muted); font:700 9px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.portfolio-summary strong { font-size:25px; }
.portfolio-count { margin:0 0 12px; color:var(--ink-muted); font:650 11px/1.4 ui-monospace,monospace; }
.portfolio-list { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.portfolio-recommendation { border:2px solid #315f50; padding:20px; background:#f3f8f5; }
.portfolio-card { border:1px solid #d5d3cb; border-left:5px solid #565650; border-radius:12px; padding:18px; background:#fff; }
.portfolio-card[data-state="in_progress"] { border-left-style:dashed; }
.portfolio-card[data-state="completed"] { border-left-style:double; border-left-width:7px; }
.portfolio-card[data-state="verified"] { border-left:8px double #315f50; }
.portfolio-card-content { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr); gap:14px 24px; }
.portfolio-card-heading { display:grid; align-content:start; gap:5px; }
.portfolio-card-heading h3 { margin:0; font-size:18px; line-height:1.35; }
.portfolio-rank { margin:0; color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; text-transform:uppercase; }
.portfolio-state,.portfolio-confidence { border-radius:5px; padding:5px 8px; font:700 9px/1.3 ui-monospace,monospace; text-transform:uppercase; }
.portfolio-state { background:#eceae3; }
.portfolio-confidence { color:var(--ink-muted); background:#f4f3ef; }
.portfolio-money-block { display:grid; align-content:start; gap:7px; }
.portfolio-money { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin:0; border:1px solid #dedcd4; border-radius:8px; overflow:hidden; background:#dedcd4; }
.money-measure { display:grid; align-content:center; gap:6px; padding:12px; background:#faf9f5; }
.money-measure dt { color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.money-measure dd { margin:0; font-size:25px; font-weight:700; line-height:1.2; overflow-wrap:anywhere; }
/* An absent figure is set as words, never at the weight of a measured number. */
.money-measure[data-value="none"] dd { color:var(--ink-muted); font-size:14px; font-weight:650; }
.portfolio-period { margin:0; color:var(--ink-muted); font:600 11px/1.5 ui-monospace,monospace; }
.portfolio-status-line { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.portfolio-next { grid-column:1/-1; margin:0; border-radius:8px; padding:11px 13px; background:#f0f5f2; font-size:13px; line-height:1.5; }
/* Outcome states are told apart by the mark and the wording; colour only ever
   agrees with what the text already says. */
.portfolio-comparison { grid-column:1/-1; display:grid; grid-template-columns:22px auto 1fr; gap:7px; align-items:baseline; margin:0; border:1px solid #d8d6cf; border-radius:8px; padding:10px 12px; font-size:12px; line-height:1.5; }
.portfolio-comparison-mark { display:grid; place-items:center; width:18px; height:18px; border:1px solid currentColor; border-radius:50%; font:750 11px/1 ui-monospace,monospace; }
.portfolio-comparison[data-outcome="short"] { border-color:#e6c3c2; background:#fdf5f4; color:#7e302e; }
.portfolio-comparison[data-outcome="met"] { border-color:#b9cec4; background:#f0f5f2; color:#245643; }
.portfolio-comparison[data-outcome="not-usable"] { border-style:dashed; background:#fbf5e8; color:#6d5510; }
.portfolio-comparison[data-outcome="unavailable"] { color:var(--ink-muted); }
.portfolio-details { grid-column:1/-1; border-top:1px solid #e2e0d9; padding-top:12px; }
.portfolio-details summary { width:fit-content; cursor:pointer; font-size:12px; font-weight:750; }
.portfolio-details-body { margin-top:14px; }
.portfolio-facts { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0; }
.portfolio-facts dt { color:var(--ink-muted); font:700 9px/1.4 ui-monospace,monospace; text-transform:uppercase; }
.portfolio-facts dd { margin:5px 0 0; font-size:12px; line-height:1.45; }
.portfolio-details h4 { margin:18px 0 8px; font-size:12px; }
.portfolio-evidence { margin:0; padding-left:20px; font-size:12px; line-height:1.55; }
.portfolio-provenance { color:var(--ink-muted); font:600 10px/1.5 ui-monospace,monospace; }
.portfolio-message { border:1px dashed #aaa79d; border-radius:10px; padding:28px; color:var(--ink-muted); text-align:center; }
.portfolio-message[data-state="error"] { border-color:#d9aaa8; color:#7e302e; }
.portfolio-message[data-state="loading"] { background:linear-gradient(100deg,#f5f4ef 30%,#fff 50%,#f5f4ef 70%); background-size:200% 100%; animation:portfolio-loading 1.8s linear infinite; }
.portfolio-message h3,.portfolio-message p { margin:0; }
.portfolio-message p { margin-top:7px; font-size:13px; }
@keyframes portfolio-loading { to { background-position:-200% 0; } }
@media(prefers-reduced-motion:reduce) { .portfolio-message[data-state="loading"] { animation:none; } }
.decision-provenance,.method-note { color:var(--ink-muted); font:600 11px/1.55 ui-monospace,monospace; }
.decision-provenance { margin:0 0 22px; }
.decision-layout { display:grid; grid-template-columns:minmax(230px,.72fr) minmax(0,1.65fr); gap:24px; align-items:start; }
.department-priority,.evidence-list { margin:0; padding:0; list-style:none; }
.department-priority { display:grid; gap:8px; }
.department-choice { width:100%; display:grid; grid-template-columns:28px 1fr auto; gap:10px; align-items:center; border:1px solid #dbd9d1; border-radius:10px; padding:13px; background:#fff; color:#24241f; text-align:left; cursor:pointer; }
.department-choice:hover { border-color:#aaa79d; }
.department-choice[aria-pressed="true"] { border-color:#315f50; background:#f0f7f3; box-shadow:inset 3px 0 #315f50; }
.priority-rank { color:var(--ink-muted); font:700 10px/1 ui-monospace,monospace; }
.priority-name { font-size:13px; font-weight:700; }
.priority-score { color:var(--ink-muted); font:650 10px/1.3 ui-monospace,monospace; text-align:right; }
.department-detail { border:1px solid #d6d4cc; border-radius:14px; padding:24px; background:#fff; }
.detail-heading { display:flex; justify-content:space-between; align-items:start; gap:24px; padding-bottom:22px; }
.detail-heading h3 { margin:4px 0 8px; font-size:25px; }
.detail-heading p:not(.eyebrow):not(.detail-score) { max-width:660px; margin:0; color:var(--ink-muted); font-size:11px; line-height:1.55; }
.detail-score { margin:0; font-size:32px; font-weight:750; letter-spacing:-.04em; white-space:nowrap; }
.action-result { margin-bottom:22px; border:1px solid #b9cec4; border-radius:12px; padding:20px; background:#f3f8f5; }
.action-result[data-status="completed"] { border-color:#8bb49e; }
.action-result[data-status="unavailable"] { border-color:#d6d4cc; background:#f8f7f3; }
.action-lead { display:flex; justify-content:space-between; align-items:start; gap:18px; }
.action-lead h4 { margin:5px 0 0; font-size:21px; line-height:1.25; }
.action-status { flex:none; border-radius:99px; padding:6px 9px; background:#dceae3; color:#245643; font:750 10px/1.2 ui-monospace,monospace; text-transform:uppercase; }
.action-result[data-status="unavailable"] .action-status { background:#e8e6df; color:#62625c; }
.action-rationale,.diagnosis-link { font-size:13px; line-height:1.55; }
.action-rationale { margin:12px 0 18px; color:#454a46; }
.action-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 20px; margin:0; }
.action-facts div { min-width:0; }
.action-facts dt,.savings-inspection span { color:var(--ink-muted); font:700 9px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.action-facts dd { margin:4px 0 0; font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
.savings-inspection { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-top:18px; border:1px solid #d8e2dc; border-radius:9px; overflow:hidden; background:#d8e2dc; }
.savings-inspection div { display:grid; gap:5px; padding:12px; background:#fff; }
.savings-inspection strong { font-size:15px; line-height:1.25; }
.diagnosis-link { margin:16px 0 0; padding-top:14px; border-top:1px solid #d8e2dc; }
.evidence-disclosure { margin-top:20px; border-top:1px solid #e2e0d9; padding-top:14px; }
.evidence-disclosure summary { width:fit-content; cursor:pointer; font-size:12px; font-weight:750; }
.evidence-disclosure summary:focus-visible,.department-choice:focus-visible { outline:3px solid #7aa7d1; outline-offset:3px; }
.evidence-disclosure .evidence-list { margin-top:12px; }
.decision-question { padding:22px 0; border-top:1px solid #e2e0d9; }
.decision-question:last-child { padding-bottom:0; }
.decision-question h4 { margin:5px 0 8px; font-size:20px; }
.decision-answer { margin:0 0 15px; font-size:16px; font-weight:700; line-height:1.45; }
.comparison-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0; }
.comparison-grid div { display:contents; }
.comparison-grid dt { color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; text-transform:uppercase; }
.comparison-grid dd { grid-row:2; margin:0; font-size:12px; line-height:1.45; }
.decision-question h5 { margin:22px 0 10px; font-size:12px; }
.evidence-list { display:grid; gap:8px; }
.evidence-item,.evidence-empty { border:1px solid #e1dfd8; border-radius:9px; padding:13px; background:#faf9f5; }
.evidence-item p { margin:0; }
.evidence-label { font:700 10px/1.4 ui-monospace,monospace; text-transform:uppercase; }
.evidence-summary { margin-top:5px !important; font-size:12px; line-height:1.5; }
.evidence-meta { margin-top:7px !important; color:var(--ink-muted); font:600 10px/1.45 ui-monospace,monospace; }
.evidence-empty { color:var(--ink-muted); font-size:12px; line-height:1.5; }

/* Stacked spend bar: 2px surface gaps separate segments, and the outer data
   ends are rounded so the bar reads as one measured quantity. */
.mix-bar { display:flex; gap:2px; height:52px; margin:6px 0 22px; }
.mix-segment { min-width:3px; border-radius:2px; }
.mix-segment:first-child { border-radius:4px 2px 2px 4px; }
.mix-segment:last-child { border-radius:2px 4px 4px 2px; }
.mix-legend { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:16px; margin:0; padding:0; list-style:none; }
.mix-legend li { display:grid; gap:6px; padding-top:14px; border-top:2px solid currentColor; color:inherit; }
.mix-legend .legend-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.mix-legend .legend-label { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; }
.mix-legend .legend-swatch { width:9px; height:9px; flex:none; border-radius:2px; }
.mix-legend .legend-share { color:#3f3f3a; font:750 13px/1 ui-monospace,monospace; }
.mix-legend .legend-spend { color:#3f3f3a; font:650 12px/1.4 ui-monospace,monospace; }
.mix-legend .legend-copy { margin:0; color:var(--ink-muted); font-size:12px; line-height:1.5; }
.mix-legend .legend-action { margin:0; color:#41586d; font-size:12px; line-height:1.5; }

.table-wrap { overflow-x:auto; }
.finops-table { width:100%; min-width:760px; border-collapse:collapse; }
.finops-table caption { text-align:left; }
.finops-table th,.finops-table td { padding:13px 14px; border-bottom:1px solid #e5e3dc; text-align:right; vertical-align:middle; white-space:nowrap; }
.finops-table th:first-child,.finops-table td:first-child { text-align:left; white-space:normal; }
.finops-table thead th { border-bottom:1px solid #cfcdc5; color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.finops-table tbody tr:last-child td { border-bottom:0; }
.finops-table tbody tr:hover { background:#faf9f5; }
.dept-name { display:grid; gap:3px; }
.dept-name strong { font-size:15px; font-weight:700; letter-spacing:-.01em; }
.dept-name span { color:var(--ink-muted); font:600 11px/1.4 ui-monospace,monospace; }
.numeric { font:650 13px/1.4 ui-monospace,monospace; }
.recoverable { color:#a5322f; font-weight:750; }
/* Literacy grade chip: letter + number together, so the grade is never a color alone. */
.grade-chip { display:inline-flex; align-items:baseline; gap:7px; border-radius:99px; padding:5px 10px; font:750 12px/1 ui-monospace,monospace; }
.grade-chip[data-band="good"] { background:#dcefdc; color:#17603a; }
.grade-chip[data-band="watch"] { background:#fff0c7; color:#72520a; }
.grade-chip[data-band="poor"] { background:#f6dede; color:#8a2b2b; }
.grade-chip span { font-weight:650; opacity:.85; }
.trend { display:block; margin-top:4px; font:650 10px/1.4 ui-monospace,monospace; }
.trend-up { color:#17845c; }
.trend-down { color:#a5322f; }
.trend-flat { color:var(--ink-muted); }
.table-empty { padding:48px 12px; color:var(--ink-muted); text-align:center; }

.action-list { display:grid; gap:14px; margin:0; padding:0; list-style:none; overflow-wrap:anywhere; }
.action-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 24px; align-items:start; padding:20px; border:1px solid #d9d7d0; border-radius:13px; background:#fff; }
.action-copy { display:grid; gap:7px; min-width:0; }
.action-team { color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.action-headline { margin:0; font-size:17px; font-weight:700; letter-spacing:-.015em; }
.action-step { margin:0; color:#4c4c47; font-size:14px; line-height:1.55; }
.action-amount { display:grid; gap:3px; text-align:right; }
.action-amount strong { color:#a5322f; font-size:21px; font-weight:750; letter-spacing:-.02em; }
.action-amount span { color:var(--ink-muted); font:650 10px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }

.redaction-list { display:grid; gap:14px; margin:0 0 22px; padding:0; list-style:none; }
.redaction-item { border:1px solid #d9d7d0; border-radius:13px; padding:18px; background:#fff; }
.redaction-label { margin:0 0 12px; color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.redaction-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.redaction-side { display:grid; gap:7px; min-width:0; }
.redaction-side h3 { margin:0; font-size:12px; font-weight:750; letter-spacing:.02em; }
.redaction-text { margin:0; padding:13px; border-radius:9px; color:#3d3d38; font:500 11px/1.6 ui-monospace,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.redaction-raw { background:#fbf1f1; border:1px solid #efd9d9; }
.redaction-clean { background:#eef6f2; border:1px solid #cfe4da; }
.privacy-note { margin:0; border-radius:10px; padding:14px; background:#e9f1f8; color:#55616b; font-size:12px; line-height:1.55; }
.privacy-note strong { display:block; margin-bottom:3px; color:#283b4a; }
.native-provider-compatibility { margin:16px 0; border:1px solid #d5d8d2; border-radius:10px; padding:12px 14px; background:#fbfcfa; }
.native-provider-compatibility>summary { display:flex; justify-content:space-between; gap:16px; cursor:pointer; font-weight:700; }
.native-provider-count,.native-provider-version,.native-provider-provenance { color:var(--ink-muted); font:600 12px/1.5 ui-monospace,monospace; }
.native-provider-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:14px; }
.native-provider-card { border:1px solid #e0e2dd; border-radius:8px; padding:12px; background:#fff; }
.native-provider-card h4,.native-provider-card p { margin:0 0 8px; }
.native-provider-card dl { display:grid; grid-template-columns:auto minmax(0,1fr); gap:5px 10px; margin:0 0 8px; font-size:12px; }
.native-provider-card dt { font-weight:700; }
.native-provider-card dd { margin:0; overflow-wrap:anywhere; }
.native-provider-failure,.native-provider-boundary,.native-provider-contract-link { font-size:12px; line-height:1.5; }
.native-provider-boundary { margin:14px 0 8px; }
/* Hyperscaler export eligibility (#927). The verdict carries a word for every
   state, never colour alone, so data-status is a hook rather than the message. */
.browser-compat { margin:16px 0; border:1px solid #d5d8d2; border-radius:10px; padding:14px; background:#fbfcfa; }
.browser-compat>h3,.browser-compat>p { margin:0 0 8px; }
.browser-compat-disclosure { margin:12px 0; border:1px solid #e0e2dd; border-radius:8px; padding:10px 12px; background:#fff; }
.browser-compat-disclosure>summary { display:flex; justify-content:space-between; gap:16px; cursor:pointer; font-weight:700; }
.browser-compat-count,.browser-compat-version { color:var(--ink-muted); font:600 12px/1.5 ui-monospace,monospace; }
#browser-compat-contracts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px; }
.browser-compat-card { border:1px solid #e0e2dd; border-radius:8px; padding:12px; font-size:12px; }
.browser-compat-card h4,.browser-compat-card h5,.browser-compat-card p { margin:0 0 6px; }
.browser-compat-card ul,.browser-compat-privacy { margin:0 0 8px; padding-left:18px; }
.browser-compat-card li,.browser-compat-privacy li { overflow-wrap:anywhere; }
.browser-compat-rejections { margin:0 0 8px; }
.browser-compat-rejections dt { font-weight:700; }
.browser-compat-rejections dd { margin:0 0 6px; }
.browser-compat-privacy { font-size:12px; line-height:1.5; margin-top:10px; }
.browser-compat-check { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin:12px 0; }
.browser-compat-field { display:grid; gap:4px; margin:0; font-size:12px; font-weight:700; }
.browser-compat-verdict { border:1px solid #d5d8d2; border-left-width:5px; border-radius:8px; padding:12px; background:#fff; }
.browser-compat-verdict p { margin:0 0 6px; }
.browser-compat-verdict p:last-child { margin-bottom:0; }
.browser-compat-verdict-line { font-weight:700; }
.browser-compat-verdict[data-state="empty"] { border-left-color:#b9bdb4; }
.browser-compat-verdict[data-status="supported"] { border-left-color:#2f7d4f; }
.browser-compat-verdict[data-status="degraded"] { border-left-color:#a8710f; }
.browser-compat-verdict[data-status="rejected"],.browser-compat-verdict[data-status="no-match"] { border-left-color:#a4322b; }
@media (max-width:640px) { #browser-compat-contracts { grid-template-columns:minmax(0,1fr); } }
/* Export recognition (#928). The band sentence carries the state in words, so
   the band colour is a second cue and never the message itself. */
.export-recognition { margin:16px 0; border:1px solid #d5d8d2; border-radius:10px; padding:14px; background:#fbfcfa; }
.export-recognition>h3,.export-recognition>p { margin:0 0 8px; }
.export-recognition-field { display:grid; gap:4px; margin:12px 0; font-size:12px; font-weight:700; max-width:520px; }
.export-recognition-result { border:1px solid #d5d8d2; border-left-width:5px; border-radius:8px; padding:12px; background:#fff; }
.export-recognition-result p { margin:0 0 6px; }
.export-recognition-result p:last-child { margin-bottom:0; }
.export-recognition-band { font-weight:700; }
.export-recognition-confidence { font:600 13px/1.5 ui-monospace,monospace; }
.export-recognition-evidence { margin:0 0 8px; padding-left:20px; font-size:12px; line-height:1.6; }
.export-recognition-evidence li { overflow-wrap:anywhere; }
.export-recognition-scope { font-size:12px; color:var(--ink-muted); }
.export-recognition-result[data-band="none"] { border-left-color:#b9bdb4; }
.export-recognition-result[data-band="accepted"] { border-left-color:#2f7d4f; }
.export-recognition-result[data-band="needs-attention"] { border-left-color:#a8710f; }
.export-recognition-result[data-band="rejected"] { border-left-color:#a4322b; }
.intake-confidence { margin:16px 0; border:1px solid #d5d8d2; border-radius:10px; padding:14px; background:#fbfcfa; }
.intake-confidence h3,.intake-confidence p { margin:0 0 8px; }
.intake-confidence dl { display:grid; gap:6px; margin:10px 0; }
.intake-confidence dl div { display:grid; grid-template-columns:110px 1fr; gap:10px; }
.intake-confidence dt { font-weight:700; }
.intake-confidence dd { margin:0; }
.gateway-refresh { margin-top:12px; border:1px solid #b8c8d5; border-radius:8px; padding:9px 12px; background:#fff; color:#283b4a; font:700 12px/1.4 ui-monospace,monospace; cursor:pointer; }
.gateway-refresh:hover { border-color:#55758d; background:#f5f8fa; }
.gateway-refresh:disabled { cursor:wait; opacity:.65; }
.evaluation-panel { display:grid; gap:18px; }
.evaluation-unavailable { margin:18px 0 0; border:1px solid #b4453a; border-left-width:5px; border-radius:9px; padding:14px 16px; background:#fdf4f3; color:#5d1f18; line-height:1.55; }
.evaluation-result { margin-top:18px; border:1px solid #d5d3cb; border-radius:12px; padding:18px; background:#fff; }
.evaluation-result h3 { margin:0; }
.evaluation-summary { margin:8px 0; font:750 15px/1.4 ui-monospace,monospace; text-transform:capitalize; }
.evaluation-recommendation,.evaluation-department { margin:8px 0; line-height:1.55; }
.evaluation-details { margin-top:16px; border-top:1px solid #e2e0d9; padding-top:14px; }
.evaluation-details summary { width:fit-content; cursor:pointer; font-weight:750; }
.evaluation-details summary:focus-visible { outline:3px solid #2a78d6; outline-offset:3px; }
.evaluation-breakdown { display:grid; gap:10px; margin:16px 0; padding-left:24px; }
.evaluation-criterion { border:1px solid #e1dfd8; border-radius:9px; padding:13px; background:#faf9f5; }
.evaluation-criterion h4,.evaluation-criterion p { margin:0; }
.evaluation-criterion p { margin-top:6px; color:var(--ink-muted); font-size:12px; line-height:1.5; }
.evaluation-arithmetic,.evaluation-gate { font:650 11px/1.6 ui-monospace,monospace; }

@media(max-width:900px) {
  .finops-hero { gap:32px; }
  .score-card { width:min(100%,320px); }
  .proof-point { grid-template-columns:1fr; }
  .proof-point-link { grid-column:1; }
  .decision-layout { grid-template-columns:1fr; }
  .redaction-pair { grid-template-columns:1fr; }
  .portfolio-intro { align-items:stretch; flex-direction:column; }
  .portfolio-card-content { grid-template-columns:1fr; }
  .portfolio-facts { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:640px) {
  .native-provider-list { grid-template-columns:1fr; }
  .finops-load-state { align-items:stretch; flex-direction:column; }
  /* One column on a phone, and the buttons go full width: the two choices stay
     equally reachable rather than one of them becoming a thumb-sized target. */
  /* One column at 390px, and the same order it had at 1440: the narrow layout
     collapses the grids rather than reordering them, so answer → benchmark →
     action → provenance survives the reflow. */
  .first-run-slots,.first-run-actions,.first-run-support { grid-template-columns:1fr; }
  .first-run-method-heading { align-items:flex-start; flex-direction:column; }
  .first-run-choice button { width:100%; }
  .first-run-handoff-action { justify-self:stretch; justify-content:center; text-align:center; }
  .proof-point-facts { grid-template-columns:1fr; }
  .local-import-heading,.local-import-controls,.local-result-heading { align-items:stretch; flex-direction:column; }
  .import-stage { flex:1 1 100%; }
  .local-import-progress { align-items:stretch; flex-direction:column; }
  .local-import-progress progress { width:100%; }
  /* No horizontal scroll on a phone: each column becomes its own card, with the
     four fixed labels drawn from data-label so the row stays readable. */
  .import-mapping-table,.import-mapping-table tbody,.import-mapping-table tr,.import-mapping-table td,.import-mapping-table th { display:block; }
  .import-mapping-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .import-mapping-row { margin-bottom:14px; border:1px solid var(--import-line); border-radius:10px; padding:12px; }
  .import-mapping-table th,.import-mapping-table td { border-bottom:0; padding:6px 0; }
  .import-mapping-table td[data-label]::before { display:block; color:var(--ink-muted); content:attr(data-label); font:700 10px/1.6 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
  .import-mapping-sample { max-width:none; }
  .import-mapping-actions button { width:100%; }
  .mapping-requirement .requirement-status { margin-left:auto; }
  .field-recovery { display:grid; }
  .sample-badge { width:fit-content; }
  .local-disclosures,.local-state-grid,.local-finding-facts { grid-template-columns:1fr; }
  .local-finding-lead { display:grid; }
  .local-finding-status { width:fit-content; }
  .local-import .local-department-choice { grid-template-columns:auto minmax(0,1fr) auto; }
  .local-department-amount { grid-column:2; }
  .local-department-chevron { grid-column:3; grid-row:1/3; }
  .local-department-detail dl { grid-template-columns:1fr; }
  .local-export-actions { display:grid; grid-template-columns:1fr 1fr; }
  .finops-panel { padding:21px; }
  .comparison-grid { grid-template-columns:1fr; }
  .comparison-grid dd { grid-row:auto; margin-bottom:8px; }
  .detail-heading { display:grid; }
  .action-lead { display:grid; }
  .action-status { width:fit-content; }
  .action-facts { grid-template-columns:1fr; }
  .savings-inspection { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .finops-panel .list-heading { align-items:stretch; flex-direction:column; gap:14px; }
  .finops-panel .filter { width:100%; }
  .action-card { grid-template-columns:1fr; }
  .action-amount { text-align:left; }
  .mix-bar { height:44px; }
  .portfolio-filters { display:grid; }
  .portfolio-summary { grid-template-columns:1fr; }
  .portfolio-money,.portfolio-facts { grid-template-columns:1fr; }
  .portfolio-comparison { grid-template-columns:22px 1fr; }
  .portfolio-comparison>span:last-child { grid-column:2; }
}

/* --- per-model overspend finding ---------------------------------------- */
/* The headline half of the panel is plain flow text; the evidence table only
   exists once a reader opens the disclosure. Numbers are tabular so a column of
   money lines up digit for digit, and every state that carries meaning carries a
   shape and a word as well as a tint. */
.model-overspend { display:grid; gap:14px; margin-top:18px; border:1px solid var(--panel-border); border-radius:16px; padding:22px; background:rgba(255,255,255,.72); }
.model-overspend>h4 { margin:0; font-size:19px; line-height:1.35; }
.model-overspend #model-overspend-body { display:grid; gap:14px; }
.model-overspend-state { display:flex; align-items:baseline; gap:8px; margin:0; font:700 11px/1.5 ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-muted); }
.model-overspend-state[data-status="ok"] { color:var(--import-accent); }
.model-overspend-state[data-status="unavailable"] { color:var(--state-error-ink); }
.model-overspend-headline { margin:0; font-size:15px; line-height:1.6; }
.model-overspend-metric { display:grid; gap:4px; border-left:5px solid var(--import-accent); padding:10px 0 10px 14px; }
.model-overspend-metric[data-available="false"] { border-left-color:var(--state-warn-line); }
.model-overspend-metric p { margin:0; }
.model-overspend-metric-label { color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.09em; text-transform:uppercase; }
.model-overspend-metric-value { font:700 28px/1.2 ui-monospace,monospace; font-variant-numeric:tabular-nums; }
.model-overspend-metric-withheld { font:700 18px/1.3 ui-monospace,monospace; color:var(--state-warn-ink); }
.model-overspend-metric-reason,.model-overspend-metric-where { font-size:12px; line-height:1.55; color:var(--ink-muted); }
.model-overspend-metric-where { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.model-overspend-action { display:grid; gap:4px; margin:0; }
.model-overspend-action-label { color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.09em; text-transform:uppercase; }
.model-overspend-action-text { font-size:14px; line-height:1.6; }
.model-overspend-confidence { display:grid; gap:6px; border:1px solid var(--panel-border); border-radius:11px; padding:11px 13px; background:rgba(255,255,255,.6); }
.model-overspend-confidence-line { display:flex; align-items:baseline; gap:8px; margin:0; font:700 12px/1.4 ui-monospace,monospace; }
.model-overspend-confidence[data-level="medium"] { border-color:var(--state-warn-line); background:var(--state-warn-wash); color:var(--state-warn-ink); }
.model-overspend-confidence[data-level="low"] { border-color:var(--state-error-line); background:var(--state-error-wash); color:var(--state-error-ink); }
.model-overspend-confidence-reasons { display:grid; gap:6px; margin:0; padding-left:18px; }
.model-overspend-confidence-reason { font-size:12px; line-height:1.55; }
.model-overspend-confidence-effect { display:block; color:var(--ink-muted); font:600 11px/1.5 ui-monospace,monospace; }
.model-overspend-benchmark,.model-overspend-provenance { display:grid; gap:4px; margin:0; font-size:12px; line-height:1.55; color:var(--ink-muted); }
.model-overspend-import-source { display:grid; gap:3px; margin:0; border:1px solid var(--import-line); border-left:5px solid var(--import-accent); border-radius:9px; padding:10px 13px; background:var(--import-wash); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.model-overspend-import-source p { margin:0; }
.model-overspend-import-source-label { color:var(--import-ink); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.09em; text-transform:uppercase; }
.model-overspend-import-source-boundary { color:var(--ink-muted); }
.model-overspend-benchmark-label,.model-overspend-provenance-label { margin:0; font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.09em; text-transform:uppercase; }
.model-overspend-provenance-list { display:grid; gap:4px; margin:0; padding-left:18px; }
.model-overspend-proration-months { margin:4px 0 0; padding-left:18px; }
.model-overspend-evidence { display:grid; gap:12px; }
.model-overspend-evidence-toggle { justify-self:start; border:1px solid var(--import-line); border-radius:9px; padding:9px 14px; background:var(--import-wash); color:var(--import-ink); font:700 12px/1.2 ui-monospace,monospace; cursor:pointer; }
.model-overspend-evidence-toggle:focus-visible { outline:3px solid var(--import-accent); outline-offset:2px; }
.model-overspend-evidence-toggle[aria-expanded="true"] { background:#fff; }
.model-overspend-evidence-note { margin:0; font-size:12px; line-height:1.55; color:var(--ink-muted); }
.model-overspend-scroll { overflow-x:auto; border:1px solid var(--panel-border); border-radius:11px; }
.model-overspend-scroll:focus-visible { outline:3px solid var(--import-accent); outline-offset:2px; }
.model-overspend-table { width:100%; border-collapse:collapse; font-size:13px; }
.model-overspend-table th,.model-overspend-table td { border-bottom:1px solid var(--panel-border); padding:9px 12px; text-align:left; vertical-align:top; }
.model-overspend-table thead th { color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; }
.model-overspend-table .numeric { text-align:right; font-variant-numeric:tabular-nums; }
.model-overspend-row[data-headline="true"] { background:var(--import-wash); }
.model-overspend-cell-note { display:block; margin-top:3px; color:var(--ink-muted); font-size:11px; line-height:1.45; text-align:left; }
.model-overspend-withheld { color:var(--ink-muted); }
.model-overspend-total th,.model-overspend-total td { border-top:2px solid var(--import-accent); border-bottom:0; font-weight:700; }
.model-overspend-total-reason { display:block; margin-top:3px; font-weight:400; color:var(--ink-muted); font-size:12px; line-height:1.5; }
.model-overspend-total-mismatch td { color:var(--state-error-ink); font-size:12px; }
.model-overspend-unattributed-list { display:grid; gap:4px; margin:0; padding-left:18px; font-size:12px; line-height:1.55; }
.org-unit { display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:5px; }
.org-unit-name { font-weight:600; }
.org-unit-id { color:var(--ink-muted); font:600 10px/1.4 ui-monospace,monospace; }
.model-overspend-rename { border:1px solid var(--import-line); border-radius:7px; padding:2px 7px; background:#fff; color:var(--import-ink); font:600 10px/1.5 ui-monospace,monospace; cursor:pointer; }
.model-overspend-rename:focus-visible,.model-overspend-rename-save:focus-visible,.model-overspend-rename-cancel:focus-visible,.model-overspend-rename-input:focus-visible { outline:3px solid var(--import-accent); outline-offset:2px; }
.model-overspend-rename-editor { display:inline-flex; align-items:center; flex-wrap:wrap; gap:6px; }
.model-overspend-rename-input { min-width:9rem; border:1px solid var(--import-line); border-radius:7px; padding:4px 7px; font:inherit; }
.model-overspend-rename-save,.model-overspend-rename-cancel { border:1px solid var(--import-line); border-radius:7px; padding:3px 9px; background:#fff; font:600 11px/1.4 ui-monospace,monospace; cursor:pointer; }
.model-overspend-rename-help { flex-basis:100%; color:var(--ink-muted); font-size:11px; line-height:1.45; }
.model-overspend-live { margin:0; font-size:12px; line-height:1.5; color:var(--import-ink); }

/* --- the reader's own graded sample ---------------------------------------
   A provisional grade is told five ways and only one of them is colour: the
   word "Provisional grade" beside the letter, the same word again in a chip
   inside the grade block, a shape before both, a dashed border on the block and
   the figure, and a diagonal hatch across the figure. Print the page in
   greyscale and four of the five survive. Opacity is deliberately not one of
   them: a faded grade reads as de-emphasised, not as uncertain, and it costs
   contrast the figure cannot spare.

   Grade, coverage and confidence share one bordered block so a skimmer cannot
   lift the letter out of its qualifier — the qualifier is inside the frame, not
   a stat floating beside it.

   The two chips are filled washes rather than outlines because both report a
   live signal about the sample just imported, which is the "filled wash =
   dynamic signal, outline = static classification" rule from the Claude Design
   Foundations card; "unmeasured" is set in the lowercase-mono status voice the
   same card asks the product to keep. */
.graded-sample { display:grid; gap:14px; border:1px solid var(--import-line); border-radius:14px; padding:22px; background:#fff; }
.graded-sample #graded-sample-body { display:grid; gap:14px; }
.graded-headline { display:grid; gap:4px; border:1px solid var(--import-accent); border-left-width:5px; border-radius:12px; padding:14px 16px; background:var(--import-wash); }
.graded-headline[data-grade-status="provisional"] { border:2px dashed var(--state-warn-line); border-left-width:5px; border-left-style:solid; background:var(--state-warn-wash); }
.graded-figure { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.graded-letter { margin:0; font-size:62px; line-height:.9; letter-spacing:-.05em; font-weight:750; color:var(--import-ink); }
.graded-letter[data-grade-status="provisional"] { color:var(--state-warn-ink); outline:3px dashed currentColor; outline-offset:4px; width:max-content; padding:2px 10px; background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(0,0,0,.14) 5px 10px); }
.graded-status-chip { display:inline-flex; align-items:baseline; gap:7px; margin:0; border:1px solid var(--import-accent); border-radius:99px; padding:5px 11px; background:#fff; color:var(--import-ink); font:700 12px/1.4 ui-monospace,monospace; overflow-wrap:anywhere; }
.graded-status-chip[data-grade-status="provisional"] { border:2px dashed var(--state-warn-line); color:var(--state-warn-ink); }
.graded-grade-line { display:flex; align-items:baseline; gap:8px; margin:8px 0 0; font-size:15px; font-weight:700; overflow-wrap:anywhere; }
.graded-shape { flex:none; font-weight:750; }
.graded-coverage { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin:0; }
.graded-coverage-value { font:750 14px/1.4 ui-monospace,monospace; overflow-wrap:anywhere; }
.graded-coverage-label { color:var(--ink-muted); font-size:13px; }
.graded-coverage-rule,.graded-not-gradeable-rule,.graded-not-gradeable-unscored { margin:0; color:var(--ink-muted); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.graded-not-gradeable-label { margin:0; font-size:16px; font-weight:750; overflow-wrap:anywhere; }
.graded-action { border-left:5px solid var(--import-accent); padding:2px 0 2px 12px; }
.graded-action[data-available="false"] { border-left-style:dashed; border-left-color:var(--state-warn-line); }
.graded-action-text { display:flex; gap:8px; margin:0; font-size:14px; line-height:1.55; font-weight:650; overflow-wrap:anywhere; }
.graded-cohort { border-left:5px solid var(--import-accent); padding:2px 0 2px 12px; }
.graded-cohort[data-available="false"] { border-left-style:dashed; border-left-color:var(--state-warn-line); }
.graded-cohort-answer { display:flex; gap:8px; margin:0; font-size:14px; font-weight:650; overflow-wrap:anywhere; }
.graded-cohort-reason { margin:0; color:var(--ink-muted); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.graded-disclosure { display:grid; gap:10px; }
/* The toggle's own edge is the only thing that says "control", so it is drawn
   in the accent (6.5:1 on the panel) rather than --import-line, which is 2.1:1
   against white and misses the 3:1 non-text floor. */
.graded-disclosure-toggle { justify-self:start; border:1px solid var(--import-accent); border-radius:9px; padding:7px 13px; background:#fff; color:var(--import-ink); font:650 12px/1.4 ui-monospace,monospace; text-align:left; cursor:pointer; }
.graded-disclosure-toggle:focus-visible { outline:3px solid var(--import-accent); outline-offset:2px; }
.graded-disclosure-panel { display:grid; gap:12px; border:1px solid var(--import-line); border-radius:11px; padding:14px; }
.graded-axes { display:grid; grid-template-columns:minmax(0,auto) auto; gap:4px 14px; margin:0; justify-content:start; font-size:13px; }
.graded-axes dt { color:var(--ink-muted); overflow-wrap:anywhere; }
.graded-axes dd { margin:0; font:700 13px/1.5 ui-monospace,monospace; }
.graded-categories { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.graded-category { display:flex; flex-wrap:wrap; gap:4px 12px; border-top:1px solid var(--import-line); padding-top:6px; font-size:12px; }
.graded-category-label { font-weight:700; overflow-wrap:anywhere; }
.graded-category-share,.graded-category-score,.graded-category-records { font:650 12px/1.5 ui-monospace,monospace; color:var(--ink-muted); }
.graded-unclassified { margin:0; font-size:12px; line-height:1.55; }
.graded-sample-live { margin:0; font-size:12px; color:var(--ink-muted); }
.graded-provenance { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; grid-column:1/-1; margin:0 0 4px; border:1px solid var(--import-line); border-left:5px solid var(--import-accent); border-radius:9px; padding:10px 13px; color:var(--import-ink); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.mix-basis { margin:0 0 10px; color:var(--ink-muted); font-size:12px; line-height:1.55; }

/* The headline surface and its two comparison cards.
   Whose data a panel is showing is carried by the badge's own words and by the
   border treatment (dashed for the sample, solid for the reader's), so the
   distinction survives a monochrome screenshot and a reader who never sees the
   tint. The status line reserves its row whether or not it has a sentence in
   it, so a file being read — or one that failed — moves nothing below it. */
.finops-headline { display:grid; gap:10px; justify-items:start; border:1px solid var(--import-line); border-radius:14px; padding:20px 22px; background:#fff; }
.finops-headline[data-source="sample"] { border-style:dashed; }
.finops-headline-question { max-width:720px; margin:0; font-size:27px; line-height:1.2; letter-spacing:-.03em; }
.finops-headline-question:focus-visible { outline:3px solid var(--focus-ring); outline-offset:4px; }
.finops-headline-metric { display:grid; gap:3px; margin:0; }
.finops-metric-label { color:var(--ink-muted); font:700 11px/1.4 ui-monospace,monospace; letter-spacing:.09em; text-transform:uppercase; }
.finops-metric-value { font:700 21px/1.35 ui-monospace,monospace; overflow-wrap:anywhere; }
.finops-headline-action { display:flex; gap:8px; max-width:720px; margin:0; font-size:14px; line-height:1.55; font-weight:650; overflow-wrap:anywhere; }
.finops-action-shape { flex:none; }
.finops-headline-status { min-height:18px; margin:0; color:var(--ink-muted); font-size:12px; line-height:1.5; }
.finops-headline-status[data-status="failed"] { color:var(--state-warn-ink); font-weight:650; }
.finops-headline-live { margin:0; font-size:12px; color:var(--ink-muted); }
.finops-comparison { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
.finops-comparison-card { display:grid; gap:9px; align-content:start; border:1px solid var(--import-line); border-radius:14px; padding:17px 19px; background:#fff; }
.finops-comparison-card[data-source="sample"] { border-style:dashed; }
.finops-comparison-card h3 { margin:0; font-size:15px; letter-spacing:-.01em; }
.finops-comparison-answer { margin:0; font-size:13px; line-height:1.55; }
@media(max-width:700px) { .finops-headline { padding:16px 15px; } .finops-headline-question { font-size:22px; } }

/* Contact affordance beside the result.
   It reuses the panel card and the import panel's ink so it reads as part of
   this tab rather than a marketing insert, and it is laid out as a column: the
   disclosed form grows downward and never overlays the decision brief above. */
.finops-contact { display:grid; gap:18px; justify-items:start; }
.finops-contact-copy h2 { margin:7px 0 0; font-size:26px; letter-spacing:-.03em; }
.finops-contact-copy>p:last-child { max-width:640px; margin:12px 0 0; color:var(--ink-muted); line-height:1.55; }
.finops-contact-trigger { border:1px solid var(--import-accent); border-radius:10px; padding:11px 17px; background:var(--import-accent); color:#fff; font:650 14px/1.4 inherit; cursor:pointer; }
.finops-contact-trigger:hover { background:var(--import-ink); }
.finops-contact-panel { display:grid; gap:14px; width:100%; max-width:640px; border:1px solid var(--import-line); border-radius:13px; padding:18px; background:var(--import-wash); }
.finops-contact-panel[hidden] { display:none; }
.finops-contact-form { display:grid; gap:12px; }
.finops-contact-field { display:grid; gap:7px; }
.finops-contact-field label { font-size:14px; font-weight:700; color:var(--import-ink); }
.finops-contact-field input { min-height:46px; border:1px solid var(--import-line); border-radius:9px; padding:0 12px; background:#fff; font:inherit; }
.finops-contact .field-error { margin:0; border:1px solid var(--state-error-line); border-left:5px solid var(--state-error-line); border-radius:9px; padding:11px 13px; background:var(--state-error-wash); color:var(--state-error-ink); font-size:12px; line-height:1.5; font-weight:700; }
.finops-contact .field-error[hidden] { display:none; }
.finops-contact-note { margin:0; color:var(--import-ink); font-size:12px; line-height:1.55; }
.finops-contact-actions { display:flex; flex-wrap:wrap; gap:10px; }
.finops-contact-actions button { min-height:44px; border:1px solid var(--import-accent); border-radius:9px; padding:0 16px; background:var(--import-accent); color:#fff; font:650 13px/1.4 inherit; cursor:pointer; }
.finops-contact-actions button[type="button"] { background:#fff; color:var(--import-ink); }
.finops-contact-actions button[aria-disabled="true"] { background:#777771; border-color:#777771; cursor:wait; }
/* Outcome and recovery are text, never a tint: the state word carries the
   meaning and the color only reinforces it. */
.finops-contact-status { margin:0; min-height:1.5em; color:var(--import-ink); font-size:13px; font-weight:700; line-height:1.5; }
.finops-contact-form[data-state="error"]+.finops-contact-status { color:var(--state-error-ink); }
.finops-contact-recovery { margin:0; border-left:2px solid var(--state-error-line); padding-left:11px; color:var(--import-ink); font-size:12px; line-height:1.5; }
.finops-contact-recovery[hidden] { display:none; }
/* The next action. Quiet by design — it is somewhere to go while the reply is
   written, not a second ask competing with the confirmation above it. */
.finops-contact-next { margin:0; border-left:2px solid var(--import-accent); padding-left:11px; color:var(--import-ink); font-size:13px; line-height:1.55; }
.finops-contact-next[hidden] { display:none; }
/* The receipt that stands where the form was once a request lands. It is the
   panel's own green — no new hue — as a filled card with a check in front of the
   address; the rejected-input box beside it is the red family with a heavy left
   rule and no glyph, so the two are told apart without reading either. The
   address is a visitor's string, so it wraps anywhere rather than widening the
   card past the panel on a phone. */
.finops-contact-confirmation { display:grid; justify-items:start; gap:10px; width:100%; border:1px solid var(--import-line); border-radius:12px; padding:15px 16px; background:var(--import-wash); }
.finops-contact-confirmation:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.finops-contact-confirmation-lead { margin:0; color:var(--import-ink); font-size:15px; font-weight:700; line-height:1.55; }
.finops-contact-confirmation-mark { margin-right:8px; font-size:16px; }
.finops-contact-confirmation-address { overflow-wrap:anywhere; }
.finops-contact-confirmation-detail { margin:0; color:var(--import-ink); font-size:12px; line-height:1.55; }
.finops-contact-confirmation-again { min-height:44px; border:1px solid var(--import-accent); border-radius:9px; padding:0 16px; background:#fff; color:var(--import-ink); font:650 13px/1.4 inherit; cursor:pointer; }
.finops-contact-confirmation-again:hover { background:var(--import-accent); color:#fff; }
.finops-contact button:focus-visible,.finops-contact input:focus-visible,.finops-contact a:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }

/* The contextual invitation, beside the brief rather than at the foot of the
   page. It is a rule and a button, not a card: a second panel here would read as
   another result and compete with the one above it. */
.finops-followup-cta { display:grid; gap:10px; justify-items:start; margin:22px 0 0; border-top:1px solid var(--import-line); padding:18px 0 0; }
.finops-followup-cta-lead { margin:0; max-width:640px; color:var(--import-ink); font-size:15px; font-weight:700; line-height:1.5; }
.finops-followup-cta-button { min-height:44px; border:1px solid var(--import-accent); border-radius:10px; padding:0 17px; background:var(--import-accent); color:#fff; font:650 14px/1.4 inherit; cursor:pointer; }
.finops-followup-cta-button:hover { background:var(--import-ink); }
.finops-followup-cta-button:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.finops-followup-cta-note { margin:0; max-width:640px; color:var(--ink-muted); font-size:12px; line-height:1.55; }

@media(max-width:640px) {
  .finops-contact { padding:18px; }
  .finops-contact-trigger { width:100%; }
  .finops-contact-actions button { flex:1 1 auto; }
  .finops-contact-confirmation { padding:13px 14px; }
  .finops-contact-confirmation-again { width:100%; }
  .finops-followup-cta-button { width:100%; }

  /* The table keeps its shape and scrolls inside its own labelled, focusable
     box rather than pushing the page sideways. */
  .model-overspend { padding:18px; }
  /* 320px: the coverage figure and the prioritized next action are the payload
     and neither may be cut, so everything decorative gives way first — the
     letter shrinks, the axis list stacks instead of holding two auto columns
     wide enough to push the page sideways, and every long word breaks rather
     than overflowing. Nothing here truncates; there is no ellipsis on this
     surface by design. */
  .graded-sample { padding:18px; }
  .graded-headline { padding:12px 13px; }
  .graded-letter { font-size:46px; }
  .graded-disclosure-toggle { width:100%; }
  .graded-axes { grid-template-columns:minmax(0,1fr); gap:2px; }
  .graded-axes dd { margin-bottom:6px; }
  .model-overspend-metric-value { font-size:23px; }
  .model-overspend-table { min-width:34rem; }
  .model-overspend-evidence-toggle { width:100%; }
}

/* --- Evidence behind one department's grade -------------------------------
   Every colour, border, radius and type role below is already in this file: the
   panel frame is `.finops-panel`'s, the muted metadata voice is `--ink-muted` in
   mono, the warn and error roles are the import flow's, and the four category
   hues are the validated set declared at the top. No new hue, no new type size.

   Chip silhouette follows design-system/claude-design/review-08-foundations:
   an outline is a static classification (length band, intent class, model tier,
   signal name — all properties of a prompt already read), and a filled wash is a
   dynamic signal (the panel's own state). Redaction is neutral, never the error
   palette: withholding prompt text is a decision this product made, not a fault
   it is reporting. */
.department-evidence { margin-top:24px; border:1px solid var(--panel-border); border-radius:18px; padding:clamp(20px,3vw,28px); background:rgba(255,255,255,.68); box-shadow:0 14px 40px rgba(38,38,31,.04); }
.department-evidence[hidden] { display:none; }
.department-evidence-live { margin:14px 0 0; color:var(--ink-muted); font:600 11px/1.5 ui-monospace,monospace; }
.department-evidence-live:empty { display:none; }
.monthly-department-decision { display:grid; gap:18px; }
.monthly-department-decision[aria-busy="true"] { border-style:dashed; }
.monthly-decision-answer { border-top:1px solid var(--panel-border); padding-top:16px; }
.monthly-decision-answer:first-child { border-top:0; padding-top:0; }
.monthly-decision-question { margin:4px 0 10px; font-size:clamp(18px,2vw,23px); }
.monthly-decision-action,.monthly-decision-refusal,.monthly-decision-confidence,.monthly-decision-next { margin:0; }
.monthly-decision-refusal { font-weight:700; }
.monthly-decision-tracking { display:block; margin-top:6px; }
.monthly-decision-measurement { display:grid; gap:12px; }
.monthly-decision-figure { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:0; }
.monthly-decision-figure-label { flex-basis:100%; color:var(--ink-muted); font:700 11px/1.5 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.monthly-decision-figure-value { font:750 clamp(28px,5vw,42px)/1.1 system-ui,sans-serif; letter-spacing:-.035em; overflow-wrap:anywhere; }
.monthly-decision-figure-unit { color:var(--ink-muted); font:650 11px/1.5 ui-monospace,monospace; }
.monthly-decision-metric { display:grid; gap:8px; margin:0; }
.monthly-decision-metric div { display:grid; grid-template-columns:minmax(110px,.35fr) 1fr; gap:12px; }
.monthly-decision-metric dt { font-weight:700; }
.monthly-decision-metric dd { margin:0; color:var(--ink-muted); }
.monthly-decision-status { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 7px; margin:0; border-left:4px solid var(--panel-border); padding:8px 11px; background:rgba(255,255,255,.7); line-height:1.55; }
.monthly-decision-status strong { font:750 11px/1.5 ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; }
.monthly-decision-status[data-state="saved"],.monthly-decision-status[data-state="comparable"] { border-left-color:var(--import-accent); background:var(--import-wash); }
.monthly-decision-status[data-state="awaiting"],.monthly-decision-status[data-state="non-comparable"] { border-left-color:var(--state-warn-line); background:var(--state-warn-wash); }
.monthly-decision-status[data-state="error"] { border-left-color:var(--state-error-line); background:var(--state-error-wash); color:var(--state-error-ink); }
.monthly-decision-status-shape { flex:none; font-weight:750; }
.monthly-decision-provenance,.monthly-decision-boundary { margin:10px 0 0; color:var(--ink-muted); font:600 11px/1.55 ui-monospace,monospace; }
.monthly-decision-evidence { margin-top:12px; border-top:1px solid var(--panel-border); padding-top:10px; }
.monthly-decision-evidence>summary { cursor:pointer; font:700 11px/1.5 ui-monospace,monospace; }
.monthly-decision-evidence>summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; border-radius:4px; }
.monthly-decision-controls { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:16px; }
.monthly-decision-controls button,.monthly-decision-workspace,.monthly-decision-source { min-height:44px; }
.monthly-decision-decline { background:transparent; color:var(--ink); border:1px solid var(--panel-border); }
.monthly-decision-workspace,.monthly-decision-source { display:inline-flex; align-items:center; color:var(--ink-muted); font-weight:700; }
.monthly-decision-outcome { margin:12px 0 0; }
.monthly-decision-outcome:empty { display:none; }
.monthly-decision-review { margin-top:18px; padding:18px; border:1px solid var(--panel-border); border-radius:12px; }
.monthly-decision-review h4 { margin:4px 0 8px; font-size:18px; }
.monthly-decision-review>p:not(.monthly-decision-status) { margin:8px 0 0; }
.monthly-decision-comparison { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:14px 0 0; }
.monthly-decision-comparison div { border-top:1px solid var(--panel-border); padding-top:8px; }
.monthly-decision-comparison dt { color:var(--ink-muted); font:700 10px/1.5 ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; }
.monthly-decision-comparison dd { margin:3px 0 0; font-weight:700; overflow-wrap:anywhere; }
.monthly-decision-review-boundary { margin-top:10px!important; color:var(--ink-muted); font:600 11px/1.5 ui-monospace,monospace; }
@media (max-width:620px) {
  .monthly-decision-metric div { grid-template-columns:1fr; gap:2px; }
  .monthly-decision-comparison { grid-template-columns:1fr; }
  .monthly-decision-controls { align-items:stretch; }
  .monthly-decision-controls button,.monthly-decision-workspace,.monthly-decision-source { width:100%; justify-content:center; }
}
/* Provenance hierarchy, in scale and rhythm rather than hue: the reader's own
   finding gets the page's stat-numeral role and a full block of air; the bundled
   sample sits a step down at the card-title role, indented behind a rule. Both
   still carry the provenance label as text, so the ranking is never inferred. */
.evidence-head { display:grid; gap:6px; }
.evidence-head[data-rank="secondary"] { margin-left:14px; border-left:3px solid #d8d6cf; padding-left:15px; }
.evidence-grade { margin:0; font-size:56px; font-weight:750; line-height:.92; letter-spacing:-.05em; }
.evidence-head[data-rank="secondary"] .evidence-grade { font-size:32px; letter-spacing:-.035em; }
.evidence-grade[data-state="graded"] { color:#17845c; }
.evidence-grade[data-state="partial"] { color:#8a6d0a; }
.evidence-grade[data-state="withheld"] { color:var(--state-warn-ink); font-size:32px; }
.evidence-grade-line { margin:4px 0 0; font-size:20px; font-weight:650; line-height:1.3; letter-spacing:-.02em; overflow-wrap:anywhere; }
.evidence-head[data-rank="secondary"] .evidence-grade-line { font-size:16px; }
.evidence-shape { flex:none; margin-right:7px; font-weight:750; }
.evidence-impact { margin:2px 0 0; max-width:70ch; font-size:14px; line-height:1.55; overflow-wrap:anywhere; }
/* Reuses .confidence-chip's silhouette; only the tone tints differ, and the
   state word inside the chip is what actually carries the meaning. */
.evidence-confidence { justify-self:start; margin:10px 0 0; }
.evidence-confidence[data-tone="ready"] { border-color:var(--import-accent); color:var(--import-ink); }
.evidence-confidence[data-tone="warn"] { border-style:dashed; border-color:var(--state-warn-line); color:var(--state-warn-ink); }
.evidence-confidence[data-tone="error"] { border-style:dotted; border-color:var(--state-error-line); color:var(--state-error-ink); }
.evidence-confidence-detail,.evidence-coverage-rule { margin:6px 0 0; color:var(--ink-muted); font:600 11px/1.5 ui-monospace,monospace; overflow-wrap:anywhere; }
.evidence-coverage { margin:8px 0 0; font-size:13px; font-weight:700; line-height:1.45; }
.evidence-provenance { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin:12px 0 0; }
.evidence-provenance-label { flex:none; border:1px solid #789284; border-radius:99px; padding:3px 9px; color:#315f50; font:750 10px/1.3 ui-monospace,monospace; text-transform:uppercase; }
.evidence-provenance[data-rank="secondary"] .evidence-provenance-label { border-color:var(--state-warn-line); color:var(--state-warn-ink); }
.evidence-provenance-detail { color:var(--ink-muted); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.evidence-why { margin:10px 0 0; max-width:70ch; color:#4c5650; font-size:13px; line-height:1.55; }
.evidence-action { margin-top:16px; padding-top:14px; border-top:1px solid #e2e0d9; }
.evidence-action-text { display:flex; align-items:baseline; margin:5px 0 0; font-size:14px; font-weight:700; line-height:1.5; }
.evidence-action[data-available="false"] .evidence-action-text { color:var(--ink-muted); font-weight:400; }
/* The promise, persistent in every state and never behind the disclosure. A
   neutral surface with its own shape and label: a reader must not be able to
   mistake it for the error state two panels up. */
.evidence-privacy { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; margin:18px 0 0; border:1px solid #d1cfc7; border-left:5px solid #6f6f69; border-radius:10px; padding:12px 14px; background:#faf9f5; font-size:12px; line-height:1.55; }
.evidence-privacy-label { flex:none; font:750 10px/1.4 ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; }
.evidence-privacy-copy { max-width:70ch; color:var(--ink-muted); }
.evidence-shell { display:grid; gap:6px; }
.evidence-shell-status { display:flex; align-items:baseline; margin:0; color:var(--ink-muted); font:750 10px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.evidence-shell[data-state="error"] .evidence-shell-status { color:var(--state-error-ink); }
.evidence-shell[data-state="withheld"] .evidence-shell-status { color:var(--state-warn-ink); }
.evidence-shell-title { margin:4px 0 0; font-size:20px; font-weight:650; line-height:1.3; }
.evidence-shell-impact { margin:2px 0 0; font-size:14px; line-height:1.55; }
.evidence-shell-why { margin:6px 0 0; color:var(--ink-muted); font-size:12px; line-height:1.55; }
.evidence-disclosure-block { margin-top:18px; border-top:1px solid #e2e0d9; padding-top:14px; }
.evidence-disclosure-toggle { min-height:44px; border:1px solid #6b5c3e; border-radius:8px; padding:9px 13px; background:#fff; color:#24241f; font:750 12px/1.4 inherit; text-align:left; cursor:pointer; transition:background .15s ease; }
.evidence-disclosure-toggle:hover { background:#f7f6f1; }
.evidence-disclosure-toggle:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.evidence-disclosure-toggle[aria-expanded="true"] { background:#f4f1e9; box-shadow:inset 4px 0 #6b5c3e; }
.evidence-disclosure-panel { display:grid; gap:18px; margin-top:14px; }
.evidence-disclosure-panel[hidden] { display:none; }
.evidence-disclosure-panel .eyebrow { margin:0 0 8px; }
.evidence-count-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:12px; margin:0; }
.evidence-count-list dt { color:var(--ink-muted); font:700 9px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.evidence-count-list dd { margin:4px 0 0; font-size:20px; font-weight:750; letter-spacing:-.02em; overflow-wrap:anywhere; }
.evidence-signal-list,.evidence-distribution-list,.evidence-sketch-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.evidence-signal { display:grid; grid-template-columns:minmax(0,1.1fr) auto auto; gap:4px 12px; border:1px solid #e1dfd8; border-radius:9px; padding:11px 13px; background:#faf9f5; }
.evidence-signal[data-fired="false"] { border-style:dashed; color:var(--ink-muted); }
.evidence-signal-label { min-width:0; font-size:13px; font-weight:700; overflow-wrap:anywhere; }
.evidence-signal-count,.evidence-signal-impact { color:var(--ink-muted); font:600 11px/1.5 ui-monospace,monospace; white-space:nowrap; }
.evidence-signal-evidence { grid-column:1/-1; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
/* The bar is drawn from the same share the row prints as text; it is aria-hidden
   and carries no value of its own, so a 0% row still reads as a labelled row. */
.evidence-distribution-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:4px 12px; align-items:baseline; border-bottom:1px solid #e2e0d9; padding-bottom:8px; }
.evidence-distribution-label { min-width:0; font-size:13px; font-weight:700; overflow-wrap:anywhere; }
.evidence-distribution-count,.evidence-distribution-score { color:var(--ink-muted); font:600 11px/1.5 ui-monospace,monospace; white-space:nowrap; }
.evidence-bar { grid-column:1/-1; height:6px; border-radius:3px; background:#e2e0d9; }
.evidence-bar::before { content:""; display:block; width:var(--evidence-bar-share,0%); height:100%; border-radius:3px; background:var(--ink-muted); }
.evidence-distribution-row[data-category="highValue"] .evidence-bar::before { background:var(--cat-high-value); }
.evidence-distribution-row[data-category="overProvisioned"] .evidence-bar::before { background:var(--cat-over-provisioned); }
.evidence-distribution-row[data-category="inefficient"] .evidence-bar::before { background:var(--cat-inefficient); }
.evidence-distribution-row[data-category="outOfScope"] .evidence-bar::before { background:var(--cat-out-of-scope); }
/* A sketch row: a count, the withheld marker, and four outline classification
   chips. Wraps rather than truncates — an unusually long class label makes the
   row taller, never unreadable. */
.evidence-sketch { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px 9px; border:1px solid #e1dfd8; border-radius:9px; padding:11px 13px; background:#faf9f5; }
.evidence-sketch-count { flex:none; font:750 12px/1.5 ui-monospace,monospace; }
.evidence-sketch-redaction { display:inline-flex; align-items:baseline; flex:none; border-radius:5px; padding:2px 8px; background:color-mix(in srgb,var(--ink-muted) 14%,transparent); color:#4a4a45; font:700 10px/1.5 ui-monospace,monospace; }
.evidence-chip { min-width:0; border:1px solid #aaa79d; border-radius:5px; padding:2px 8px; color:#4a4a45; font:600 11px/1.5 ui-monospace,monospace; overflow-wrap:anywhere; }
.evidence-note { margin:10px 0 0; color:var(--ink-muted); font-size:12px; line-height:1.5; }
@media (max-width:640px) {
  .evidence-signal,.evidence-distribution-row { grid-template-columns:minmax(0,1fr); }
  .evidence-signal-count,.evidence-signal-impact,.evidence-distribution-count,.evidence-distribution-score { white-space:normal; }
  .evidence-head[data-rank="secondary"] { margin-left:0; }
}
/* Matches how the rest of the site handles motion: the only animated property
   here is the toggle's own background, and reduced motion removes it. */
@media (prefers-reduced-motion:reduce) { .evidence-disclosure-toggle { transition:none; } }

/* ---------------------------------------------------------------------------
   The department lead's fix pack: one question, one figure, one action.

   Hierarchy is scale, weight, rhythm and border — never tint alone. The one
   action a lead should take carries the heaviest edge on the page below the
   grade, every other intervention sits behind a control, and each state
   ("no figure", "insufficient evidence", "nothing applies") carries its own
   word and its own shape beside whatever the panel is tinted.
   --------------------------------------------------------------------------- */
.department-fix-pack { margin-top:24px; border:1px solid var(--panel-border); border-radius:18px; padding:clamp(20px,3vw,28px); background:rgba(255,255,255,.68); box-shadow:0 14px 40px rgba(38,38,31,.04); }
.department-fix-pack[hidden] { display:none; }
.fix-pack-question { margin:6px 0 0; font-size:clamp(19px,2.4vw,24px); line-height:1.25; letter-spacing:-.015em; }

.fix-pack-shell { display:grid; gap:6px; }
.fix-pack-shell-status { display:flex; align-items:baseline; gap:8px; margin:0; font:750 11px/1.4 ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-muted); }
.fix-pack-shell-title { margin:4px 0 0; font-size:15px; font-weight:700; line-height:1.45; }
.fix-pack-shell-body,.fix-pack-reason { margin:4px 0 0; max-width:70ch; color:var(--ink-muted); font-size:13px; line-height:1.55; }
.fix-pack-reason { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; }

/* The one action carries the page's heaviest edge below the grade, and it reads
   first: what to do, what it is worth a month, how sure the model is, and which
   versions said so. The department roll-up under it is context for that
   decision, so it is a step down in scale rather than the thing competing for
   the eye. */
.fix-pack-action { margin-top:16px; border:1px solid #6b5c3e; border-top-width:4px; border-radius:12px; padding:14px 16px; background:#fffdf7; }
.fix-pack-action[data-priced="false"] { border-color:#8a877e; background:#faf9f5; }
.fix-pack-action .eyebrow { margin:0; }
.fix-pack-action-name { display:flex; align-items:baseline; gap:8px; margin:6px 0 8px; font-size:clamp(17px,2vw,20px); line-height:1.3; }
.fix-pack-action-summary { margin:8px 0 0; max-width:70ch; font-size:13px; line-height:1.6; color:var(--ink-muted); }

/* The figure the lead carries out of the room. The numeral is decoration over
   the sentence beneath it — that sentence is what a screen reader, a monochrome
   print and a reader who refuses numerals all get. */
.fix-pack-action-value { margin:12px 0 0; }
.fix-pack-action-figure { margin:0; font-size:clamp(28px,4.4vw,38px); font-weight:760; line-height:1.05; letter-spacing:-.035em; }
.fix-pack-action-value[data-priced="false"] .fix-pack-action-figure { font-size:clamp(17px,2vw,20px); letter-spacing:-.015em; color:var(--ink-muted); }
.fix-pack-action-value-label { margin:2px 0 0; font-size:14px; font-weight:650; line-height:1.5; }

/* One line, not a row of flex items: the separator between the level and the
   count is a character in the text, so the line has to wrap like a sentence. */
.fix-pack-confidence { margin:12px 0 0; font-size:13px; line-height:1.55; }
.fix-pack-confidence-text { font-weight:650; }
.fix-pack-action-provenance { margin:8px 0 0; max-width:74ch; color:var(--ink-muted); font:400 11px/1.65 ui-monospace,monospace; }

.fix-pack-metric { margin-top:16px; border-left:5px solid #6b5c3e; padding:4px 0 4px 15px; }
.fix-pack-metric[data-available="false"] { border-left-color:#a5a29a; }
.fix-pack-metric .eyebrow { margin:0 0 2px; }
.fix-pack-metric-figure { margin:0; font-size:clamp(21px,2.6vw,26px); font-weight:740; line-height:1.15; letter-spacing:-.025em; }
.fix-pack-metric-label { margin:2px 0 0; font-size:13px; font-weight:650; line-height:1.5; }
.fix-pack-metric-caveat { margin:6px 0 0; max-width:70ch; color:var(--ink-muted); font-size:12px; line-height:1.55; }

.fix-pack-disclosure { margin-top:18px; }
.fix-pack-note { margin-top:18px; }
.fix-pack-detail-list { display:grid; grid-template-columns:minmax(0,15em) minmax(0,1fr); gap:4px 16px; margin:0; font-size:13px; }
.fix-pack-detail-list dt { color:var(--ink-muted); font-weight:650; }
.fix-pack-detail-list dd { margin:0; }
.fix-pack-rationale { margin:12px 0 0; max-width:74ch; font-size:13px; line-height:1.6; }
.fix-pack-model-list,.fix-pack-confidence-list,.fix-pack-other-list,.fix-pack-excluded-list { display:grid; gap:8px; margin:12px 0 0; padding:0; list-style:none; }
.fix-pack-model,.fix-pack-confidence-reason,.fix-pack-excluded-row { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; font-size:12px; line-height:1.5; }
.fix-pack-confidence-reason[data-inherited="true"] { border-left:3px solid #d8d6cf; padding-left:10px; }
.fix-pack-confidence-reason-effect,.fix-pack-model-move { color:var(--ink-muted); font:600 11px/1.5 ui-monospace,monospace; }
.fix-pack-other { display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 10px; border-top:1px solid #e2e0d9; padding-top:8px; font-size:13px; }
.fix-pack-other-rank { grid-row:1/span 2; align-self:start; color:var(--ink-muted); font:750 11px/1.6 ui-monospace,monospace; }
.fix-pack-other-name { font-weight:700; }
.fix-pack-other-value,.fix-pack-other-confidence,.fix-pack-other-pattern { grid-column:2; color:var(--ink-muted); font-size:12px; line-height:1.5; }
.fix-pack-other[data-priced="false"] .fix-pack-other-value { font-style:italic; }
.fix-pack-excluded-name { font-weight:700; }
.fix-pack-evidence-keys { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; }

.fix-pack-print-control { margin-top:18px; border-top:1px solid #e2e0d9; padding-top:14px; }
.fix-pack-print-button { min-height:44px; border:1px solid #24241f; border-radius:8px; padding:9px 15px; background:#24241f; color:#fdfcf8; font:750 12px/1.4 inherit; cursor:pointer; }
.fix-pack-print-button:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.fix-pack-print-note { margin:8px 0 0; max-width:70ch; color:var(--ink-muted); font-size:12px; line-height:1.55; }
.fix-pack-print-status { margin:6px 0 0; color:#7a3d1d; font-size:12px; line-height:1.55; }
.fix-pack-print-status:empty { display:none; }
@media (max-width:640px) {
  .fix-pack-detail-list { grid-template-columns:minmax(0,1fr); }
  .fix-pack-detail-list dd { margin:0 0 6px; }
  .fix-pack-other { grid-template-columns:minmax(0,1fr); }
  .fix-pack-other-rank { grid-row:auto; }
  .fix-pack-other-value,.fix-pack-other-confidence,.fix-pack-other-pattern { grid-column:auto; }
  .fix-pack-print-button { width:100%; }
}

/* The handout's own print rules live at the foot of this sheet, after the two
   `@media print` blocks that were already here — they are the last word on
   paper, and a reader looking for "what prints" finds all three together. */

/* ---------------------------------------------------------------------------
   The board-ready page.

   Scoped to the briefing surface and the sheet it sits on — this is not a
   global print concern, and nothing outside the FinOps decision brief is
   restyled here. The printed artifact is the *complete* briefing: every
   disclosure is open, the answer block is unsplittable, and the two lines that
   say what graded it and where it ran are on the paper.

   Type comes from the same scale the screen uses. The clamp() steps resolve
   against a print viewport rather than a browser window, so the two places
   below that pin a value pin it to a step the scale already ships (the 30px
   panel-head step for the question, the 22px lower bound of the metric's own
   clamp) instead of inventing a print-only size.
   --------------------------------------------------------------------------- */

/* --- check the math -------------------------------------------------------
   The verdict first, the steps as a numbered list, and the outcome of each step
   carried by its own words. `data-status` drives a leading glyph and a rule
   colour; neither is ever the only channel, because the step's last sentence
   already says whether it matched. */
.briefing-derivation { margin-top:12px; display:grid; gap:10px; }
.derivation-intro,.derivation-versions { color:#3f3f3a; font:400 12px/1.6 ui-monospace,monospace; }
.derivation-verdict {
  margin:0; padding:8px 10px; border-left:4px solid #767670; background:#f4f4f0;
  font:600 13px/1.55 inherit;
}
.derivation-verdict[data-verdict="reproduced"] { border-left-color:#2f6b3f; }
.derivation-verdict[data-verdict="arithmetic_mismatch"] { border-left-color:#8a2f22; }
.derivation-verdict[data-verdict="rubric_superseded"],
.derivation-verdict[data-verdict="rubric_unknown"],
.derivation-verdict[data-verdict="contract_mismatch"] { border-left-color:#8a6a1f; }
.derivation-inputs,.derivation-weight-list { margin:0; display:grid; grid-template-columns:auto 1fr; gap:2px 12px; }
.derivation-inputs dt,.derivation-weight-list dt { font:600 12px/1.6 ui-monospace,monospace; }
.derivation-inputs dd,.derivation-weight-list dd { margin:0; font-size:13px; }
.derivation-steps { margin:0; padding-left:20px; display:grid; gap:10px; }
.derivation-step { break-inside:avoid; }
.derivation-step-label { margin:0; font-weight:600; }
.derivation-step-label::before { content:"? "; font-family:ui-monospace,monospace; }
.derivation-step[data-status="reproduced"] .derivation-step-label::before { content:"= "; color:#2f6b3f; }
.derivation-step[data-status="mismatch"] .derivation-step-label::before { content:"\2260 "; color:#8a2f22; }
.derivation-step-expression { margin:2px 0; color:#3f3f3a; font:400 12px/1.6 ui-monospace,monospace; }
.derivation-step-result { margin:0; font-size:13px; }

/* --- Coach one prompt -----------------------------------------------------
   No new hue, no new type size, no new radius. The panel frame is
   `.finops-panel`'s, the answer/benchmark block reuses the import-flow accent
   the graded sample already uses for "this is yours", the refusal reuses the
   warn role every recoverable import error is drawn in, and the disclosure
   toggle is the graded sample's control, restyled by nothing.

   Three states are distinguished without relying on tint: the result block
   carries a shape glyph and a word beside every signal, the refusal swaps a
   solid left edge for a dashed one, and the field itself is marked invalid. */
.prompt-coaching { display:grid; gap:16px; }
.prompt-coaching-form { display:grid; gap:14px; max-width:70ch; }
.prompt-coaching-field { display:grid; gap:6px; }
.prompt-coaching-field label { font:700 13px/1.4 inherit; }
.prompt-coaching-field textarea {
  width:100%; box-sizing:border-box; min-height:11rem; resize:vertical;
  border:1px solid var(--import-line); border-radius:10px; padding:11px 12px;
  background:#fff; color:inherit; font:400 14px/1.6 ui-monospace,monospace;
}
.prompt-coaching-field textarea[aria-invalid="true"] { border:2px solid var(--state-warn-line); background:var(--state-warn-wash); }
.prompt-coaching-field select {
  justify-self:start; min-height:44px; max-width:100%;
  border:1px solid var(--import-line); border-radius:9px; padding:9px 11px;
  background:#fff; color:inherit; font:600 13px/1.4 inherit;
}
.prompt-coaching-field textarea:focus-visible,.prompt-coaching-field select:focus-visible,
.prompt-coaching-actions button:focus-visible,.prompt-coaching-disclosure-toggle:focus-visible {
  outline:3px solid var(--import-accent); outline-offset:2px;
}
.prompt-coaching-hint { margin:0; color:var(--ink-muted); font-size:12px; line-height:1.55; }
.prompt-coaching-actions { display:flex; flex-wrap:wrap; gap:10px; }
.prompt-coaching-actions button {
  min-height:44px; border-radius:9px; padding:10px 16px;
  font:700 13px/1.4 inherit; cursor:pointer;
}
#prompt-coaching-grade { border:1px solid var(--import-accent); background:var(--import-accent); color:#fff; }
#prompt-coaching-clear { border:1px solid var(--import-line); background:#fff; color:var(--import-ink); }
.prompt-coaching-live { margin:0; color:var(--ink-muted); font-size:12px; }
.prompt-coaching-result { display:grid; gap:14px; }
.prompt-coaching-answer { display:flex; gap:8px; margin:0; font-size:17px; font-weight:750; line-height:1.45; overflow-wrap:anywhere; }
.prompt-coaching-shape { flex:none; font-weight:750; }
.prompt-coaching-benchmark {
  display:grid; gap:8px; border:1px solid var(--import-accent); border-left-width:5px;
  border-radius:12px; padding:14px 16px; background:var(--import-wash);
}
.prompt-coaching-figure { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; }
.prompt-coaching-letter { margin:0; font-size:52px; line-height:.9; letter-spacing:-.05em; font-weight:750; color:var(--import-ink); }
.prompt-coaching-benchmark-text { margin:0; font:750 14px/1.5 ui-monospace,monospace; overflow-wrap:anywhere; }
.prompt-coaching-basis { display:grid; gap:3px; margin:0; color:var(--ink-muted); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.prompt-coaching-basis-label { color:var(--import-ink); font:700 12px/1.5 ui-monospace,monospace; }
.prompt-coaching-score-explanation,.coaching-result-score-explanation { margin:0; max-width:70ch; color:var(--ink-muted); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.prompt-coaching-improvement { border-left:5px solid var(--import-accent); padding:2px 0 2px 12px; }
.prompt-coaching-improvement[data-available="false"] { border-left-style:dashed; border-left-color:var(--state-warn-line); }
.prompt-coaching-improvement-title { display:flex; gap:8px; margin:0; font-size:15px; font-weight:700; line-height:1.5; overflow-wrap:anywhere; }
.prompt-coaching-improvement-guidance { margin:6px 0 0; max-width:70ch; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.prompt-coaching-rewrite { display:grid; gap:5px; margin-top:10px; max-width:70ch; }
.prompt-coaching-rewrite-label { margin:0; color:var(--import-ink); font:700 12px/1.5 ui-monospace,monospace; }
.prompt-coaching-rewrite-text {
  margin:0; border:1px solid var(--import-line); border-radius:9px; padding:10px 12px;
  background:#fff; white-space:pre-wrap; overflow-wrap:anywhere; font:400 13px/1.6 ui-monospace,monospace;
}
.prompt-coaching-improvement-worth { margin:6px 0 0; color:var(--ink-muted); font:650 12px/1.5 ui-monospace,monospace; }
.prompt-coaching-recommendation { border-left:5px solid var(--import-line); padding:2px 0 2px 12px; }
.prompt-coaching-recommendation[data-evidenced="false"] { border-left-style:dotted; }
.prompt-coaching-recommendation-title { display:flex; gap:8px; margin:0; font-size:15px; font-weight:700; line-height:1.5; overflow-wrap:anywhere; }
.prompt-coaching-recommendation-text { margin:6px 0 0; max-width:70ch; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.prompt-coaching-recommendation-basis { margin:6px 0 0; color:var(--ink-muted); font:650 12px/1.5 ui-monospace,monospace; overflow-wrap:anywhere; }
.prompt-coaching-recovery { border-left:5px dashed var(--state-warn-line); padding:2px 0 2px 12px; color:var(--state-warn-ink); }
.prompt-coaching-recovery-title { display:flex; gap:8px; margin:0; font-size:15px; font-weight:750; line-height:1.5; overflow-wrap:anywhere; }
.prompt-coaching-recovery-guidance { margin:6px 0 0; max-width:70ch; color:inherit; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.prompt-coaching-recovery-observed { margin:6px 0 0; font:650 12px/1.5 ui-monospace,monospace; }
.prompt-coaching-disclosure { display:grid; gap:10px; }
.prompt-coaching-disclosure-toggle {
  justify-self:start; border:1px solid var(--import-accent); border-radius:9px; padding:7px 13px;
  background:#fff; color:var(--import-ink); font:650 12px/1.4 ui-monospace,monospace;
  text-align:left; cursor:pointer;
}
.prompt-coaching-disclosure-panel { display:grid; gap:10px; border:1px solid var(--import-line); border-radius:11px; padding:14px; }
.prompt-coaching-axes { display:grid; grid-template-columns:minmax(0,auto) auto; gap:4px 14px; margin:0; justify-content:start; font-size:13px; }
.prompt-coaching-axes dt { color:var(--ink-muted); overflow-wrap:anywhere; }
.prompt-coaching-axes dd { margin:0; font:700 13px/1.5 ui-monospace,monospace; }
.prompt-coaching-turns,.prompt-coaching-runners-up { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.prompt-coaching-turn,.prompt-coaching-runners-up li { display:flex; flex-wrap:wrap; gap:4px 12px; border-top:1px solid var(--import-line); padding-top:6px; font-size:12px; }
.prompt-coaching-turn-index,.prompt-coaching-runner-title { font-weight:700; overflow-wrap:anywhere; }
.prompt-coaching-turn-role,.prompt-coaching-turn-prose,.prompt-coaching-turn-scored,
.prompt-coaching-turn-codes,.prompt-coaching-runner-points {
  font:650 12px/1.5 ui-monospace,monospace; color:var(--ink-muted); overflow-wrap:anywhere;
}
.prompt-coaching-turn[data-scored="false"] { border-top-style:dashed; }
.prompt-coaching-rubric-version { margin:0; color:var(--ink-muted); font:400 11px/1.6 ui-monospace,monospace; overflow-wrap:anywhere; }

/* Revise and re-grade: the cue before, the change after.
   No new token, no new hue. The delta follows the chip rule the design mirror
   states — filled wash for a dynamic signal, neutral outline for a static
   classification — so the movement between two grades is a filled chip and the
   rubric versions under it stay unfilled monospace. Every variant below pairs
   its tint with a word (the materiality label and the direction word inside the
   chip) and a silhouette, so the tint is the third cue and never the first.
   The one motion this block can cause is the scroll when focus lands on the
   region after a re-grade; `html { scroll-behavior:smooth }` in styles.css is
   already reverted under prefers-reduced-motion, so that scroll is instant for
   a reader who asked for less motion. */
/* The front door. Ordinary flow, one column, no card inside a card: it is the
   first thing read on the panel and nothing in it competes with the field. The
   attribution of the last grade is the only tinted line, because "this is our
   example, not your text" is the one sentence a reader must not skim past. */
.prompt-coaching-entry { display:grid; gap:10px; max-width:70ch; }
.prompt-coaching-entry-static { margin:0; color:var(--ink-muted); font-size:13px; line-height:1.6; }
.prompt-coaching-entry-body { display:grid; gap:14px; }
.prompt-coaching-entry-block { display:grid; gap:6px; }
.prompt-coaching-entry-headline { margin:0; font-weight:650; }
.prompt-coaching-entry-block dl { display:grid; grid-template-columns:minmax(9rem,auto) 1fr; gap:4px 12px; margin:0; font-size:13px; line-height:1.6; }
.prompt-coaching-entry-block dt { color:var(--ink-muted); }
.prompt-coaching-entry-block dd { margin:0; }
.prompt-coaching-entry-exclusions { display:grid; gap:8px; margin:0; padding:0; list-style:none; font-size:13px; line-height:1.6; }
.prompt-coaching-entry-exclusions li { border-left:3px solid var(--import-line); padding-left:10px; }
.prompt-coaching-entry-exclusion-label { margin:0; font-weight:650; }
.prompt-coaching-entry-exclusion-claim, .prompt-coaching-entry-exclusion-verify { margin:0; color:var(--ink-muted); }
.prompt-coaching-entry-boundary { border-top:1px solid var(--import-line); padding-top:10px; }
.prompt-coaching-entry-boundary-summary { color:var(--import-ink); font:700 12px/1.6 ui-monospace,monospace; cursor:pointer; }
.prompt-coaching-entry-boundary-summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.prompt-coaching-entry-boundary[open] .prompt-coaching-entry-boundary-summary { margin-bottom:6px; }
.prompt-coaching-entry-lead { margin:0 0 8px; color:var(--ink-muted); font-size:13px; line-height:1.6; }
.prompt-coaching-entry-action, .prompt-coaching-entry-alternative, .prompt-coaching-entry-attribution { margin:0; color:var(--ink-muted); font-size:13px; line-height:1.6; }
.prompt-coaching-entry-example { justify-self:start; }
.prompt-coaching-entry-source { margin:0; border-left:5px solid var(--import-accent); padding:2px 0 2px 12px; font-size:13px; line-height:1.6; }
.prompt-coaching-cue { max-width:70ch; margin:0; border-left:5px solid var(--import-line); padding:2px 0 2px 12px; color:var(--ink-muted); font-size:13px; line-height:1.6; }
.prompt-coaching-cue strong { color:var(--import-ink); }
.prompt-coaching-change {
  display:grid; gap:10px; scroll-margin-top:24px;
  border:1px solid var(--import-line); border-left:5px solid var(--import-accent);
  border-radius:11px; padding:14px 16px; background:#fff;
}
/* A focus destination, not a control: the ring is drawn on plain focus too, so
   a reader who re-graded with the mouse can still see where focus went. */
.prompt-coaching-change:focus,.prompt-coaching-change:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.prompt-coaching-change[data-status="pending"] { border-left-style:dashed; }
.prompt-coaching-change[data-status="abstained"],.prompt-coaching-change[data-status="error"] { border-left-color:var(--state-warn-line); background:var(--state-warn-wash); }
.prompt-coaching-change[data-implausible="true"] { border-left-color:var(--state-error-line); background:var(--state-error-wash); }
.prompt-coaching-change-status { display:flex; gap:8px; margin:0; font-size:15px; line-height:1.5; overflow-wrap:anywhere; }
.prompt-coaching-change-reason { max-width:70ch; margin:0; color:var(--state-warn-ink); font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.prompt-coaching-change-scores { display:grid; grid-template-columns:minmax(0,auto) auto; gap:4px 16px; margin:0; justify-content:start; font-size:13px; }
.prompt-coaching-change-scores dt { color:var(--ink-muted); font-weight:700; }
.prompt-coaching-change-scores dd { margin:0; font:750 15px/1.4 ui-monospace,monospace; overflow-wrap:anywhere; }
.prompt-coaching-change-scores dd[data-pending="true"] { color:var(--ink-muted); font-weight:400; }
.prompt-coaching-change-delta {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  width:fit-content; max-width:100%; margin:0;
  border:1px solid var(--import-line); border-radius:11px; padding:8px 13px;
  background:var(--import-wash); color:var(--import-ink);
  font-size:14px; line-height:1.5; overflow-wrap:anywhere;
}
.prompt-coaching-change-delta[data-direction="regressed"] { border-color:var(--state-error-line); background:var(--state-error-wash); color:var(--state-error-ink); }
.prompt-coaching-change-delta[data-direction="unchanged"],
.prompt-coaching-change-delta[data-direction="none"] { border-color:var(--ink-muted); background:#fff; color:#171713; }
.prompt-coaching-change-delta[data-implausible="true"] { border-color:var(--state-error-line); background:var(--state-error-wash); color:var(--state-error-ink); }
.prompt-coaching-change-delta-label { font-size:15px; font-weight:750; }
.prompt-coaching-change-delta-direction { font:700 11px/1.6 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.prompt-coaching-change-delta-value { font:700 13px/1.5 ui-monospace,monospace; }
.prompt-coaching-change-delta-band { flex-basis:100%; font-size:13px; }
.prompt-coaching-change-notices { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.prompt-coaching-change-notices li { display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 8px; border-left:5px solid var(--state-error-line); padding:2px 0 2px 12px; color:var(--state-error-ink); font-size:13px; line-height:1.55; }
.prompt-coaching-change-notice-label { font-weight:700; overflow-wrap:anywhere; }
.prompt-coaching-change-notice-guidance { grid-column:2; }
.prompt-coaching-change-provenance { margin:0; color:var(--ink-muted); font:600 11px/1.6 ui-monospace,monospace; overflow-wrap:anywhere; }
.prompt-coaching-change-action { border-left:5px solid var(--import-accent); padding:2px 0 2px 12px; }
.prompt-coaching-change-action-title { display:flex; gap:8px; margin:6px 0 0; font-size:15px; font-weight:700; line-height:1.5; overflow-wrap:anywhere; }
.prompt-coaching-change-action-guidance { margin:6px 0 0; max-width:70ch; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }

/* The copyable summary. It reads as a continuation of the change card above it
   rather than a panel of its own — same left rule, no top border — because it is
   an action on that comparison and not a second subject.

   Every outcome pairs a fill with ink measured for 4.5:1 in the contrast test
   below this file's own rules, and none of them is the sole carrier of its
   state: the status sentence says in words what the tint says in colour, and
   `data-outcome` is what the panel is styled from rather than a class a reader
   could not perceive. */
.prompt-coaching-copy {
  display:grid; gap:9px; justify-items:start;
  border:1px solid var(--import-line); border-left:5px solid var(--import-accent);
  border-radius:11px; padding:13px 16px; background:var(--import-wash);
}
.prompt-coaching-copy-lead { max-width:70ch; margin:0; color:var(--import-ink); font-size:13px; line-height:1.6; }
#prompt-coaching-copy-button {
  min-height:44px; border:1px solid var(--import-accent); border-radius:9px;
  padding:10px 16px; background:#fff; color:var(--import-ink);
  font:700 13px/1.4 inherit; cursor:pointer;
}
#prompt-coaching-copy-button:focus-visible { outline:3px solid var(--import-accent); outline-offset:2px; }
#prompt-coaching-copy-button[disabled] { cursor:progress; color:var(--ink-muted); border-color:var(--import-line); }
.prompt-coaching-copy-status {
  max-width:70ch; margin:0; border-radius:8px; padding:5px 9px;
  background:#fff; color:#171713; font-size:13px; line-height:1.6; overflow-wrap:anywhere;
}
.prompt-coaching-copy-status:empty { display:none; }
.prompt-coaching-copy-status[data-outcome="pending"] { background:#fff; color:var(--ink-muted); }
.prompt-coaching-copy-status[data-outcome="copied"] { background:#fff; color:var(--import-ink); font-weight:700; }
.prompt-coaching-copy-status[data-outcome="manual"] {
  border:1px solid var(--state-warn-line); background:var(--state-warn-wash); color:var(--state-warn-ink); font-weight:700;
}
/* The floor of the fallback chain: the text itself, selectable, with a real
   label rather than a placeholder. It is only unhidden when copying failed, so
   a reader for whom the button works never tabs past a box of text they did not
   ask to see. */
.prompt-coaching-copy-fallback { display:grid; gap:5px; justify-self:stretch; }
.prompt-coaching-copy-fallback label { color:var(--import-ink); font:700 12px/1.5 inherit; }
#prompt-coaching-copy-text {
  width:100%; box-sizing:border-box; border:1px solid var(--import-line); border-radius:9px;
  padding:10px 12px; background:#fff; color:#171713;
  font:400 13px/1.6 ui-monospace,monospace; resize:vertical;
}
#prompt-coaching-copy-text:focus-visible { outline:3px solid var(--import-accent); outline-offset:2px; }
/* Off-screen, not hidden: `display:none` and `hidden` are both nodes no engine
   will copy a selection out of, and this node exists for exactly one
   `execCommand("copy")` before it is removed. A style attribute would be
   simpler and is blocked by this origin's `style-src 'self'`. */
.prompt-coaching-copy-staging { position:fixed; top:-2000px; left:-2000px; width:1px; height:1px; opacity:0; }

/* The pre-paste preview. Quieter than the result it sits under: it is read once,
   before anything is typed, and never competes with an answer. */
.prompt-coaching-preview { border:1px solid var(--import-line); border-radius:11px; padding:12px 14px; }
.prompt-coaching-preview > summary { font:650 13px/1.5 inherit; cursor:pointer; }
.prompt-coaching-preview > summary:focus-visible { outline:2px solid var(--import-accent); outline-offset:3px; }
.prompt-coaching-preview-static { margin:10px 0 0; max-width:70ch; color:var(--ink-muted); font-size:12px; line-height:1.6; }
.prompt-coaching-preview-body { display:grid; gap:18px; margin-top:14px; }
.prompt-coaching-preview-block { display:grid; gap:8px; }
.prompt-coaching-preview-lead,.prompt-coaching-preview-note { margin:0; max-width:70ch; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.prompt-coaching-preview-note { color:var(--ink-muted); font-size:12px; }
.prompt-coaching-preview-sample,.prompt-coaching-preview-json,.gateway-shape-snippet {
  margin:0; border:1px solid var(--import-line); border-radius:9px; padding:10px;
  max-height:280px; overflow:auto; font:400 12px/1.6 ui-monospace,monospace;
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.prompt-coaching-preview-measures,.prompt-coaching-preview-fields {
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:4px 14px; margin:0; font-size:12px;
}
.prompt-coaching-preview-measures dt,.prompt-coaching-preview-fields dt { font:700 12px/1.6 ui-monospace,monospace; overflow-wrap:anywhere; }
.prompt-coaching-preview-measures dd,.prompt-coaching-preview-fields dd { margin:0; color:var(--ink-muted); line-height:1.6; overflow-wrap:anywhere; }
.prompt-coaching-preview-nested > summary { color:var(--ink-muted); font:650 12px/1.6 ui-monospace,monospace; cursor:pointer; }
.prompt-coaching-preview-nested > summary:focus-visible { outline:2px solid var(--import-accent); outline-offset:3px; }
.prompt-coaching-preview-nested .prompt-coaching-preview-json { margin-top:8px; }
.prompt-coaching-preview-states,.prompt-coaching-preview-boundary { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.prompt-coaching-preview-states > li,.prompt-coaching-preview-boundary > li {
  display:grid; gap:4px; border-left:4px solid var(--import-line); padding-left:11px;
}
.prompt-coaching-preview-states > li[data-outcome="graded"] { border-left-color:var(--import-accent); }
.prompt-coaching-preview-state-title,.prompt-coaching-preview-boundary-label { margin:0; font:700 13px/1.5 inherit; overflow-wrap:anywhere; }
.prompt-coaching-preview-state-meaning,.prompt-coaching-preview-state-delivers,
.prompt-coaching-preview-boundary-claim { margin:0; max-width:70ch; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.prompt-coaching-preview-state-codes,.prompt-coaching-preview-state-sample,
.prompt-coaching-preview-boundary-verify {
  margin:0; max-width:70ch; color:var(--ink-muted); font:650 11px/1.6 ui-monospace,monospace; overflow-wrap:anywhere;
}

/* Coaching result presentation primitives (src/coaching-result-view.js).
   Composed entirely from the import-flow and state roles declared at the top of
   this file: no new hue, no type size this page did not already use, and the
   same 44px control floor and 70ch measure as the workflow above.

   TONE IS NEVER THE SIGNAL. The left rail and wash follow the model's tone, and
   every one of them is redundant: the status line prints the state as a word,
   every figure carries its label, and each state has its own shape. Contrast is
   stated rather than assumed — import-ink 9.7:1 on white and 8.8:1 on the import
   wash, warn-ink 8.1:1 on the warn wash, error-ink 9.7:1 on the error wash, and
   ink-muted 5.1:1 on white, so the smallest 11px monospace metadata clears AA.
   The pending rail is ink-muted rather than the panel border because a 1.6:1
   rule is not a perceivable boundary. */
.coaching-result {
  display:grid; gap:14px; border:1px solid var(--import-line);
  border-left:5px solid var(--import-accent); border-radius:12px; padding:16px; background:#fff;
}
.coaching-result[data-tone="pending"] { border-left-color:var(--ink-muted); border-left-style:dashed; }
.coaching-result[data-tone="caution"] { border-left-color:var(--state-warn-line); background:var(--state-warn-wash); }
.coaching-result[data-tone="blocked"] { border-left-color:var(--state-error-line); background:var(--state-error-wash); }
.coaching-result-heading { margin:0; font-size:15px; line-height:1.4; }
.coaching-result-region { display:grid; gap:8px; }
.coaching-result-region > .eyebrow { margin:0; }
.coaching-result-shape { flex:none; font-weight:750; }
.coaching-result-status { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; margin:0; }
.coaching-result-status-label { color:var(--ink-muted); font:700 11px/1.6 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.coaching-result-status-value { font:750 13px/1.5 ui-monospace,monospace; }
.coaching-result-mark { margin:0; color:var(--import-ink); font-size:52px; font-weight:750; line-height:.9; letter-spacing:-.05em; }
.coaching-result-answer { margin:0; max-width:70ch; font-size:17px; font-weight:750; line-height:1.45; overflow-wrap:anywhere; }
.coaching-result-facts { display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:4px 14px; margin:0; font-size:13px; }
.coaching-result-facts dt { color:var(--ink-muted); overflow-wrap:anywhere; }
.coaching-result-facts dd { margin:0; font:700 13px/1.5 ui-monospace,monospace; overflow-wrap:anywhere; }
.coaching-result-facts dd[data-pending="true"] { color:var(--ink-muted); font-weight:400; }
/* An out-of-range figure is marked in the type itself, not only in red: the
   value already says "out of range" and the underline survives a grayscale
   print, a color-blind reader, and a screenshot pasted into a ticket. */
.coaching-result-facts dd[data-implausible="true"] {
  color:var(--state-error-ink); text-decoration:underline wavy; text-underline-offset:3px;
}
.coaching-result-notices { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.coaching-result-notices > li {
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 8px;
  border:1px dashed var(--state-error-line); border-radius:9px; padding:8px 10px; color:var(--state-error-ink);
}
.coaching-result-notices .coaching-result-shape { grid-row:1/3; font-size:15px; }
.coaching-result-notice-label { font:750 12px/1.5 ui-monospace,monospace; overflow-wrap:anywhere; }
.coaching-result-notice-guidance { font-size:12px; line-height:1.6; }
.coaching-result-note { display:grid; gap:3px; margin:0; max-width:70ch; color:var(--ink-muted); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.coaching-result-note-label { color:var(--import-ink); font:700 12px/1.5 ui-monospace,monospace; }
.coaching-result-action { border-left:4px solid var(--import-accent); padding-left:12px; }
.coaching-result-action[data-available="false"] { border-left-style:dashed; border-left-color:var(--ink-muted); }
.coaching-result-action-title { display:flex; gap:8px; margin:0; font-size:15px; font-weight:700; line-height:1.5; overflow-wrap:anywhere; }
.coaching-result-action-guidance { margin:0; max-width:70ch; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.coaching-result-rewrite-label { margin:0; color:var(--import-ink); font:700 12px/1.5 ui-monospace,monospace; }
.coaching-result-worth,.coaching-result-action-control { margin:0; color:var(--ink-muted); font:650 12px/1.5 ui-monospace,monospace; overflow-wrap:anywhere; }
.coaching-result-rewrite {
  margin:0; max-width:70ch; border:1px solid var(--import-line); border-radius:9px; padding:10px 12px;
  background:var(--import-wash); font:400 12px/1.6 ui-monospace,monospace; white-space:pre-wrap; overflow-wrap:anywhere;
}
.coaching-result-toggle {
  justify-self:start; min-height:44px; max-width:100%; border:1px solid var(--import-line); border-radius:9px;
  padding:10px 14px; background:#fff; color:var(--import-ink); font:650 13px/1.35 inherit; text-align:left; cursor:pointer;
}
.coaching-result-toggle:hover { background:var(--import-wash); }
.coaching-result-toggle:focus-visible { outline:3px solid var(--import-accent); outline-offset:2px; }
.coaching-result-panel { display:grid; gap:10px; border:1px solid var(--import-line); border-radius:11px; padding:14px; background:#fff; }
.coaching-result-recommendation { display:grid; gap:6px; border-left:4px solid var(--import-line); padding-left:11px; }
.coaching-result-recommendation[data-evidenced="false"] { border-left-style:dotted; }
.coaching-result-recommendation-title { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; margin:0; font-size:14px; font-weight:700; line-height:1.5; overflow-wrap:anywhere; }
.coaching-result-recommendation-label { color:var(--ink-muted); font:700 11px/1.6 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.coaching-result-recommendation-text { margin:0; max-width:70ch; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.coaching-result-recommendation-basis,.coaching-result-version { margin:0; color:var(--ink-muted); font:650 11px/1.6 ui-monospace,monospace; overflow-wrap:anywhere; }
.coaching-result-turns,.coaching-result-runners-up { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.coaching-result-assumptions {
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:6px 12px; margin:0; border-top:1px solid var(--import-line); padding-top:10px;
  font-size:12px; line-height:1.6;
}
.coaching-result-assumptions dt {
  color:var(--import-ink); font:700 11px/1.6 ui-monospace,monospace; overflow-wrap:anywhere;
}
.coaching-result-assumptions dd { margin:0; max-width:70ch; overflow-wrap:anywhere; }
.coaching-result-turn,.coaching-result-runners-up li { display:flex; flex-wrap:wrap; gap:4px 12px; border-top:1px solid var(--import-line); padding-top:6px; font-size:12px; }
.coaching-result-turn[data-scored="false"] { border-top-style:dashed; }
.coaching-result-turn-index,.coaching-result-runner-title { font-weight:700; overflow-wrap:anywhere; }
.coaching-result-turn-role,.coaching-result-turn-read,.coaching-result-turn-scored,
.coaching-result-turn-codes,.coaching-result-runner-worth {
  color:var(--ink-muted); font:650 11px/1.6 ui-monospace,monospace; overflow-wrap:anywhere;
}

/* The specimen wrapper: a review surface, so it is quiet and closed by default. */
.coaching-specimen { border:1px solid var(--import-line); border-radius:11px; padding:12px 14px; }
.coaching-specimen > summary { font:650 13px/1.5 inherit; cursor:pointer; }
.coaching-specimen > summary:focus-visible { outline:3px solid var(--import-accent); outline-offset:3px; }
.coaching-specimen-lead { margin:10px 0 0; max-width:70ch; color:var(--ink-muted); font-size:12px; line-height:1.6; }
.coaching-specimen-body { display:grid; gap:22px; margin-top:14px; }
.coaching-specimen-case { display:grid; gap:8px; }
.coaching-specimen-case-title { margin:0; font-size:14px; line-height:1.4; }
.coaching-specimen-case-purpose { margin:0; max-width:70ch; color:var(--ink-muted); font-size:12px; line-height:1.6; }

/* The prompt-coach destination. Its own frame rather than the dashboard hero:
   this page carries one workflow, so the type ramp starts at the question and
   the measure of every paragraph stays inside a comfortable reading width at
   any viewport. Nothing here is positioned, sticky, or sized to a viewport
   unit, so a 320px screen reflows instead of scrolling sideways. */
.coach-hero { display:grid; gap:12px; max-width:70ch; margin:0 0 26px; }
.coach-hero h1 { margin:0; font-size:clamp(32px,5.6vw,52px); line-height:1.04; letter-spacing:-.045em; }
/* What the page does, under the name of the page. Margins are the grid's job
   here, as they are for every other child of the hero. */
.coach-hero #page-tagline { margin:0; max-width:66ch; line-height:1.6; }
/* The privacy statement. It reads beside the grading button rather than in the
   hero, so it keeps the accent rule it had there but sits in the form. */
.prompt-coaching-privacy { display:grid; gap:4px; max-width:70ch; margin:0; border-left:5px solid var(--import-accent); padding:4px 0 4px 12px; font-size:13px; line-height:1.6; }
.prompt-coaching-privacy span { color:var(--ink-muted); }
/* The worked example: a full result a visitor did not ask for, so it reads as
   a demonstration — one step in from the workflow, and dimmed only in its
   attribution line, never in the figures themselves. */
.prompt-coach-sample { display:grid; gap:10px; border:1px dashed var(--import-line); border-radius:12px; padding:16px; }
.prompt-coach-sample[hidden] { display:none; }
.prompt-coach-sample-static,.prompt-coach-sample-lead { margin:0; max-width:70ch; color:var(--ink-muted); font-size:13px; line-height:1.6; }
/* The status line keeps its node across every load so it can announce, and
   takes no row in the grid while it has nothing to say — same treatment the
   copy control's status line already gets. */
.prompt-coach-sample-lead:empty { display:none; }
.prompt-coach-sample-body { display:grid; gap:12px; }
.prompt-coach-sample-body:empty { display:none; }
.prompt-coach-sample-attribution { margin:0; max-width:70ch; border-left:5px solid var(--import-line); padding:2px 0 2px 12px; font-size:13px; line-height:1.6; }
/* The neighbouring surface, at the foot of the coach and at the foot of the
   dashboard: the same card, so the pair reads as two destinations rather than
   as one page advertising another. */
.coach-neighbour,.coach-handoff { display:grid; justify-items:start; gap:10px; max-width:70ch; }
.coach-neighbour h2 { margin:0; font-size:clamp(20px,3vw,26px); line-height:1.15; letter-spacing:-.03em; }
.coach-neighbour p { margin:0; font-size:15px; line-height:1.62; }

@media (max-width:640px) {
  /* One column at 390px: a two-column definition grid puts a 13px label and a
     monospace figure in ~40 characters each, which is the failure the mobile
     review filed as finding 01 on the dashboard. */
  .coach-neighbour .secondary-button,.coach-handoff .secondary-button { width:100%; }
  .prompt-coach-sample { padding:12px; }
  .coaching-result-facts { grid-template-columns:minmax(0,1fr); gap:2px; }
  .coaching-result-assumptions { grid-template-columns:minmax(0,1fr); gap:2px; }
  .coaching-result-assumptions dd { margin-bottom:6px; }
  .coaching-result-facts dd { margin-bottom:6px; }
  .coaching-result-mark { font-size:40px; }
  .coaching-result-toggle { width:100%; }
  .prompt-coaching-letter { font-size:40px; }
  .prompt-coaching-actions button,.prompt-coaching-disclosure-toggle,.prompt-coaching-entry-example { width:100%; }
  .prompt-coaching-entry-block dl { grid-template-columns:minmax(0,1fr); gap:2px; }
  .prompt-coaching-entry-block dd { margin-bottom:6px; }
  .prompt-coaching-preview-measures,.prompt-coaching-preview-fields { grid-template-columns:minmax(0,1fr); gap:2px; }
  .prompt-coaching-preview-measures dd,.prompt-coaching-preview-fields dd { margin-bottom:6px; }
  .prompt-coaching-axes { grid-template-columns:minmax(0,1fr); gap:2px; }
  .prompt-coaching-axes dd { margin-bottom:6px; }
}

@media print {
  [data-panel-role="support"] { display:block !important; }
  /* A briefing is printed from a page whose frame is viewport-sized. Anything
     that clips, scrolls sideways, or sticks has no meaning on paper. */
  .local-results,.local-import,.local-lead-finding,.local-trust,.restored-briefing {
    position:static; overflow:visible; max-height:none;
  }
  /* The trust verdict is the first thing a reader is owed and it had no print
     rule at all, so the percentage could land on one sheet and the sentence that
     bounds it on the next. Coverage, its operands and the answer are one reading;
     `break-after: avoid` binds each line to the one under it, which is how three
     siblings stay together without a wrapper the screen does not need. */
  .local-trust { break-inside:auto; border-color:#767670; background:#fff; }
  .local-trust-coverage,.local-trust-inputs { break-inside:avoid; break-after:avoid; }
  .local-trust-answer,.local-trust-next,.local-trust-finding { break-inside:avoid; }
  .local-lead-finding {
    border:1px solid #767670; border-top-width:3px; background:#fff; box-shadow:none;
  }
  .local-lead-finding h4 { font-size:30px; line-height:1.15; }
  .local-lead-metric { font-size:22px; }
  /* The one thing that must never straddle a page break: the figure, the grade,
     and the coverage that bounds it. Same rule as the screen, restated where
     the pagination actually happens. */
  .local-lead-answer,.local-lead-grade,.local-lead-next { break-inside:avoid; }
  .local-lead-answer { background:#fff; }
  /* Every disclosure is open on paper, in CSS rather than by mutating the DOM
     on beforeprint.

     A closed `details` does not hide its light-DOM children — the UA hides the
     wrapper the content is slotted into — so a declaration on the children
     cannot reach it. `::details-content` is the pseudo-element that wrapper is
     exposed as, and lifting its `content-visibility` is the CSS-only way to
     print the whole disclosure on an engine that has shipped it.

     `display:revert` used to sit underneath this as the "fallback" for engines
     that have not. It was worse than nothing: `revert` rolls a property back to
     the *user-agent* cascade origin, which is exactly the origin doing the
     hiding, so the fallback resolved to the rule it was meant to beat. It is
     replaced here by an explicit `display:block` on the non-summary children of
     a closed disclosure — the honest version of the same attempt, which does
     reach an engine whose UA rule is a non-important `display:none` on the
     light-DOM children, and reaches nothing on an engine that hides a wrapper
     or writes `!important` (author `!important` loses to UA `!important` by
     definition). No author CSS can beat that case.

     Which is why the one disclosure on this page that carries the *evidence for
     a money figure* does not rely on any of it: `.first-run-method-print`
     below is a sibling of the `details`, not a descendant, so no rule in any
     origin can suppress it. See the block at the foot of this media query. */
  .local-lead-detail::details-content,
  .local-provenance-detail::details-content,
  .panel-status-detail::details-content,
  .kpi-disclosure::details-content,
  .local-disclosures details::details-content { content-visibility:visible; block-size:auto; }
  .local-lead-detail:not([open])>*:not(summary),
  .local-provenance-detail:not([open])>*:not(summary),
  .panel-status-detail:not([open])>*:not(summary),
  .kpi-disclosure:not([open])>*:not(summary),
  .local-disclosures details:not([open])>*:not(summary) { display:block; }
  /* The peer method and its supporting metrics print with the position they
     qualify: a briefing that carries a percentile and drops the cohort it was
     measured in is the claim this panel exists not to make. */
  .kpi-disclosure>summary {
    display:block; padding:0; list-style:none; color:#171713;
    font:700 10px/1.6 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase;
  }
  .kpi-disclosure>summary::marker { content:""; }
  .kpi-disclosure>summary::-webkit-details-marker { display:none; }
  /* A panel's state and its provenance travel with the panel onto paper. A
     printed briefing whose figures lost the count, period, coverage, and
     confidence behind them is a claim again — and one whose status chip was
     dropped cannot say which panels are still waiting on a file. The washes go
     (they print as grey mud); the rule, the word, and the glyph stay, which is
     exactly the greyscale case this block was drawn for. */
  .panel-status { break-inside:avoid; background:#fff; border-color:#767670; border-left-width:3px; box-shadow:none; }
  /* The silhouette is a channel, so it survives the printer too: the coloured
     washes go, but a filled chip keeps a neutral tint a laser press reproduces
     and an outlined one keeps its rule. Word, glyph, and silhouette all print. */
  .panel-status-chip { border:1px solid #767670; background:none; color:#171713; }
  .panel-status-chip[data-silhouette="filled"] { border-color:transparent; background:#e6e5e0; }
  .panel-status-facts { gap:2px 18px; }
  .panel-status-detail>summary {
    display:block; padding:0; list-style:none; color:#171713;
    font:700 10px/1.6 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase;
  }
  .panel-status-detail>summary::marker { content:""; }
  .panel-status-detail>summary::-webkit-details-marker { display:none; }
  .local-lead-arithmetic[hidden] { display:none; }
  /* The disclosure content stays; the disclosure control goes. A summary is a
     control that means nothing on paper, so it prints as the section heading it
     was standing in for rather than as a dead affordance. */
  .local-lead-detail>summary,.local-provenance-detail>summary,.local-disclosures summary {
    display:block; padding:0; list-style:none; color:#171713;
    font:700 11px/1.6 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase;
  }
  .local-lead-detail>summary::marker,.local-disclosures summary::marker { content:""; }
  .local-lead-detail>summary::-webkit-details-marker,
  .local-disclosures summary::-webkit-details-marker { display:none; }
  /* Interactive-only affordances. A dead button on a printed page reads as
     something the reader failed to press. */
  .local-lead-finding button,.restored-briefing button,.local-results button,
  .coverage-upgrade-jump,.local-trust-jump,.restored-briefing-close { display:none; }
  /* …with one exception, and it was a defect rather than a decision: the
     department ranking and the unattributed findings put their *content* — the
     rank, the name and the money — inside the control that expands them. The
     blanket rule above dropped the row and the collapsed panel under it, so a
     printed brief showed the ranking as a column of empty boxes.

     On paper the control is not a control, so it prints as the row heading it
     was standing in for: the chevron goes, the press affordance goes, and every
     panel is opened, because a disclosure whose control cannot be pressed has to
     arrive already open. The selectors are two classes deep to out-specify
     `.local-results button` rather than to shout. */
  .local-results .local-department-choice,.local-results .local-trust-choice {
    display:flex; background:none; box-shadow:none; cursor:auto;
  }
  .local-department-chevron { display:none; }
  .local-department-detail[hidden],.local-trust-detail[hidden] { display:block; }
  /* Persistent on paper, at the smallest step of the mono caption role. */
  .local-lead-basis,.local-lead-provenance { display:block; color:#3f3f3a; font-size:10px; }
  /* A briefing whose department ranking overflows one sheet breaks cleanly
     rather than being cropped to fit: no row is split, and nothing is clipped. */
  .local-lead-finding { orphans:3; widows:3; }
  .local-department-evidence,.local-department-list>li { break-inside:avoid; }
  /* The supporting rail keeps its rank on paper. It cannot be reordered ahead of
     the finding — it is authored after it — but it can be told apart from it:
     the label that names it as supporting prints, the rail starts on a fresh
     sheet rather than sharing one with the decisive figure, and its provenance
     travels with it, so an example rail is never read as the reader's own. */
  .local-secondary-evidence { break-before:page; border-top:1px solid #767670; }
  .local-secondary-evidence>.eyebrow { display:block; color:#171713; }
  .dataset-provenance { break-inside:avoid; background:#fff; border-color:#767670; border-left-color:#171713; color:#171713; }
  .local-state-grid>article,.local-disclosures>details { break-inside:avoid; background:#fff; }
  /* An empty or unanalyzed disclosure keeps its dashed edge on paper: the count
     word says it, and the one shape channel that survives a mono press says it
     again. */
  .local-disclosures details[data-state="empty"],
  .local-disclosures details[data-state="unavailable"] { border:1px dashed #767670; }
  .disclosure-count { color:#171713; }
  /* The check prints open beside the figure it defends: a forwarded briefing
     whose arithmetic sits behind a control the reader cannot press is a claim
     again. Same rule the method notes already follow. */
  #local-lead-derivation-detail:not([hidden])>*,
  #restored-briefing-derivation-detail:not([hidden])>* { display:block; }
  .derivation-verdict { background:#fff; border-left-width:3px; }
  .derivation-step { orphans:2; widows:2; }

  /* ---------------------------------------------------------------------
     THE FRONT-DOOR DECISION ON PAPER
     ---------------------------------------------------------------------
     The evidence behind the money figure is the one disclosure on this page
     that may not depend on `::details-content`. So it does not: the `details`
     is dropped outright and its plain sibling is shown in its place. A sibling
     is not a descendant of a `details`, so `details:not([open])` — in the UA
     origin, with `!important`, or through a shadow wrapper — cannot reach it,
     and exactly one copy of the evidence prints whether the reader left the
     disclosure open or shut.

     The print copy is hidden and shown by two author rules of equal
     specificity, with the later print rule winning by source order. That is
     the whole mechanism: no dependency on the browser's `hidden` rule, no
     pseudo-element, no script, no `beforeprint` DOM mutation, nothing to
     revert to. */
  .first-run-method { display:none; }
  .first-run-method-print { display:block; break-inside:auto; }
  .first-run-method-print .first-run-method-list { margin:0; }
  /* The reading order is the DOM order, so paper keeps it for free. What paper
     needs on top of that is for the answer and the action never to straddle a
     sheet: a recommendation split from the figure that motivates it is two
     fragments rather than one decision. */
  .first-run { border:1px solid #767670; border-left-width:3px; background:#fff; box-shadow:none; }
  .first-run-answer,.first-run-recommendation,.first-run-confidence,.first-run-slot { break-inside:avoid; }
  .first-run-answer { break-after:avoid; }
  .first-run-answer[data-available="false"],.first-run-value[data-available="false"],
  .first-run-action-text[data-available="false"] { color:#171713; }
  /* Interactive-only affordances. A dead button on a printed page reads as
     something the reader failed to press. The notes stay: they say what would
     have happened, which is the part that is still true on paper. */
  .first-run-choice button { display:none; }
  /* The hand-off is a link, not a button, so it survives on paper as the address
     of the sheet it opens — which is exactly what a printed page can still act
     on. Its heading and note stay with it. */
  .first-run-handoff { border-color:#767670; background:#fff; }
  .first-run-handoff-action { border:0; padding:0; background:none; color:#171713; text-decoration:underline; }
  .first-run-handoff-action::after { content:" (" attr(href) ")"; font-size:10px; }
}

/* ---------------------------------------------------------------------------
   "Which department needs coaching now?" — the local query sample's decision.

   Mobile-first and single-column by default: the answer, the letter, the
   confidence, the provenance and the action stack in reading order at any width,
   and the one breakpoint below only sets the letter beside the benchmark
   sentence once there is room for both. Nothing is signalled by tint alone —
   every state here also carries a word, a shape, and a border treatment that
   survives a monochrome screenshot.
   --------------------------------------------------------------------------- */
.org-coaching { display:grid; gap:14px; border:1px solid var(--import-line); border-radius:14px; padding:22px; background:#fff; }
.org-coaching #org-coaching-body { display:grid; gap:14px; }
.org-coaching-lead { display:grid; gap:6px; border:1px solid var(--import-accent); border-left-width:5px; border-radius:12px; padding:14px 16px; background:var(--import-wash); }
/* A refusal is a state of its own, and the one a reader must not mistake for a
   weak-but-real grade. Dashed edge, warn wash, and the "◇" beside the sentence. */
.org-coaching-lead[data-grade-status="ungradeable"] { border:2px dashed var(--state-warn-line); border-left-width:5px; border-left-style:solid; background:var(--state-warn-wash); }
.org-coaching-shape { flex:none; }
.org-coaching-answer { display:flex; gap:8px; margin:0; font-size:17px; line-height:1.45; font-weight:750; overflow-wrap:anywhere; }
.org-coaching-rule,.org-coaching-benchmark-rule,.org-coaching-confidence-rule { margin:0; color:var(--ink-muted); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.org-coaching-figure { display:grid; gap:4px 16px; align-items:center; margin-top:4px; }
.org-coaching-letter { margin:0; font-size:56px; line-height:.9; letter-spacing:-.05em; font-weight:750; color:var(--import-ink); }
.org-coaching-benchmark { margin:0; font-size:14px; line-height:1.55; font-weight:650; overflow-wrap:anywhere; }
.org-coaching-reason-label { margin:0; font-size:14px; font-weight:700; overflow-wrap:anywhere; }
.org-coaching-reason-detail { margin:0; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.org-coaching-confidence { border-left:5px solid var(--import-accent); padding:2px 0 2px 12px; }
.org-coaching-confidence[data-level="medium"] { border-left-style:double; }
.org-coaching-confidence[data-level="low"] { border-left-style:dashed; border-left-color:var(--state-warn-line); }
.org-coaching-confidence-line { display:flex; gap:8px; margin:0; font-size:13px; line-height:1.55; font-weight:650; overflow-wrap:anywhere; }
.org-coaching-provenance { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin:4px 0 0; border:1px solid var(--import-line); border-left:5px solid var(--import-accent); border-radius:9px; padding:10px 13px; color:var(--import-ink); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.org-coaching-action { display:grid; gap:5px; border-left:5px solid var(--import-accent); padding:2px 0 2px 12px; }
.org-coaching-action[data-available="false"] { border-left-style:dashed; border-left-color:var(--state-warn-line); }
.org-coaching-action-text { display:flex; gap:8px; margin:0; font-size:14px; line-height:1.55; font-weight:700; overflow-wrap:anywhere; }
.org-coaching-action-detail { margin:0; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.org-coaching-action-basis,.org-coaching-action-money { margin:0; color:var(--ink-muted); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.org-coaching-disclosures { display:grid; gap:10px; }
.org-coaching-disclosure { display:grid; gap:8px; }
/* Same reasoning as .graded-disclosure-toggle: the accent edge is the only
   thing that says "control", and --import-line misses the 3:1 non-text floor. */
.org-coaching-disclosure-toggle { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; justify-self:start; max-width:100%; border:1px solid var(--import-accent); border-radius:9px; padding:7px 13px; background:#fff; color:var(--import-ink); font:650 13px/1.45 inherit; text-align:left; cursor:pointer; }
.org-coaching-disclosure-toggle:focus-visible { outline:3px solid var(--import-accent); outline-offset:2px; }
.org-coaching-disclosure-chip { font:650 12px/1.4 ui-monospace,monospace; color:var(--ink-muted); }
.org-coaching-disclosure-panel { display:grid; gap:12px; border:1px solid var(--import-line); border-radius:11px; padding:14px; }
.org-coaching-rows { display:grid; gap:4px 14px; margin:0; font-size:13px; }
.org-coaching-row-term { color:var(--ink-muted); font-weight:700; overflow-wrap:anywhere; }
.org-coaching-row-term[data-gradeable="false"]::after { content:" ◇"; }
.org-coaching-row-detail { margin:0 0 6px; line-height:1.6; overflow-wrap:anywhere; }
.org-coaching-live { margin:0; font-size:12px; color:var(--ink-muted); }
/* The lead-supplied-label marker, drawn wherever an assisted figure is. It is a
   dashed edge AND a glyph AND the sentence: no figure on this page is qualified
   by a tint alone. */
.org-coaching-assist { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 0; border-left:5px dashed var(--import-accent); padding:2px 0 2px 12px; font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
/* The residue rows REFLOW rather than scroll: the name takes the width it can
   get down to 15rem and the select drops under it, so a narrow viewport gets a
   stack of labelled controls instead of a horizontal scrollbar. */
.org-coaching-residue-list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.org-coaching-residue-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; border-top:1px solid var(--import-line); padding-top:10px; }
.org-coaching-residue-name { flex:1 1 15rem; min-width:0; font-size:13px; line-height:1.5; font-weight:650; overflow-wrap:anywhere; }
.org-coaching-residue-select,.org-coaching-residue-clear { flex:0 1 auto; max-width:100%; border:1px solid var(--import-accent); border-radius:8px; padding:6px 9px; background:#fff; color:var(--import-ink); font:650 13px/1.45 inherit; }
.org-coaching-residue-select:focus-visible,.org-coaching-residue-clear:focus-visible { outline:3px solid var(--import-accent); outline-offset:2px; }
.org-coaching-residue-detail,.org-coaching-residue-state { flex:1 1 100%; margin:0; color:var(--ink-muted); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.org-coaching-residue-row[data-assigned="none"] .org-coaching-residue-state::before { content:"◇ "; }
.org-coaching-residue-row:not([data-assigned="none"]) .org-coaching-residue-state::before { content:"◧ "; }
.org-coaching-residue-intro,.org-coaching-residue-cap,.org-coaching-residue-ceiling,.org-coaching-residue-empty,.org-coaching-residue-unclassifiable,.org-coaching-residue-retention-text,.org-coaching-residue-retention-notice { margin:0; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
/* What this browser keeps, and the control that empties it: the foot of the same
   panel, on the type and the control styling the panel already declares. */
.org-coaching-residue-retention { display:grid; gap:8px; justify-items:start; border-top:1px solid var(--import-line); padding-top:10px; }
.org-coaching-residue-retention-notice { font-weight:650; }
@media (min-width:52rem) {
  .org-coaching-figure { grid-template-columns:minmax(0,auto) minmax(0,1fr); }
  .org-coaching-rows { grid-template-columns:minmax(0,14rem) minmax(0,1fr); }
  .org-coaching-rows dt { grid-column:1; }
  .org-coaching-rows dd { grid-column:2; }
}

/* Spend per completed release. Same panel frame as .org-coaching above, because it
   is a sibling question and not a louder one. No fixed width anywhere: the figure
   is a currency amount that grows with the number, and every sentence beside it
   has to be free to wrap. */
.spend-per-delivery { display:grid; gap:14px; border:1px solid var(--import-line); border-radius:14px; padding:22px; background:#fff; }
.spend-per-delivery #spend-per-delivery-body { display:grid; gap:14px; }
.spend-per-delivery > .eyebrow { margin:0; }
/* The question is the heading and is sized as one. It wraps at every width; a
   question clipped to one line stops being the thing the panel answers. */
.spd-question { margin:0; font-size:clamp(19px,2.4vw,24px); line-height:1.25; letter-spacing:-.015em; overflow-wrap:anywhere; }
.spd-question:focus-visible { outline:3px solid var(--focus-ring); outline-offset:4px; }
.spd-shape { flex:none; }
.spd-answer { margin:0; font-size:17px; line-height:1.45; font-weight:750; overflow-wrap:anywhere; }
.spd-figure { display:grid; gap:2px; margin:0; border-left:5px solid var(--import-accent); padding:2px 0 2px 12px; }
.spd-figure-value { font-size:38px; line-height:1; letter-spacing:-.03em; font-weight:750; color:var(--import-ink); overflow-wrap:anywhere; }
.spd-figure-unit { font-size:14px; font-weight:700; }
.spd-figure-basis { color:var(--ink-muted); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
/* A withheld ratio is a state of its own, and the one a reader must not read as a
   weak figure: dashed edge and warn wash, never an empty slot where a number was. */
.spd-withheld { margin:0; border:2px dashed var(--state-warn-line); border-radius:11px; padding:10px 13px; background:var(--state-warn-wash); font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.spd-comparison { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; margin:0; font-size:14px; line-height:1.55; overflow-wrap:anywhere; }
.spd-delta { font:750 14px/1.45 inherit; }
/* Direction is carried by the word and the shape in the markup. The tint is a
   third, redundant channel and is deliberately not the only one. */
.spd-comparison[data-direction="higher"] .spd-delta { color:var(--state-warn-line); }
.spd-comparison-text { flex:1 1 18rem; }
/* The paired reading. Boxed rather than tinted by direction: the direction is
   carried by the word and the shape, and a green/red pair here would label one
   direction good, which this figure explicitly does not. A withheld or
   unalignable pair takes the dashed warn edge every other withheld state uses. */
.spd-aligned { display:grid; gap:7px; border:1px solid var(--import-line); border-left:5px solid var(--import-accent); border-radius:11px; padding:11px 14px; }
.spd-aligned[data-state="mismatched_window"],
.spd-aligned[data-state="insufficient_data"] { border-left-style:dashed; border-left-color:var(--state-warn-line); }
.spd-aligned-title { margin:0; font:750 12px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--import-ink); }
.spd-aligned-move { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; margin:0; }
.spd-aligned-text { margin:0; font-size:14px; line-height:1.55; overflow-wrap:anywhere; }
.spd-aligned-pair { display:grid; grid-template-columns:auto 1fr; gap:4px 10px; margin:0; font-size:12px; line-height:1.55; }
.spd-aligned-term { font-weight:700; color:var(--ink-muted); }
.spd-aligned-value { margin:0; overflow-wrap:anywhere; }
.spd-aligned-action { margin:0; color:var(--ink-muted); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
/* One column under a narrow viewport: a two-column definition list with a date
   range in the second cell wraps to one word per line on a phone. */
@media (max-width:34rem) { .spd-aligned-pair { grid-template-columns:1fr; } .spd-aligned-term { margin-top:4px; } }
.spd-confidence { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; margin:0; border-left:5px solid var(--import-accent); padding:2px 0 2px 12px; font-size:13px; line-height:1.55; overflow-wrap:anywhere; }
.spd-confidence[data-level="medium"] { border-left-style:double; }
.spd-confidence[data-level="low"],.spd-confidence[data-level="none"] { border-left-style:dashed; border-left-color:var(--state-warn-line); }
.spd-confidence-level { font-weight:700; }
.spd-confidence-basis { flex:1 1 18rem; color:var(--ink-muted); }
/* The framing sits with the figure, at reading size rather than footnote size: it
   is what the number means, not a caveat about it. */
.spd-framing { margin:0; border:1px solid var(--import-line); border-left:5px solid var(--import-accent); border-radius:9px; padding:10px 13px; color:var(--import-ink); font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.spd-action { display:grid; gap:5px; border-left:5px solid var(--import-accent); padding:2px 0 2px 12px; }
.spd-action-title { margin:0; color:var(--ink-muted); font:700 12px/1.4 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.spd-action-text { margin:0; font-size:14px; line-height:1.55; font-weight:700; overflow-wrap:anywhere; }
.spd-action-link { justify-self:start; font-size:13px; font-weight:650; }
.spd-action-owner,.spd-action-why { margin:0; color:var(--ink-muted); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
/* THE ONE DISCLOSURE GROUP. Six native disclosures in one bordered stack rather
   than several loose controls down the panel: a reader checking a disputed
   figure looks in one place, and the stack reads as support for the finding
   above it rather than as six peer alerts. The rows share edges so the group is
   one object at any width, and every summary keeps a 44px target. */
.spd-disclosures { display:grid; border:1px solid var(--import-line); border-radius:11px; }
.spd-disclosures-title { margin:0; padding:11px 14px; border-bottom:1px solid var(--import-line); color:var(--ink-muted); font:700 12px/1.4 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.spd-detail { padding:2px 14px 12px; border-bottom:1px solid var(--import-line); }
.spd-disclosures .spd-detail:last-child { border-bottom:0; }
/* An opened row is marked by an inset edge rather than a fill: the panel's one
   wash means "resolved", and an expanded disclosure resolves nothing. */
.spd-detail[open] { box-shadow:inset 3px 0 0 var(--import-accent); }
.spd-detail-summary { display:flex; align-items:center; min-height:44px; color:var(--import-ink); font:650 13px/1.45 inherit; cursor:pointer; overflow-wrap:anywhere; }
.spd-detail-summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.spd-detail-heading { margin:12px 0 4px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); }
.spd-detail-line { margin:6px 0 0; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
/* A quoted contract rule is set apart from the sentences about this reading, so
   a reader can tell the policy from the measurement without reading both. */
.spd-rule { margin:8px 0 0; border-left:3px solid var(--import-line); padding-left:10px; color:var(--ink-muted); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.spd-evidence,.spd-confounders,.spd-excluded { margin:0; padding-left:20px; font-size:13px; line-height:1.6; }
.spd-evidence li,.spd-confounders li,.spd-excluded li { overflow-wrap:anywhere; }
.spd-provenance,.spd-provenance-fields { margin:0; color:var(--ink-muted); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
/* Alignment is a verdict, so it carries a word and a shape and not a tint alone. */
.spd-alignment { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 8px; margin:6px 0 0; font-size:13px; line-height:1.6; }
.spd-alignment-text { flex:1 1 18rem; overflow-wrap:anywhere; }
.spd-alignment[data-aligned="false"] { color:var(--state-warn-line); font-weight:650; }
/* THE TWO PHASES THAT ARE NOT A READING. Loading is drawn in the neutral inks —
   a panel mid-read is not broken — and only the error phase reaches for the
   error family. Both sit above the reading they caption. */
.spd-status { display:grid; gap:4px; border:1px solid var(--import-line); border-left:5px solid var(--import-line); border-radius:11px; padding:10px 13px; }
.spd-status-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 9px; margin:0; font-size:13px; line-height:1.55; }
.spd-status-word { font:750 12px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.spd-status-summary { flex:1 1 18rem; overflow-wrap:anywhere; }
.spd-status-detail { margin:0; color:var(--ink-muted); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.spd-status[data-phase="error"] { border-color:var(--state-error-line); border-left-color:var(--state-error-line); background:var(--state-error-wash); }
.spd-status[data-phase="error"] .spd-status-word { color:var(--state-error-line); }
/* The one state the panel is most often in on a real page: an analysis exists
   and no release has ever been recorded. It is marked, not decorated — the
   dashed edge repeats what the withheld block and the action already say. */
.spend-per-delivery[data-delivery-evidence="missing"] { border-left:5px solid var(--state-warn-line); }
/* The classified finding. Every classification gets the same box: a border that
   changed weight with the outcome would rank the outcomes a second time, in a
   language only a sighted reader can read, and the priority is already a word. */
.spd-finding { display:grid; gap:7px; border:1px solid var(--import-line); border-left:5px solid var(--import-accent); border-radius:11px; padding:11px 14px; }
.spd-finding[data-classification="invalid_period_alignment"],
.spd-finding[data-classification="insufficient_evidence"] { border-left-style:dashed; border-left-color:var(--state-warn-line); }
.spd-finding-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; margin:0; }
.spd-finding-class { font:750 12px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--import-ink); }
.spd-finding-priority { color:var(--ink-muted); font-size:12px; }
.spd-finding-headline { margin:0; font-size:14px; line-height:1.55; font-weight:700; overflow-wrap:anywhere; }
.spd-finding-rationale,.spd-finding-thresholds,.spd-finding-caveats { margin:0; padding-left:20px; font-size:12px; line-height:1.6; color:var(--ink-muted); }
.spd-finding-rationale li,.spd-finding-thresholds li,.spd-finding-caveats li { overflow-wrap:anywhere; }
.spend-per-delivery-live { margin:0; font-size:12px; color:var(--ink-muted); }

/* ---------------------------------------------------------------------------
   The one-page department handout.

   The sheet is the fix-pack section and nothing else: a second copy built for
   paper could describe a different department from the screen, so the page is
   isolated rather than duplicated. `visibility` rather than `display`, because
   it leaves the layout of every ancestor alone — only the section is made
   visible again, and its own `hidden` panels are opened by the rule below,
   which the script has already filled before the dialog opens.
   --------------------------------------------------------------------------- */
@media print {
  html[data-department-handout="printing"] body * { visibility:hidden; }
  html[data-department-handout="printing"] #department-fix-pack,
  html[data-department-handout="printing"] #department-fix-pack * { visibility:visible; }
  html[data-department-handout="printing"] #department-fix-pack {
    position:absolute; top:0; left:0; width:100%; margin:0; border:0; border-radius:0;
    padding:0; background:#fff; box-shadow:none;
  }
  /* The control that produced the sheet is not on the sheet. */
  html[data-department-handout="printing"] .fix-pack-print-control { display:none; }
  #department-fix-pack .evidence-disclosure-panel[hidden] { display:grid; }
  #department-fix-pack .evidence-disclosure-toggle { display:none; }
  /* Nothing a lead reads as one thought may straddle a page break, and the
     decision itself — question, action, value, confidence, provenance, roll-up
     — is one thought. What can spill to a second sheet is the audit trail
     below it, which is the right thing to spill. */
  @page { margin:14mm; }
  .fix-pack-lead { break-inside:avoid; }
  .fix-pack-metric,.fix-pack-action,.fix-pack-other,.fix-pack-privacy,
  .fix-pack-confidence-reason { break-inside:avoid; }
  .fix-pack-question { break-after:avoid; }
  .fix-pack-action { background:#fff; box-shadow:none; }
  /* Type steps down for paper: the numeral does not need 38px on a sheet held
     at reading distance, and every step below comes off the screen's own scale. */
  .fix-pack-action-figure { font-size:26px; }
  .fix-pack-metric-figure { font-size:19px; }
  /* The live region has already said this on screen; on paper it is the same
     sentence a second time, above the sentence it duplicates. */
  #department-fix-pack-live { display:none; }
}

/* ---------------------------------------------------------------------------
   The workspace shell.

   One destination on screen at a time. #1328: a closed destination carries
   `hidden` too — the only mechanism that takes it out of the accessibility tree
   and the tab order, which no rule here can do. `data-workspace-hidden` records
   whose hiding it is, so an empty panel is never revealed with its destination;
   this rule is the second channel. See src/finops-workspace-shell.js. */

[data-workspace-region][data-workspace-active="false"] { display:none; }

.workspace-switch { margin:18px 0 0; border:1px solid var(--panel-border); border-radius:12px; padding:14px 16px; background:#fff; }
.workspace-switch-note { margin:6px 0 0; max-width:70ch; color:var(--ink-muted); font-size:13px; line-height:1.55; }
/* #819: no `.workspace-switch-list` or `.workspace-switch-door`. The shell's copy
   of the four doors is gone; the one list is the rail's, styled as
   `.workspace-dest` above, and its open state is marked there. */

/* WHICH SCREEN IS OPEN — the heading the keyboard is handed on every change, on
   steps this sheet ships. Painted from no destination's data, so it draws the
   same loading, empty, and errored. */
.workspace-screen { margin:12px 0 0; border-top:1px solid var(--panel-border); padding:10px 0 0; }
.workspace-screen-title { margin:2px 0 0; font-size:17px; line-height:1.3; overflow-wrap:anywhere; }
.workspace-screen-title:focus-visible { outline:3px solid var(--focus-ring); outline-offset:4px; }
.workspace-screen-question { margin:3px 0 0; max-width:62ch; color:var(--ink-muted); font-size:13px; line-height:1.55; overflow-wrap:anywhere; }

.workspace-context { margin:14px 0 0; border:1px solid var(--panel-border); border-left:3px solid var(--ink,#22221f); border-radius:10px; padding:12px 16px; background:#fff; }
.workspace-context-list { display:grid; gap:8px; margin:8px 0 0; }
.workspace-context-pair { display:grid; gap:2px; }
.workspace-context-pair dt { color:var(--ink-muted); font:700 10px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.workspace-context-pair dd { margin:0; max-width:70ch; font-size:13px; line-height:1.55; overflow-wrap:anywhere; }


@media print {
  /* Paper has no controls, so a printed page is the whole page: every
     destination is restored, and the switch that selected one is not on the
     sheet. Only what the shell held back: a panel hidden by its own empty state
     says so on the same attribute, and prints nothing worth a page. */
  [data-workspace-region][data-workspace-hidden="shell"] { display:block; }
  #finops-workspace-switch { display:none; }
  .workspace-context { break-inside:avoid; }
  /* The recommendation and its grounds travel onto paper together. The
     disclosure prints in whatever state the reader left it: a closed
     `<details>` is hidden by a UA rule no author sheet beats, and the four
     facts that matter — impact, confidence, provenance, boundary — are outside
     it precisely so nothing load-bearing depends on that. */
  .next-step { break-inside:avoid; }
}

/* --------------------------------------------------------------------------
   WHERE DO I START THIS MONTH? — one recommendation, one primary action.

   Same silhouette as the destination block above it, because it is the same
   kind of thing: one ranked answer, its grounds beside it, its derivation
   behind a disclosure. The trust row is a definition list rather than a set of
   tiles — four labelled facts read in order, not four metrics to compare — so
   nothing here invites the eye to rank them against each other.

   `data-confidence` is the third channel at most. The word is in the text and
   a shape is beside it, so the level survives greyscale, a screen reader, and
   a printed page; the wash only agrees with what the sentence already says.
   -------------------------------------------------------------------------- */
.next-step { display:grid; gap:14px; margin:0 0 22px; border:1px solid var(--import-line); border-left:5px solid var(--import-accent); border-radius:13px; padding:clamp(16px,2.6vw,22px); background:#fbfcfb; }
.next-step[data-confidence="low"] { border-color:var(--state-warn-line); border-left-color:var(--state-warn-ink); border-style:dashed; border-left-style:solid; background:var(--state-warn-wash); }
.next-step-head { display:grid; gap:5px; }
.next-step-head h2,
.next-step-head h3 { max-width:30ch; margin:0; font-size:clamp(19px,2.5vw,25px); line-height:1.2; }
.next-step-head .eyebrow { margin:0; }
#finops-next-step-body { display:grid; justify-items:start; gap:12px; }
.next-step-headline { margin:0; max-width:62ch; color:var(--ink); font-size:clamp(15px,1.8vw,17px); font-weight:700; line-height:1.4; overflow-wrap:anywhere; }
/* The one primary action. There is deliberately no second control in here: a
   screen that answers "what do I do first" and then offers a choice has handed
   the decision back to the reader it just made it for. */
.next-step-primary { display:inline-flex; align-items:baseline; gap:8px; min-height:44px; border:1px solid var(--import-accent); border-radius:9px; padding:11px 16px; background:var(--import-accent); color:#fff; font-size:14px; font-weight:750; text-decoration:none; }
.next-step-primary:hover { background:#25493d; }
.next-step-primary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.next-step[data-confidence="low"] .next-step-primary { border-color:var(--state-warn-ink); background:var(--state-warn-ink); }
/* The trust surface: impact, confidence, provenance, boundary. On the first
   screen, unconditionally, because the grounds for a figure are not detail. */
.next-step-trust { display:grid; gap:7px; margin:0; width:100%; }
.next-step-term { margin:0; color:var(--ink-muted); font:700 11px/1.5 ui-monospace,monospace; letter-spacing:.04em; text-transform:uppercase; }
.next-step-detail { margin:0 0 5px; max-width:80ch; color:var(--ink); font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.next-step-unknowns { display:grid; gap:6px; width:100%; border:1px dashed var(--state-warn-line); border-radius:9px; padding:12px 14px; background:var(--state-warn-wash); color:var(--state-warn-ink); }
.next-step-unknowns-title { margin:0; font-size:12px; font-weight:750; }
.next-step-unknown-list { display:grid; gap:4px; margin:0; padding-left:18px; font-size:12.5px; line-height:1.6; }
/* The same disclosure the recurring review ships: a summary over a definition
   list. Three facts only — which state matched, the rule that made it win, and
   how many candidates it outranked. No runner-up gets a widget. */
.next-step-details>summary { list-style:none; cursor:pointer; color:var(--import-ink); font-size:13px; font-weight:700; }
.next-step-details>summary::-webkit-details-marker { display:none; }
.next-step-details>summary::before { content:"▸ "; font-weight:750; }
.next-step-details[open]>summary::before { content:"▾ "; }
.next-step-details>summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.next-step-facts { display:grid; gap:6px; margin:11px 0 0; }
.next-step-facts dt { margin:0; color:var(--ink-muted); font:700 11px/1.5 ui-monospace,monospace; letter-spacing:.04em; text-transform:uppercase; }
.next-step-facts dd { margin:0 0 4px; max-width:80ch; color:var(--ink); font-size:12.5px; line-height:1.6; }

/* The review-and-correct panel, opened from the gradeability line.

   Two layout rules matter and the rest is type: the query text WRAPS rather
   than truncating — a reviewer deciding whether a class is right has to read the
   whole prompt, and an ellipsis hides the words a class turns on — and every row
   is a single grid column, so at a phone width the text, the classifier's
   reading and the two controls stack instead of scrolling sideways. Nothing here
   is a fixed width and nothing sets `overflow:hidden`.

   `--surface` was never declared on this page — only src/paint/paint.css
   defines it, and /evolution.html does not link that sheet — so every
   `background:var(--surface)` below computed to `transparent` and the panel,
   its entry point, its buttons and its select had no card surface at all. They
   are `#fff` now, which is the value every other card on this sheet already
   ships, and it is what the contrast ratios on the state chips below are
   measured against. No new token, and no new hue. */
.stand-review-open { justify-self:start; margin:2px 0 0; border:1px solid var(--import-line); border-radius:8px; padding:8px 13px; background:#fff; color:var(--import-ink); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.stand-review-open:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.query-review { display:grid; gap:12px; margin:10px 0 0; border:1px solid var(--import-line); border-radius:11px; padding:14px; background:#fff; }
.query-review-title { margin:0; font-size:14px; }
.query-review-intro { margin:0; max-width:80ch; color:var(--ink-muted); font-size:12.5px; line-height:1.6; }
/* Meta text on the existing caption rung, not a heading and not a figure. */
.query-review-position { display:flex; flex-wrap:wrap; gap:2px 14px; margin:0; color:var(--ink-muted); font:700 11px/1.5 ui-monospace,monospace; letter-spacing:.04em; text-transform:uppercase; }
.query-review-position-done { color:#4a4a44; }
.query-review-rows { display:grid; gap:11px; margin:0; padding:0; list-style:none; }
.query-review-row { display:grid; gap:7px; border:1px solid var(--import-line); border-radius:9px; padding:11px 12px; }
/* The roving row is focused programmatically, so it takes `:focus` and not
   `:focus-visible` — several engines withhold `:focus-visible` from a scripted
   focus() on a non-input element, and a roving item with no ring is the bug this
   whole pattern is supposed to fix. Same token as every other control here. */
.query-review-row:focus { outline:3px solid var(--focus-ring); outline-offset:3px; }
.query-review-cell { display:grid; gap:7px; }
.query-review-actions { display:flex; flex-wrap:wrap; align-items:center; gap:7px 10px; }
/* The three row states, in three channels. The WORD is first and is inside the
   row's accessible name; the SILHOUETTE is second — dashed outline for the
   classification that has not moved, filled wash for the two a human just made,
   and a left rule on the corrected one — and the tint is third. Measured against
   the #fff panel above: chip text 8.9:1 (still unclassified), 8.8:1 (agreed),
   8.1:1 (corrected); the dashed edge 5.1:1 and the corrected rule 3.9:1, both
   over the 3:1 floor for a non-text element that carries meaning. The
   silhouettes follow the foundations card: outline = static classification,
   filled wash = live signal. No new value is introduced. */
.query-review-state { flex:none; display:inline-flex; align-items:baseline; border-radius:5px; padding:2px 9px; font:750 10px/1.6 ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
.query-review-state[data-state="unreviewed"] { border:1px dashed var(--ink-muted); color:#4a4a44; }
.query-review-state[data-state="agreed"] { background:var(--import-wash); color:var(--import-ink); }
.query-review-state[data-state="corrected"] { border-left:3px solid var(--state-warn-line); background:var(--state-warn-wash); color:var(--state-warn-ink); }
/* `overflow-wrap:anywhere` and not `nowrap`: an export can carry one unbroken
   400-character token, and it must reflow rather than widen the page. */
.query-review-text { margin:0; max-width:80ch; color:var(--ink); font-size:13px; line-height:1.6; overflow-wrap:anywhere; white-space:pre-wrap; }
.query-review-read { display:flex; flex-wrap:wrap; gap:5px 14px; margin:0; color:var(--ink-muted); font-size:12px; line-height:1.6; }
.query-review-signal { overflow-wrap:anywhere; }
.query-review-agree, .query-review-revert { justify-self:start; border:1px solid var(--import-line); border-radius:8px; padding:6px 11px; background:#fff; color:var(--import-ink); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
/* Reached with Left/Right rather than Tab, so they are focused by script too. */
.query-review-agree:focus, .query-review-revert:focus-visible, .query-review-select:focus { outline:3px solid var(--focus-ring); outline-offset:3px; }
.query-review-label { color:var(--ink-muted); font:700 11px/1.5 ui-monospace,monospace; letter-spacing:.04em; text-transform:uppercase; }
.query-review-select { max-width:100%; border:1px solid var(--import-line); border-radius:8px; padding:7px 9px; background:#fff; color:var(--ink); font:inherit; font-size:13px; }
.query-review-figures { display:flex; flex-wrap:wrap; gap:5px 14px; margin:0; color:var(--ink); font-size:13px; font-weight:700; line-height:1.6; }
.query-review-action { flex-basis:100%; font-weight:600; overflow-wrap:anywhere; }
.query-review-provenance { margin:0; color:var(--import-ink); font-size:12.5px; font-weight:700; }
.query-review-live { margin:0; color:var(--ink-muted); font-size:12px; }

/* Provider-native local export intake (#930). Three treatments and nothing
   decorative: the drop target has to read as a target before anything is
   dragged over it, the finding's three slots have to read in answer order at
   any width, and the trust signals have to sit UNDER the answer rather than
   beside it — no alert colour, no badge, no second focal point competing with
   the figure the reader came for. */
.provider-native-import { margin:16px 0; border:1px solid #d5d8d2; border-radius:10px; padding:14px; background:#fbfcfa; }
.provider-native-import>h3,.provider-native-import>p { margin:0 0 8px; }
/* The one import affordance (#958). The dragging state is a solid border AND a
   word painted into .import-drop-state, never a tint on its own, so it survives
   a high-contrast theme and a reader who cannot separate the two borders. The
   zone is a single column at every width; nothing in it needs a second one. */
.import-drop { display:grid; gap:8px; margin:0 0 14px; border:2px dashed var(--import-line,#b9bdb4); border-radius:10px; padding:14px; background:#fff; }
.import-drop[data-dragging="true"] { border-style:solid; border-width:3px; background:var(--import-wash,#eef3ee); }
/* #1064: the check zone is the side path off the picker it sits beside, and has
   to read as one. A solid tinted edge against the picker's dashed white — never
   the only carrier, since its own title says what it is and its verdict says it
   commits to nothing. */
.import-drop[data-check] { margin:4px 0 0; border-style:solid; border-color:var(--import-ink,#1d2016); background:var(--import-wash,#eef3ee); }
.import-drop-title { margin:0; font-size:15px; font-weight:700; }
.import-drop-mark { margin-right:6px; }
.import-drop-instruction { margin:0; max-width:70ch; color:var(--ink-muted); font-size:13px; overflow-wrap:anywhere; }
/* #997: the two declared files as one path. The present/missing state is in the
   state word and in aria-disabled; the rule below is a fourth channel on top of
   those, never the only one, so greyscale and a failed stylesheet both keep it.
   The list wraps to one column under 640px with the rest of the panel. */
.import-slots-title { margin:4px 0 0; font-size:13px; font-weight:700; }
.import-slots { display:grid; gap:8px; margin:0; padding:0; list-style:none; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.import-slot { border:1px solid var(--import-line,#b9bdb4); border-left-width:4px; border-radius:8px; padding:8px 10px; background:#fff; }
.import-slot[data-state="present"] { border-left-color:var(--ink,#1d2016); background:var(--import-wash,#eef3ee); }
.import-slot[data-state="missing"] { border-left-style:dashed; }
.import-slot-label { margin:0; font-size:13px; font-weight:700; }
.import-slot-state { font-weight:650; }
.import-slot[data-state="missing"] .import-slot-state { font-style:italic; }
.import-slot-unlocks { margin:4px 0 0; max-width:60ch; color:var(--ink-muted); font-size:12px; }
/* #1062: what to ask a billing owner for, per recognized provider, standing
   directly above the picker that asks for it. Open prose in a plain list on
   purpose — a disclosure here would be readable to a test harness and invisible
   to the reader who needs it most. The card grid, the border and the type scale
   are .import-slots' above, so the two rows in this zone read as one family
   rather than as a section bolted into it. Required and optional columns are
   separated by their labels FIRST; the solid and dashed chip edges are a second
   channel on top of the words, never the only one.
   #1066 demotes this section rather than folding it: it now follows the check
   zone whose leading question is 15px, and its own title drops to the eyebrow
   role the scale already carries for section labels — mono, 11px, uppercase,
   #65717d at 4.99:1 on this white. No new size and no new level: the heading is
   still an h3, still open, still deep-linkable from the refusal above it. */
.provider-readiness { display:grid; gap:8px; margin:4px 0 0; }
.provider-readiness-title { margin:0; color:#65717d; font:700 11px/1.4 ui-monospace,monospace; letter-spacing:.11em; text-transform:uppercase; }
.provider-readiness-lead { margin:0; max-width:70ch; color:var(--ink-muted); font-size:12px; line-height:1.5; }
.provider-readiness-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.provider-readiness-item { display:grid; gap:5px; align-content:start; border:1px solid var(--import-line,#b9bdb4); border-radius:8px; padding:8px 10px; background:#fff; }
.provider-readiness-name { margin:0; font-size:13px; font-weight:700; }
.provider-readiness-format { color:var(--ink-muted); font-weight:650; }
.provider-readiness-where,.provider-readiness-when,.provider-readiness-columns { margin:0; max-width:60ch; color:var(--ink-muted); font-size:12px; line-height:1.5; }
.provider-readiness-key { display:block; color:var(--ink,#1d2016); font:750 10px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.provider-readiness-columns code { display:inline-block; margin:2px 4px 0 0; border:1px solid var(--import-line,#b9bdb4); border-radius:999px; padding:1px 7px; font-size:11px; overflow-wrap:anywhere; }
.provider-readiness-columns[data-kind="required"] code { border-color:var(--import-ink); color:var(--import-ink); }
.provider-readiness-columns[data-kind="optional"] code { border-style:dashed; }
.provider-readiness-none { font-style:italic; }
.local-import button.provider-readiness-download { min-height:34px; margin:4px 0 0; justify-self:start; border-color:var(--import-line); padding:5px 11px; font-size:12px; }
.local-import button.provider-readiness-download:hover { border-color:var(--import-ink); color:var(--import-ink); }
/* The literacy card's reason for having no letter. Same weight as the score
   line it stands in for, so it is not read as a footnote to a grade. */
.score-input-need { margin:8px 0 0; max-width:60ch; font-size:13px; font-weight:600; }
.import-drop-state:empty { display:none; }
.import-drop-state { margin:0; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; }
/* #960: the site focus token on the ZONE, not only the control in it — 6.7:1 on
   the idle white, 6.0:1 on the dragging wash — and the edge goes solid, so focus
   is a shape change too. */
.import-drop:has(input:focus-visible) { border-style:solid; border-color:var(--focus-ring); outline:3px solid var(--focus-ring); outline-offset:3px; }
/* #1066: the verdict is where the check sends the keyboard, so the ring has to
   be visible on the verdict itself and not only on the controls around it. Plain
   :focus and not :focus-visible — this focus is moved by script, and a browser
   that decides the last input was a pointer would otherwise draw nothing at the
   one moment the reader needs to be told where they now are. Same token, same
   3px, as the zone rule above it. */
.import-reason[tabindex]:focus { outline:3px solid var(--focus-ring); outline-offset:3px; }
.import-reason:empty { display:none; }
.import-reason { margin:0; max-width:70ch; border-left:5px solid #d5d8d2; padding:8px 10px; font-size:13px; overflow-wrap:anywhere; }
.import-reason-text { margin-left:6px; }
.import-reason[data-state="recognized"] { border-left-color:var(--ok-line,#2f6b45); background:#f0f6f1; }
/* An unsettled recognition bands like the refusal, not like a clean pass; its
   chip carries the same meaning as a mark and a word. */
.import-reason[data-state="unrecognized"],.import-reason[data-band="unsettled"] { border-left-color:var(--warn-line,#a8642a); background:#fdf6ef; }
.stand-import-source { margin:4px 0 0; font-size:13px; font-weight:700; overflow-wrap:anywhere; }
.stand-import-source[hidden] { display:none; }
@media (max-width:640px) {
  .import-drop { padding:12px; }
  .import-drop input[type="file"] { max-width:100%; }
}
.provider-native-field { display:grid; gap:4px; margin:0; font-size:12px; font-weight:700; }
.provider-native-field input:focus-visible,.provider-native-field select:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
/* The answer block. The left rule carries the state a second time, after the
   words in the metric sentence itself, never instead of them. */
.provider-native-finding { border:1px solid #d5d8d2; border-left-width:5px; border-radius:8px; padding:12px; background:#fff; }
.provider-native-finding p { margin:0 0 6px; max-width:80ch; overflow-wrap:anywhere; }
.provider-native-finding p:last-child { margin-bottom:0; }
.provider-native-question { font-weight:700; }
.provider-native-metric { font-size:15px; line-height:1.55; }
.provider-native-action { font-weight:700; }
.provider-native-finding[data-state="empty"] { border-left-color:#b9bdb4; }
.provider-native-finding[data-state="answered"] { border-left-color:#2f7d4f; }
.provider-native-finding[data-state="answered"][data-metric="none"],.provider-native-finding[data-state="provisional"] { border-left-color:#a8710f; }
.provider-native-finding[data-state="unrecognized"] { border-left-color:#a4322b; }
.provider-native-trust { margin:10px 0 0; padding-left:18px; color:var(--ink-muted); font-size:12.5px; line-height:1.6; }
.provider-native-trust li { overflow-wrap:anywhere; }
.provider-native-trust:empty { display:none; }
.provider-native-evidence { margin:12px 0 0; border:1px solid #e0e2dd; border-radius:8px; padding:10px 12px; background:#fff; }
.provider-native-evidence>summary { cursor:pointer; font-weight:700; }
.provider-native-evidence-lead { margin:8px 0 6px; font-size:12.5px; }
.provider-native-rates,.provider-native-recognition { margin:0 0 8px; padding-left:20px; font-size:12.5px; line-height:1.6; }
.provider-native-rates li,.provider-native-recognition li { overflow-wrap:anywhere; }
.provider-native-rates li { font-variant-numeric:tabular-nums; }
/* One column under 640px: the controls stack in the order they are read, and
   the drop target keeps its full width so it stays a target on a phone. */
@media (max-width:640px) {
  .provider-native-field input,.provider-native-field select { max-width:100%; }
  .provider-native-metric { font-size:14px; }
}
/* ---------------- expanded-provider import evidence (#931) -----------------

   One chip vocabulary for the recognition score and the provider-native
   intake. Two silhouettes, from the Claude Design foundations card:

     FILLED WASH = a dynamic signal   — how this file scored, just now
     OUTLINE     = a classification   — which contract it was read against

   Colour is the fourth carrier, never the first: every chip ships a word, a
   value, and a mark off the circle ramp already documented at the top of this
   file, so deleting the tint loses nothing. The four tone families are the
   ones this stylesheet already declares — no hue is introduced here.

   TYPE follows the foundations card's "metadata · timestamps · statuses — mono
   ink-3" role: chips are mono at caption size, and the figures beside them are
   tabular so two chips stacked on a phone still line up.

   NOTHING BELOW PINS A CONTENT-BEARING BOX TO A PIXEL WIDTH. Chips wrap, rows
   are flex with `min-width:0`, and every long string — a provider name, a
   model name, a very large or negative amount — breaks with
   `overflow-wrap:anywhere` rather than pushing a fixed track off screen. */
.import-chip { display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:1px 6px; min-width:0; max-width:100%; border:1px solid transparent; border-radius:5px; padding:3px 8px; font-family:ui-monospace,Menlo,monospace; font-size:11.5px; font-weight:700; line-height:1.5; overflow-wrap:anywhere; }
.import-chip-shape { flex:none; }
.import-chip-value { font-weight:600; font-variant-numeric:tabular-nums; }
.import-chip[data-kind="classification"] { border-color:var(--ink-muted); background:transparent; color:var(--ink-muted); }
.import-chip[data-kind="signal"][data-tone="neutral"] { border-color:var(--ink-muted); background:#f7f7f5; color:var(--ink-muted); }
.import-chip[data-kind="signal"][data-tone="ok"] { border-color:var(--import-accent); background:var(--import-wash); color:var(--import-ink); }
.import-chip[data-kind="signal"][data-tone="warn"] { border-color:var(--state-warn-line); background:var(--state-warn-wash); color:var(--state-warn-ink); }
.import-chip[data-kind="signal"][data-tone="error"] { border-color:var(--state-error-line); background:var(--state-error-wash); color:var(--state-error-ink); }
/* Provider, then confidence, then what is uncertain, then the control that
   resolves it. The sentence and the button take a full row of their own so a
   long provider name never squeezes the action out of sight. */
.provider-native-status { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; min-width:0; margin:12px 0 8px; }
.provider-native-uncertainty { flex-basis:100%; min-width:0; margin:0; color:var(--ink-muted); font-size:12.5px; line-height:1.55; overflow-wrap:anywhere; }
.provider-native-status[data-status="rejected"] .provider-native-uncertainty { color:var(--state-error-ink); }
.provider-native-resolve { flex:0 1 auto; min-width:0; min-height:44px; border:1px solid var(--import-accent); border-radius:8px; padding:6px 14px; background:#fff; color:var(--import-ink); font-size:12.5px; font-weight:700; line-height:1.4; text-align:left; cursor:pointer; overflow-wrap:anywhere; }
.provider-native-resolve:hover { background:var(--import-wash); }
.provider-native-resolve:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
/* The recognition reading: chips, the verdict sentence, what is uncertain, the
   folded evidence, then the action. */
.export-recognition-chips { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; min-width:0; margin:0 0 8px; }
.export-recognition-uncertainty { min-width:0; margin:0 0 8px; color:var(--state-warn-ink); font-size:12.5px; line-height:1.55; overflow-wrap:anywhere; }
.export-recognition-result[data-status="rejected"] .export-recognition-uncertainty { color:var(--state-error-ink); }
.export-recognition-detail { margin:0 0 8px; border-top:1px solid var(--panel-border); padding:6px 0 0; }
.export-recognition-detail-summary { display:flex; align-items:center; min-width:0; min-height:44px; font-size:12.5px; font-weight:700; line-height:1.45; cursor:pointer; overflow-wrap:anywhere; }
.export-recognition-detail-summary:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.export-recognition-detail .export-recognition-evidence { margin:4px 0 0; }
@media (max-width:640px) {
  /* The action stops sharing a row with a chip: at this width the reader is
     scrolling, and a control on the end of a wrapped row is a control they
     scroll past. Nothing here is a pixel width — the button takes the row. */
  .provider-native-resolve { flex-basis:100%; }
}

/* THE ORG-UNIT NAME FIELD (#1007). One per ranked row inside the drill-down
   disclosure, built by finops-first-run-view.js. Everything here is layout; the
   focus ring is the page's own 3px token, because a field a keyboard reader
   cannot see themselves standing in is a field they cannot use. */
.first-run-unit-label { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:.35rem 0 0; }
.first-run-unit-label-name { font-size:.78rem; color:var(--muted); }
.first-run-unit-label-input { flex:1 1 12rem; min-width:0; padding:.3rem .45rem; font:inherit; font-size:.85rem; }
.first-run-unit-label-help { flex-basis:100%; font-size:.72rem; color:var(--muted); }
.first-run-unit-label-input:focus-visible,.first-run-unit-label-save:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }