/*
 * The computed reports. One page today: /research/exit-capacity.
 *
 * WRITTEN AGAINST THE TOKENS, not against colours. Everything here reads --fg, --rule, --accent and
 * the panel set from 00-tokens.css, so a retune of the palette carries this page with it and the
 * page can never be the one surface still wearing the old ground.
 *
 * ── WHY A REPORT NEEDS ITS OWN SHEET AT ALL ───────────────────────────────────────────────────
 *
 * The dashboard is scanned; a report is read. So the measure is narrower than the dashboard's, the
 * prose sits at reading size rather than data size, and the tables break OUT of the measure to
 * their own width. Reusing .rows verbatim gave tables that were correct and prose that ran the full
 * 1440px, which is unreadable at any type size.
 *
 * Radius stays 0 and there are no shadows, per spec/design_system_spec.rb.
 */

/* ------------------------------------------------------------------ Frame --- */

/*
 * ── THE REPORT SITS IN THE SITE CONTAINER, IT DOES NOT CENTRE ITSELF ─────────────────────────
 *
 * It used to be `max-width: 1080px; margin: 0 auto`, inside a .container that is 1440px wide. Two
 * different centred boxes means two different left edges, and the page's own copy no longer lined
 * up with the footer beneath it: an inset of about 180px on a wide screen, which reads as a broken
 * page rather than as a narrower measure.
 *
 * So the width is a cap and the box is left-aligned to the container that already holds every other
 * surface on the site. The .container supplies the outer margin; this adds only the bottom.
 */
.report {
  max-width: 1080px;
  padding-bottom: var(--s6);
}

/* The reading measure. Tables and full-bleed blocks opt out by not carrying it. */
.report p,
.report h3 { max-width: var(--measure); }

.report h2 { max-width: 24ch; }

/* --------------------------------------------------------------- Masthead --- */

.report__masthead {
  padding: var(--s6) 0 var(--s5);
  border-bottom: 2px solid var(--fg);
}

.report__title {
  font-size: clamp(34px, 5.5vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: 20ch;
  margin: 0 0 var(--s4);
}

.report__standfirst {
  font-size: 20px;
  line-height: 1.5;
  color: var(--fg-3);
  max-width: 56ch;
  margin: 0 0 var(--s4);
}

.report__stamp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-4);
}

.report__stamp span { white-space: nowrap; }

/* --------------------------------------------------------------- Findings --- */

/*
 * The three figures a reader takes away if they read nothing else. Deliberately NOT cards: a card
 * would need a radius and a border, and the rule between them carries the same separation with less
 * furniture.
 */
.report__findings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  border-bottom: var(--hair) solid var(--rule-firm);
}

.finding {
  padding: var(--s5) var(--s4) var(--s5) 0;
  border-right: var(--hair) solid var(--rule-soft);
}

.finding:last-child { border-right: 0; }
.finding + .finding { padding-left: var(--s4); }

.finding__figure {
  display: block;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  margin-bottom: var(--s3);
}

/*
 * ── THE FIGURE HAD NEVER ACTUALLY BEEN 40px ───────────────────────────────────────────────────
 *
 * `.datum` in 40-primitives.css sets font-size: 15px absolutely, and every figure in these tiles
 * comes from a helper that wraps its value in one. So the 40px above applied to nothing, and all
 * three tiles rendered at body size while looking deliberate.
 *
 * It stayed invisible because each tile held a single value and nothing to compare it against. The
 * moment one carried a bare word between two numbers, the word rendered at 40px and the numbers at
 * 15px, which is how it was finally spotted.
 *
 * The helper keeps its job: it is what makes an absent value an em dash rather than a zero. It just
 * does not get to decide the size of a display figure.
 */
.finding__figure .datum {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* A connector, not a measurement. Small, quiet, and out of the way of the two numbers it joins. */
.finding__conj {
  font-family: var(--font-sans);
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fg-4);
  margin: 0 0.3em;
}

/* The one loud moment on the page, and it is the only genuinely alarming number on it. */
.finding--alarm .finding__figure,
.finding--alarm .finding__figure .datum { color: var(--breach-ink); }

.finding__caption {
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg-3);
  margin: 0;
  max-width: 42ch;
}

@media (max-width: 720px) {
  .finding {
    border-right: 0;
    border-bottom: var(--hair) solid var(--rule-soft);
    padding: var(--s4) 0;
  }
  .finding + .finding { padding-left: 0; }
  .finding:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------- Sections --- */

.report__section {
  padding: var(--s6) 0 var(--s4);
  border-bottom: var(--hair) solid var(--rule-soft);
}

.report__section:last-of-type { border-bottom: 0; }

/*
 * ── THE STATUS LABEL IS INFORMATION, NOT DECORATION ──────────────────────────────────────────
 *
 * Every section says whether its numbers were MEASURED, MODELLED or WITHHELD. That is the product's
 * first rule made structural: a reader can tell at a glance which figures are observations and
 * which are arithmetic over assumptions they are free to reject. It is the reason these are not
 * numbered 01/02/03, which would assert a sequence the sections do not have.
 */
.report__status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: var(--hair) solid currentColor;
  color: var(--accent-ink);
  margin: 0 0 var(--s3);
  max-width: none;
}

.report__status--modelled { color: var(--fg-4); }
.report__status--withheld { color: var(--breach-ink); }

.report__note {
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-3);
  max-width: 64ch;
}

/* ----------------------------------------------------------------- Tables --- */

/* Tables leave the reading measure and take the frame's full width. */
.report__scroller {
  overflow-x: auto;
  margin: var(--s4) 0 var(--s3);
  border-top: var(--hair) solid var(--rule-firm);
}

.report__scroller .rows { width: 100%; }
.report__scroller .rows td.num,
.report__scroller .rows th.num { text-align: right; }
.report__scroller .rows .dim { color: var(--fg-4); }

/*
 * ── A ROW HEADER IS A NAME, NOT A COLUMN LABEL ────────────────────────────────────────────────
 *
 * `.rows th` in 40-primitives.css is tuned for the thead: 10px mono, uppercased. Correct there and
 * wrong on a th[scope="row"], which here holds a ticker key. Uppercasing turned AAPLc into AAPLC,
 * and that trailing lowercase c is the wrapper suffix rather than styling: dropping it renames the
 * asset. The cells stay <th scope="row"> because they label their row for a screen reader.
 */
.report__scroller .rows tbody th {
  font: 600 13px/1.3 var(--font-mono);
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
}

.report__scroller .rows tbody tr.is-headline { background: color-mix(in oklch, var(--accent) 7%, transparent); }

.report__scroller .rows tbody tr.is-alarm,
.report__scroller .rows tbody tr.is-alarm .datum {
  background: color-mix(in oklch, var(--breach) 12%, transparent);
  color: var(--breach-ink);
  font-weight: 600;
}

/* A withheld cost, which is a different thing from an absent one: we read the book and the size was
   past it. It reads as prose rather than as a figure so it cannot be mistaken for one. */
.beyond {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-4);
  white-space: nowrap;
}

/* ------------------------------------------------------- The depth series --- */

.rows--series .bar-cell { width: 60%; min-width: 160px; padding-right: var(--s4); }

.bar {
  display: block;
  height: 10px;
  background: var(--accent);
  min-width: 1px;
}

/* An interval nothing was read in draws a hairline, not a short bar. A zero-length bar reads as a
   book that emptied, and "we were not watching" is a different statement. */
.bar--absent {
  width: 100%;
  height: var(--hair);
  background: var(--rule);
}

/* ------------------------------------------------------------ Model + gaps --- */

.report__model {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  background: var(--panel-deep);
  color: var(--on-panel-2);
  border-left: 2px solid var(--accent);
  padding: var(--s4);
  margin: var(--s4) 0;
  overflow-x: auto;
  max-width: none;
}

/* Weight and the panel's own brightest text, NOT a signal colour. The mark tokens are fills and
   their -ink variants are tuned for the light ground, so neither belongs as text on a dark panel.
   See the signal-mark rule in spec/design_system_spec.rb. */
.report__model b { color: var(--on-panel); font-weight: 600; }

.report__pending {
  border: var(--hair) dashed var(--rule-firm);
  padding: var(--s5) var(--s4);
  margin: var(--s4) 0 var(--s3);
}

.report__pending p { margin-bottom: 0; }

.report__pending-head {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--breach-ink);
  margin-bottom: var(--s3);
}