/* 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.

   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;
}
.nav-evolution { display:inline-flex; align-items:center; gap:7px; }
.nav-evolution::before { content:""; width:6px; height:6px; border-radius:2px; background:#1baf7a; }

.finops-hero { display:grid; grid-template-columns:minmax(0,1fr) 280px; align-items:end; gap:48px; padding:clamp(60px,8vw,104px) 0 56px; }
.finops-hero h1 { margin-bottom:22px; }
/* Scoped to the copy column: the score card is also a direct child of the hero,
   and a `.finops-hero>div>p` rule would out-specify the hero number's own size. */
.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; }

/* Hero number: the "are we wasting money" answer, readable in one glance. */
.score-card { display:grid; gap:6px; 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; }
.score-peer { margin:2px 0 0; color:var(--ink-muted); font:600 11px/1.5 ui-monospace,monospace; }

.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-boundary { display:flex; align-items:baseline; gap:8px 12px; grid-column:1/-1; border-top:1px solid #cbdcd3; padding-top:16px; font-size:12px; line-height:1.5; }
.proof-point-boundary strong { flex:none; color:#245643; font:750 10px/1.4 ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; }
.proof-point-boundary span { color:#4c5650; }
.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; }
.kpi-alert .kpi-value { color:#a5322f; }
.kpi-note { margin:8px 0 0; color:var(--ink-muted); font-size:12px; line-height:1.5; }

.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); }
.local-import { border-color:#9eb9aa; background:linear-gradient(145deg,#f7fbf8,#fff 55%); }
.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; }
.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; }
.local-import-controls { display:flex; 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. */
.local-import button.local-example-action { border-color:var(--import-accent); background:var(--import-accent); color:#fff; }
.local-import button.local-example-action:hover { background: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; }

/* 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; }

/* 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); }
.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[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; }
.local-finding-facts .local-impact dd[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); }
.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 landing surface: the question first, then the one number that answers it. */
.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; }
.local-lead-finding h4 { max-width:760px; margin:6px 0 0; font-size:clamp(21px,3.2vw,29px); line-height:1.2; letter-spacing:-.025em; }
.local-lead-metric { margin:14px 0 0; color:#8a2b2b; font-size:clamp(22px,3.4vw,30px); font-weight:750; letter-spacing:-.025em; line-height:1.2; overflow-wrap:anywhere; }
.local-lead-driver { margin:8px 0 0; font-size:14px; line-height:1.5; }
.local-lead-next { margin-top:18px; padding-top:16px; border-top:1px solid #d8e2dc; }
.local-lead-action { margin:5px 0 0; font-size:14px; font-weight:700; line-height:1.5; }
.local-lead-action[data-available="false"] { color:var(--state-warn-ink); font-weight:400; }
.local-lead-finding[data-state="unavailable"] .local-lead-metric { color:var(--state-warn-ink); font-size: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-impact dd { color:#8a2b2b; font-size:24px; letter-spacing:-.025em; }
.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; }
.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; }
.local-disclosures ul { margin:12px 0 0; padding-left:20px; font-size:12px; line-height:1.55; }
[data-sample-analysis][hidden] { display:none !important; }
.finops-load-state { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 18px; border:1px solid #d1cfc7; border-left:5px solid #6f6f69; border-radius:11px; padding:14px 16px; 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[data-state="error"] { border-color:#b4453a; background:#fdf4f3; color:#6f2821; }
.finops-load-state[data-state="ready"] { border-left-color:#315f50; }
.finops-load-state button { flex:none; min-height:42px; border:1px solid currentColor; border-radius:8px; padding:9px 13px; background:#fff; color:#6f2821; font-weight:750; cursor:pointer; }
.finops-load-state button:focus-visible { outline:3px solid #2a78d6; outline-offset:3px; }
.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-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; }
.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; }
.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 { grid-template-columns:1fr; gap:32px; }
  .score-card { width:min(100%,320px); }
  .proof-point { grid-template-columns:1fr; }
  .proof-point-boundary,.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) {
  .finops-load-state { align-items:stretch; flex-direction:column; }
  .proof-point-facts { grid-template-columns:1fr; }
  .proof-point-boundary { align-items:start; flex-direction:column; }
  .local-import-heading,.local-import-controls,.local-result-heading { align-items:stretch; flex-direction:column; }
  .import-stage { flex:1 1 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; }
}