/* ══════════════════════════════════════════════
   rste1.css — shared styling for all RSTE recap pages
   (bettersquash.com/rste/NN-slug/)
   Version: 1.0

   Everything else on these pages comes from bettersquash1.css.
   Link this file on every recap page instead of repeating the
   <style> block per file:
     <link rel="stylesheet" href="/css/rste1.css">

   Changelog
   ─────────
   1.0 — 2026-09-05 — Initial version. Consolidated from the inline
         <style> blocks in recap pages 01, 02 and 03. Standardized
         .recap-question-box on 02/03's sizing (1.08rem / line-height
         1.55 / 0.85em paragraph gap); dropped 01's unused
         .recap-take-byline img rule (no page uses a byline photo);
         made .recap-take-body p italic by default.
   ══════════════════════════════════════════════ */

:root { --signature: var(--rste); }

/* Hero follows the site standard: breadcrumb (.crumb, above), then
   .hero > h1 + p.kicker + p.lede exactly as on every other page — no
   page-specific additions. The breadcrumb's "Thought Experiments" link
   already covers the back-to-index case.

   H1 here is the full experiment question verbatim (matches the
   `question` field a generator would pull straight from the
   EXPERIMENTS array), so it can't use the site's default big-display
   hero treatment sized for a short title — a full sentence in that
   font would wrap over several lines and overflow on narrow viewports,
   the same problem /rste/'s own H1 override exists to solve. Reusing
   the sizing already proven on /rste/ itself for full-question text
   (see .current-question there) rather than inventing a new one. */
.hero h1 {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  line-height: 1.22;
  font-weight: 700;
  text-transform: none;
  overflow-wrap: normal;
  word-break: normal;
}

/* bettersquash1.css caps .hero .lede at max-width: 42ch, tuned for the
   short one-line ledes used elsewhere on the site. A recap lede is a
   full sentence plus a link, so at 42ch it wraps narrow instead of
   spanning the content column — same category of fix as the H1
   override above, just for the lede. */
.hero .lede {
  max-width: none;
}

/* Original question block, restated as asked */
.recap-question-box {
  border-left: 3px solid var(--signature);
  background: #fafaf9;
  padding: 22px 26px;
  margin: 1.6em 0 0;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--ink);
}
.recap-question-box p { margin: 0 0 0.85em; }
.recap-question-box p:last-child { margin-bottom: 0; }

/* Votes + comments + graph, when an experiment has one, live together
   in a table — bettersquash1.css already styles every table/th/td
   with a 1px #ccc border + 6px 8px padding, which is exactly the
   "light grey border" look, so this only adds layout, not borders. */
.results-table {
  margin: 0.6em 0 1.8em;
}
.results-table__stat {
  width: 50%;
  text-align: center;
  padding: 22px 10px;
}
.results-table__chart-cell {
  padding: 24px 22px 22px;
}

.recap-stat-num {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--ink);
}
.recap-stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #666;
}

/* ── Options chart — for experiments with fixed answer choices only.
   Nominal categories, single series of counts, so every bar takes the
   same slot-1 hue per the dataviz color formula (no legend needed;
   category names label the bars). Unused CSS on pages with no chart,
   same as any other shared component class. ── */
.options-chart {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 620px;
  margin: 1.5em 0 0.4em;
}
.options-chart__row {
  position: relative;
  display: grid;
  grid-template-columns: 90px 1fr 40px;
  align-items: center;
  gap: 14px;
}
.options-chart__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
.options-chart__track {
  background: #ececea;
  border-radius: 0;
  height: 20px;
}
.options-chart__bar {
  height: 20px;
  background: var(--signature);
  border-radius: 0;
  transition: filter 0.12s;
}
.options-chart__row:hover .options-chart__bar,
.options-chart__row:focus-within .options-chart__bar {
  filter: brightness(1.12);
}
.options-chart__value {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  text-align: right;
}
.options-chart__row:focus { outline: none; }
.options-chart__tooltip {
  position: absolute;
  left: 90px;
  bottom: calc(100% + 6px);
  background: var(--ink);
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.3;
  padding: 6px 10px;
  border-radius: 0;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity 0.12s, transform 0.12s;
  z-index: 2;
}
.options-chart__tooltip strong { font-weight: 700; }
.options-chart__row:hover .options-chart__tooltip,
.options-chart__row:focus-within .options-chart__tooltip {
  opacity: 1;
  transform: translateY(0);
}

/* Notes heading + text, shared by chart pages and non-chart pages.
   On a chart page it sits below the graph inside the same table cell,
   so it keeps its own divider line. On a non-chart page it's the
   first thing in its cell, and the table's own row border above
   already divides it from the stat row — see the page-level override
   note in each recap page's own build notes if that ever changes. */
.options-chart-note-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
  border-top: 1px solid #e2e2e2;
  margin: 1.4em 0 0;
  padding-top: 1.1em;
}
.options-chart-note {
  font-size: 0.85rem;
  color: #888;
  margin-top: 0.35em;
}
.options-chart-table-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  color: var(--signature);
  cursor: pointer;
}
.options-chart-table-toggle .triangle {
  display: inline-block;
  font-size: 0.65em;
  transition: transform 0.15s;
}
.options-chart-table-toggle[aria-expanded="true"] .triangle {
  transform: rotate(180deg);
}
/* Borders/padding come from bettersquash1.css's global table/th/td
   rule (1px #ccc, 6px 8px) — left alone here on purpose so this table
   matches every other table on the site instead of fighting it. */
.options-chart-table {
  margin-top: 0.7em;
  font-size: 0.85rem;
}

/* Comment cards */
.comment-grid {
  display: grid;
  gap: 18px;
  margin-top: 1.2em;
}
.comment-card {
  border: 1px solid #e2e2e2;
  border-radius: 0;
  padding: 20px 24px;
  background: #fff;
}
.comment-card blockquote {
  margin: 0 0 12px;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink);
}
.comment-card cite {
  display: block;
  font-style: normal;
  font-size: 0.82rem;
  color: #888;
}
.comment-card cite strong { color: #555; }
.comment-card .tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--signature);
  border: 1px solid var(--signature);
  border-radius: 0;
  padding: 1px 7px;
  margin-bottom: 10px;
}

.recap-source-note {
  font-size: 0.85rem;
  color: #888;
  margin-top: 1.4em;
}
.recap-source-note a { color: var(--signature); }

/* "My Take" author section */
.recap-take {
  border-top: 2px solid var(--ink);
  padding-top: 1.4em;
  margin-top: 0.4em;
}
.recap-take-byline {
  margin-bottom: 1em;
  font-size: 0.85rem;
  color: #777;
}
.recap-take-byline strong { color: var(--ink); }

/* Italic by default so a "My Take" paragraph doesn't need <em> wrapped
   around it every time — write plain <p> tags in .recap-take-body. */
.recap-take-body p {
  margin: 0 0 1em;
  line-height: 1.65;
  font-style: italic;
}