/* ==========================================================================
   blocks.css — article-body block styles for Template::articleBlocks() output
   Scoped to .prose to prevent leaking into page chrome.
   All values from design/build/tokens.css — no raw hex, no raw font sizes or
   weights outside the token system; px only for borders and offsets.
   ========================================================================== */

/* ─── Base prose typography ─────────────────────────────────────────────── */

.prose {
  font-family: var(--role-body-family);
  font-weight: var(--role-body-weight);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
}

.prose > * + * {
  margin-top: 0;
}

.prose p {
  margin-block: 0 var(--space-5);
  text-wrap: pretty;
}

.prose > p:last-child {
  margin-bottom: 0;
}

/* ─── Inline formatting ─────────────────────────────────────────────────── */

.prose strong,
.prose b {
  font-weight: var(--fw-bold);
}

.prose em {
  font-style: italic;
}

.prose .highlight {
  font-weight: var(--fw-bold);
}

/* ─── Links ──────────────────────────────────────────────────────────────── */

.prose a,
.prose a:visited {
  color: var(--c-link);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.prose a:hover {
  text-decoration-thickness: 2px;
}

.prose a:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* External links get a small trailing indicator */
.prose .ext-link::after {
  content: "\2009\2197"; /* thin-space + NE arrow */
  font-size: 0.75em;
  vertical-align: super;
  line-height: 1;
  opacity: 0.6;
}

/* ─── Headings ───────────────────────────────────────────────────────────── */

.prose h2 {
  font-family: var(--role-heading-family);
  font-weight: var(--role-heading-weight);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  color: var(--c-ink-heading);
  margin-block: var(--space-8) var(--space-4);
  text-wrap: balance;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  font-family: var(--role-heading-family);
  font-weight: var(--role-heading-weight);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  color: var(--c-ink-heading);
  margin-block: var(--space-6) var(--space-3);
  padding-inline-start: var(--space-4);
  border-inline-start: 4px solid var(--c-highlight);
  text-wrap: balance;
}

.prose h3:first-child {
  margin-top: 0;
}

/* ─── Unordered lists ────────────────────────────────────────────────────── */

.prose ul {
  list-style: none;
  padding-inline-start: 0;
  margin-block: var(--space-3) var(--space-5);
}

.prose ul li {
  position: relative;
  padding-inline-start: var(--space-6);
  margin-block-end: var(--space-3);
  line-height: var(--lh-body);
}

/* Ring bullet: Phosphor ph-circle from the vendored icon font. */
.prose ul li::before {
  content: "\e18a";
  position: absolute;
  inset-inline-start: 0;
  top: 0.3em;
  font-family: "Phosphor";
  font-style: normal;
  font-weight: normal;
  font-size: 0.9em;
  line-height: 1;
  color: var(--c-highlight);
  speak: never;
}

.prose ul li:last-child {
  margin-block-end: 0;
}

/* ─── Tables ─────────────────────────────────────────────────────────────── */

.prose .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--space-6);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
}

.prose .compare-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

.prose .compare-table caption {
  padding: var(--space-3) var(--space-4);
  caption-side: top;
  text-align: left;
  font-family: var(--role-title-family);
  font-weight: var(--role-title-weight);
  font-size: var(--fs-small);
  line-height: var(--lh-title);
  color: var(--c-ink-heading);
  border-bottom: 1px solid var(--c-line);
}

.prose .compare-table th,
.prose .compare-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-line);
}

.prose .compare-table tbody th {
  font-weight: var(--role-strong-weight);
  color: var(--c-ink);
}

.prose .compare-table thead th {
  background: var(--c-surface-sunk);
  color: var(--c-ink-heading);
  font-family: var(--role-label-family);
  font-weight: var(--role-label-weight);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  border-bottom: 1px solid var(--c-line-strong);
}

.prose .compare-table tbody tr:nth-child(even) :is(th, td) {
  background: var(--c-surface-sunk);
}

.prose .compare-table tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}

/* ─── Figures ────────────────────────────────────────────────────────────── */

.prose .content-figure {
  margin-block: var(--space-7);
  max-width: none;
}

.prose .content-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-surface-sunk);
}

.prose .content-figure figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-title);
  color: var(--c-ink-muted);
  font-style: italic;
  padding-inline-start: var(--space-3);
  border-inline-start: 2px solid var(--c-highlight);
}

/* ─── Callouts (WARNING / NOTE / TIP / KEY) ──────────────────────────────── */

.prose .callout {
  padding: var(--space-5);
  margin-block: var(--space-6);
  border: 1px solid var(--c-line);
  border-inline-start: 4px solid var(--c-accent);
  background: var(--c-band-lilac);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.prose .callout-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-family: var(--role-label-family);
  font-weight: var(--role-label-weight);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-accent);
}

.prose .callout-label i {
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1;
}

.prose .callout-body p {
  margin-bottom: var(--space-3);
}

.prose .callout-body > :last-child {
  margin-bottom: 0;
}

.prose .callout-title {
  margin-bottom: var(--space-2);
}

.prose .callout-body .callout-title {
  margin-bottom: var(--space-2);
}

/* WARNING — danger bg, danger left edge */
.prose .callout-warning {
  border-inline-start-color: var(--c-danger);
  background: var(--c-danger-bg);
  border-color: color-mix(in srgb, var(--c-danger) 20%, transparent);
  border-inline-start-color: var(--c-danger);
}

.prose .callout-warning .callout-label {
  color: var(--c-danger);
}

/* NOTE — lilac bg, accent (violet) edge */
.prose .callout-note {
  border-inline-start-color: var(--c-accent);
  background: var(--c-band-lilac);
}

.prose .callout-note .callout-label {
  color: var(--c-accent);
}

/* TIP — gold band bg, gold edge */
.prose .callout-tip {
  border-inline-start-color: var(--c-highlight);
  border-color: color-mix(in srgb, var(--c-highlight) 25%, transparent);
  border-inline-start-color: var(--c-highlight);
  background: var(--c-band-gold);
}

.prose .callout-tip .callout-label {
  color: var(--c-label-on-light);
}

/* KEY takeaway — paper bg, gold edge */
.prose .callout-key {
  border-inline-start-color: var(--c-highlight);
  border-color: color-mix(in srgb, var(--c-highlight) 25%, transparent);
  border-inline-start-color: var(--c-highlight);
  background: var(--c-band-paper);
}

.prose .callout-key .callout-label {
  color: var(--c-label-on-light);
}

/* ─── Evidence note ──────────────────────────────────────────────────────── */

.prose .evidence-note {
  margin-block: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-inline-start: 4px solid var(--c-line-strong);
  background: var(--c-surface-sunk);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--c-ink-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

.prose .evidence-note p {
  margin: 0 0 var(--space-2);
}

.prose .evidence-note p:last-child {
  margin-bottom: 0;
}

.prose .evidence-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-family: var(--role-label-family);
  font-weight: var(--role-label-weight);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-label-on-light);
}

.prose .evidence-label i {
  font-size: 1rem;
  flex-shrink: 0;
}

/* ─── Field checklist (CHECK lines) ─────────────────────────────────────── */

.prose .field-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  margin-block: var(--space-6);
  overflow: hidden;
}

.prose .field-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  background: var(--c-surface);
  padding: var(--space-4);
  align-items: start;
}

/* An odd last check spans both columns, so the hairline background never shows as an empty cell. */
.prose .field-check:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.prose .field-check i {
  color: var(--ed-choice);
  font-size: 1.2rem;
  margin-top: 0.1em;
  flex-shrink: 0;
}

.prose .field-check b {
  display: block;
  font-family: var(--role-title-family);
  font-weight: var(--role-title-weight);
  font-size: var(--fs-small);
  line-height: var(--lh-tight);
  color: var(--c-ink);
}

.prose .field-check span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
}

/* ─── Quick facts (FACT lines) ───────────────────────────────────────────── */

.prose .quick-facts {
  border-top: 2px solid var(--c-ink-heading);
  border-bottom: 2px solid var(--c-ink-heading);
  padding-block: var(--space-4);
  margin-block: var(--space-6);
}

.prose .quick-facts dl {
  display: grid;
  grid-template-columns: minmax(8rem, 0.34fr) minmax(0, 1fr);
  gap: 0 var(--space-5);
  margin: 0;
}

/* FACT lines emit <div><dt>…</dt><dd>…</dd></div> rows */
.prose .quick-facts dl > div {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(8rem, 0.34fr) minmax(0, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-3);
  border-top: 1px solid var(--c-line);
}

.prose .quick-facts dl > div:first-child {
  border-top: 0;
  padding-top: 0;
}

.prose .quick-facts dl > div:last-child {
  padding-bottom: 0;
}

.prose .quick-facts dt {
  font-family: var(--role-body-family);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  color: var(--c-ink-muted);
  padding: 0;
  border-top: 0;
  align-self: start;
}

.prose .quick-facts dt i {
  color: var(--c-highlight-ink);
  margin-inline-end: var(--space-1);
}

.prose .quick-facts dd {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  padding: 0;
  border-top: 0;
  min-width: 0;
}

/* ─── Risk / timing timeline (TIME lines) ────────────────────────────────── */
/*
 * Desktop: horizontal connected stages with numbered circles and a
 * danger-colour line, matching the safety.png comp.
 * Phone: stacked grid rows.
 */

.prose .risk-timeline {
  margin-block: var(--space-6);
  padding-block: var(--space-5);
  border-top: 2px solid var(--c-ink-heading);
  border-bottom: 2px solid var(--c-ink-heading);
}

/* Shared counter */
.prose .risk-timeline {
  counter-reset: timeline-step;
}

/* Desktop: flex row, numbered circles, connecting line */
@media (min-width: 768px) {
  .prose .risk-timeline {
    display: flex;
    position: relative;
    gap: 0;
  }

  /* Full-width connecting line at circle-centre height */
  .prose .risk-timeline::before {
    content: "";
    position: absolute;
    top: calc(var(--space-5) + 1rem);   /* padding-top + half of 2rem circle */
    left: 15%;
    right: 15%;
    height: 2px;
    background: var(--c-danger);
    pointer-events: none;
  }

  .prose .timeline-row {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-inline: var(--space-3);
    padding-block-start: 3rem;      /* space above the circle */
    counter-increment: timeline-step;
    position: relative;
  }

  /* Numbered circle */
  .prose .timeline-row::before {
    content: counter(timeline-step);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 50%;
    background: var(--c-danger);
    color: var(--c-on-emergency);
    font-family: var(--role-heading-family);
    font-weight: var(--fw-bold);
    font-size: var(--fs-small);
    text-align: center;
    z-index: var(--z-base);
  }

  .prose .timeline-row b {
    display: block;
    font-family: var(--role-heading-family);
    font-weight: var(--fw-heavy);
    font-size: var(--fs-small);
    line-height: var(--lh-tight);
    color: var(--c-ink-heading);
    margin-block-end: var(--space-2);
    max-width: 12rem;
  }

  .prose .timeline-row span {
    font-size: var(--fs-caption);
    line-height: var(--lh-body);
    color: var(--c-ink-muted);
    max-width: 12rem;
  }
}

/* Phone: stacked rows with numbered circles on the left */
@media (max-width: 767px) {
  .prose .timeline-row {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: var(--space-3) var(--space-4);
    align-items: start;
    padding-block: var(--space-3);
    border-top: 1px solid var(--c-line);
    counter-increment: timeline-step;
    position: relative;
  }

  .prose .timeline-row:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .prose .timeline-row::before {
    content: counter(timeline-step);
    display: block;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 50%;
    background: var(--c-danger);
    color: var(--c-on-emergency);
    font-family: var(--role-heading-family);
    font-weight: var(--fw-bold);
    font-size: var(--fs-label);
    text-align: center;
    flex-shrink: 0;
    grid-row: 1 / 3;
  }

  .prose .timeline-row b {
    display: block;
    font-family: var(--role-heading-family);
    font-weight: var(--fw-heavy);
    font-size: var(--fs-small);
    line-height: var(--lh-tight);
    color: var(--c-ink-heading);
  }

  .prose .timeline-row span {
    display: block;
    font-size: var(--fs-caption);
    line-height: var(--lh-body);
    color: var(--c-ink-muted);
  }
}

/* ─── Do / Don't list (YES / NO lines) ──────────────────────────────────── */

.prose .do-dont {
  margin-block: var(--space-6);
}

.prose .dd-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.prose .dd-item:last-child {
  margin-block-end: 0;
}

.prose .dd-item i {
  flex: 0 0 auto;
  font-size: 1.15em;
  line-height: 1.35;
  margin-top: 0.1em;
}

.prose .dd-item > span {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.prose .dd-item b {
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

.prose .dd-detail {
  color: var(--c-ink-muted);
  font-size: var(--fs-small);
}

.prose .dd-yes i {
  color: var(--ed-choice);
}

.prose .dd-no i {
  color: var(--ed-poisonous);
}

/* ─── Species row (SPECIES lines) ────────────────────────────────────────── */

.prose .species-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-6);
}

.prose .species-row.is-balanced-four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prose .species-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--motion-fast) var(--motion-ease);
}

.prose .species-card:hover {
  border-color: var(--c-accent);
  text-decoration: none;
}

.prose .species-card.is-avoid {
  border-color: var(--ed-poisonous);
}

.prose .species-card.is-avoid .species-when {
  color: var(--ed-poisonous-text);
}

.prose .species-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-surface-sunk);
}

.prose .species-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.prose .species-body {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-4) var(--space-4);
  flex: 1;
}

.prose .species-when {
  display: block;
  font-family: var(--role-label-family);
  font-weight: var(--role-label-weight);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-label-on-light);
  margin-block-end: var(--space-1);
}

.prose .species-name {
  display: block;
  font-family: var(--role-title-family);
  font-weight: var(--role-title-weight);
  font-size: var(--fs-title);
  line-height: var(--lh-tight);
  color: var(--c-ink-heading);
}

.prose .species-note {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--c-ink-muted);
}

/* ─── Season bar (SEASON lines) ─────────────────────────────────────────── */

.prose .season-bar {
  margin-block: var(--space-6);
  border-top: 2px solid var(--c-ink-heading);
  border-bottom: 2px solid var(--c-ink-heading);
}

.prose .season-bar .season-axis,
.prose .season-bar .season-row {
  display: grid;
  grid-template-columns: minmax(8rem, 0.34fr) 1fr minmax(6rem, auto);
  gap: var(--space-4);
  align-items: center;
}

.prose .season-bar .season-axis {
  padding-block: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--c-line);
}

/* .season-spacer is the placeholder in the axis row label column */
.prose .season-spacer {
  display: block;
}

.prose .season-months {
  display: grid;
  grid-template-columns: repeat(var(--season-months, 3), 1fr);
  font-family: var(--role-label-family);
  font-weight: var(--role-label-weight);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-label-on-light);
}

.prose .season-months span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.prose .season-row {
  padding-block: var(--space-3);
  border-top: 1px solid var(--c-line);
}

.prose .season-bar .season-axis + .season-row {
  border-top: 0;
}

.prose .season-label {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--role-title-family);
  font-weight: var(--role-title-weight);
  font-size: var(--fs-small);
  line-height: var(--lh-tight);
  color: var(--c-ink);
}

.prose .season-label i {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
  color: var(--c-highlight-ink);
}

.prose .season-track {
  position: relative;
  height: 14px;
  background: repeating-linear-gradient(
    to right,
    var(--c-line) 0 1px,
    transparent 1px calc(100% / var(--season-months, 3))
  );
  border: 1px solid var(--c-line);
  border-radius: 2px;
}

.prose .season-fill {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: calc(100% * var(--season-s, 0) / (4 * var(--season-months, 3)));
  width: calc(100% * var(--season-w, 1) / (4 * var(--season-months, 3)));
  background: var(--c-accent);
  border-radius: 2px;
}

/* Season grid, in quarter months (about a week, fine enough to keep regional windows
   that differ by a week apart). Template::seasonBar emits season-m-{months} on the
   bar and season-s-{start} / season-w-{width} on each fill; these finite classes
   replace inline style attributes. The bar spans at most 12 months (48 quarters). */
.season-m-1 { --season-months: 1; }   .season-m-2 { --season-months: 2; }
.season-m-3 { --season-months: 3; }   .season-m-4 { --season-months: 4; }
.season-m-5 { --season-months: 5; }   .season-m-6 { --season-months: 6; }
.season-m-7 { --season-months: 7; }   .season-m-8 { --season-months: 8; }
.season-m-9 { --season-months: 9; }   .season-m-10 { --season-months: 10; }
.season-m-11 { --season-months: 11; } .season-m-12 { --season-months: 12; }
.season-s-0 { --season-s: 0; } .season-s-1 { --season-s: 1; } .season-s-2 { --season-s: 2; } .season-s-3 { --season-s: 3; } .season-s-4 { --season-s: 4; } .season-s-5 { --season-s: 5; }
.season-s-6 { --season-s: 6; } .season-s-7 { --season-s: 7; } .season-s-8 { --season-s: 8; } .season-s-9 { --season-s: 9; } .season-s-10 { --season-s: 10; } .season-s-11 { --season-s: 11; }
.season-s-12 { --season-s: 12; } .season-s-13 { --season-s: 13; } .season-s-14 { --season-s: 14; } .season-s-15 { --season-s: 15; } .season-s-16 { --season-s: 16; } .season-s-17 { --season-s: 17; }
.season-s-18 { --season-s: 18; } .season-s-19 { --season-s: 19; } .season-s-20 { --season-s: 20; } .season-s-21 { --season-s: 21; } .season-s-22 { --season-s: 22; } .season-s-23 { --season-s: 23; }
.season-s-24 { --season-s: 24; } .season-s-25 { --season-s: 25; } .season-s-26 { --season-s: 26; } .season-s-27 { --season-s: 27; } .season-s-28 { --season-s: 28; } .season-s-29 { --season-s: 29; }
.season-s-30 { --season-s: 30; } .season-s-31 { --season-s: 31; } .season-s-32 { --season-s: 32; } .season-s-33 { --season-s: 33; } .season-s-34 { --season-s: 34; } .season-s-35 { --season-s: 35; }
.season-s-36 { --season-s: 36; } .season-s-37 { --season-s: 37; } .season-s-38 { --season-s: 38; } .season-s-39 { --season-s: 39; } .season-s-40 { --season-s: 40; } .season-s-41 { --season-s: 41; }
.season-s-42 { --season-s: 42; } .season-s-43 { --season-s: 43; } .season-s-44 { --season-s: 44; } .season-s-45 { --season-s: 45; } .season-s-46 { --season-s: 46; } .season-s-47 { --season-s: 47; }
.season-w-1 { --season-w: 1; } .season-w-2 { --season-w: 2; } .season-w-3 { --season-w: 3; } .season-w-4 { --season-w: 4; } .season-w-5 { --season-w: 5; } .season-w-6 { --season-w: 6; }
.season-w-7 { --season-w: 7; } .season-w-8 { --season-w: 8; } .season-w-9 { --season-w: 9; } .season-w-10 { --season-w: 10; } .season-w-11 { --season-w: 11; } .season-w-12 { --season-w: 12; }
.season-w-13 { --season-w: 13; } .season-w-14 { --season-w: 14; } .season-w-15 { --season-w: 15; } .season-w-16 { --season-w: 16; } .season-w-17 { --season-w: 17; } .season-w-18 { --season-w: 18; }
.season-w-19 { --season-w: 19; } .season-w-20 { --season-w: 20; } .season-w-21 { --season-w: 21; } .season-w-22 { --season-w: 22; } .season-w-23 { --season-w: 23; } .season-w-24 { --season-w: 24; }
.season-w-25 { --season-w: 25; } .season-w-26 { --season-w: 26; } .season-w-27 { --season-w: 27; } .season-w-28 { --season-w: 28; } .season-w-29 { --season-w: 29; } .season-w-30 { --season-w: 30; }
.season-w-31 { --season-w: 31; } .season-w-32 { --season-w: 32; } .season-w-33 { --season-w: 33; } .season-w-34 { --season-w: 34; } .season-w-35 { --season-w: 35; } .season-w-36 { --season-w: 36; }
.season-w-37 { --season-w: 37; } .season-w-38 { --season-w: 38; } .season-w-39 { --season-w: 39; } .season-w-40 { --season-w: 40; } .season-w-41 { --season-w: 41; } .season-w-42 { --season-w: 42; }
.season-w-43 { --season-w: 43; } .season-w-44 { --season-w: 44; } .season-w-45 { --season-w: 45; } .season-w-46 { --season-w: 46; } .season-w-47 { --season-w: 47; } .season-w-48 { --season-w: 48; }

.prose .season-when {
  font-family: var(--role-label-family);
  font-size: var(--fs-label);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  white-space: nowrap;
}

/* ─── Pull quote (QUOTE blocks) ─────────────────────────────────────────── */

.prose .pullquote {
  margin-block: var(--space-7);
  padding: var(--space-4) 0 var(--space-4) var(--space-6);
  border-inline-start: 4px solid var(--c-highlight);
}

.prose .pullquote p {
  font-family: var(--role-heading-family);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: var(--lh-title);
  color: var(--c-ink-heading);
  margin: 0;
}

.prose .pullquote cite {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--role-body-family);
  font-style: normal;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-muted);
}

/* ─── Stat tiles (STAT lines) ────────────────────────────────────────────── */

/* Flex rather than grid: tiles in the last row grow to fill it, so an odd count never leaves an
   empty cell showing the hairline background (the owner's no-orphan rule). */
.prose .stat-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  margin-block: var(--space-6);
  overflow: hidden;
}

.prose .stat-tile {
  flex: 1 1 140px;
  background: var(--c-surface-sunk);
  padding: var(--space-5) var(--space-4);
  min-width: 0;
  container-type: inline-size;
}

/* STAT values are often words ("Envelope", "Temperature"), not numbers. The size follows the
   tile width so a word never breaks mid-letter; it tops out at the stat size for short numbers. */
.prose .stat-tile b {
  display: block;
  font-family: var(--role-heading-family);
  font-weight: var(--role-heading-weight);
  font-size: clamp(var(--fs-h3), 15cqi, var(--fs-stat));
  color: var(--c-ink-heading);
  line-height: var(--lh-heading);
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
  hyphens: auto;
}

/* The description is a sentence fragment, so it reads as body text, not as an uppercase label. */
.prose .stat-tile span {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--role-body-family);
  font-weight: var(--role-body-weight);
  font-size: var(--fs-small);
  line-height: var(--lh-title);
  color: var(--c-ink-muted);
  overflow-wrap: break-word;
}

/* ─── Candidate facts (CANDIDATE lines) ─────────────────────────────────── */

.prose .candidate-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-block: var(--space-5) var(--space-6);
}

.prose .candidate-facts.is-balanced-four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 3-column fact grids: the last fact stretches over the empty cells of a short last row. */
.prose .candidate-facts:not(.is-balanced-four) > .candidate-fact:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.prose .candidate-facts:not(.is-balanced-four) > .candidate-fact:last-child:nth-child(3n+2) { grid-column: span 2; }

.prose .candidate-fact {
  min-width: 0;
  padding: var(--space-4) var(--space-4) var(--space-5);
  border-inline-start: 1px solid var(--c-line);
  background: var(--c-surface);
}

.prose .candidate-fact:first-child {
  border-inline-start: 0;
}

.prose .candidate-fact-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-2);
}

.prose .candidate-fact-icon {
  flex: 0 0 auto;
  color: var(--c-highlight-ink);
  font-size: 1.05rem;
  line-height: 1;
}

.prose .candidate-fact-label {
  font-family: var(--role-label-family);
  font-weight: var(--role-label-weight);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  line-height: var(--lh-tight);
}

.prose .candidate-fact-value {
  display: block;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  font-size: var(--fs-small);
  line-height: var(--lh-tight);
}

.prose .candidate-fact-detail {
  display: block;
  margin-top: var(--space-2);
  color: var(--c-ink-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
}

/* ─── Process / ordered steps (STEP lines) ───────────────────────────────── */

.prose .process {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin-block: var(--space-6);
  display: grid;
  gap: var(--space-6);
}

.prose .process li {
  position: relative;
  padding-inline-start: 3.2rem;
  counter-increment: step;
}

.prose .process li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: -0.15rem;
  font-family: var(--role-heading-family);
  font-weight: var(--fw-bold);
  font-size: var(--fs-numeral);
  line-height: 1;
  color: var(--c-highlight-ink);
}

/* With icons the number stays visible; the icon sits under it in the same gutter. */
.prose .process.has-icons li {
  min-height: calc(var(--fs-numeral) + var(--space-2) + 1.5rem);
}

.prose .process-icon {
  position: absolute;
  inset-inline-start: 0;
  top: calc(var(--fs-numeral) + var(--space-2));
  color: var(--c-highlight-ink);
  font-size: 1.5rem;
  line-height: 1;
}

.prose .process li p {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--c-ink-muted);
}

/* Step title is a label inside the list, not an outline heading. */
.prose .process li .process-title {
  margin: 0 0 var(--space-2);
  font-family: var(--role-title-family);
  font-weight: var(--role-title-weight);
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  color: var(--c-ink-heading);
}

.prose .process-time {
  display: inline-block;
  margin-block-start: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--c-chip);
  color: var(--c-on-chip);
  font-family: var(--role-label-family);
  font-weight: var(--role-label-weight);
  font-size: var(--fs-label);
  line-height: var(--lh-tight);
}

/* ─── Decision grid (DECISION lines) ─────────────────────────────────────── */

.prose .decision-grid {
  display: grid;
  border-top: 2px solid var(--c-ink-heading);
  border-bottom: 2px solid var(--c-ink-heading);
  margin-block: var(--space-6);
}

.prose .decision-card {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--c-line);
  align-items: start;
}

.prose .decision-card:last-child {
  border-bottom: 0;
}

.prose .decision-icon {
  color: var(--c-highlight-ink);
  font-size: 1.5rem;
  line-height: 1;
  margin-top: 0.1em;
}

.prose .decision-card h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-small);
  line-height: var(--lh-tight);
  padding-inline-start: 0;
  border-inline-start: 0;
}

.prose .decision-action {
  display: block;
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-accent);
  margin-block-end: var(--space-1);
}

.prose .decision-reason {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--c-ink-muted);
  line-height: var(--lh-body);
}

/* ─── Related chip (woven between sections) ──────────────────────────────── */

.prose .related-chip {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--space-7);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--c-line);
  border-inline-start: 4px solid var(--c-highlight);
  background: var(--c-surface);
  color: var(--c-ink);
  text-decoration: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: border-inline-start-color var(--motion-fast) var(--motion-ease);
}

.prose .related-chip:hover {
  border-inline-start-color: var(--c-accent);
  text-decoration: none;
}

.prose .rc-lead {
  color: var(--c-highlight-ink);
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1;
}

.prose .rc-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.prose .rc-kicker {
  font-family: var(--role-label-family);
  font-weight: var(--role-label-weight);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-label-on-light);
}

.prose .rc-title {
  font-family: var(--role-title-family);
  font-weight: var(--role-title-weight);
  font-size: var(--fs-title);
  color: var(--c-ink-heading);
  line-height: var(--lh-tight);
}

.prose .related-chip:hover .rc-title {
  color: var(--c-accent);
}

.prose .rc-arrow {
  color: var(--c-ink-muted);
  font-size: 1.2rem;
  flex-shrink: 0;
  transition:
    transform var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease);
}

.prose .related-chip:hover .rc-arrow {
  color: var(--c-accent);
  transform: translateX(3px);
}

/* ─── Phone breakpoint (max-width: 767px) — the only breakpoint number ────── */
/* Tables scroll in their own container; grids reflow; nothing causes horiz scroll */

@media (max-width: 767px) {

  /* Headings */
  .prose h2 {
    margin-top: var(--space-7);
  }

  /* Tables: edge-to-edge in the column, and each body row stacks as a labelled
     card (row header first, then every cell under its column name from
     data-label), the same pattern as compare.css .checks-table. Nothing scrolls. */
  .prose .table-wrap {
    margin-inline: calc(var(--gutter) * -1);
    border-radius: 0;
    border-inline: 0;
  }

  .prose .compare-table,
  .prose .compare-table caption,
  .prose .compare-table tbody {
    display: block;
  }

  .prose .compare-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .prose .compare-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--space-2);
    border-top: 1px solid var(--c-line);
  }

  .prose .compare-table tbody tr:first-child { border-top: 0; }
  .prose .compare-table tbody tr:nth-child(even) { background: var(--c-surface-sunk); }

  .prose .compare-table tbody :is(th, td) {
    padding-block: var(--space-1);
    border-bottom: 0;
  }

  .prose .compare-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    color: var(--c-ink-muted);
  }

  .prose .compare-table tbody td[data-label=""]::before { content: none; }

  /* Field checklist: 1 column */
  .prose .field-checklist {
    grid-template-columns: 1fr;
  }

  /* Quick facts: stacked label above value */
  .prose .quick-facts dl,
  .prose .quick-facts dl > div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .prose .quick-facts dl > div {
    padding-bottom: var(--space-3);
  }

  .prose .quick-facts dl > div dd {
    padding-bottom: 0;
  }

  /* Season bar: stacked */
  .prose .season-bar .season-axis,
  .prose .season-bar .season-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .prose .season-when {
    white-space: normal;
  }

  /* Species row: 2 columns */
  .prose .species-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .prose .species-row > :last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Candidate facts: 1 column */
  .prose .candidate-facts,
  .prose .candidate-facts.is-balanced-four {
    grid-template-columns: 1fr;
  }
  .prose .candidate-facts > .candidate-fact:last-child { grid-column: auto; }

  .prose .candidate-fact {
    border-inline-start: 0;
    border-top: 1px solid var(--c-line);
  }

  .prose .candidate-fact:first-child {
    border-top: 0;
  }

  /* Related chip: hide kicker label to save space */
  .prose .rc-kicker {
    display: none;
  }
}