/* ==========================================================================
   02A THE FOUR THINGS — Austin only. A dated instrument, not four cards: one
   plate, four rows, a mono period gutter and two prose cells per row. Material
   from .ledger (the tick rule that opens the plate and closes each row), link
   construction from .refusal__why a. Like .refusal__cell it has NO hover state
   — a row here is a reading, not a price you might click. 0 images.
   ========================================================================== */

.calendar { background: var(--surface-alt); }

.calendar__list { background: var(--tick-rule); }

.calendar__row {
  display: grid;
  /* the single-column stack has to be named too: an unmatched grid-area
     custom-ident resolves to line 1, which piles all six cells into one cell */
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "idx" "when" "what" "does" "key" "we";
  gap: var(--space-sm);
  align-items: start;
  padding-block: var(--ledger-pad-block);
  padding-inline-start: var(--space-md);
  border-inline-start: var(--border-width-slab) solid transparent;
  background: var(--tick-rule);
  background-position: bottom;
}
/* the one accent row: All year / I-35 and MoPac is the feature, not row 01 */
.calendar__row--all { border-inline-start-color: var(--border-accent); }

/* index, period and column label are one mono voice at three sizes. The period
   sets in secondary ink and never in accent: on this page the accent may touch
   a numeral, a bar or a rule, never a word. */
.calendar__idx, .calendar__when, .calendar__key {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.calendar__idx { grid-area: idx; font-size: var(--text-spec); letter-spacing: var(--tracking-mono-label); color: var(--text-accent); }
.calendar__when { grid-area: when; font-size: var(--text-label); color: var(--text-secondary); white-space: nowrap; }
/* --text-faint measured 5.27:1 on --surface-alt after the 2026-09-06 re-cut and this label prints on all
   four rows, so it sets in --text-muted (7.1:1) instead. */
.calendar__key { grid-area: key; font-size: var(--text-micro); color: var(--text-muted); }

/* The cause is the row's subject and sat at --text-h4 against --text-body-sm
   prose in two columns beside it, so the plate's spine weighed less than its
   body and the whole block flattened to one grey. */
.calendar__what {
  grid-area: what;
  font-size: var(--text-h3);
  font-weight: var(--weight-display);
  color: var(--text-primary);
}

.calendar__does, .calendar__we {
  max-width: var(--width-measure);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
}
.calendar__does { grid-area: does; color: var(--text-muted); }
.calendar__we { grid-area: we; color: var(--text-secondary); }

.calendar__does a, .calendar__we a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--border-accent);
  text-underline-offset: var(--space-3xs);
  transition: color var(--dur-fast) var(--ease-state);
}
.calendar__does a:hover, .calendar__we a:hover { color: var(--text-primary); }

/* the index moves into its own gutter and the reading sets beside it */
@media (min-width: 768px) {
  .calendar__row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "idx when" "idx what" "idx does" "idx key" "idx we";
    column-gap: var(--ledger-col-gap);
    row-gap: var(--space-xs);
  }
}

/* four tracks: index, period over cause, what it does, what we do about it */
@media (min-width: 1024px) {
  .calendar__row {
    --calendar-cols: auto minmax(0, 2fr) minmax(0, 3fr) minmax(0, 3fr);
    grid-template-columns: var(--calendar-cols);
    grid-template-rows: min-content minmax(0, 1fr);
    grid-template-areas: "idx when does key" "idx what does we";
    row-gap: var(--space-2xs);
  }
}