:root { --sac-ink:#172a2b; --sac-teal:#087f76; --sac-mint:#dff4ee; --sac-warm:#fff7e8; --sac-red:#fdeceb; }
.sac-hero { max-width:760px; padding:72px 0 32px; }
.sac-hero h1 { max-width:14ch; margin:8px 0 18px; color:var(--sac-ink); font-size:clamp(40px,7vw,72px); line-height:.98; letter-spacing:-.055em; }
.sac-hero > p:last-child { max-width:62ch; margin:0; color:#555550; font-size:17px; line-height:1.6; }

/* The controls sit outside the live region: it is replaced on every read, and a
   control replaced while focused takes the visitor's place with it. */
.sac-evidence { margin-bottom:24px; padding:24px 28px; border:1px solid #cfcdc5; border-radius:16px; background:#f7f6f2; }
.sac-evidence h2 { margin:0 0 8px; color:var(--sac-ink); font-size:20px; letter-spacing:-.02em; }
.sac-evidence p { max-width:70ch; margin:0; color:#55554f; font-size:14px; line-height:1.55; }
.sac-evidence-controls { display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; margin-top:18px; }
.sac-field { display:flex; flex-direction:column; gap:6px; min-width:min(320px,100%); }
.sac-field label { color:var(--sac-ink); font-size:13px; font-weight:800; }
.sac-evidence input[type="file"] { max-width:100%; font-size:14px; }
.sac-evidence button { min-height:44px; padding:0 16px; border:1px solid var(--sac-ink); border-radius:8px; background:#fff; color:var(--sac-ink); font-size:14px; font-weight:800; cursor:pointer; }
.sac-evidence button:disabled { border-color:#c9c7c0; color:#8b8b85; cursor:not-allowed; }
.sac-evidence-status:empty { display:none; }
.sac-evidence-status { margin-top:14px; color:#285d59; font-size:14px; font-weight:700; }
.sac-evidence input:focus-visible,.sac-evidence button:focus-visible,.sac-details summary:focus-visible,.sac-disclosure-trigger:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }

#savings-action-center { padding-bottom:80px; }
.sac-focus,.sac-state,.sac-rejections { overflow:hidden; border:1px solid #cfcdc5; border-radius:20px; background:#fff; box-shadow:0 18px 50px rgba(27,50,48,.08); }
.sac-heading { padding:34px 36px 8px; }
.sac-heading h2 { max-width:22ch; margin:8px 0 14px; color:var(--sac-ink); font-size:clamp(26px,3.6vw,40px); line-height:1.08; letter-spacing:-.035em; }
.sac-kicker { margin:0; color:var(--sac-teal); font:800 11px/1.4 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.sac-headline { max-width:62ch; margin:0; padding:12px 14px; border-radius:10px; background:var(--sac-warm); color:#765616; font-size:16px; font-weight:700; line-height:1.5; }
.sac-headline[data-state="verified"] { background:var(--sac-mint); color:#22634f; }
.sac-headline[data-state="missed"] { background:var(--sac-red); color:#8a2d24; }
.sac-headline[data-state="demo"] { background:#eeede7; color:#4b4b45; }
.sac-metric { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin:0; padding:24px 36px; border-block:1px solid #dedcd5; }
.sac-metric-label { flex-basis:100%; color:#71716a; font:750 10px/1.4 ui-monospace,monospace; letter-spacing:.07em; text-transform:uppercase; }
.sac-metric-value { color:var(--sac-ink); font-size:clamp(30px,5vw,46px); font-weight:800; letter-spacing:-.03em; overflow-wrap:anywhere; }
.sac-metric-comparison { color:#55554f; font-size:15px; }
/* The recommended action is the primary element on this surface, and it wins on
   all three channels at once: it is first in the DOM and first on screen, it is
   the largest type after the question, and it is the only block carrying a wash.
   The metric below it is deliberately stepped down one size from where it sat
   when it led the page — same scale, one step, no new value. */
.sac-decision { padding:28px 36px; background:var(--sac-mint); }
.sac-decision h3 { margin:8px 0; color:var(--sac-ink); font-size:clamp(26px,3.6vw,40px); font-weight:800; line-height:1.1; letter-spacing:-.025em; }
.sac-decision > p:last-child { max-width:60ch; margin:0; line-height:1.55; }
/* The kicker's teal is 4.25:1 on the mint wash — under AA for 11px text, which
   is what it is. On the same wash the shipped verified ink is 6.17:1, so the
   decision block uses that one. This is a pre-existing pairing, corrected here
   because this block is now the primary element on the surface. */
.sac-decision .sac-kicker { color:#22634f; }
.sac-journey .sac-metric-value { font-size:clamp(23px,3.4vw,30px); font-weight:750; }

/* The way back. It sits above the hero so it is the first thing in the content
   landmark, and it is an ordinary link — a reader never needs the back button
   to leave this view. */
.sac-return { padding:20px 0 0; }
.sac-return-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; border-radius:9px; padding:0 12px 0 10px; color:var(--sac-ink); font-size:14px; font-weight:750; text-decoration:underline; text-underline-offset:4px; }
.sac-return-link:hover { background:#eeede7; }
.sac-return-link:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.sac-return-shape { font:800 14px/1 ui-monospace,monospace; }

/* The heading is the transition's focus target, not a tab stop. A mouse click
   near it must not leave a ring parked on the whole review. */
.sac-heading h2:focus { outline:none; }
.sac-heading h2:focus-visible { outline:3px solid var(--focus-ring); outline-offset:4px; }

/* ---------------------------------------------------------------------------
   Signals.

   The design mirror's chip rule, applied literally: a filled wash for a dynamic
   signal (impact, confidence, verification all move when the evidence moves), a
   neutral outline for a static classification (provenance and department are
   what this review is, not how it is doing).

   Colour is the last channel and never the only one. Each chip carries the name
   of the thing it reports, the value in words, and a glyph whose shape repeats
   the direction — ▼ ▲ = for impact, ● ◐ ○ for the confidence bands, ✓ ! for
   verification. A signal with no evidence behind it is drawn dashed and says
   so in its value; it is never left blank or tinted into looking answered.
   --------------------------------------------------------------------------- */
.sac-signals { display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:20px 36px 4px; list-style:none; }
.sac-signal { min-width:0; }
.sac-chip { display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; max-width:100%; border:1px solid transparent; border-radius:8px; padding:8px 12px; background:#eeede7; color:#4b4b45; }
.sac-chip-shape { flex:none; font:800 11px/1.4 ui-monospace,monospace; }
.sac-chip-label { flex:none; font:750 10px/1.4 ui-monospace,monospace; letter-spacing:.07em; text-transform:uppercase; }
.sac-chip-value { min-width:0; font-size:14px; font-weight:700; line-height:1.4; overflow-wrap:anywhere; }
.sac-chip[data-tone="good"] { background:var(--sac-mint); color:#22634f; }
.sac-chip[data-tone="caution"] { background:var(--sac-warm); color:#765616; }
.sac-chip[data-tone="adverse"] { background:var(--sac-red); color:#8a2d24; }
.sac-chip[data-silhouette="outline"] { border-color:#8b8b85; background:#fff; color:#55554f; }
/* Not measured is its own silhouette, not a paler version of measured. */
.sac-chip[data-known="false"] { border-style:dashed; border-color:#8b8b85; background:#fff; color:#55554f; }

/* ---------------------------------------------------------------------------
   Supporting evidence.

   Subordinate by grouping and by label, not only by size: one named region, one
   sentence saying what it is for, a recessed ground, and a rule down its inside
   edge tying the panels to each other rather than to the decision above.
   --------------------------------------------------------------------------- */
.sac-support { margin-top:24px; border-top:1px solid #dedcd5; padding:24px 36px 32px; background:#f7f6f2; }
.sac-support-title { margin:0; color:#55554f; font:750 10px/1.4 ui-monospace,monospace; letter-spacing:.07em; text-transform:uppercase; }
.sac-support-note { max-width:74ch; margin:8px 0 16px; color:#55554f; font-size:14px; line-height:1.55; }
.sac-disclosure { border-top:1px solid #dedcd5; }
.sac-disclosure:last-of-type { border-bottom:1px solid #dedcd5; }
.sac-disclosure-trigger { display:flex; align-items:center; flex-wrap:wrap; gap:10px; width:100%; min-height:48px; border:0; padding:12px 0; background:none; color:var(--sac-ink); font-size:16px; font-weight:800; text-align:left; cursor:pointer; }
.sac-disclosure-shape { flex:none; font:800 14px/1 ui-monospace,monospace; }
.sac-disclosure-label { min-width:0; overflow-wrap:anywhere; }
.sac-disclosure-state { margin-left:auto; color:#55554f; font:750 10px/1.4 ui-monospace,monospace; letter-spacing:.07em; text-transform:uppercase; }
.sac-disclosure-panel { padding-bottom:8px; }
.sac-disclosure-panel .sac-calculation { margin:0 0 18px; }
/* Both of these moved onto the recessed ground, so both are re-measured against
   it rather than against the white card they used to sit on: #777771 on #f7f6f2
   is 4.17:1, under AA for body text, and #55554f is 6.94:1. Same shipped ink,
   one step darker — no new value. */
.sac-support .sac-caveat,.sac-support .sac-contracts { margin-bottom:0; }
.sac-support .sac-contracts { color:#55554f; }
.sac-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin:0; border-bottom:1px solid #dedcd5; }
.sac-fact { min-width:0; padding:20px 28px; border-right:1px solid #dedcd5; border-top:1px solid #dedcd5; }
.sac-fact dt { color:#71716a; font:750 10px/1.4 ui-monospace,monospace; letter-spacing:.07em; text-transform:uppercase; }
.sac-fact dd { margin:8px 0 0; color:var(--sac-ink); font-size:15px; line-height:1.5; overflow-wrap:anywhere; }
.sac-facts .sac-fact:nth-child(2n) { border-right:0; }
.sac-month-block { padding:24px 36px; }
.sac-month-block h3 { margin:0 0 12px; font-size:16px; }
.sac-months { display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.sac-month { padding:12px 14px; border:1px solid #cfcdc5; border-radius:10px; }
.sac-month[data-verdict="achieved"] { border-color:var(--sac-teal); background:var(--sac-mint); }
.sac-month[data-verdict="not_realized"] { border-color:#d9a49d; background:var(--sac-red); }
.sac-month-label { display:block; font:800 11px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.sac-month-figure { display:block; margin-top:4px; font-size:14px; }
.sac-notes { margin:0; padding:20px 36px 8px; color:#55554f; font-size:14px; line-height:1.55; }
.sac-notes li { margin-bottom:6px; max-width:74ch; }
.sac-details summary { padding:20px 36px; color:var(--sac-ink); font-weight:800; cursor:pointer; }
.sac-details-body { padding:0 36px 32px; border-top:1px solid #e4e2db; }
.sac-calculation { display:grid; grid-template-columns:1fr 1fr; gap:18px 30px; margin:26px 0; }
.sac-calculation .sac-fact { padding:0; border:0; }
.sac-calculation .sac-fact dd { font-size:14px; }
.sac-caveat { max-width:74ch; color:#55554f; font-size:14px; line-height:1.55; }
/* Provenance for the evidence above, and the same line when it was discarded.
   The state travels in the words; the dashed edge only repeats it. */
.sac-snapshot {
  margin:0 36px 20px; padding:10px 14px; max-width:74ch;
  border-left:3px solid #b9b7ae; color:#55554f; font-size:13px; line-height:1.55;
}
.sac-snapshot[data-snapshot="rejected"] { border-left-style:dashed; }
.sac-contracts { color:#777771; font:650 10px/1.5 ui-monospace,monospace; overflow-wrap:anywhere; }
.sac-state,.sac-rejections { padding:28px 36px; }
.sac-rejections { margin-bottom:20px; background:var(--sac-red); }
.sac-state h2,.sac-rejections h2 { margin-top:0; font-size:20px; }
.sac-rejection-list { margin:0; padding-left:20px; font-size:14px; line-height:1.6; }
@media (max-width:760px) {
  .sac-hero { padding-top:48px; }
  .sac-evidence { padding:20px; }
  .sac-evidence-controls { flex-direction:column; align-items:stretch; }
  .sac-heading,.sac-decision,.sac-metric,.sac-month-block,.sac-notes { padding-inline:24px; }
  .sac-facts { grid-template-columns:1fr; }
  .sac-fact { padding:18px 24px; border-right:0; }
  .sac-calculation { grid-template-columns:1fr; }
  .sac-details summary,.sac-details-body { padding-inline:24px; }
  /* Nothing reorders on a narrow screen. The single column is already the DOM
     order — question, recommendation, figure, signals, support — so the primary
     decision stays above the fold and the tab sequence still matches the page.
     Each chip takes the full measure rather than being squeezed to an
     unreadable ellipsis, and the disclosure triggers keep a 48px target. */
  .sac-signals,.sac-support { padding-inline:24px; }
  .sac-signals { gap:8px; }
  .sac-signal { flex:1 1 100%; }
  .sac-chip { display:flex; width:100%; }
}
/* ---------------------------------------------------------------------------
   The reconciliation panel.

   Status travels four ways before it travels as colour: the word, the glyph,
   the left-edge border STYLE (solid / double / dashed / dotted), and the
   `data-status` attribute a test asserts on. A greyscale print and a monochrome
   screen both keep the distinction.
   --------------------------------------------------------------------------- */
.sac-reconciliation { margin-top:28px; padding:28px 36px; border:1px solid #e4e2db; background:#fff; }
.sac-reconciliation > h2 { margin-top:0; font-size:20px; }
.rec-question { margin:0 0 6px; font-weight:800; }
.rec-summary { margin:0 0 18px; max-width:74ch; color:#55554f; font-size:14px; line-height:1.55; }
.rec-rows { margin:0; padding:0; list-style:none; }
.rec-row { margin-bottom:16px; padding:16px 18px; border:1px solid #e4e2db; border-left-width:6px; }
.rec-row[data-shape="solid"] { border-left-style:solid; border-left-color:#3f7d54; }
.rec-row[data-shape="double"] { border-left-style:double; border-left-color:#b1533f; }
.rec-row[data-shape="dashed"] { border-left-style:dashed; border-left-color:#8a8a82; }
.rec-row[data-shape="dotted"] { border-left-style:dotted; border-left-color:#6d6fa8; }
.rec-row-header { display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; }
.rec-glyph { font:800 14px/1 ui-monospace,monospace; }
.rec-status { font:800 11px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.rec-title { font-weight:800; }
.rec-statement { margin:8px 0; max-width:74ch; font-size:14px; line-height:1.55; }
.rec-figures { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 24px; margin:12px 0; }
.rec-figures[data-available="false"] { grid-template-columns:1fr; }
.rec-fact dt { font:800 10px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; color:#55554f; }
.rec-fact dd { margin:2px 0 0; font-size:15px; }
.rec-confidence,.rec-provenance,.rec-next { margin:6px 0; max-width:74ch; color:#55554f; font-size:13px; line-height:1.55; }
.rec-evidence summary { font-weight:700; font-size:13px; cursor:pointer; }
.rec-gaps { margin:6px 0 0; padding-left:20px; font-size:13px; line-height:1.55; }
.rec-rules summary { font-weight:800; font-size:14px; cursor:pointer; }
.rec-rule-list { margin:10px 0 0; }
.rec-rule dt { font:800 10px/1.4 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.rec-rule dd { margin:2px 0 12px; max-width:74ch; font-size:13px; line-height:1.55; }
.rec-rule-assumption { color:#55554f; }
.rec-rules-version { color:#777771; font:650 10px/1.5 ui-monospace,monospace; }
.sac-reconcile-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:18px; }
.sac-reconcile-note,.sac-reconcile-status { max-width:74ch; color:#55554f; font-size:13px; line-height:1.55; }
@media (max-width:760px) {
  .sac-reconciliation { padding:20px 24px; }
  .rec-figures { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:no-preference) {
  .sac-details[open] .sac-details-body { animation:sac-reveal .18s ease-out; }
}
@keyframes sac-reveal { from { opacity:0; } to { opacity:1; } }