/* The executive briefing sheet.
 *
 * Composed from the tokens styles.css already ships — the ink (#171713), the
 * muted body inks (#555550, #4d4d47), the rule (#cfcdc5), the accent (#1f70c1),
 * --focus-ring, .eyebrow, and the .badge chip pairs the decision log already
 * uses (#dcefdc/#205d2b, #fff0c7/#72520a, #f6dede/#8a2b2b). No new scale, no new
 * hue, no second type family: the mono/sans split is the one Claude Design's
 * foundations card describes (stat numerals in the sans face; metadata,
 * timestamps and status codes in mono, one ink down).
 *
 * Chip silhouettes follow the same card's rule — filled wash = dynamic signal,
 * outline = static classification. The standing and the confidence verdict are
 * derived per period, so they are washes; the period stamp, the limitation codes
 * and the contract versions classify the document, so they are outlines.
 *
 * Colour is never the signal. Every wash carries the word, the value, and a
 * shape; the print sheet drops the wash entirely and loses nothing.
 */
:root { --brief-ink:#171713; --brief-muted:#4d4d47; --brief-line:#cfcdc5; --brief-rule:#e3e1d9; --brief-surface:#fff; --brief-quiet:#faf9f5; }

.brief-hero { max-width:780px; padding:64px 0 34px; }
.brief-hero h1 { max-width:13ch; margin:8px 0 18px; color:var(--brief-ink); font-size:clamp(42px,7.4vw,74px); line-height:.96; letter-spacing:-.05em; }
.brief-hero > p:not(.eyebrow) { max-width:66ch; margin:0 0 12px; color:#555550; font-size:17px; line-height:1.6; }
.brief-print-hint { color:#3f544f; font-size:14px; font-weight:650; }

#executive-briefing { padding-bottom:80px; }

/* ------------------------------ the document ------------------------------ */

.brief,.brief-state { max-width:900px; border:1px solid var(--brief-line); border-radius:20px; background:var(--brief-surface); box-shadow:0 18px 50px rgba(27,50,48,.08); }
.brief-state { padding:32px 34px; }
.brief-state h2 { margin:0 0 10px; color:var(--brief-ink); font-size:clamp(23px,3.2vw,31px); letter-spacing:-.03em; }
.brief-state p { max-width:64ch; margin:0 0 10px; color:var(--brief-muted); line-height:1.55; }
.brief-state[data-state="error"] { border-left:5px solid #8a2b2b; }
.brief-state-label { color:#8a2b2b; font:750 12px/1 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.brief-state-remedy { color:#55554f; font-size:14px; }
.brief-retry-button { min-height:44px; margin-top:6px; border:1px solid #8a2b2b; border-radius:10px; padding:0 18px; background:#fff; color:#721f1f; font:700 14px/1.4 inherit; cursor:pointer; }
.brief-retry-button:hover { background:#fdf4f4; }
.brief-retry-button:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.brief-retry-button[aria-disabled="true"] { color:#666; border-color:#999; cursor:wait; }

.brief-masthead { padding:34px 34px 26px; border-bottom:1px solid var(--brief-rule); }
.brief-question { max-width:24ch; margin:10px 0 16px; color:var(--brief-ink); font-size:clamp(28px,4.2vw,46px); line-height:1.08; letter-spacing:-.038em; }
.brief-answer { max-width:64ch; margin:0 0 8px; color:var(--brief-ink); font-size:18px; line-height:1.5; }
/* The named org unit is the answer, so it is the one thing set apart: mono, a
   size up, and ahead of the sentence that explains it. Deliberately ink rather
   than the site's blue — Claude Design's foundations card guards blue's double
   duty as accent and selection, and an emphasised identifier that is not a link
   should not wear the colour the focus ring uses. Size, face, and position do
   the emphasis; no colour is asked to. */
.brief-org-unit { display:block; color:var(--brief-ink); font:800 clamp(17px,2.2vw,22px)/1.35 ui-monospace,monospace; overflow-wrap:anywhere; }
.brief-answer-basis,.brief-origin { max-width:66ch; margin:0 0 6px; color:#55554f; font-size:14px; line-height:1.55; }
.brief-origin { margin-top:10px; font-weight:650; }

/* Outline chips: static classification of this document. */
.brief-stamp { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; }
.brief-tag { border:1px solid var(--brief-line); border-radius:5px; padding:3px 9px; color:#55554f; font:700 10px/1.6 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; overflow-wrap:anywhere; }

.brief-section { padding:28px 34px; border-bottom:1px solid var(--brief-rule); }
.brief-section-title { margin:0 0 12px; color:#5c5b56; font:750 11px/1.4 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.brief-subheading { margin:22px 0 8px; color:var(--brief-ink); font-size:15px; letter-spacing:-.01em; }
.brief-absent { max-width:64ch; margin:0; color:var(--brief-muted); font-size:16px; line-height:1.55; }

/* -------------------------------- the metric ------------------------------- */

/* The stat numeral, in the sans face, allowed to wrap rather than clip: an
   implausible fixture can hand this element fifteen digits and a briefing that
   cuts its own headline figure in half is worse than one that wraps it. */
.brief-figure { margin:0; color:var(--brief-ink); font-size:clamp(38px,7vw,64px); font-weight:800; line-height:1.02; letter-spacing:-.045em; overflow-wrap:anywhere; }
.brief-figure-label { max-width:56ch; margin:10px 0 0; color:var(--brief-ink); font-size:17px; line-height:1.5; }
.brief-figure-share { max-width:56ch; margin:6px 0 0; color:var(--brief-muted); font-size:15px; line-height:1.5; }

/* Modelled potential, beside the figure it qualifies. A rule and a tag rather
   than a wash: this is a classification of the number above it, not a signal
   derived per period, and it has to read the same in monochrome on paper as it
   does on screen. */
.brief-figure-basis { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; max-width:66ch; margin:14px 0 0; padding-left:12px; border-left:3px solid var(--brief-ink); }
.brief-basis-tag { color:var(--brief-ink); font:750 11px/1.5 ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; }
.brief-basis-statement { color:#55554f; font-size:14px; line-height:1.55; }

/* Filled wash: a signal derived for this period. Word, value, and shape all
   carry it; the wash is the fourth channel. */
.brief-standing { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:18px 0 0; border-radius:10px; padding:11px 14px; }
.brief-standing-shape::before { font-size:13px; }
.brief-standing-word { font-size:15px; font-weight:800; }
.brief-standing-value { font:650 13px/1.5 ui-monospace,monospace; }
.brief-standing[data-standing="more_recoverable_than_baseline"] { background:#fff0c7; color:#72520a; }
.brief-standing[data-standing="more_recoverable_than_baseline"] .brief-standing-shape::before { content:"\25B2"; }
.brief-standing[data-standing="in_line_with_baseline"] { background:#e8e6e2; color:#4a4a44; }
.brief-standing[data-standing="in_line_with_baseline"] .brief-standing-shape::before { content:"\25AC"; }
.brief-standing[data-standing="less_recoverable_than_baseline"] { background:#dcefdc; color:#205d2b; }
.brief-standing[data-standing="less_recoverable_than_baseline"] .brief-standing-shape::before { content:"\25BC"; }
.brief-standing[data-standing="unavailable"] { background:#f1efe9; color:#55554f; }
.brief-standing[data-standing="unavailable"] .brief-standing-shape::before { content:"\25C7"; }

/* The implausible read. Not an error state — the figure stays on screen — but a
   named caution beside it, in words, so a monochrome print says the same thing. */
.brief-caution { margin:18px 0 0; border-left:4px solid #8a2b2b; border-radius:0 10px 10px 0; padding:14px 16px; background:#fbf1f1; }
.brief-caution-title { margin:0 0 8px; color:#8a2b2b; font-size:15px; }
.brief-caution-list { margin:0; padding-left:20px; color:#5f2b26; font-size:14px; line-height:1.55; }
.brief-caution-list li + li { margin-top:8px; }

/* Department allocation uses retained per-department money only. The ordered
 * labels and values are the figure; neutral bar length is a redundant shape,
 * so neither the site's accent nor colour carries rank. */
.brief-allocation-figure { margin:0; }
.brief-allocation-summary { max-width:62ch; margin:0 0 18px; color:var(--brief-ink); font-size:16px; line-height:1.55; }
.brief-allocation-list { display:grid; gap:13px; margin:0; padding:0; list-style:none; }
.brief-allocation-row { display:grid; grid-template-columns:minmax(150px,1fr) auto; gap:5px 18px; align-items:baseline; }
.brief-allocation-label { min-width:0; color:var(--brief-ink); font:700 13px/1.45 ui-monospace,monospace; overflow-wrap:anywhere; }
.brief-allocation-value { color:var(--brief-ink); font-size:14px; }
.brief-allocation-track { grid-column:1/-1; display:block; height:10px; border:1px solid var(--brief-line); border-radius:5px; background:var(--brief-quiet); overflow:hidden; }
.brief-allocation-bar { display:block; height:100%; background:#55554f; }
.brief-allocation-method { max-width:66ch; margin:16px 0 0; color:#55554f; font-size:13px; line-height:1.55; }

/* ------------------------------- action, trust ----------------------------- */

.brief-action-statement { max-width:62ch; margin:0; color:var(--brief-ink); font-size:19px; line-height:1.45; }
.brief-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px 26px; margin:18px 0 0; }
.brief-facts-stacked { grid-template-columns:1fr; }
.brief-fact { min-width:0; }
.brief-fact dt { color:#5c5b56; font:750 10px/1.4 ui-monospace,monospace; letter-spacing:.07em; text-transform:uppercase; }
.brief-fact dd { margin:6px 0 0; color:var(--brief-ink); font-size:16px; font-weight:700; line-height:1.45; overflow-wrap:anywhere; }
.brief-fact dd.brief-fact-detail { margin-top:4px; color:#55554f; font-size:13px; font-weight:500; }
.brief-evidence { margin:0; padding-left:20px; color:var(--brief-muted); font-size:14px; line-height:1.6; }
.brief-evidence li + li { margin-top:6px; }

.brief-verdict { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin:0; border-radius:10px; padding:11px 14px; }
.brief-verdict-label { font:750 10px/1.6 ui-monospace,monospace; letter-spacing:.07em; text-transform:uppercase; }
.brief-verdict-word { font-size:20px; font-weight:800; letter-spacing:-.02em; }
.brief-verdict-rung { font:650 13px/1.5 ui-monospace,monospace; }
.brief-verdict-shape::before { letter-spacing:.12em; font-size:13px; }
.brief-verdict[data-confidence="high"] { background:#dcefdc; color:#205d2b; }
.brief-verdict[data-confidence="high"] .brief-verdict-shape::before { content:"\25AE\25AE\25AE\25AE"; }
.brief-verdict[data-confidence="moderate"] { background:#fff0c7; color:#72520a; }
.brief-verdict[data-confidence="moderate"] .brief-verdict-shape::before { content:"\25AE\25AE\25AE\25AF"; }
.brief-verdict[data-confidence="low"] { background:#f3e3d6; color:#7a3f10; }
.brief-verdict[data-confidence="low"] .brief-verdict-shape::before { content:"\25AE\25AE\25AF\25AF"; }
.brief-verdict[data-confidence="insufficient"] { background:#f6dede; color:#8a2b2b; }
.brief-verdict[data-confidence="insufficient"] .brief-verdict-shape::before { content:"\25AE\25AF\25AF\25AF"; }
.brief-verdict-meaning { max-width:62ch; margin:14px 0 0; color:var(--brief-ink); font-size:16px; line-height:1.55; }
.brief-verdict-ceiling,.brief-verdict-source { max-width:62ch; margin:8px 0 0; color:#55554f; font-size:14px; line-height:1.55; }

/* ------------------------------- what bounds it ---------------------------- */

.brief-bounds { background:var(--brief-quiet); }
.brief-bound-statement { max-width:62ch; margin:0; color:var(--brief-ink); font-size:17px; line-height:1.55; }
.brief-bound-more { max-width:62ch; margin:10px 0 0; color:var(--brief-muted); font-size:14px; font-weight:650; line-height:1.55; }
.brief-bound-safety { max-width:66ch; margin:12px 0 0; padding-top:12px; border-top:1px solid var(--brief-rule); color:#55554f; font-size:13px; line-height:1.6; }

/* Provenance at the level the figure is read at. Quiet by design — it is the
   thing a reader checks rather than the thing they act on — but present on the
   first screen and on the first pages of the sheet, never only behind a level. */
.brief-provenance-summary { max-width:66ch; margin:16px 0 0; padding-top:14px; border-top:1px solid var(--brief-rule); }
.brief-provenance-summary .brief-subheading { margin-top:0; font-size:14px; }
.brief-provenance-line { margin:0 0 6px; color:var(--brief-ink); font:400 13px/1.6 ui-monospace,monospace; overflow-wrap:anywhere; }
.brief-provenance-note-lead,.brief-provenance-route { margin:0 0 6px; color:#55554f; font-size:13px; line-height:1.6; }

/* ------------------------------- disclosures ------------------------------- */

/* A button and a hidden panel rather than <details>: the print sheet has to be
   able to open a level the reader left shut, and no author rule can open a
   closed <details>. See the note at the head of executive-briefing-view.js. */
.brief-disclosure { border-top:1px solid var(--brief-rule); }
.brief-disclosure-heading { margin:0; }
.brief-toggle { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; width:100%; border:0; padding:22px 34px; background:none; color:var(--brief-ink); font-family:inherit; text-align:left; cursor:pointer; }
.brief-toggle:hover { background:var(--brief-quiet); }
.brief-toggle:focus-visible { outline:3px solid var(--focus-ring); outline-offset:-3px; }
.brief-toggle-mark { color:#5c5b56; font:800 13px/1 ui-monospace,monospace; }
.brief-toggle-mark::before { content:"\25B8"; }
.brief-toggle[aria-expanded="true"] .brief-toggle-mark::before { content:"\25BE"; }
.brief-toggle-label { font-size:17px; font-weight:800; letter-spacing:-.015em; }
.brief-toggle-hint { color:#55554f; font-size:13.5px; font-weight:500; }
.brief-panel { padding:0 34px 28px; }
.brief-panel > .brief-subheading:first-child { margin-top:0; }
.brief-rule,.brief-fields { margin:0; padding-left:20px; color:var(--brief-muted); font-size:14px; line-height:1.6; }
.brief-fields { padding-left:0; list-style:none; display:flex; flex-wrap:wrap; gap:6px 10px; }
.brief-rule li + li { margin-top:6px; }
.brief-mono { font-family:ui-monospace,monospace; font-size:13px; overflow-wrap:anywhere; }
.brief-method-note { max-width:66ch; margin:0; color:var(--brief-muted); font-size:15px; line-height:1.6; }
.brief-provenance-note { max-width:66ch; margin:14px 0 0; color:#55554f; font-size:13.5px; line-height:1.6; }
.brief-limitations { margin:0; padding-left:20px; color:var(--brief-muted); font-size:14px; line-height:1.6; }
.brief-limitations li + li { margin-top:10px; }
/* Outline chip: a fixed catalogue code, not a live signal. */
.brief-code { display:inline-block; margin-right:8px; border:1px solid var(--brief-line); border-radius:5px; padding:1px 7px; color:#5c5b56; font:700 10px/1.6 ui-monospace,monospace; letter-spacing:.05em; overflow-wrap:anywhere; }

/* ------------------------------ the print control --------------------------- */

/* The secondary export action follows the decision and evidence in DOM order.
 * It remains visually distinct from the document rather than looking like
 * another recommendation inside the briefing. */
.brief-actions:empty { display:none; }
/* The standing statements about upload and printing, under the sheet and beside
   the control they describe. Same quiet register as the rest of the page chrome:
   the section title borrows the mono label the sheet's own sections use. */
.brief-notes { max-width:66ch; margin:26px 0 0; }
.brief-notes h2 { margin:0 0 10px; color:#5c5b56; font:750 11px/1.4 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.brief-notes p { margin:0 0 8px; color:#55554f; font-size:14px; line-height:1.55; }
.brief-print-control { max-width:900px; margin:22px 0 0; }
.brief-print-button { display:inline-flex; align-items:center; gap:8px; min-height:44px; border:1px solid var(--brief-ink); border-radius:10px; padding:11px 20px; background:var(--brief-ink); color:#fff; font:700 15px/1.2 inherit; letter-spacing:-.01em; cursor:pointer; }
/* Decorative only, and declared with the empty alternative text so a reader
   using speech hears the label rather than the name of a glyph. A browser that
   does not understand the alt syntax drops the whole declaration and loses an
   ornament, which is the right thing to lose. */
.brief-print-button::before { content:"⎙" / ""; font-size:17px; line-height:1; }
.brief-print-button:hover { background:#2c2c26; }
.brief-print-button:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.brief-print-note { max-width:66ch; margin:10px 0 0; color:#55554f; font-size:13.5px; line-height:1.6; }
/* Empty until something happened, and never reserving a strip of blank page. */
.brief-print-status:not(:empty) { max-width:66ch; margin:10px 0 0; border-left:3px solid #72520a; padding-left:12px; color:#5c4a1e; font-size:14px; line-height:1.55; }

/* ------------------------- whose figures these are -------------------------- */

/* Inside the sheet, first thing in the masthead. The notice above the sheet
 * explains *why* the reader is looking at a sample; this says *what they are
 * looking at* on the artifact itself, so a page that is photographed, cropped, or
 * printed cannot lose the word. Same caution pair as the notice; the word does
 * the work, the wash is the third channel. */
.brief-synthetic { margin:0 0 18px; border:1px solid #e0cf8f; border-left:4px solid #72520a; border-radius:10px; padding:12px 16px; background:#fffdf3; }
.brief-synthetic-title { margin:0 0 4px; }
.brief-synthetic-tag { color:#72520a; font:750 11px/1.6 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.brief-synthetic-statement { max-width:66ch; margin:0; color:#55554f; font-size:13.5px; line-height:1.55; }

/* Drawn above the sheet, and printed with it: a briefing built from the
 * published sample rather than from the reader's own months has to say so
 * everywhere it could be mistaken for a measurement, paper included. The wash is
 * the site's caution pair, but the label word carries it — this reads the same
 * in monochrome. */
.brief-source-notice { max-width:900px; margin:0 0 22px; border:1px solid #e0cf8f; border-left:5px solid #72520a; border-radius:14px; padding:20px 24px; background:#fffdf3; }
.brief-source-title { margin:0 0 8px; color:var(--brief-ink); font-size:clamp(18px,2.6vw,22px); line-height:1.3; letter-spacing:-.02em; }
.brief-source-label { display:block; color:#72520a; font:750 11px/1.6 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.brief-source-notice p { max-width:70ch; margin:0 0 8px; color:#4d4d47; font-size:15px; line-height:1.6; }
.brief-source-remedy { font-weight:650; }
.brief-source-notice .brief-source-substitute { color:#5c5b56; font-size:13.5px; }
.brief-source-notice p:last-child { margin-bottom:0; }
.brief-source-actions { display:flex; flex-wrap:wrap; gap:8px 20px; }
/* The way back to the region a reader came from. A real link at the foot of the
   notice, and the only focusable node in it, so it never sits between the notice
   and the figure in the tab order. It keeps its underline: a coloured word among
   coloured words is not a control anyone can find. */
.brief-source-return-link { display:inline-block; min-height:44px; padding:11px 0; color:#72520a; font-size:14px; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.brief-source-return-link:hover { color:#171713; }
.brief-source-return-link:focus-visible { outline:3px solid var(--focus-ring,#1f70c1); outline-offset:3px; }

/* ------------------- the invitation inside the sheet ----------------------- */
/* Where the decision is made: directly under the figure and the action, in the
   sheet's own rhythm but read as a control rather than as a paragraph of the
   briefing. One button, the site's link blue, at the 44px target the rest of
   this repository holds itself to. It is the only invitation in the document,
   and it never prints — see the print sheet below. */
.brief-followup { display:grid; justify-items:start; gap:10px; padding:24px 34px; border-bottom:1px solid var(--brief-rule); background:var(--brief-quiet); }
.brief-followup-title { margin:0; color:#5c5b56; font:750 11px/1.4 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.brief-followup-lead { max-width:62ch; margin:0; color:var(--brief-ink); font-size:16px; font-weight:650; line-height:1.5; }
.brief-followup-button { min-height:44px; border:1px solid #1f70c1; border-radius:10px; padding:0 18px; background:#1f70c1; color:#fff; font:700 15px/1.4 inherit; cursor:pointer; }
.brief-followup-button:hover { background:#17538f; }
.brief-followup-button:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.brief-followup-note { max-width:66ch; margin:0; color:var(--brief-muted); font-size:12px; line-height:1.55; }

/* ------------------------- the follow-up affordance ------------------------ */
/* Beneath the document, not inside it: the sheet keeps its own frame and this
   reads as a page control rather than a section of the briefing. Disclosure
   grows downward, so nothing ever overlays a figure. Same inks and same focus
   ring as the rest of the sheet; the accent is the site's link blue. */
.brief-contact { display:grid; justify-items:start; gap:14px; max-width:900px; margin:38px 0 0; border-top:1px solid var(--brief-rule); padding:30px 0 0; }
.brief-contact h2 { margin:0; color:var(--brief-ink); font-size:clamp(22px,3vw,28px); letter-spacing:-.03em; }
.brief-contact > p:not(.eyebrow) { max-width:64ch; margin:0; color:var(--brief-muted); font-size:16px; line-height:1.6; }
.brief-contact-trigger { min-height:44px; border:1px solid #1f70c1; border-radius:10px; padding:0 18px; background:#1f70c1; color:#fff; font:650 14px/1.4 inherit; cursor:pointer; }
.brief-contact-trigger:hover { background:#17538f; }
.brief-contact-panel { display:grid; gap:14px; width:100%; max-width:640px; border:1px solid var(--brief-line); border-radius:14px; padding:20px; background:var(--brief-quiet); }
.brief-contact-panel[hidden] { display:none; }
.brief-contact-form { display:grid; gap:12px; }
.brief-contact-field { display:grid; gap:7px; }
.brief-contact-field label { color:var(--brief-ink); font-size:14px; font-weight:700; }
.brief-contact-field input { min-height:46px; border:1px solid var(--brief-line); border-radius:9px; padding:0 12px; background:#fff; font:inherit; }
.brief-contact-error { margin:0; border:1px solid #d9b7b7; border-left:5px solid #8a2b2b; border-radius:9px; padding:11px 13px; background:#fdf4f4; color:#8a2b2b; font-size:12px; font-weight:700; line-height:1.5; }
.brief-contact-error[hidden] { display:none; }
.brief-contact-note { margin:0; color:var(--brief-muted); font-size:12px; line-height:1.55; }
.brief-contact-actions { display:flex; flex-wrap:wrap; gap:10px; }
.brief-contact-actions button { min-height:44px; border:1px solid #1f70c1; border-radius:9px; padding:0 16px; background:#1f70c1; color:#fff; font:650 13px/1.4 inherit; cursor:pointer; }
.brief-contact-actions button[type="button"] { background:#fff; color:var(--brief-ink); border-color:var(--brief-line); }
.brief-contact-actions button[aria-disabled="true"] { background:#777771; border-color:#777771; cursor:wait; }
/* Outcome, recovery, and next action are text first: the words carry the state
   and the colour only reinforces it. */
.brief-contact-status { margin:0; min-height:1.5em; color:var(--brief-ink); font-size:13px; font-weight:700; line-height:1.5; }
.brief-contact-form[data-state="error"]+.brief-contact-status { color:#8a2b2b; }
.brief-contact-recovery { margin:0; border-left:2px solid #8a2b2b; padding-left:11px; color:var(--brief-muted); font-size:12px; line-height:1.5; }
.brief-contact-recovery[hidden] { display:none; }
.brief-contact-next { margin:0; border-left:2px solid #1f70c1; padding-left:11px; color:var(--brief-ink); font-size:13px; line-height:1.55; }
.brief-contact-next[hidden] { display:none; }
/* The receipt that stands where the form was, once a request lands. It is a
   filled green card with a check in front of the address; the failure box is a
   pink strip with a red rule down one edge and no glyph at all, so a reader
   scanning the panel never has to read either one to know which it is. The
   address came from the visitor, so it wraps anywhere rather than widening the
   card past the panel on a phone. */
.brief-contact-confirmation { display:grid; justify-items:start; gap:10px; width:100%; border:1px solid #9dc4a8; border-radius:12px; padding:15px 16px; background:#eef7f0; }
.brief-contact-confirmation:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }
.brief-contact-confirmation-lead { margin:0; color:#1c5c2c; font-size:15px; font-weight:700; line-height:1.55; }
.brief-contact-confirmation-mark { margin-right:8px; font-size:16px; }
.brief-contact-confirmation-address { overflow-wrap:anywhere; }
.brief-contact-confirmation-detail { margin:0; color:var(--brief-ink); font-size:12px; line-height:1.55; }
.brief-contact-confirmation-again { min-height:44px; border:1px solid #1c5c2c; border-radius:9px; padding:0 16px; background:#fff; color:#1c5c2c; font:650 13px/1.4 inherit; cursor:pointer; }
.brief-contact-confirmation-again:hover { background:#1c5c2c; color:#fff; }
.brief-contact button:focus-visible,.brief-contact input:focus-visible,.brief-contact a:focus-visible { outline:3px solid var(--focus-ring); outline-offset:3px; }

/* -------------------------------- responsive ------------------------------- */

@media (max-width:640px) {
  /* A thumb gets the whole width rather than a target to aim at, and the
     disclosed panel keeps its padding inside the viewport. */
  .brief-contact-trigger { width:100%; }
  .brief-followup-button { width:100%; }
  .brief-followup { padding:20px; }
  .brief-contact-actions button { flex:1 1 auto; }
  .brief-contact-panel { padding:16px; border-radius:12px; }
  .brief-contact-confirmation { padding:13px 14px; }
  .brief-contact-confirmation-again { width:100%; }
  .brief-hero { padding:44px 0 26px; }
  .brief,.brief-state { border-radius:16px; }
  .brief-masthead,.brief-section { padding:22px 20px; }
  .brief-toggle { padding:18px 20px; }
  .brief-panel { padding:0 20px 22px; }
  .brief-facts { grid-template-columns:1fr; }
  .brief-allocation-row { grid-template-columns:1fr; gap:3px; }
  .brief-allocation-track { grid-column:1; }
  .brief-figure { font-size:clamp(32px,10vw,44px); }
  /* A control a thumb reaches for is full width rather than a target to aim at. */
  .brief-print-button { width:100%; justify-content:center; }
  .brief-source-notice { border-radius:12px; padding:18px 18px 18px 16px; }
}

/* ---------------------------------- print ---------------------------------- */

/* A printed briefing is read in monochrome, in one pass, by somebody who cannot
 * click. So: no site chrome, no control affordances, no wash carrying meaning,
 * nothing clipped or scrolled, and every disclosure open — the requirement
 * PRESENTATION_REQUIREMENTS.print states and the reason this is CSS rather than
 * a print-time script. The order is unchanged, so the first sheet still carries
 * the finding, the figure, the standing, the action, and the confidence. */
@media print {
  @page { size:portrait; margin:14mm; }
  html,body { background:#fff; }
  body { background-image:none; }
  .page,main,.brief-hero { width:auto; margin:0; padding:0; }
  /* Navigation and every other control come off: a link, a nav bar, or a form
     on paper is a dead control, and the sheet is the briefing. `.site-nav` is
     named alongside its header so the rule still holds if the header ever
     becomes a print-visible title block. */
  .site-header,.site-nav,.site-footer,.skip-link,.brief-print-hint,.brief-toggle-mark,.brief-print-control,.brief-contact,.brief-followup,.brief-notes { display:none !important; }
  /* The notice stays. A sheet that carries a figure without saying whose figure
     it is, is the sheet that gets quoted six weeks later as if it were real. */
  .brief-source-notice { max-width:none; margin:0 0 12px; border:1px solid #171713; border-left:4px solid #171713; border-radius:0; padding:12px 14px; background:none !important; break-inside:avoid; }
  .brief-source-notice p { color:#171713 !important; font-size:11px; line-height:1.45; }
  .brief-source-title { font-size:15px; }
  .brief-source-label,.brief-source-notice .brief-source-substitute { color:#171713; font-size:11px; }
  /* The way back is a dead control on paper, but its address is not: a reader
     holding the sheet can still type it. The link comes off, the URL stays. */
  .brief-source-return-link { min-height:0; padding:0; color:#171713; font-size:11px; text-decoration:none; }
  .brief-source-return-link::after { content:" — labs.wawalu.org" attr(href); }
  .brief-hero { padding-bottom:10px; }
  .brief-hero h1 { max-width:none; margin:4px 0 8px; font-size:26px; letter-spacing:-.02em; }
  .brief-hero > p:not(.eyebrow) { font-size:11px; line-height:1.45; }
  /* Nothing on paper may clip, scroll, or stick. */
  #executive-briefing,.brief,.brief-panel,.brief-section { position:static; overflow:visible; max-height:none; }
  .brief { max-width:none; border:1px solid #767670; border-radius:0; box-shadow:none; }
  .brief-masthead,.brief-section,.brief-disclosure { break-inside:avoid; }
  .brief-section-title { break-after:avoid; }
  /* The one rule the print sheet exists for: a level the reader left collapsed
     still prints, because a briefing that leaves the room without its
     provenance, its limitations, and its method is a number with no caveat. */
  .brief-panel[hidden] { display:block !important; }
  /* The disclosure heading prints as a heading. No control appears on paper. */
  .brief-toggle { display:block; padding:18px 0 0; background:none !important; cursor:auto; }
  .brief-toggle-label { display:block; font-size:15px; }
  .brief-toggle-hint { display:block; }
  .brief-masthead,.brief-section,.brief-panel { padding-left:0; padding-right:0; }
  .brief-masthead,.brief-section { padding-top:14px; padding-bottom:14px; }
  .brief-bounds { background:none; }
  /* Colour is decorative here: the word, the value, and the shape already say
     it, so the washes become outlines and print legibly in greyscale. */
  .brief-standing,.brief-verdict { border:1px solid #767670; border-radius:0; background:none !important; color:#171713 !important; break-inside:avoid; }
  .brief-caution { background:none; border-left:3px solid #171713; }
  .brief-caution-title,.brief-caution-list { color:#171713; }
  .brief-figure { font-size:34px; }
  .brief-question { font-size:24px; }
  .brief-facts { grid-template-columns:repeat(2,1fr); }
  .brief-figure,.brief-figure-label,.brief-standing,.brief-action-statement,.brief-verdict { break-after:avoid; }
  .brief-allocation-figure,.brief-allocation-row { break-inside:avoid; }
  .brief-allocation-track { border-color:#767670; background:none; }
  .brief-allocation-bar { background:#171713 !important; print-color-adjust:exact; }
  /* The three things that must survive the trip out of the building with the
     figure: what kind of number it is, whether it is a sample, and where it came
     from. None of them is chrome, so none of them is dropped — they are only
     stripped of colour, because the words already carry them. */
  .brief-synthetic { border:1px solid #171713; border-left:4px solid #171713; border-radius:0; background:none !important; break-inside:avoid; }
  .brief-synthetic-tag,.brief-synthetic-statement { color:#171713 !important; font-size:11px; }
  .brief-figure-basis { border-left:3px solid #171713; break-inside:avoid; }
  .brief-basis-tag,.brief-basis-statement { color:#171713 !important; font-size:11px; }
  .brief-provenance-summary { break-inside:avoid; }
  .brief-provenance-line,.brief-provenance-note-lead,.brief-provenance-route { color:#171713 !important; font-size:10.5px; line-height:1.45; }
}