/* ASR Race Control v1.0 | 2026-09-29
   Colour values: current ASR Events theme. Typography sizes/44px touch targets
   below: recommended shared baseline for NEW tools, not changes to Events.
   Import this file relative to its bundled assets/ directory. */
@font-face { font-family: "DM Sans"; src: url("assets/fonts/DMSans-Variable.ttf") format("truetype"); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("assets/fonts/BarlowCondensed-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("assets/fonts/BarlowCondensed-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("assets/fonts/BarlowCondensed-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/IBMPlexMono-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }

:root, [data-asr-theme="light"] {
  color-scheme: light;
  --asr-bg: #EDF2F4;
  --asr-panel: #FFFFFF;
  --asr-surface: #F3F7F9;
  --asr-input: #FFFFFF;
  --asr-text: #142B38;
  --asr-muted: #506876;
  --asr-border: #C2D0D7;
  --asr-accent: #00768C;
  --asr-soft: #00768C0C;
  --asr-success: #08795A;
  --asr-warning: #925800;
  --asr-danger: #B62B47;
  --asr-secondary: #7357AC;
  --asr-action: #057E92;
  --asr-onAction: #FFFFFF;
}

[data-asr-theme="dark"] {
  color-scheme: dark;
  --asr-bg: #080E13;
  --asr-panel: #0D161E;
  --asr-surface: #111E28;
  --asr-input: #090F15;
  --asr-text: #EEF5FA;
  --asr-muted: #9AAFBF;
  --asr-border: #283946;
  --asr-accent: #27D5EF;
  --asr-soft: #27D5EF0D;
  --asr-success: #47DDA6;
  --asr-warning: #F2C275;
  --asr-danger: #FF8D9E;
  --asr-secondary: #B09AE9;
  --asr-action: #27D5EF;
  --asr-onAction: #041A25;
}

:root {
  --asr-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --asr-font-body: "DM Sans", Arial, sans-serif;
  --asr-font-data: "IBM Plex Mono", monospace;
  --asr-radius: 3px;
  --asr-space-1: 4px; --asr-space-2: 8px; --asr-space-3: 12px;
  --asr-space-4: 16px; --asr-space-6: 24px; --asr-space-8: 32px;
  --asr-space-12: 48px;
}
/* Optional starter recipes. Scope the theme to your app container. */
.asr-ui { font-family: var(--asr-font-body); font-size: 16px; line-height: 1.5; background: var(--asr-bg); color: var(--asr-text); }
.asr-ui * { box-sizing: border-box; }
.asr-ui h1, .asr-ui h2, .asr-ui h3 { font-family: var(--asr-font-display); font-weight: 600; margin: 0 0 16px; }
.asr-ui h1 { font-size: clamp(32px, 3vw, 44px); line-height: 1.05; }
.asr-ui h2 { font-size: 22px; }
.asr-ui h3 { font-size: 19px; }
.asr-ui .asr-data { font-family: var(--asr-font-data); font-variant-numeric: tabular-nums; }
.asr-ui .asr-panel { background: var(--asr-panel); border: 1px solid var(--asr-border); border-radius: var(--asr-radius); padding: 24px; }
.asr-ui .asr-button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--asr-border); border-radius: var(--asr-radius); font: 600 14px var(--asr-font-body); color: var(--asr-text); background: var(--asr-panel); cursor: pointer; }
.asr-ui .asr-button--primary { background: var(--asr-action); border-color: var(--asr-action); color: var(--asr-onAction); }
.asr-ui .asr-button:disabled { cursor: not-allowed; opacity: .55; }
.asr-ui :is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--asr-accent); outline-offset: 4px; }
.asr-ui label { display: block; font-size: 14px; color: var(--asr-muted); margin-bottom: 8px; }
.asr-ui :is(input, select, textarea) { width: 100%; min-height: 44px; padding: 10px 12px; color: var(--asr-text); background: var(--asr-input); border: 1px solid var(--asr-border); border-radius: var(--asr-radius); font: 16px var(--asr-font-body); }
.asr-ui [aria-invalid="true"] { border-color: var(--asr-danger); }
.asr-ui .asr-error { color: var(--asr-danger); margin-top: 8px; }
.asr-ui .asr-status { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid currentColor; border-radius: var(--asr-radius); font-size: 12px; }
.asr-ui .asr-status--success { color: var(--asr-success); }
.asr-ui .asr-status--warning { color: var(--asr-warning); }
.asr-ui .asr-status--danger { color: var(--asr-danger); }
.asr-ui .asr-status--info { color: var(--asr-accent); }
.asr-ui .asr-crest { display: inline-block; position: relative; width: 95px; aspect-ratio: 1270 / 487; overflow: hidden; flex: none; }
.asr-ui .asr-crest img { position: absolute; width: 145.354331%; max-width: none; height: auto; left: -22.677165%; top: -32.238193%; }
[data-asr-theme="dark"] .asr-crest img { filter: invert(1); }
/* Use the black-transparent source in the HTML above. Do not invert the white/black file. */
.asr-ui .asr-checker { background-image: conic-gradient(var(--asr-muted) 25%, transparent 0 50%, var(--asr-muted) 0 75%, transparent 0); background-size: 52px 52px; opacity: .14; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .asr-ui *, .asr-ui *::before, .asr-ui *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }