/* The analysis section's design system (gazette/DESIGN.md, "Two design
   systems"): editorial data communication, ported from the mock-up Graham
   approved on 28 Sep 2026 (analysis/mock/). Scoped to .analysis so the
   main site's Pico styles are untouched. */
.analysis {
  --a-paper: #fbfaf7; --a-ink: #1c1c1a; --a-ink-2: #55544f; --a-ink-3: #8a8983;
  --a-rule: #e4e1d8; --a-green: #1b7f5a; --a-ochre: #c87a10; --a-ochre-ink: #6b4a1e;
  /* --a-green and --a-ochre are PALETTE's (api/analysis.py), the charts'
     one palette; templates carry no inline style, so they are copied here
     and a test holds the copy to PALETTE (test_analysis_a4_site.py).
     Ochre (3.2:1 on the paper) marks rules and borders only; ochre text
     uses --a-ochre-ink (7.7:1). */
  --a-serif: "Source Serif 4", Georgia, serif; --a-sans: "Source Sans 3", system-ui, sans-serif;
  font-family: var(--a-sans); color: var(--a-ink);
}
.analysis h1 { font: 700 2.3rem/1.12 var(--a-serif); letter-spacing: -0.01em; margin: .3rem 0 .8rem; }
.analysis h2 { font: 700 1.35rem/1.25 var(--a-serif); margin: 0 0 .25rem; }
.analysis .analysis-draft, .analysis .figure-draft {
  border-left: 3px solid var(--a-ochre); padding: .4rem .8rem; background: #f6efe4;
  font-size: .9rem; color: var(--a-ochre-ink); margin: 0 0 1.5rem;
}
.analysis-figure { margin: 2.5rem 0; padding-top: 1.1rem; border-top: 2px solid var(--a-ink); }
@media (min-width: 64rem) { .analysis-figure.drawn { margin-left: -7rem; margin-right: -7rem; } }
.analysis-figure h2 a { color: inherit; text-decoration: none; }
.analysis-figure .sub, .analysis-question { color: var(--a-ink-2); font-size: .95rem; margin: 0 0 .75rem; }
.analysis-figure .chart { width: 100%; min-height: 120px; }
.analysis-figure .source {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem;
  border-top: 1px solid var(--a-rule); margin-top: .5rem; padding-top: .5rem;
  font-size: .8rem; color: var(--a-ink-3);
}
.analysis-figure .source a, .analysis-figure .source button, .analysis-figure .source summary {
  color: var(--a-ink-2); font: inherit; background: none; border: 0; padding: 0; margin: 0;
  width: auto; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; display: inline;
}
.analysis-figure details.cite { display: inline; }
.analysis-figure details.cite[open] p { font-size: .85rem; color: var(--a-ink-2); margin: .4rem 0 0; }
.analysis-figure .table-view { overflow-x: auto; max-height: 24rem; margin-top: .75rem; }
.analysis-figure .table-view table { font-size: .82rem; font-variant-numeric: tabular-nums; }
.analysis-pending, .analysis-limit, .analysis-caveat { font-size: .92rem; color: var(--a-ink-2); }
.analysis .figure-status {
  border: 1px solid var(--a-rule); border-left: 4px solid var(--a-ink-3); background: #fff;
  padding: .55rem .8rem; margin: .4rem 0 1rem; font-size: .88rem; color: var(--a-ink-2);
}
.analysis .figure-status[data-state="Solid"] { border-left-color: var(--a-green); }
.analysis .figure-status[data-state="Draft data"] { border-left-color: var(--a-ochre); }
.analysis .figure-status[data-state="Illustrative"] { border-left-color: #9a3b8f; }
.analysis .figure-status[data-state="Not possible"] { border-left-color: var(--a-ink); }
.analysis .figure-status[data-state="Withdrawn"] { border-left-color: #9b2c2c; }
.analysis .figure-status ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.analysis .figure-status li { margin: .15rem 0; }
.analysis .answer-draft { border-left: 4px solid var(--a-green); background: #f3f8f5; padding: .7rem 1rem; margin: .8rem 0; }
.analysis .answer-head { font: 700 1.08rem/1.45 var(--a-serif); color: var(--a-ink); margin: 0 0 .5rem; }
.analysis .answer-draft ul { margin: 0 0 .5rem; padding-left: 1.1rem; }
.analysis .answer-draft li { margin: .25rem 0; }
.analysis .answer-basis { font-size: .82rem; color: var(--a-ink-3); margin: 0; }
.analysis .standfirst { font: 400 1.18rem/1.5 var(--a-serif); color: var(--a-ink-2); }
.analysis .how-steps { display: grid; gap: 2rem; margin: 2rem 0; }
.analysis figure.how { display: grid; grid-template-columns: 8rem 1fr; gap: 1.2rem; align-items: center; margin: 0; }
.analysis figure.how svg { width: 8rem; height: auto; }
.analysis figure.how figcaption { font-size: 1rem; line-height: 1.55; color: var(--a-ink); }
@media (max-width: 40rem) { .analysis figure.how { grid-template-columns: 5rem 1fr; } .analysis figure.how svg { width: 5rem; } }
.analysis .table-wrap { overflow-x: auto; margin: .5rem 0 1.5rem; }
.analysis .table-wrap table { font-size: .86rem; }
.analysis td.verdict { font-weight: 600; }
.analysis td.verdict-pass { color: var(--a-green); }
.analysis td.verdict-declared { color: var(--a-ochre-ink); }
.analysis td.verdict-fail { color: #b3261e; }
.analysis ol.pipeline li { margin: .5rem 0; }
.analysis ol.pipeline code, .analysis td code { font-size: .8rem; }

/* The journey's steps the Gazette cannot see (M48). */
.analysis-unseen dl { margin: 0; display: grid; gap: 14px; }
.analysis-unseen dt { font-weight: 600; color: var(--a-ink); }
.analysis-unseen dd { margin: 2px 0 0; color: var(--a-ink-2); max-width: 65ch; }
.analysis-unseen .unseen-who { color: var(--a-ink); }

/* Previous and next at the foot of a research page (A2): Pico spreads the
   two lists apart; each half may wrap, and next reads from the right. */
.analysis-pager { border-top: 1px solid var(--a-rule); margin-top: 2.5rem; padding-top: .5rem; align-items: flex-start; gap: 1rem; }
.analysis-pager ul { flex: 1 1 0; }
.analysis-pager ul:last-child { justify-content: flex-end; text-align: right; }
/* Read aloud, not shown: e.g. that Go deeper opens a new tab. */
.analysis .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The office pages (2 Oct 2026): each office's page named under a national figure. */
.analysis .office-links { font-size: .9rem; color: var(--a-ink-2); line-height: 1.7; }