@layer components {
  /* Buttons */
  .btn {
    --btn-bg: var(--bg-raised);
    --btn-ink: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 0.55em 1.1em;
    border: 2px solid color-mix(in oklch, var(--ink) 85%, transparent);
    border-radius: var(--radius-pill);
    background: var(--btn-bg);
    color: var(--btn-ink);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 3px 0 color-mix(in oklch, var(--ink) 85%, transparent);
    transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out), background 0.2s;

    &:hover { transform: translateY(-1px); box-shadow: 0 4px 0 color-mix(in oklch, var(--ink) 85%, transparent); }
    &:active { transform: translateY(2px); box-shadow: 0 1px 0 color-mix(in oklch, var(--ink) 85%, transparent); }
    &:disabled, &[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
    &[data-active="true"], &[aria-pressed="true"] { --btn-bg: var(--ink); --btn-ink: var(--bg); }
  }

  .btn--primary { --btn-bg: var(--accent); --btn-ink: var(--accent-ink); }
  .btn--ghost { border-color: transparent; box-shadow: none; --btn-bg: transparent; }
  .btn--small { font-size: var(--step--1); padding: 0.35em 0.8em; }

  /* Segmented control */
  .segmented {
    display: inline-flex;
    padding: 0.25rem;
    gap: 0.25rem;
    border-radius: var(--radius-pill);
    background: var(--bg-sunken);
    border: 1px solid var(--line);

    & button {
      border: 0;
      background: transparent;
      padding: 0.35em 0.9em;
      border-radius: var(--radius-pill);
      font-weight: 600;
      font-size: var(--step--1);
      cursor: pointer;
      color: var(--ink-soft);
      transition: background 0.2s, color 0.2s;
    }

    & button[data-active="true"] { background: var(--bg-raised); color: var(--ink); box-shadow: var(--shadow-sm); }
  }

  /* Cards */
  .card {
    position: relative;
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-sm);
    padding: var(--space-m);
  }

  /* Chips & badges */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.15em 0.65em;
    border-radius: var(--radius-pill);
    font-size: var(--step--1);
    font-weight: 600;
    background: color-mix(in oklch, var(--chip, var(--accent)) 14%, var(--bg-raised));
    color: color-mix(in oklch, var(--chip, var(--accent)) 70%, var(--ink));
    border: 1px solid color-mix(in oklch, var(--chip, var(--accent)) 30%, transparent);
  }

  /* The 53 roundel */
  .roundel {
    display: inline-grid;
    place-items: center;
    inline-size: var(--size, 2.4rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: white;
    color: black;
    border: calc(var(--size, 2.4rem) * 0.07) solid black;
    font-family: var(--font-marquee);
    font-size: calc(var(--size, 2.4rem) * 0.42);
    line-height: 1;
  }

  /* Racing stripes as a decorative band */
  .stripes {
    height: var(--stripe-height, 0.5rem);
    background: var(--stripes);
    background-size: 100% 100%;
  }

  /* Form fields */
  .field { display: grid; gap: 0.35rem; }
  .field > label, .field > .label { font-weight: 600; font-size: var(--step--1); color: var(--ink-soft); }
  .input, .field input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), .field select, .field textarea {
    inline-size: 100%;
    padding: 0.6em 0.8em;
    border: 2px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--bg-raised);
    transition: border-color 0.2s, box-shadow 0.2s;
    field-sizing: content;
    min-inline-size: 6ch;

    &:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 20%, transparent); }
  }
  .field textarea { min-block-size: 4lh; resize: vertical; }

  /* Popovers share a look. Anchor positioning is used where supported. */
  [popover].pop {
    margin: 0;
    padding: var(--space-s);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--bg-raised);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
    max-inline-size: min(22rem, 90vw);
    position-try-fallbacks: flip-block, flip-inline;
    opacity: 0;
    translate: 0 6px;
    transition: opacity 0.2s, translate 0.2s var(--ease-out), overlay 0.2s allow-discrete, display 0.2s allow-discrete;

    &:popover-open { opacity: 1; translate: 0 0; }
    @starting-style { &:popover-open { opacity: 0; translate: 0 6px; } }
  }

  /* Visually hidden but available to assistive tech */
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

@layer components {
  .skip-link {
    position: fixed;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 100;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-m);
    background: var(--ink);
    color: var(--bg);
    translate: 0 -200%;
    transition: translate 0.2s var(--ease-out);
    &:focus { translate: 0 0; }
  }

  /* Herbie's livery as a full-width band: red, pearl, blue, pearl, red. */
  .livery {
    height: 0.6rem;
    background: linear-gradient(
      var(--racing-red) 0 40%, var(--pearl) 0 50%, var(--racing-blue) 0 66%, var(--pearl) 0 76%, var(--racing-red) 0
    );
  }
}

/* "By the numbers" board. Global rather than scoped: it renders inside an <Async> block,
   and branches the client builds from Herb's statics don't carry scope attributes. */
@layer components {
  .stats { display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-block: var(--space-l); }
  .stat { padding: var(--space-s) var(--space-m); border-radius: var(--radius-l); background: var(--bg-raised); border: 1px solid var(--line); box-shadow: var(--shadow-sm); animation: pop 0.6s var(--ease-spring) both; }
  .stat:nth-child(2) { animation-delay: 0.05s; }
  .stat:nth-child(3) { animation-delay: 0.1s; }
  .stat:nth-child(4) { animation-delay: 0.15s; }
  .stat:nth-child(5) { animation-delay: 0.2s; }
  .value { font-family: var(--font-marquee); font-size: var(--step-3); line-height: 1; color: var(--accent); }
  .stat-label { font-size: var(--step--1); color: var(--ink-soft); font-weight: 600; }
  @keyframes pop { from { opacity: 0; scale: 0.9; } }
  .bone { block-size: 5.6rem; border-radius: var(--radius-l); background: linear-gradient(90deg, var(--bg-sunken), var(--bg-raised), var(--bg-sunken)) 0 0 / 200% 100%; animation: shimmer 1.2s linear infinite; }
  @keyframes shimmer { to { background-position: -200% 0; } }

}

/* CSS-art posters (helper: poster_tag). Global so they can sit inside keyed rows, which
   must not render partials (see PLAN.md findings). */
@layer components {
  .poster {
    --tint: var(--poster-accent, #c8102e);
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    aspect-ratio: 2 / 3;
    padding: 7% 8%;
    overflow: hidden;
    border-radius: var(--radius-m);
    color: #fffaf0;
    background:
      radial-gradient(120% 70% at 50% 110%, rgb(0 0 0 / 0.55), transparent 60%),
      repeating-linear-gradient(115deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 9px),
      linear-gradient(160deg, color-mix(in oklch, var(--tint) 92%, white), color-mix(in oklch, var(--tint) 70%, black));
    box-shadow: inset 0 0 0 0.35rem rgb(255 255 255 / 0.12), var(--shadow-md);
    container-type: inline-size;
  }
  .poster::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    inline-size: 22%;
    translate: -50% 0;
    background: linear-gradient(90deg, transparent 0 18%, rgb(255 255 255 / 0.85) 18% 24%, #1f3a93 24% 30%, rgb(255 255 255 / 0.85) 30% 36%, transparent 36% 64%, rgb(255 255 255 / 0.85) 64% 70%, #1f3a93 70% 76%, rgb(255 255 255 / 0.85) 76% 82%, transparent 82%);
    opacity: 0.18;
    pointer-events: none;
  }
  .poster-kicker { font-family: var(--font-marquee); font-size: clamp(0.6rem, 7cqi, 0.9rem); letter-spacing: 0.14em; opacity: 0.85; }
  .poster-title {
    align-self: center;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.2rem, 15cqi, 3.2rem);
    line-height: 0.92;
    text-wrap: balance;
    text-shadow: 0.06em 0.06em 0 rgb(0 0 0 / 0.35);
    font-variation-settings: "SOFT" 100, "WONK" 1;
  }
  .poster-foot { display: flex; align-items: end; justify-content: space-between; gap: 0.5rem; }
  .poster-year { font-family: var(--font-marquee); font-size: clamp(1rem, 13cqi, 2.6rem); line-height: 1; }
  .poster-bug { inline-size: 45%; }
  .poster--sm .poster-kicker { display: none; }
}

/* Leaderboard (re-rendered by Turbo Stream broadcasts) and the timeline's polled ticker
   (built from Herb statics) live outside scoped styles. */
@layer components {
  .leaderboard { list-style: none; padding: 0; display: grid; gap: 0.35rem; margin-block-start: var(--space-2xs); }
  .leaderboard-row { display: grid; grid-template-columns: 1.4rem auto 1fr auto; align-items: center; gap: 0.6rem; padding: 0.35rem 0.5rem; border-radius: var(--radius-m); background: color-mix(in oklch, var(--car) 14%, var(--bg-raised)); animation: lb-in 0.4s var(--ease-out) both; }
  .leaderboard-rank { font-family: var(--font-marquee); color: var(--ink-faint); text-align: center; }
  .leaderboard-driver { display: grid; line-height: 1.2; font-size: var(--step--1); }
  .leaderboard-driver small, .leaderboard-laps small { color: var(--ink-faint); font-size: 0.75rem; }
  .leaderboard-laps { display: grid; justify-items: end; font-family: var(--font-marquee); font-size: var(--step-1); line-height: 1; }
  .leaderboard-empty { color: var(--ink-faint); font-size: var(--step--1); font-style: italic; }
  @keyframes lb-in { from { opacity: 0; translate: 0 0.4rem; } }

  .ticker { display: flex; gap: var(--space-l); align-items: center; overflow: hidden; white-space: nowrap; margin-block-start: var(--space-l); padding: 0.6rem 1rem; border-radius: var(--radius-pill); background: var(--asphalt); color: oklch(92% 0.01 85); font-size: var(--step--1); mask-image: linear-gradient(90deg, black 85%, transparent); }
  .ticker-label { font-family: var(--font-marquee); color: var(--sunflower); }
  .ticker-item { animation: tick 22s linear infinite; }
  @keyframes tick { from { translate: 30vw 0; } to { translate: -100% 0; } }
}