/* The few rules Tailwind classes do not cover: the color tokens, shared control styles, animations and print.
 *
 * Every color is a token here. The light palette is on :root; the dark palette applies when the system asks
 * for dark (unless the page is told light) or when the page is told dark. Tailwind's color names in
 * index.html (ink, muted, line, paper, wash, brand-*, good, warn, bad) point at these tokens. */

:root {
  --wash: #f3f5f7;        /* page ground */
  --paper: #ffffff;       /* cards, tables, dialogs */
  --field: #ffffff;       /* inputs */
  --raise: #f7f9fb;       /* table headings, photo frame */
  --hover: #eef2f6;
  --ink: #1b2430;
  --ink-soft: #3a4553;
  --muted: #5f6b7a;
  --faint: #98a3b0;
  --line: #dde3ea;
  --line-strong: #c6ced8;
  --brand-50: #eaf1fb;
  --brand-100: #d5e3f7;
  --brand-500: #2b6fd6;
  --brand-600: #1f5fbf;
  --brand-700: #174a96;
  --on-brand: #ffffff;
  --good: #1a7f45;
  --good-bg: #e8f5ee;
  --warn: #a85c06;
  --bad: #b42318;
  --bad-bg: #fdecea;
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --wash: #0f141a; --paper: #171e27; --field: #111820; --raise: #1c2430; --hover: #1f2935;
    --ink: #e6ebf1; --ink-soft: #c5ced9; --muted: #9aa6b4; --faint: #6c7886; --line: #2a3440; --line-strong: #394553;
    --brand-50: #16233a; --brand-100: #1d2f4d; --brand-500: #6b9cf0; --brand-600: #82adf5; --brand-700: #a7c5f8; --on-brand: #0f141a;
    --good: #4cc47f; --good-bg: #12291c; --warn: #f0a53a; --bad: #f07167; --bad-bg: #2e1614;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --wash: #0f141a; --paper: #171e27; --field: #111820; --raise: #1c2430; --hover: #1f2935;
  --ink: #e6ebf1; --ink-soft: #c5ced9; --muted: #9aa6b4; --faint: #6c7886; --line: #2a3440; --line-strong: #394553;
  --brand-50: #16233a; --brand-100: #1d2f4d; --brand-500: #6b9cf0; --brand-600: #82adf5; --brand-700: #a7c5f8; --on-brand: #0f141a;
  --good: #4cc47f; --good-bg: #12291c; --warn: #f0a53a; --bad: #f07167; --bad-bg: #2e1614;
}

body { background: var(--wash); color: var(--ink); font-family: var(--font-ui); font-size: 15px; }
h1, h2, h3 { text-wrap: balance; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 50; background: var(--paper); color: var(--ink); padding: .5rem 1rem;
                   border: 2px solid var(--brand-500); }

:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* Tabs */
.tab { padding: .6rem .9rem; font-size: .9rem; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--brand-600); border-bottom-color: var(--brand-600); font-weight: 600; }

/* Buttons and inputs */
.btn { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border-radius: .375rem;
       background: var(--brand-600); color: var(--on-brand); font-size: .875rem; font-weight: 500; }
.btn:hover { background: var(--brand-700); }
.btn:disabled { background: var(--faint); cursor: not-allowed; }
.btn-quiet { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: .375rem;
             border: 1px solid var(--line-strong); background: var(--paper); font-size: .85rem; color: var(--ink); }
.btn-quiet:hover { background: var(--hover); }
.btn-quiet[aria-pressed="true"] { background: var(--brand-50); border-color: var(--brand-500); color: var(--brand-700); }
.field { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; }
.field > span { color: var(--ink-soft); }
.field input[type="number"], .field input[type="text"], .field select, .inp, textarea.inp {
  border: 1px solid var(--line-strong); border-radius: .375rem; padding: .3rem .5rem; font-size: .875rem;
  background: var(--field); color: var(--ink); width: 100%; }
.field input[type="range"] { width: 100%; accent-color: var(--brand-500); }
input[type="checkbox"] { accent-color: var(--brand-500); }
.has-source { text-decoration: underline dotted var(--faint); text-underline-offset: 3px; cursor: help; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: .5rem; }

/* Tables */
.tbl { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tbl th { text-align: left; font-weight: 600; color: var(--ink-soft); border-bottom: 1px solid var(--line-strong); padding: .45rem .5rem;
          background: var(--raise); position: sticky; top: 0; z-index: 1; }
.tbl td { border-bottom: 1px solid var(--line); padding: .4rem .5rem; vertical-align: top; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl td.num { font-family: var(--font-num); font-size: .8rem; white-space: nowrap; }
.tbl tbody tr:hover { background: var(--hover); }
.sort-btn { font: inherit; color: inherit; display: inline-flex; gap: .25rem; align-items: center; }
.sort-btn:hover { color: var(--brand-600); }
.tabular { font-variant-numeric: tabular-nums; }

/* Leaderboard rows slide to their new place when the order changes (see js/leaderboard.js). */
.row-move { transition: transform 420ms cubic-bezier(.2, .8, .2, 1); }

/* Slides */
.slide-enter-next { animation: slideInNext 320ms ease-out; }
.slide-enter-prev { animation: slideInPrev 320ms ease-out; }
@keyframes slideInNext { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes slideInPrev { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .row-move { transition: none; }
  .slide-enter-next, .slide-enter-prev { animation: none; }
}

.photo-frame { aspect-ratio: 16 / 10; max-width: 100%; background: var(--raise); border-radius: .5rem; overflow: hidden;
               display: flex; align-items: center; justify-content: center; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(8, 12, 18, .55); display: flex; align-items: flex-start;
         justify-content: center; padding: 4vh 1rem; z-index: 40; }
.modal[hidden] { display: none; }
.modal-card { background: var(--paper); color: var(--ink); border-radius: .5rem; max-width: 900px; width: 100%; max-height: 90vh;
              overflow: auto; padding: 1rem 1.25rem; }

.check-yes { color: var(--good); font-weight: 600; }
.check-no { color: var(--faint); }

/* Report mode and printing. The report view is the only thing printed, always on the light palette. */
.report h2 { font-size: 1.15rem; font-weight: 600; margin: 1.2rem 0 .5rem; }
.report h3 { font-size: 1rem; font-weight: 600; margin: .8rem 0 .3rem; }
.report p { margin: .4rem 0; line-height: 1.5; max-width: 75ch; }
.report .page-break { break-before: page; page-break-before: always; }
.report img.chart-img { max-width: 100%; height: auto; background: #ffffff; border-radius: .25rem; }
.report .vehicle-block { break-inside: avoid; page-break-inside: avoid; }

@media print {
  @page { margin: 14mm; }
  :root:not(#print-override) {
    color-scheme: light;
    --wash: #ffffff; --paper: #ffffff; --field: #ffffff; --raise: #f4f6f8; --hover: #ffffff;
    --ink: #111111; --ink-soft: #333333; --muted: #555555; --faint: #888888; --line: #dddddd; --line-strong: #bbbbbb;
    --brand-600: #1f5fbf; --brand-700: #174a96; --good: #1a7f45; --bad: #b42318;
  }
  .no-print, header, footer, #summary, #filters { display: none !important; }
  .view { display: none !important; }
  #view-report { display: block !important; }
  #view-report .report-controls { display: none !important; }
  .report { font-size: 10.5pt; }
  .tbl th { position: static; }
  .tbl { font-size: 8.5pt; }
  a { color: inherit; text-decoration: none; }
}