/* ─────────────────────────────────────────────────────────────────────────────
   Bitsaga onchain — the findings page.

   LAYERS ON TOP OF onchain.css, and adds no colour of its own. Every value below
   is one of that file's tokens, so light and dark are already selected (not
   flipped) and already validated against the two Bitsaga surfaces. If you find
   yourself typing a hex code in this file, stop: the answer is a token.

   There is no plotted chart here, so there is no series colour on the page at
   all. Per the dataviz rules, the numbers wear TEXT tokens, not accent ones: a
   headline figure is ink, and the brand is chrome only (the kicker, the rule
   down a caveat, a link). That is also what keeps 25 stat values from reading
   as 25 competing alerts.

   One hero figure, exactly one, per the same rules — the first entry. Every
   other value is a stat-tile value, a step down. Proportional figures
   throughout: `tabular-nums` is for columns of numbers, and there are none here.
   ───────────────────────────────────────────────────────────────────────────── */

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px 96px;
}

/* ── masthead extras ───────────────────────────────────────────────────────── */

.asof {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}
.masthead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}

/* ── section ───────────────────────────────────────────────────────────────── */

.sect { margin: 40px 0 0; }
.sect > h2 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.sect-blurb {
  margin: 10px 0 0;
  max-width: 82ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ── the findings grid ─────────────────────────────────────────────────────────
   Two columns where there is room, one where there is not. Cards rather than a
   single column because 25 discrete claims are scanned, not read in order — and
   a card gives the caveat somewhere to live that is beside the claim rather than
   in a footnote nobody reaches. */

.finds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
  margin: 16px 0 0;
  align-items: start;
}

.find {
  padding: 16px 18px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-1);
}
/* The lead finding takes the full row and the one hero figure on the page. Two
   columns so the figure has something to sit beside: a 52px number stacked over
   a 68ch measure leaves half a card of nothing. */
.find-hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(190px, 0.3fr) minmax(0, 1fr);
  column-gap: 34px;
  align-items: start;
  padding: 22px 22px 20px;
}
.find-hero .f-claim { margin-top: 0; }

.f-n {
  font-family: 'Space Grotesk', Outfit, system-ui, sans-serif;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
}
.find-hero .f-n { font-size: 52px; }
.f-nsub {
  margin: 5px 0 0;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.f-claim {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  max-width: 68ch;
}
.find-hero .f-claim { font-size: 16px; }
.f-note {
  margin: 9px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 74ch;
}
/* Not a footnote. Brand rule down the left edge, the same treatment the metric
   pages give a limit, so a fragile finding declares itself where it is read. */
.f-caveat {
  margin: 11px 0 0;
  padding-left: 9px;
  border-left: 2px solid color-mix(in srgb, var(--brand) 45%, transparent);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 74ch;
}
.f-caveat b {
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-right: 6px;
}

/* ── the check-it links, the point of the whole page ───────────────────────── */

.f-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 13px 0 0;
}
.f-links .f-lbl {
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 2px;
}
a.f-link {
  display: inline-block;
  font-size: 12px;
  line-height: 1.5;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--brand-ink);
  background: var(--page);
  text-decoration: none;
}
a.f-link:hover {
  background: color-mix(in srgb, var(--brand) 12%, var(--surface-1));
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
}
a.f-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* An entry whose chart we have not built says so, dashed, in muted ink — the
   same language the tree uses for a metric with no data. */
.f-nochart {
  font-size: 11px;
  padding: 2px 8px;
  border: 1px dashed var(--border);
  border-radius: 999px;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .finds { grid-template-columns: minmax(0, 1fr); }
  .find-hero .f-n { font-size: 38px; }
  .f-n { font-size: 26px; }
}

@media (max-width: 760px) {
  /* Below this the hero's two columns are narrower than its own number. */
  .find-hero { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
}