/* ========================================================
   CARPOOL CRITICS - DESIGN SYSTEM COMPONENT LAYER
   GENERATED by tools/design_system.py --emit-css.
   Do not edit by hand: edit DESIGN_SYSTEM.md, then re-emit.
   Loads AFTER style.css and site-bar.css on every page.
   ======================================================== */

:root {
  --ds-space-0: 0px;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 24px;
  --ds-space-6: 32px;
  --ds-space-7: 48px;
  --ds-space-8: 64px;
  --ds-space-9: 96px;
  --ds-space-10: 128px;
  --ds-bp-xs: 0px;
  --ds-bp-sm: 420px;
  --ds-bp-md: 720px;
  --ds-bp-lg: 980px;
  --ds-bp-xl: 1600px;
  --ds-margin-xs: 16px;
  --ds-margin-sm: 16px;
  --ds-margin-md: 24px;
  --ds-margin-lg: 32px;
  --ds-margin-xl: 48px;
  --ds-grid-columns: 12;
  --ds-gutter: 24px;
  --ds-max-width: 1600px;
  --ds-control-h: 44px;
  --ds-control-min-w: 44px;
  --ds-control-px: 16px;
  --ds-control-py: 10px;
  --ds-control-font: 13px;
  --ds-control-tracking: 0.12em;
  --ds-border-hair: 1px;
  --ds-border-rule: 2px;
  --ds-border-accent: 4px;
  --ds-radius: 0px;
  --ds-shadow-rest: none;
  --ds-shadow-hover: 4px 4px 0px var(--text-ticket);
  --ds-shadow-hover-ink: 4px 4px 0px var(--accent-amber);
  --ds-shadow-active: 2px 2px 0px var(--text-ticket);
  --ds-transition: none;
  --ds-nav-items: 5;
  --ds-group-max: 5;
  --ds-group-gap: 24px;
  --ds-section-gap: 32px;
  --ds-font-mono: "JetBrains Mono", VT323, Menlo, "Andale Mono", monospace;
  --ds-font-display: "Archivo Black", Oswald, "Arial Black", sans-serif;
}

/* state: deck_button/rest */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--ds-control-h);
  min-width: var(--ds-control-min-w);
  padding: var(--ds-control-py) var(--ds-control-px);
  border: 2px solid var(--text-ticket);
  border-radius: var(--ds-radius);
  background: var(--bg-asphalt);
  color: var(--text-ticket);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-control-font);
  font-weight: 700;
  letter-spacing: var(--ds-control-tracking);
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--ds-shadow-rest);
  transition: var(--ds-transition);
  cursor: pointer;
}

/* state: deck_button/hover */
.ds-btn:hover {
  border-color: var(--accent-amber);
  color: var(--accent-amber);
  box-shadow: var(--ds-shadow-hover-ink);
}

/* state: deck_button/active */
.ds-btn:active, .ds-btn[aria-current="page"] {
  border-color: var(--accent-amber);
  color: var(--accent-amber);
  box-shadow: var(--ds-shadow-active);
}

/* state: deck_button/focus */
.ds-btn:focus-visible {
  outline: 2px solid var(--accent-amber);
  outline-offset: 2px;
}

/* state: deck_button/disabled */
.ds-btn[disabled], .ds-btn[aria-disabled="true"] {
  border-style: dashed;
  border-color: var(--text-muted);
  color: var(--text-muted);
  box-shadow: none;
  cursor: not-allowed;
}

/* state: action_button/rest */
.ds-btn--primary {
  border-color: var(--accent-amber);
  color: var(--accent-amber);
}

/* state: action_button/hover */
.ds-btn--primary:hover {
  background: var(--accent-amber);
  color: var(--bg-asphalt);
  box-shadow: var(--ds-shadow-hover);
}

/* state: action_button/active */
.ds-btn--primary:active {
  box-shadow: var(--ds-shadow-active);
}

/* state: action_button/focus */
.ds-btn--primary:focus-visible {
  outline: 2px solid var(--accent-amber);
  outline-offset: 2px;
}

/* state: action_button/disabled */
.ds-btn--primary[disabled], .ds-btn--primary[aria-disabled="true"] {
  border-style: dashed;
  border-color: var(--text-muted);
  color: var(--text-muted);
  background: var(--bg-asphalt);
  box-shadow: none;
  cursor: not-allowed;
}

/* state: action_button/loading */
.ds-btn--primary[aria-busy="true"] {
  color: var(--text-muted);
  border-color: var(--text-muted);
  cursor: progress;
  /* the glyph is text, stepped by JS; no spinner, no shimmer */
}

/* state: ticket_card/rest */
.ds-ticket {
  background: var(--bg-dash);
  border: 2px dashed var(--text-muted);
  border-radius: var(--ds-radius);
  padding: 0;
  box-shadow: var(--ds-shadow-rest);
  transition: var(--ds-transition);
}

/* state: ticket_card/hover */
.ds-ticket:hover {
  border-color: var(--accent-amber);
  box-shadow: var(--ds-shadow-hover-ink);
}

/* state: ticket_card/focus */
.ds-ticket:focus-within {
  outline: 2px solid var(--accent-amber);
  outline-offset: 2px;
}

/* state: ticket_card/selected */
.ds-ticket[aria-selected="true"] {
  border-style: solid;
  border-color: var(--accent-amber);
  border-left-width: 4px;
  box-shadow: var(--ds-shadow-hover-ink);
}

/* state: ticket_card/empty */
.ds-ticket[data-state="empty"] {
  border-style: dashed;
  border-color: var(--text-muted);
  color: var(--text-muted);
}

/* state: page_header/rest */
.ds-page-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 32px;
  border-bottom: 2px solid var(--text-ticket);
}

/* state: notice/info */
.ds-notice {
  background: var(--bg-dash);
  border: 2px solid var(--text-ticket);
  border-radius: var(--ds-radius);
  padding: 16px;
  color: var(--text-ticket);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-control-font);
  line-height: 1.6;
}

/* state: notice/loading */
.ds-notice[data-state="loading"] {
  color: var(--text-muted);
  border-color: var(--text-muted);
  cursor: progress;
}

/* state: notice/empty */
.ds-notice[data-state="empty"] {
  color: var(--text-muted);
  border-style: dashed;
  border-color: var(--text-muted);
}

/* state: notice/error */
.ds-notice[data-state="error"] {
  border-color: var(--accent-brake);
  color: var(--text-ticket);
}

/* state: channel_select/rest */
.ds-channel {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--ds-control-h);
  padding: 8px 12px;
  border: 2px solid var(--text-muted);
  border-radius: var(--ds-radius);
  background: var(--bg-asphalt);
  color: var(--text-ticket);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-control-font);
  text-align: left;
  transition: var(--ds-transition);
}

/* state: channel_select/hover */
.ds-channel:hover {
  border-color: var(--accent-amber);
  color: var(--accent-amber);
  box-shadow: var(--ds-shadow-hover-ink);
}

/* state: channel_select/active */
.ds-channel:active {
  box-shadow: var(--ds-shadow-active);
}

/* state: channel_select/focus */
.ds-channel:focus-visible {
  outline: 2px solid var(--accent-amber);
  outline-offset: 2px;
}

/* state: channel_select/selected */
.ds-channel[aria-pressed="true"] {
  border-color: var(--accent-amber);
  border-left-width: 4px;
  color: var(--text-ticket);
}

/* state: channel_select/empty */
.ds-channel[data-state="empty"] {
  border-style: dashed;
  border-color: var(--text-muted);
  color: var(--text-muted);
  background: var(--bg-dash);
  cursor: not-allowed;
}

/* state: channel_select/disabled */
.ds-channel[disabled], .ds-channel[aria-disabled="true"] {
  border-style: dashed;
  border-color: var(--text-muted);
  color: var(--text-muted);
  box-shadow: none;
  cursor: not-allowed;
}

/* state: status_bar/rest */
.ds-status {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  min-height: 36px;
  padding: 0 var(--ds-gutter);
  border-top: 2px solid var(--text-muted);
  color: var(--text-muted);
  font-family: var(--ds-font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
}

/* state: scoreboard/rest */
.ds-scoreboard {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-control-font);
  font-variant-numeric: tabular-nums;
}

/* state: scoreboard/partial */
.ds-scoreboard [data-missing="true"] {
  color: var(--text-muted);
}

/* state: scoreboard/empty */
.ds-scoreboard[data-state="empty"] {
  color: var(--text-muted);
}

/* state: figure/rest */
.ds-figure {
  margin: 0;
  border: 1px solid var(--text-muted);
  border-radius: var(--ds-radius);
  background: var(--bg-dash);
  overflow: hidden;
}

/* state: figure/empty */
.ds-figure[data-state="empty"] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  color: var(--text-muted);
  border-style: dashed;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-control-font);
  letter-spacing: var(--ds-control-tracking);
}

/* state: data_table/rest */
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-control-font);
  font-variant-numeric: tabular-nums;
  border-top: 2px solid var(--text-ticket);
  border-bottom: 2px solid var(--text-ticket);
}

/* state: data_table/partial */
.ds-table [data-missing="true"] {
  color: var(--text-muted);
}

/* state: data_table/empty */
.ds-table[data-state="empty"] {
  color: var(--text-muted);
  border-style: dashed;
  border-color: var(--text-muted);
}

/* state: leaderboard/rest */
.ds-leaderboard {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ds-rank;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-control-font);
  font-variant-numeric: tabular-nums;
}

/* state: leaderboard/partial */
.ds-leaderboard [data-missing="true"] {
  color: var(--text-muted);
}

/* state: leaderboard/empty */
.ds-leaderboard[data-state="empty"] {
  color: var(--text-muted);
  border-top: 2px dashed var(--text-muted);
  border-bottom: 2px dashed var(--text-muted);
  padding: 12px 0;
}

/* state: bar_chart/rest */
.ds-bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-control-font);
  font-variant-numeric: tabular-nums;
}

/* state: bar_chart/empty */
.ds-bars[data-state="empty"] {
  color: var(--text-muted);
  border-top: 2px dashed var(--text-muted);
  padding-top: 12px;
}

/* state: sparkline/rest */
.ds-spark {
  margin: 0;
  font-family: var(--ds-font-mono);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
  white-space: pre;
  color: var(--accent-hov);
  overflow-x: auto;
}

/* state: sparkline/empty */
.ds-spark[data-state="empty"] {
  color: var(--text-muted);
}


/* data_table parts */
.ds-table caption {
  caption-side: bottom;
  padding-top: 8px;
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
}
.ds-table th {
  padding: 0 0 8px;
  border-bottom: 2px solid var(--text-ticket);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
}
.ds-table td {
  padding: 12px 0;
  border-bottom: var(--ds-border-hair) solid var(--bg-dash);
  color: var(--text-ticket);
  vertical-align: middle;
}
.ds-table th[data-num],
.ds-table td[data-num] { text-align: right; font-variant-numeric: tabular-nums; }

/* leaderboard parts */
.ds-leaderboard li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--ds-space-4);
  min-height: var(--ds-control-h);
  border-bottom: var(--ds-border-hair) solid var(--bg-dash);
  counter-increment: ds-rank;
}
.ds-leaderboard li::before {
  content: counter(ds-rank, decimal-leading-zero);
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.12em;
}
.ds-leaderboard [data-move] {
  color: var(--accent-amber);
  font-size: 12px;
  letter-spacing: 0.12em;
}

/* bar_chart parts - --ds-value is value / max * 100, so 0 is the origin */
.ds-bars li {
  display: grid;
  grid-template-columns: minmax(96px, 160px) minmax(0, 1fr) minmax(56px, 72px);
  align-items: center;
  gap: var(--ds-space-4);
}
.ds-bar-track {
  height: 16px;
  background: var(--bg-dash);
  border-left: var(--ds-border-hair) solid var(--text-muted);
}
.ds-bar {
  display: block;
  height: 100%;
  width: calc(var(--ds-value, 0) * 1%);
  background: var(--accent-amber);
}
.ds-bar-value { text-align: right; font-variant-numeric: tabular-nums; }

/* sparkline parts - the glyphs are ASCII; this is only the rail they sit in */
.ds-spark-wrap { overflow-x: auto; }

/* state: skip_link/rest */
.ds-skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: var(--ds-control-py) var(--ds-control-px);
  background: var(--accent-amber);
  color: var(--bg-asphalt);
  border: 2px solid var(--bg-asphalt);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-control-font);
  font-weight: 700;
  letter-spacing: var(--ds-control-tracking);
  text-transform: uppercase;
  text-decoration: none;
}
.ds-skip-link:focus-visible { top: 16px; outline: 2px solid var(--text-ticket); outline-offset: 2px; }

/* state: page_grid/rest */
.ds-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--ds-gutter);
  max-width: var(--ds-max-width);
  margin-inline: auto;
  padding-inline: var(--ds-margin-md);
}
.ds-grid > .ds-span-4  { grid-column: span 4; }
.ds-grid > .ds-span-6  { grid-column: span 6; }
.ds-grid > .ds-span-8  { grid-column: span 8; }
.ds-grid > .ds-span-12 { grid-column: span 12; }

/* state: eyebrow/rest */
.ds-eyebrow {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--ds-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* state: orientation/rest */
.ds-lede {
  margin: 0;
  max-width: 68ch;
  color: var(--text-muted);
  font-family: var(--ds-font-mono);
  font-size: 15px;
  line-height: 1.7;
}

/* state: visually_hidden/rest */
.ds-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 719px) {
  .ds-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-inline: var(--ds-margin-sm); }
  .ds-grid > .ds-span-4,
  .ds-grid > .ds-span-6,
  .ds-grid > .ds-span-8 { grid-column: span 4; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-btn, .ds-channel, .ds-ticket { transition: none; }
}