/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
/* Flat and honest. Extends nothing external: no framework, no gradients.
 *
 * Colour carries exactly one meaning here — time pressure, or how much we
 * trust a date. Nothing is coloured for decoration, because a row that shouts
 * for aesthetic reasons is a row that cannot shout when it matters. See #29.
 *
 * There are two palettes now (ADR-0016). The warning that used to stand here —
 * that a second palette is a second place to get the urgency contrast wrong —
 * was right, so the answer is measurement rather than restraint: every pair is
 * checked against WCAG AA by test/models/palette_contrast_test.rb, which reads
 * these tokens rather than restating them.
 */

/* Two palettes, one meaning. Colour says exactly one thing here — time
 * pressure — and the dark set is not the light one inverted: red loses more
 * luminance against a dark ground than amber or green do, so the three would
 * have stopped being equals. Every pair below is measured against WCAG AA,
 * and the urgency triple sits within 0.3 of itself on dark, which puts the
 * distinction in the hue where it belongs. See ADR-0016.
 *
 * Values live once, in the -l- and -d- tokens. The two mapping blocks under
 * them carry no colours, so a colour is only ever edited in one place. */
:root {
  --l-bg:#fdfdfc; --l-surface:#fff; --l-surface-2:#f9fafb; --l-surface-3:#f4f4f5;
  --l-ink:#1a1a1a; --l-ink-2:#3f3f46; --l-muted:#6b7280; --l-faint:#83898f;
  --l-line:#e5e7eb; --l-line-strong:#d4d4d8;
  --l-ok:#067647; --l-ok-bg:#ecfdf3; --l-warn:#b45309; --l-warn-bg:#fffbeb;
  --l-crit:#b42318; --l-crit-bg:#fef2f2;
  --l-shadow:0 8px 24px rgb(0 0 0 / .08);

  --d-bg:#131316; --d-surface:#1b1b1f; --d-surface-2:#222227; --d-surface-3:#2a2a30;
  --d-ink:#f4f4f5; --d-ink-2:#d4d4d8; --d-muted:#a1a1aa; --d-faint:#8b8b95;
  --d-line:#2c2c33; --d-line-strong:#42424b;
  --d-ok:#3fbf70; --d-ok-bg:#0f2a1c; --d-warn:#d69b1c; --d-warn-bg:#2a2010;
  --d-crit:#ff8577; --d-crit-bg:#2f1613;
  --d-shadow:0 8px 24px rgb(0 0 0 / .5);

  /* `color-scheme` is load-bearing, not decoration: without it the browser
   * paints native inputs, checkboxes and scrollbars for the wrong theme on
   * top of these surfaces. */
  color-scheme: light;
  --bg:var(--l-bg); --surface:var(--l-surface); --surface-2:var(--l-surface-2);
  --surface-3:var(--l-surface-3); --ink:var(--l-ink); --ink-2:var(--l-ink-2);
  --muted:var(--l-muted); --faint:var(--l-faint);
  --line:var(--l-line); --line-strong:var(--l-line-strong);
  --ok:var(--l-ok); --ok-bg:var(--l-ok-bg); --warn:var(--l-warn); --warn-bg:var(--l-warn-bg);
  --crit:var(--l-crit); --crit-bg:var(--l-crit-bg); --shadow:var(--l-shadow);

  --r:.5rem; --r-sm:.375rem; --r-xs:.25rem;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:var(--d-bg); --surface:var(--d-surface); --surface-2:var(--d-surface-2);
  --surface-3:var(--d-surface-3); --ink:var(--d-ink); --ink-2:var(--d-ink-2);
  --muted:var(--d-muted); --faint:var(--d-faint);
  --line:var(--d-line); --line-strong:var(--d-line-strong);
  --ok:var(--d-ok); --ok-bg:var(--d-ok-bg); --warn:var(--d-warn); --warn-bg:var(--d-warn-bg);
  --crit:var(--d-crit); --crit-bg:var(--d-crit-bg); --shadow:var(--d-shadow);
}

/* "System" is a real choice, not the absence of one: it follows the machine.
 * An explicit light or dark must win over it, which is why this is scoped to
 * the attribute rather than left as a bare media query. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --bg:var(--d-bg); --surface:var(--d-surface); --surface-2:var(--d-surface-2);
    --surface-3:var(--d-surface-3); --ink:var(--d-ink); --ink-2:var(--d-ink-2);
    --muted:var(--d-muted); --faint:var(--d-faint);
    --line:var(--d-line); --line-strong:var(--d-line-strong);
    --ok:var(--d-ok); --ok-bg:var(--d-ok-bg); --warn:var(--d-warn); --warn-bg:var(--d-warn-bg);
    --crit:var(--d-crit); --crit-bg:var(--d-crit-bg); --shadow:var(--d-shadow);
  }
}

* { box-sizing: border-box; }
/* The `hidden` attribute is `display: none` in the browser's own stylesheet,
   which means any author rule with a `display` beats it — `.nav__locale-links
   { display: inline-flex }` left the language links visible next to the select
   that replaced them, with the attribute correctly set the whole time. This
   restores the meaning of the attribute so hiding something is a matter of
   setting it, not of remembering which rules would win. */
[hidden] { display: none !important; }
body { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem 4rem; color: var(--ink);
       background: var(--bg);
       font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
       /* Numbers in this product are read in columns and compared. */
       font-variant-numeric: tabular-nums; }

.display { font-size: 2.5rem; line-height: 1.08; letter-spacing: -.021em; margin: 0;
           font-weight: 620; text-wrap: balance; }
h1 { font-size: 1.6rem; margin: 0 0 .35rem; letter-spacing: -.012em; }
h2 { font-size: 1.1rem; margin: 2rem 0 .6rem; letter-spacing: -.006em; }
h3 { font-size: .95rem; margin: 1.25rem 0 .4rem; }
.lede { color: var(--muted); margin: 0 0 1.5rem; max-width: 46rem; }
.hint { color: var(--muted); font-size: .82rem; margin: .4rem 0 0; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: .82rem; }
.nowrap { white-space: nowrap; }
.eyebrow { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
           color: var(--muted); font-weight: 600; }
a { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--ink); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }

/* -- nav ------------------------------------------------------------------ */
.nav { display: flex; align-items: center; gap: .75rem; padding: .85rem 0; margin-bottom: 2rem;
       border-bottom: 1px solid var(--line); font-size: .9rem; flex-wrap: wrap; }
.nav__brand { font-weight: 640; text-decoration: none; color: var(--ink); letter-spacing: -.01em; }
.nav__spacer { flex: 1; }
.nav a { text-decoration: none; color: var(--muted); }
.nav a:hover { color: var(--ink); }
.nav__locales { display: inline-flex; gap: .35rem; align-items: center;
                padding-left: .6rem; border-left: 1px solid var(--line); }
.nav__select select { min-height: 28px; font-size: .85rem; padding: 0 .35rem;
                      border: 1px solid var(--line-strong); border-radius: var(--r-xs);
                      background: var(--surface); color: var(--ink); }
.nav__locale-links { display: inline-flex; gap: .35rem; }

/* -- nav menu ------------------------------------------------------------- */
/* <details> rather than a scripted popover: it opens, closes and takes
   keyboard focus natively, so the account links stay reachable even if the
   JavaScript never arrives. */
.menu { position: relative; }
.menu__summary { display: inline-flex; align-items: center; gap: .25rem; cursor: pointer;
                 color: var(--muted); list-style: none; padding: .2rem .1rem; }
.menu__summary::-webkit-details-marker { display: none; }
.menu__summary:hover { color: var(--ink); }
.menu[open] .menu__summary { color: var(--ink); }
.menu__chevron { width: 14px; height: 14px; transition: transform .12s ease; }
.menu[open] .menu__chevron { transform: rotate(180deg); }
.menu__panel { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20;
               min-width: 12rem; padding: .35rem; background: var(--surface);
               border: 1px solid var(--line-strong); border-radius: var(--r);
               box-shadow: var(--shadow); }
.menu__who { margin: .25rem .55rem .4rem; font-size: .78rem; color: var(--faint);
             overflow: hidden; text-overflow: ellipsis; }
.menu__label { margin: .5rem .55rem .2rem; font-size: .7rem; letter-spacing: .04em;
               text-transform: uppercase; color: var(--faint); }
.menu__item { display: block; padding: .35rem .55rem; border-radius: var(--r-xs);
              color: var(--ink); text-decoration: none; font-size: .88rem; }
.nav .menu__item { color: var(--ink); }
.menu__item:hover { background: var(--surface-2); }
.menu__item--button { width: 100%; text-align: left; border: 0; background: none;
                      font: inherit; cursor: pointer; }
.menu__sep { height: 1px; background: var(--line); margin: .35rem .2rem; }
.menu--compact .menu__summary { padding: .2rem .3rem; }
.menu__item.is-current { color: var(--ink); font-weight: 550; }
.menu__tick { float: right; color: var(--muted); }

@media (max-width: 46rem) {
  /* Anchored to the nav rather than the summary, so a narrow screen does not
     push the panel off the right edge. */
  .menu__panel { right: 0; left: auto; min-width: 11rem; }
}

/* Present to a screen reader, absent to the eye. Used for labels that a
   sighted reader gets from context — the language select is next to its own
   options — but that a screen reader would otherwise announce unlabelled. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px;
                   padding: 0; overflow: hidden; clip: rect(0 0 0 0);
                   white-space: nowrap; border: 0; }

/* -- controls ------------------------------------------------------------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
          min-height: 44px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg);
          padding: 0 1.05rem; border-radius: var(--r-sm); font-size: .95rem; font-weight: 550;
          cursor: pointer; text-decoration: none; font-family: inherit; }
.button--quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.button--sm { min-height: 34px; font-size: .85rem; padding: 0 .7rem; }
.link-button { border: 0; background: none; padding: 0; color: var(--muted); cursor: pointer;
               text-decoration: underline; font: inherit; }

/* -- badges --------------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; line-height: 1.45;
         padding: .1rem .4rem; border-radius: var(--r-xs); border: 1px solid currentColor;
         white-space: nowrap; }
.badge--ok { color: var(--ok); }
.badge--warn { color: var(--warn); }
.badge--estimate { color: var(--warn); }
.badge--critical { color: var(--crit); background: var(--crit-bg); }
.badge--quiet { color: var(--faint); }

/* -- the urgency scale ---------------------------------------------------- */
/* Days remaining is the largest number in a row and the only element that
 * changes colour. Three days out and eight months out have to read
 * differently at a glance, which a date cannot do on its own. */
.group { margin-top: 1.8rem; }
.group__head { display: flex; align-items: baseline; gap: .6rem; padding-bottom: .4rem;
               border-bottom: 1px solid var(--line-strong); }
.group__head h2 { margin: 0; }
.group__count { color: var(--faint); font-size: .82rem; }

.row { display: grid; grid-template-columns: 62px 150px minmax(0, 1fr) 116px 172px;
       gap: 0 1rem; align-items: start; padding: .7rem .5rem .7rem .55rem;
       border-bottom: 1px solid var(--line); border-left: 3px solid transparent; }
.row--now { border-left-color: var(--crit); background: var(--crit-bg); }
.row--soon { border-left-color: var(--warn); }
.row--stale { background: var(--warn-bg); }

.days { text-align: right; }
.days__n { font-size: 1.35rem; line-height: 1.05; font-weight: 620; letter-spacing: -.02em;
           display: block; }
.days__u { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.u-now  .days__n { color: var(--crit); }
.u-soon .days__n { color: var(--warn); }
.u-near .days__n { color: var(--ink); }
.u-far  .days__n { color: var(--muted); font-weight: 550; }
.u-unknown .days__n { color: var(--warn); font-size: 1.1rem; }
.u-past .days__n { color: var(--faint); font-weight: 550; }

/* -- calendar grid -------------------------------------------------------- */
/* The catalogue page groups by horizon because that is the order a season is
   read in. This grid answers the other question: where the season is empty.
   Three deadlines in one week with nothing either side is obvious here and
   invisible in a list, and the gap is where the next race goes. */
.cal__bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
            margin-bottom: 1rem; }
.cal__head { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 .4rem; }
.cal__head h2 { margin: 0; flex: 1; font-size: 1.15rem; }
.cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal th { font-size: .75rem; font-weight: 550; color: var(--muted); text-align: left;
          padding: .3rem .4rem; border-bottom: 1px solid var(--line); }
.cal__cell { border: 1px solid var(--line); vertical-align: top; height: 6.5rem;
             padding: .3rem; overflow: hidden; }
.cal__cell.is-outside { background: var(--surface-2); }
.cal__cell.is-outside .cal__day { color: var(--faint); }
.cal__cell.is-today { outline: 2px solid var(--ink); outline-offset: -2px; }
.cal__day { font-size: .78rem; color: var(--muted); margin-bottom: .2rem; }
.cal__event { font-size: .72rem; line-height: 1.25; padding: .12rem .25rem; margin-bottom: .15rem;
              border-radius: var(--r-xs); border-left: 3px solid var(--line-strong);
              background: var(--surface-2); overflow: hidden; text-overflow: ellipsis;
              white-space: nowrap; }
.cal__event .muted { display: block; font-size: .68rem; }
/* Same three colours as everywhere else, carrying the same one meaning. */
.cal__event.u-now  { border-left-color: var(--crit); background: var(--crit-bg); }
.cal__event.u-soon { border-left-color: var(--warn); background: var(--warn-bg); }
.cal__event.u-past { border-left-color: var(--line); color: var(--faint); }
.cal__event--race  { border-left-color: var(--ink); }

@media (max-width: 46rem) {
  /* A seven-column grid on a phone is unreadable. The cells stack, and an
     empty day is dropped entirely rather than shown as a blank row. */
  .cal, .cal tbody, .cal tr, .cal td { display: block; width: 100%; }
  .cal thead { display: none; }
  .cal__cell { height: auto; border: 0; border-bottom: 1px solid var(--line); }
  .cal__cell:not(:has(.cal__event)) { display: none; }
  .cal__day::after { content: " " attr(data-label); color: var(--faint); }
}

.when { font-size: .88rem; }
.when__tz { color: var(--muted); font-size: .78rem; display: block; }
/* An estimate is italic and prefixed, so false precision has nowhere to hide. */
.when--estimate { font-style: italic; color: var(--warn); }
.what__kind { font-weight: 550; }
.what__race { color: var(--muted); font-size: .86rem; }
.meta { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; }
.meta a { color: var(--muted); }

/* Two empty states that must never look like a bug, and read differently:
 * the organiser has not said, versus we have not collected it. */
.unpublished { font-style: italic; color: var(--faint); }

/* -- hero ----------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 2.5rem;
        align-items: start; padding: .5rem 0 2.4rem; border-bottom: 1px solid var(--line); }
.hero__actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.5rem; }
.hero__trust { display: flex; align-items: flex-start; gap: .5rem; margin-top: 1.2rem;
               color: var(--muted); font-size: .84rem; max-width: 34rem; }

.next { border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden;
        background: var(--surface); }
.next__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
              padding: .55rem .9rem; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.next__body { padding: 1rem .9rem; border-left: 3px solid var(--line-strong); }
.next__body--now { border-left-color: var(--crit); }
.next__body--soon { border-left-color: var(--warn); }
.next__count { display: flex; align-items: baseline; gap: .5rem; }
.next__n { font-size: 3.4rem; line-height: .9; font-weight: 640; letter-spacing: -.035em; }
.next__body--now .next__n { color: var(--crit); }
.next__body--soon .next__n { color: var(--warn); }
.next__foot { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center;
              padding: .55rem .9rem; border-top: 1px solid var(--line); font-size: .78rem;
              color: var(--muted); }

/* -- honesty band --------------------------------------------------------- */
.band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem;
        padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.band__n { font-size: 1.5rem; font-weight: 620; letter-spacing: -.02em; display: block; }
.band__note { color: var(--muted); font-size: .84rem; }

/* -- calendar preview ----------------------------------------------------- */
.cal { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2);
       padding: 1rem; }
.cal__day { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 1rem; padding: .55rem 0;
            border-top: 1px solid var(--line); align-items: start; }
.cal__day:first-of-type { border-top: 0; }
.cal__date { text-align: right; font-size: .8rem; color: var(--muted); padding-top: .15rem; }
.cal__date strong { display: block; font-size: 1.05rem; color: var(--ink); }
.evt { border-left: 3px solid var(--ink); background: var(--surface); padding: .4rem .6rem;
       border-radius: 0 var(--r-xs) var(--r-xs) 0; font-size: .86rem; }
.evt--crit { border-left-color: var(--crit); }
.evt__time { color: var(--muted); font-size: .76rem; display: block; }

/* -- filter --------------------------------------------------------------- */
/* Seven fieldsets of checkboxes were the first thing a visitor met. Same
 * facets, a fraction of the surface, and collapsed by default: the filter is a
 * second-visit tool. */
.filters { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
           margin: 1.8rem 0 0; }
.filters > summary { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem;
                     cursor: pointer; font-weight: 550; flex-wrap: wrap; }
.filters > summary::-webkit-details-marker { display: none; }
.filters > summary::marker { content: ""; }
.filters__chevron { transition: transform .15s; flex-shrink: 0; }
.filters[open] .filters__chevron { transform: rotate(90deg); }
.filters__summary-note { color: var(--muted); font-weight: 400; font-size: .84rem; }
.filters__chips { display: flex; gap: .35rem; flex-wrap: wrap; margin-left: auto; }
.chip { font-size: .74rem; border: 1px solid var(--line-strong); border-radius: 999px;
        padding: .1rem .55rem; color: var(--muted); }
.filters__body { padding: 0 1rem 1rem; border-top: 1px solid var(--line); }
.filters__grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
                 padding-top: 1rem; }
.filters__actions { margin-top: 1.2rem; display: flex; gap: .5rem; flex-wrap: wrap; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
         color: var(--muted); margin-bottom: .45rem; }
.facet { display: flex; gap: .35rem; flex-wrap: wrap; }
/* A tick box styled as a tag: same semantics, a quarter of the vertical run. */
.tag { position: relative; display: inline-flex; }
.tag input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tag span { display: inline-flex; align-items: center; gap: .3rem; min-height: 30px; font-size: .82rem;
            border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 .6rem;
            color: var(--ink); }
.tag input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tag input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.check { display: block; font-size: .9rem; }
.field { display: inline-block; margin-right: .75rem; font-size: .9rem; }
.field input { width: 5.5rem; }
input[type="number"], input[type="text"], input[type="email"], input[type="password"], select {
  min-height: 34px; border: 1px solid var(--line-strong); border-radius: var(--r-xs);
  background: var(--surface); color: var(--ink); font: inherit; padding: 0 .45rem; }
/* A fieldset legend that carries a heading: strip the browser's own spacing so
   the heading sits where every other h2 on the page does. */
fieldset { border: 0; padding: 0; margin: 0; }
fieldset legend { padding: 0; }
fieldset legend h2 { margin: 0 0 .4rem; }

/* -- results and tables --------------------------------------------------- */
.results__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
                 flex-wrap: wrap; margin-top: 2rem; }
.results__head h2 { margin: 0; }
table.deadlines { width: 100%; border-collapse: collapse; margin-top: .75rem; }
table.deadlines th { text-align: left; font-size: .74rem; text-transform: uppercase;
                     letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line-strong);
                     padding: .4rem .5rem; font-weight: 600; }
table.deadlines td { border-bottom: 1px solid var(--line); padding: .55rem .5rem; vertical-align: top; }
table.deadlines tr.is-stale { background: var(--warn-bg); }
td.meta { font-size: .8rem; }

/* -- cards, blocks, misc -------------------------------------------------- */
.card { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
        padding: 1.1rem 1.15rem; }
.empty { color: var(--muted); border: 1px dashed var(--line-strong); padding: 1rem;
         border-radius: var(--r); }
.flash { padding: .6rem .8rem; border-radius: var(--r-sm); border: 1px solid var(--warn);
         color: var(--warn); margin: 0 0 1rem; }
.errors { color: var(--crit); padding-left: 1.1rem; }
.crumbs { font-size: .82rem; color: var(--muted); margin-bottom: .75rem; }
.crumbs a { color: var(--muted); }
.stack { display: grid; gap: .75rem; max-width: 24rem; }
.stack--wide { max-width: 34rem; }
.field-block { display: grid; gap: .25rem; font-size: .9rem; }
.race-list { padding-left: 1.1rem; }
.race-list li { margin-bottom: .3rem; }
.feed-url { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--line-strong);
            border-radius: var(--r-sm); background: var(--surface-2); padding: .6rem .7rem; }
.feed-url code { flex: 1; word-break: break-all; font-size: .84rem; }
.feed-list { padding-left: 1.1rem; }
.metric { border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r);
          padding: 1rem 1.25rem; margin: 1rem 0 2rem; }
.metric--ok { border-left-color: var(--ok); }
.metric--alarm { border-left-color: var(--crit); background: var(--crit-bg); }
.metric__value { font-size: 2.2rem; font-weight: 600; margin: 0; line-height: 1.1; }
.metric__note { color: var(--muted); margin: .35rem 0 0; font-size: .9rem; }
.subscribe-block { border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.15rem;
                   margin-top: 2rem; background: var(--surface); }
.subscribe-block h2 { margin-top: 0; }
.content-choice .check { margin-bottom: .3rem; }
.content-choice .muted { font-size: .82rem; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem;
         margin-top: .8rem; }
.step { border: 1px solid var(--line); border-radius: var(--r); padding: .9rem; background: var(--surface); }
.step h3 { margin-top: 0; }
.step ol { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .86rem; color: var(--ink-2); }
.step li { margin-bottom: .3rem; }
.expect { border-left: 3px solid var(--warn); background: var(--warn-bg);
          border-radius: 0 var(--r) var(--r) 0; padding: .9rem 1rem; margin-top: .8rem; }
.ico { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none;
       stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* -- timeline (race page) ------------------------------------------------- */
.tl { position: relative; margin: 1rem 0 0; padding-left: 1.1rem; }
.tl::before { content: ""; position: absolute; left: 3px; top: .4rem; bottom: .4rem; width: 1px;
              background: var(--line-strong); }
.tl__item { position: relative; padding: .5rem 0; display: grid;
            grid-template-columns: 62px 150px minmax(0, 1fr) 172px; gap: 1rem; align-items: start; }
.tl__dot { position: absolute; left: -1.1rem; top: 1.05rem; width: 7px; height: 7px;
           border-radius: 50%; background: var(--line-strong); }
.tl__item--now .tl__dot { background: var(--crit); box-shadow: 0 0 0 3px var(--crit-bg); }
.tl__item--past .tl__dot { background: transparent; border: 1px solid var(--line-strong); }

@media (max-width: 46rem) {
  .hero, .band { grid-template-columns: 1fr; gap: 1.5rem; }
  .row, .tl__item { grid-template-columns: 54px minmax(0, 1fr); gap: .2rem .8rem; }
  .row .meta, .tl__item .meta { grid-column: 2; }
  .row .when, .tl__item .when { grid-column: 2; }
  .row .what, .tl__item .what { grid-column: 2; }
}