/* ==========================================================================
   APP.CSS — additions on top of report.css.
   report.css is the design system and stays untouched; anything the product
   needs that the system does not already provide lives here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FLOW DIAGRAM
   Explains what the thing does before asking anyone to upload a file.
   -------------------------------------------------------------------------- */

.flow {
  margin: 0 0 22px;
  overflow-x: auto;
}

.flow svg {
  display: block;
  width: 100%;
  min-width: 660px;
  height: auto;
}

.flow-caption {
  font-size: 13px;
  color: var(--ink-2);
  max-width: var(--measure);
  margin: 10px 0 0;
}

/* --------------------------------------------------------------------------
   2. GLOSSARY
   A term the reader has to guess at is a term that costs us their trust.
   -------------------------------------------------------------------------- */

.glossary {
  display: grid;
  grid-template-columns: 150px 1fr;
  border-top: 1px solid var(--rule);
  margin: 0 0 18px;
  max-width: var(--measure);
}

.glossary dt {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--rule);
}

.glossary dd {
  margin: 0;
  padding: 11px 0;
  font-size: 13.5px;
  border-bottom: 1px solid var(--rule);
}

.glossary dd .eg {
  display: block;
  margin-top: 3px;
  color: var(--ink-2);
  font-size: 12.5px;
}

@media (max-width: 640px) {
  .glossary { grid-template-columns: 1fr; }
  .glossary dt { padding-bottom: 0; border-bottom: 0; }
}

/* A term defined in the glossary, marked where it is first used. */
abbr[title] {
  text-decoration: underline dotted var(--rule);
  text-underline-offset: 3px;
  cursor: help;
}

/* --------------------------------------------------------------------------
   3. "HOW TO READ THIS" — collapsed by default, native <details>, no JS.
   -------------------------------------------------------------------------- */

details.reading {
  border: 1px solid var(--rule);
  background: var(--wafer-2);
  padding: 0 16px;
  margin: 0 0 18px;
}

details.reading > summary {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
}

details.reading > summary::-webkit-details-marker { display: none; }

details.reading > summary::before {
  content: "+ ";
  color: var(--amber);
  font-weight: 600;
}

details.reading[open] > summary::before { content: "− "; }

details.reading[open] > summary { border-bottom: 1px solid var(--rule); }

details.reading .glossary { border-top: 0; margin: 14px 0 4px; }

/* --------------------------------------------------------------------------
   4. REPORT IDENTITY
   Marks a page as a finished result rather than a form, without spending the
   green that report.css reserves for values. The rule under the title block is
   the whole signal; the eyebrow carries the same colour so the two read as a
   pair. Green stays meaningful in the verdict, where it has to.
   -------------------------------------------------------------------------- */

body.is-report header.hero {
  border-bottom: 2px solid var(--green);
}

body.is-report header.hero .eyebrow {
  color: var(--green);
}

/* The refusal is a result too, and its colour is the other one. */
body.is-refusal header.hero {
  border-bottom: 2px solid var(--red);
}

body.is-refusal header.hero .eyebrow {
  color: var(--red);
}

/* --------------------------------------------------------------------------
   5. BASIS CHIP
   The confidence label on every cost line. These were previously rendered with
   report.css's `.flag`, which is a footnote line at the foot of a block — it
   carries a top border and grey text, so inside a table cell each label drew a
   stray rule and all five looked identical.

   Identical is the real bug: Measured and Unavailable are the two ends of the
   product's central claim, and they were the same grey word.

   Colour discipline: green is not spent here — report.css reserves it for
   values, and a basis is metadata about a value. Amber marks "be careful",
   which is what Modelled means. Red marks Unavailable, because that one is a
   statement about the value itself: there isn't one.
   -------------------------------------------------------------------------- */

.basis {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--rule);
  color: var(--ink);
}

/* Our own measurement, and a venue's own published schedule: both exact. */
.basis--measured  { border-color: var(--ink-2); }
.basis--published { border-color: var(--rule); }

/* Derived rather than observed. */
.basis--estimated { color: var(--ink-2); }

/* Explicitly wide, and shown as such. */
.basis--modelled {
  color: var(--amber-text);
  border-color: var(--amber-line);
  background: var(--amber-soft);
}

/* No number at all. The one label that must be impossible to skim past. */
.basis--unavailable {
  color: var(--red);
  border-color: var(--red-line);
  background: var(--red-soft);
}

/* A published figure we hold but have not re-checked against its source. */
.basis--unverified {
  color: var(--amber-text);
  border-color: var(--amber-line);
}

/* An Unavailable row is not a blank row — the reason is the content. */
tr[data-confidence="Unavailable"] td.note { color: var(--red); }

/* ==========================================================================
   6. TYPOGRAPHY — a stronger face, and one we are allowed to serve
   --------------------------------------------------------------------------
   The founder asked for the typography at pydantic.dev. Those files could not
   be used: ABC Diatype and ABC Favorit are commercial Dinamo faces (one of the
   files is literally named "…Trial"), FT System Mono and Dwight are commercial
   too, and hotlinking any of them means running on someone else's paid licence
   and someone else's bandwidth, from a path they can change at any time.

   Geist and Geist Mono get the same effect legitimately: a modern neo-grotesque
   with tight apertures and real weight — very close to ABC Diatype in character
   — plus a technical mono in place of FT System Mono. Both are SIL OFL and both
   are served from the font host the CSP already permits.

   These override the tokens report.css declares, which is why they sit here
   rather than in the design system file.
   ========================================================================== */

:root {
  --mono: "Geist Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Geist", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body { font-size: 15.5px; }

/* Headings carry more weight and tighter tracking — the "stronger" the founder
   asked for is mostly this, not the face itself. */
h1 {
  font-weight: 600;
  letter-spacing: -0.03em;
}

h2 {
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 20px;
}

.sec-n { font-weight: 700; }

/* Figures are the point of the page: give them presence and align the columns. */
.num,
.receipt,
.stat .v,
.e .v,
.s .v,
td.r {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

.stat .v, .e .v, .s .v { font-weight: 600; letter-spacing: -0.01em; }
.receipt .row.big { font-weight: 600; }
thead th { font-weight: 600; }

/* ==========================================================================
   7. WIDTH — stop wasting two-thirds of a wide screen
   --------------------------------------------------------------------------
   report.css fixes the container at 920px, which is right for prose and wrong
   for this page: the cost stack has five columns and the venue table seven, and
   both were being squeezed into a column sized for a paragraph while most of
   the display sat empty.

   The container now scales with the viewport. Prose keeps its own measure — a
   67-character line stays a 67-character line — so only the components that
   benefit from width actually take it: tables, receipts and stat grids.
   ========================================================================== */

.wrap {
  max-width: min(1240px, 94vw);
  padding-left: 32px;
  padding-right: 32px;
}

@media (min-width: 1800px) {
  .wrap { max-width: 1360px; }
}

/* Prose stays readable regardless of how wide the container gets. */
.lede,
.sub,
.sec-note,
.body > p,
.callout p,
.prob p,
.block p,
ul.plain,
footer {
  max-width: var(--measure);
}

/* Data components use the room. */
.tw,
.receipt,
.stat-grid,
.econ,
.flow,
table {
  max-width: none;
}

/* With more width available, give the grids more columns rather than more air. */
.stat-grid, .econ { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ==========================================================================
   8. RESPONSIVE — report.css has a single 640px breakpoint
   --------------------------------------------------------------------------
   A cost report is a wide table on a small screen. The tables already scroll
   inside .tw; what breaks below that is the receipt rows (two columns forced
   onto one line), the section indent, and the display type.
   ========================================================================== */

@media (max-width: 1100px) {
  .wrap { max-width: 100%; padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 760px) {
  body { font-size: 15px; }
  .wrap { padding-left: 18px; padding-right: 18px; padding-bottom: 64px; }

  header.hero { padding: 34px 0 22px; }
  h1 { font-size: clamp(24px, 7vw, 32px); }
  h2 { font-size: 18px; }

  /* The section number sits above the heading rather than beside it. */
  .sec-head { flex-direction: column; gap: 2px; }
  .sec-n { padding-top: 0; }
  .body { margin-left: 0; }

  /* A label and its figure stack instead of colliding. */
  .receipt .row, .mock .row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 7px 0;
  }
  .receipt .row > span:last-child,
  .mock .row > span:last-child { font-weight: 600; }

  .stat-grid, .econ { grid-template-columns: 1fr 1fr; }

  /* Wide tables scroll, and say so rather than silently clipping. */
  .tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tw table { min-width: 560px; }
  .flow svg { min-width: 640px; }

  .glossary { grid-template-columns: 1fr; }
  .glossary dt { padding: 10px 0 0; border-bottom: 0; }
  .glossary dd { padding: 2px 0 10px; }

  .field { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .stat-grid, .econ { grid-template-columns: 1fr; }
  .tw table { min-width: 460px; }
}

/* A horizontally scrollable table should look scrollable. */
.tw {
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

/* W111: the legal line under every footer */
footer .legal-line { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink-2); }