@font-face {
  font-family: Montserrat;
  src: url("montserrat-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Montserrat;
  src: url("montserrat-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0a0a0a;
  --elev: #1c1c1c;
  --card: #313233;
  --line: rgba(255, 255, 255, 0.12);
  --text: #f4f4f4;
  --muted: #acacac;
  --accent: #008ae2;
  --accent-dark: #006ba1;
  /* Team blue #008ae2 stays for stripes and borders. White text needs a deeper
     fill (5.1:1) and blue text needs a lighter (dark theme) or deeper (light) ink. */
  --accent-fill: #0072bc;
  --accent-fill-hover: #005f9e;
  --accent-ink: #45abf3;
  --ok-text: #083222;
  --warn-text: #1c1c1c;
  --danger: #dd3333;
  --warn: #fcb900;
  --ok: #3ecf8e;
  --header: #ffffff;
  --header-text: #0a0a0a;
  --input: #0a0a0a;
  --input-border: #555;
  --pill: #1c1c1c;
  --badge: #2a2a2a;
  --th: #141414;
  --chip-bg: #0a0a0a;
  --stat-on: #12344a;
  --bad-text: #ffb4b4;
  --gold: #1c1400;
  --gold-bg: #fcb900;
  /* LMU class colours (number panels). Text colour chosen for AA 4.5:1. */
  --cat-hypercar: #d01f36; --cat-hypercar-ink: #ffffff;
  --cat-lmp2: #2a5bd7;     --cat-lmp2-ink: #ffffff;
  --cat-gt3: #1b7f3b;      --cat-gt3-ink: #ffffff;
  --cat-lmp3: #8a3ad0;     --cat-lmp3-ink: #ffffff;
  --cat-gte: #e8650a;      --cat-gte-ink: #111111; /* GTE = legacy orange; change here if the sim uses yellow */
  /* Small markers (dots, select border) on dark cards need a lighter tint for 3:1. */
  --cat-hypercar-mark: #ff5a6a; --cat-lmp2-mark: #6e93ff; --cat-gt3-mark: #3fbf6a; --cat-lmp3-mark: #b57cf0; --cat-gte-mark: #ff8a3d;
  --font: Montserrat, "Segoe UI", sans-serif;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-weight: 500;
}
button, input, select, textarea { font-family: inherit; font-weight: 500; }
img { max-width: 100%; }

.top {
  background: var(--header);
  color: var(--header-text);
  border-bottom: 3px solid var(--accent);
  position: sticky;
  top: 0;
  z-index: 20;
}
.top-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 10px 18px;
  min-width: 0;
  box-sizing: border-box;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 280px; flex: 0 1 auto; text-decoration: none; color: inherit; }
.brand img { height: 36px; width: auto; max-width: 100%; min-width: 0; display: block; object-fit: contain; object-position: left center; }
.brand .for-dark, .gate-logo .for-dark { display: none; }
html[data-theme="dark"] .brand .for-light,
html[data-theme="dark"] .gate-logo .for-light { display: none; }
html[data-theme="dark"] .brand .logo-full.for-dark,
html[data-theme="dark"] .gate-logo .for-dark { display: block; }
.brand .logo-mark { display: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-size: 15px; letter-spacing: 0.04em; }
.brand-text span { font-size: 11px; color: #4b4f52; letter-spacing: 0.08em; text-transform: uppercase; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
.top label.who { font-size: 12px; color: var(--header-text); display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.top label.who select {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  color: #0a0a0a;
  padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, #333 50%), linear-gradient(135deg, #333 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% - 1px), calc(100% - 10px) calc(50% - 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.top select, .top .btn { background: #fff; }

.fresh {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  background: #1a3d57;
  color: #fff;
  padding: 8px 12px;
  font-size: 14px;
}
.fresh[hidden] { display: none; }

main { padding: 20px 16px 48px; max-width: 1100px; margin: 0 auto; }
h1 { font-size: 28px; margin: 0 0 6px; letter-spacing: -0.02em; }
h2 { font-size: 18px; margin: 0; }
.sub { color: var(--muted); margin: 0 0 16px; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 18px; }

.btn {
  border: 1px solid transparent;
  background: var(--accent-fill);
  color: #fff;
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
  line-height: 1;
}
.btn:hover { background: var(--accent-fill-hover); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--accent); color: var(--text); background: transparent; }
.top .btn.ghost { color: var(--header-text); border-color: #d0d0d0; }
.top .btn.ghost:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn.danger { background: var(--danger); }
.btn.small { min-height: 36px; padding: 8px 12px; font-size: 13px; }
.btn:disabled, .btn:disabled:hover { background: var(--badge); color: var(--muted); border-color: var(--line); cursor: not-allowed; }

.cards { display: grid; gap: 12px; }
.race-card {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 14px;
  align-items: center;
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
}
.race-card:hover { border-color: var(--accent); }
.date-badge {
  background: var(--bg);
  border-radius: 8px;
  text-align: center;
  padding: 8px 4px;
  line-height: 1.15;
}
.date-badge b { display: block; font-size: 22px; color: var(--accent-ink); }
.date-badge span { font-size: 12px; color: var(--muted); text-transform: uppercase; }
.meta { color: var(--muted); font-size: 13px; margin-top: 4px; }
.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  background: var(--pill);
  color: var(--muted);
  margin-right: 6px;
}
.pill.ok { color: var(--ok-text); background: var(--ok); }
.pill.no { color: #fff; background: var(--danger); }
.pill.mid { color: var(--warn-text); background: var(--warn); }
.pill.cat { color: #fff; background: var(--accent-fill); }

.tabs {
  display: flex;
  gap: 4px;
  margin: 8px 0 16px;
  padding: 4px;
  background: var(--elev);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.tabs a {
  color: var(--muted);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 999px;
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tabs a.on { background: var(--accent-fill); color: #fff; }
.tab-short { display: none; }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
.stat {
  background: var(--elev);
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 0;
}
.stat b { display: block; font-size: 20px; color: var(--accent-ink); }
.stat span { font-size: 12px; color: var(--muted); }

.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; min-width: 720px; background: var(--elev); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; background: var(--th); position: sticky; top: 0; }
tr.mine td { background: rgba(0, 138, 226, 0.08); }
tr.warn td { box-shadow: inset 3px 0 0 var(--warn); }
tr.bad td { box-shadow: inset 3px 0 0 var(--danger); }
.hint { color: var(--warn); font-size: 12px; display: block; margin-top: 4px; }
.hint.bad { color: var(--bad-text); }

input[type="text"], input[type="number"], input[type="time"], input[type="date"], input[type="url"], select, textarea {
  background: var(--input);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 8px 10px;
  min-height: 40px;
  width: 100%;
}
textarea { min-height: 72px; resize: vertical; }
.top select { width: auto; min-width: 0; max-width: 220px; background: #fff; color: #0a0a0a; border-color: #ccc; }
.checks { display: flex; gap: 8px; flex-wrap: wrap; }
.checks label { display: flex; align-items: center; gap: 4px; font-size: 13px; min-height: 40px; }
.saved { color: var(--ok); font-size: 12px; }

.car {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.car-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.form-grid label, .stack label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; }
.result { background: var(--bg); border-radius: 8px; padding: 8px 10px; }
.result b { display: block; font-size: 16px; }
.result span { color: var(--muted); font-size: 12px; }
.note { color: var(--muted); font-size: 13px; }
.drivers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.drivers label { background: var(--bg); border-radius: 999px; padding: 6px 10px; font-size: 13px; display: flex; gap: 6px; align-items: center; }

.gate {
  max-width: 460px;
  margin: 12vh auto;
  background: var(--card);
  padding: 28px 22px;
  border-radius: 16px;
  text-align: center;
}
.gate-logo img { height: 56px; width: auto; display: block; background: transparent; }
.section-label { margin: 22px 0 8px; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }

#toasts { position: fixed; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast { background: var(--card); border-left: 4px solid var(--accent); padding: 12px 14px; border-radius: 8px; max-width: 320px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.toast.bad { border-left-color: var(--danger); }

dialog {
  border: none;
  border-radius: 16px;
  background: var(--elev);
  color: var(--text);
  padding: 18px;
  width: min(520px, calc(100vw - 24px));
}
dialog::backdrop { background: rgba(0,0,0,.65); }
dialog h3 { margin: 0 0 12px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

.block-title { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }
.me-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  border: 1px solid rgba(0, 138, 226, 0.45);
  max-width: 100%;
}
.me-name { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.seg, .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; max-width: 100%; }
.seg-btn, .chip {
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--input-border);
  background: var(--chip-bg);
  color: var(--text);
  padding: 8px 12px;
  cursor: pointer;
}
.seg { flex-wrap: nowrap; }
.seg-btn { flex: 1 1 0; min-width: 0; padding: 8px 4px; font-size: 13px; line-height: 1.15; white-space: normal; }
.seg-btn.on, .chip.on { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.seg-btn:disabled, .chip:disabled { color: var(--muted); border-style: dashed; cursor: not-allowed; }
.stack-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.me-card textarea { min-height: 72px; }

.pilot-list { display: flex; flex-direction: column; gap: 8px; }
.pilot-line, .stint, .pilot-edit {
  background: var(--elev);
  border-radius: var(--radius);
  padding: 10px 12px;
  max-width: 100%;
  min-width: 0;
}
.pilot-line.mine { box-shadow: inset 3px 0 0 var(--accent); }
.pilot-line-top, .stint-line, .pilot-line-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.pilot-line-top strong { min-width: 0; overflow-wrap: anywhere; }
.pilot-line-sub { margin-top: 6px; color: var(--muted); font-size: 13px; }
.badge {
  margin-left: auto;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  background: var(--badge);
  color: var(--muted);
  white-space: nowrap;
}
.badge.ok { background: var(--ok); color: var(--ok-text); }
.badge.no { background: var(--danger); color: #fff; }
.badge.mid { background: var(--warn); color: var(--warn-text); }
.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-fill);
  color: #fff;
  font-size: 12px;
}
.mark.off { background: var(--badge); color: var(--muted); }
.snippet {
  min-width: 0;
  flex: 1 1 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stint { border-left: 4px solid transparent; margin-bottom: 8px; }
.stint.warn { border-left-color: var(--warn); }
.stint.bad { border-left-color: var(--danger); }
.stint-line { margin-bottom: 8px; }
.stint-when { font-weight: 700; }
.stint .laps { margin-left: auto; color: var(--muted); font-size: 12px; }
.stint select { min-height: 44px; }
.totals { list-style: none; margin: 8px 0 0; padding: 0; }
.totals li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  min-width: 0;
}
.totals span { color: var(--muted); text-align: right; }

@media (max-width: 760px) {
  .top-inner { padding: 6px 8px; gap: 6px; flex-wrap: nowrap; }
  .brand { flex: 0 0 auto; min-width: 0; max-width: none; }
  .brand .logo-full { display: none !important; }
  .brand .logo-mark.for-light { display: block; height: 32px; width: auto; }
  html[data-theme="dark"] .brand .logo-mark.for-light { display: none; }
  html[data-theme="dark"] .brand .logo-mark.for-dark { display: block; height: 32px; width: auto; }
  .brand-text { display: none; }
  .who-label { display: none; }
  h1 { font-size: 22px; }
  .sub { margin-bottom: 10px; }
  .race-card { grid-template-columns: 64px minmax(0, 1fr); }
  .race-card .go { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 1 / -1; }
  .pill { margin-right: 0; }
  main { padding: 12px 10px 40px; }
  .top-actions { width: auto; flex: 1 1 0%; margin-left: 0; flex-wrap: nowrap; min-width: 0; justify-content: flex-end; gap: 6px; }
  .top label.who { flex: 1 1 0%; min-width: 0; max-width: 100%; overflow: hidden; }
  .top label.who select { width: 100%; min-width: 0; max-width: 100%; min-height: 36px; }
  .top .btn.small { min-height: 36px; padding: 0 10px; flex: 0 0 auto; }
  .top .admin-btn { max-width: 42%; }
  .tabs { width: 100%; }
  .tabs a { flex: 1 1 0; min-width: 0; padding: 8px 4px; font-size: 13px; }
  .tab-full { display: none; }
  .tab-short { display: inline; }
  .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .stat b { font-size: 18px; }
  .stat span { font-size: 11px; }
  .form-grid { grid-template-columns: 1fr; }
  .results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result b { overflow-wrap: anywhere; font-size: 15px; }
  .car { padding: 12px; }
  .drivers label { min-height: 44px; max-width: 100%; }
  .note { overflow-wrap: anywhere; }
  input, select, textarea { max-width: 100%; }
}

.tag {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  margin: 0 0 6px;
}
.tag.gold { background: var(--gold-bg); color: var(--gold); }
.tag.blue { background: var(--accent-fill); color: #fff; }
.race-card.special { box-shadow: inset 4px 0 0 #fcb900; }
.race-card.round { box-shadow: inset 4px 0 0 #008ae2; }
button.stat {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border: 1px solid transparent;
  width: auto;
  min-width: 0;
  min-height: 58px;
}
button.stat.on { border-color: #008ae2; background: var(--stat-on); }
.corre-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  min-width: 0;
}
.corre-row strong { min-width: 0; }
.chip.corre { min-height: 44px; }
.matrix { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; max-width: 100%; }
.mx-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(var(--cols), minmax(0, 1fr));
  gap: 4px;
  align-items: center;
  font-size: 13px;
}
.mx-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-head, .matrix .mx-row:first-child { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.mx-on { color: #fff; background: var(--accent-fill); border-radius: 6px; text-align: center; padding: 4px 0; }
.mx-off { color: var(--muted); text-align: center; }
.mx-name { font-weight: 700; }
h3.block-title { margin-top: 8px; }

.race-title, .race-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.race-title h2, .race-head h1 { margin: 0; min-width: 0; }
.track { width: 72px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; color: #008ae2; }
.track svg { width: 72px; height: 44px; display: block; }
.track svg path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.track img { max-width: 72px; max-height: 44px; object-fit: contain; }
.linea-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-ink);
  border: 1px solid var(--accent-ink);
  border-radius: 999px;
  padding: 1px 6px;
  vertical-align: middle;
}
.driver-row {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.driver-row .who { display: flex; flex-direction: column; min-width: 0; }
.driver-row .who small { color: var(--muted); font-size: 12px; }
.driver-row.taken { opacity: 0.55; }
.driver-row input { width: 22px; height: 22px; flex: none; }

.summary { background: var(--card); border-radius: var(--radius); padding: 12px 14px; margin: 12px 0; }
.summary h2 { margin: 0 0 8px; font-size: 18px; }
.line-sum { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); }
.line-sum strong { color: var(--text); }
.line-sum span { color: var(--muted); font-size: 13px; }
details.extra { margin: 12px 0 20px; }
details.extra summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--accent-ink); font-weight: 700; }
.type-pick { display: flex; flex-direction: column; gap: 10px; }
.type-pick .btn { width: 100%; }

html[data-theme="dark"] {
  --header: #0a0a0a;
  --header-text: #f4f4f4;
}
html[data-theme="light"] {
  --bg: #f4f7fb;
  --elev: #ffffff;
  --card: #ffffff;
  --line: #d5dee8;
  --text: #14202b;
  --muted: #3e4c5a;
  --accent: #008ae2;
  --accent-dark: #006ba1;
  --accent-ink: #006ba1;
  --ok-text: #ffffff;
  --warn-text: #ffffff;
  --danger: #b42318;
  --warn: #8a5a00;
  --ok: #0d7a45;
  --header: #ffffff;
  --header-text: #14202b;
  --input: #ffffff;
  --input-border: #b7c3d0;
  --pill: #e7eef5;
  --badge: #e7eef5;
  --th: #eef3f8;
  --chip-bg: #ffffff;
  --stat-on: #e5f3fc;
  --bad-text: #9d1c1c;
  --gold: #5c3d00;
  --cat-hypercar: #c8102e; --cat-hypercar-ink: #ffffff;
  --cat-lmp2: #1f4fbf;     --cat-lmp2-ink: #ffffff;
  --cat-gt3: #1b7f3b;      --cat-gt3-ink: #ffffff;
  --cat-lmp3: #7b2cbf;     --cat-lmp3-ink: #ffffff;
  --cat-gte: #e8650a;      --cat-gte-ink: #111111;
  --cat-hypercar-mark: var(--cat-hypercar); --cat-lmp2-mark: var(--cat-lmp2); --cat-gt3-mark: var(--cat-gt3); --cat-lmp3-mark: var(--cat-lmp3); --cat-gte-mark: var(--cat-gte);
  --gold-bg: #ffe7a3;
}
html[data-theme="light"] .car,
html[data-theme="light"] .race-card,
html[data-theme="light"] .champ-card,
html[data-theme="light"] .summary,
html[data-theme="light"] .me-card {
  border: 1px solid var(--line);
}
.champ-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--card);
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: inset 4px 0 0 #008ae2;
  border: 1px solid transparent;
}
.champ-card:hover { border-color: var(--accent); }
.champ-card h2 { font-size: 18px; }
.line-roster { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.line-roster .driver-row { width: 100%; }
.line-roster .move-pilot,
select.move-pilot {
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  background: var(--input);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 15px;
}
.session-when { color: var(--text); font-weight: 700; }
.assign-all { width: 100%; max-width: 520px; margin: 4px 0 8px; }
.theme-btn {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid #d0d0d0;
  background: #fff;
  color: #0a0a0a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 0;
}
.theme-btn svg { display: block; }
.theme-btn:hover { border-color: #008ae2; color: #006ba1; }
.top .admin-btn.on, .top .admin-btn.on:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.adm-short { display: none; }
input[readonly] { opacity: 0.85; }
details.plan-data, details.all-stints { margin-top: 8px; }
details.plan-data .form-grid { margin-top: 8px; }
@media (max-width: 400px) {
  .admin-btn.on .adm-long { display: none; }
  .admin-btn.on .adm-short { display: inline; }
}

.drafts { margin: 0 0 18px; }
.draft-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  margin: 8px 0;
  box-shadow: inset 4px 0 0 var(--gold-bg);
  border: 1px solid var(--line);
}
.draft-card h2 { margin: 4px 0; }
.draft-card.champ-draft { box-shadow: inset 4px 0 0 var(--accent-fill); }

.admin-btn { flex: 0 0 auto; white-space: nowrap; }

.cal-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 14px; max-width: 100%; }
.cal-bar .btn { max-width: 100%; }
select.cal-scope {
  flex: 1 1 180px;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  background: var(--input);
  color: var(--text);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 15px;
}
.checkline { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); min-height: 44px; max-width: 100%; }
.mine, .cards, .race-card, .cal-bar { max-width: 100%; }
.race-main { min-width: 0; }
.race-card h2, .race-card .meta, .mine-stints li { overflow-wrap: anywhere; }
.mine-stints { margin: 6px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 13px; }
.badge.mid { margin-top: 6px; }
.chip { max-width: 100%; }
.gate-logo { display: flex; justify-content: center; }

.gap-banner, .gap-card {
  background: #3a1212;
  color: #ffd0d0;
  border: 1px solid #dd3333;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0 12px;
  max-width: 100%;
}
.gap-banner, .gap-card p { margin: 6px 0 0; overflow-wrap: anywhere; }
.gap-row { color: #ffb4b4; margin: 4px 0; overflow-wrap: anywhere; }
.badge.gap { background: #dd3333; color: #fff; margin-left: 0; }
html[data-theme="light"] .gap-banner,
html[data-theme="light"] .gap-card { background: #fde8e8; color: #7a1212; }
html[data-theme="light"] .gap-row { color: #9d1c1c; }
dialog .stack p { margin: 0 0 12px; overflow-wrap: anywhere; }

.relevo-plan { list-style: none; margin: 0 0 12px; padding: 0; max-width: 100%; }
.relevo-plan li { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); overflow-wrap: anywhere; }
html[data-theme="light"] .relevo-plan li { border-bottom-color: rgba(0,0,0,.08); }
.relevo-note { margin-bottom: 4px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.row-actions .btn { max-width: 100%; }

.race-card .badge { margin-top: 6px; white-space: normal; max-width: 100%; }
.race-card .hint { margin: 6px 0 0; }

/* 1.4.3: readable links and colored states in both themes */
a.back-link { color: var(--accent-ink); }

/* 1.4.3: iPhone safe areas (notch, Dynamic Island, home bar) when opened from
   the home screen. The insets are 0 in normal browsers, so max() keeps the old
   padding there. The strip behind the status bar stays dark in both themes so
   the white clock of black-translucent is always readable. */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}
.top {
  padding-top: var(--sat);
  background: linear-gradient(to bottom, #0a0a0a var(--sat), var(--header) var(--sat));
}
.top-inner {
  padding-left: max(18px, var(--sal));
  padding-right: max(18px, var(--sar));
}
main {
  padding-left: max(16px, var(--sal));
  padding-right: max(16px, var(--sar));
  padding-bottom: max(48px, calc(var(--sab) + 24px));
}
.fresh { padding-left: max(12px, var(--sal)); padding-right: max(12px, var(--sar)); }
#toasts {
  bottom: max(16px, calc(var(--sab) + 12px));
  right: max(16px, var(--sar));
  left: auto;
}
dialog {
  max-height: calc(100dvh - var(--sat) - var(--sab) - 24px);
  overflow: auto;
}
@media (max-width: 760px) {
  .top-inner { padding-left: max(8px, var(--sal)); padding-right: max(8px, var(--sar)); }
  main {
    padding-left: max(10px, var(--sal));
    padding-right: max(10px, var(--sar));
    padding-bottom: max(40px, calc(var(--sab) + 24px));
  }
  #toasts { left: max(10px, var(--sal)); right: max(10px, var(--sar)); }
  .toast { max-width: none; }
}

/* 1.4.4: sharp header in the home-screen app. The status bar is now opaque
   ("black"), so the inset is usually 0. If iOS still draws its edge blur, the
   extra standalone gap keeps it over the dark strip, not over the controls.
   Nothing on the header may blur, fade or transform its own content. */
:root { --top-gap: 0px; }
@media (display-mode: standalone) {
  :root { --top-gap: 14px; }
}
.top {
  padding-top: calc(var(--sat) + var(--top-gap));
  background: linear-gradient(to bottom, #0a0a0a calc(var(--sat) + var(--top-gap)), var(--header) calc(var(--sat) + var(--top-gap)));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  filter: none;
  opacity: 1;
  transform: none;
}
.top * { -webkit-backdrop-filter: none; backdrop-filter: none; filter: none; }

/* 1.5.0 */
/* championship slots: info chips, the agreed one highlighted */
.slots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 4px; max-width: 100%; }
.slots-label { font-size: 12px; color: var(--muted); }
.slot { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--input-border); border-radius: 999px; padding: 2px 9px; font-size: 13px; color: var(--text); background: var(--chip-bg); }
.slot.on { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; font-weight: 700; }
.slot-tag { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; background: #fff; color: #0a4f7d; border-radius: 999px; padding: 1px 6px; }
.other-name[hidden] { display: none; }

/* Novedades popup + footer link (1.7.0) */
.news-dialog { max-width: min(520px, calc(100vw - 24px)); }
.news-sub { margin: -6px 0 10px; color: var(--muted); font-size: 14px; }
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.news-list li { line-height: 1.4; overflow-wrap: anywhere; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--chip-bg); color: var(--text); }
.app-foot { margin: 28px 0 8px; text-align: center; font-size: 13px; color: var(--muted); }
.link-btn { background: none; border: 0; padding: 6px 4px; font: inherit; color: var(--accent-ink); text-decoration: underline; cursor: pointer; min-height: 32px; }

/* Race categories (1.8.0): info chips, not líneas */
.classes-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 4px; }
.empty-lines { border: 1px dashed var(--input-border); border-radius: var(--radius); padding: 16px; margin: 12px 0; background: var(--card); }
.empty-lines h2 { margin: 0 0 6px; font-size: 18px; }
.empty-lines p { margin: 0 0 12px; color: var(--muted); }
.hint.cat-hint { color: var(--text); font-weight: 600; margin: 0; }
.hint.cat-hint:empty { display: none; }

/* Class colours (1.8.1). Square "number panel" chips, distinct from the
   rounded race-type tags (gold = Evento especial, blue = Campeonato). */
.cat-hypercar { --cat-c: var(--cat-hypercar); --cat-ink: var(--cat-hypercar-ink); --cat-m: var(--cat-hypercar-mark); }
.cat-lmp2 { --cat-c: var(--cat-lmp2); --cat-ink: var(--cat-lmp2-ink); --cat-m: var(--cat-lmp2-mark); }
.cat-gt3 { --cat-c: var(--cat-gt3); --cat-ink: var(--cat-gt3-ink); --cat-m: var(--cat-gt3-mark); }
.cat-lmp3 { --cat-c: var(--cat-lmp3); --cat-ink: var(--cat-lmp3-ink); --cat-m: var(--cat-lmp3-mark); }
.cat-gte { --cat-c: var(--cat-gte); --cat-ink: var(--cat-gte-ink); --cat-m: var(--cat-gte-mark); }
.cat-chip { display: inline-flex; align-items: center; border-radius: 3px; padding: 1px 7px; font-size: 12px; font-weight: 800; letter-spacing: .03em; line-height: 1.5; color: var(--text); background: var(--badge); border: 1px solid var(--line); }
.cat-chip.has-cat, .pill.cat.has-cat { background: var(--cat-c); color: var(--cat-ink); border-color: var(--cat-c); }
.pill.cat.has-cat { border-radius: 3px; font-weight: 800; }
.cat-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--cat-m, var(--cat-c)); margin-right: 6px; vertical-align: middle; flex: none; box-shadow: 0 0 0 1px rgba(127,127,127,.35); }
.chip.has-cat { display: inline-flex; align-items: center; }
.chip.on.has-cat { background: var(--cat-c); border-color: var(--cat-c); color: var(--cat-ink); }
.chip.on .cat-dot { box-shadow: 0 0 0 2px #ffffff; }
.chip.on.has-cat .cat-dot { background: var(--cat-ink); box-shadow: none; }
select.cat-select.has-cat { border-left: 8px solid var(--cat-m, var(--cat-c)); }
.tu-linea { margin: 4px 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tu-linea .note { margin: 0; }
.tu-linea strong { display: inline-flex; align-items: center; }

/* 1.9.1 — iOS Safari zooms into any form control whose font-size is < 16px.
   Keep pinch-zoom (no maximum-scale) and just make controls 16px on touch/mobile. */
@media (max-width: 760px), (pointer: coarse) {
  input, select, textarea,
  .top label.who select,
  .form-grid input, .stack input, .stack select, .stack textarea { font-size: 16px !important; }
}
input.invalid { border-color: var(--bad, #c8102e) !important; box-shadow: 0 0 0 2px rgba(200, 16, 46, 0.18); }
.setup-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); margin: 8px 0; }
.setup-field input { font-weight: 700; }
.lineup { margin: 6px 0 0; }
.lineup p { margin: 2px 0; }
.lineup-car { font-weight: 700; color: var(--text, inherit); }

/* 1.10.1 championship rounds */
.slots-label { flex: 0 0 100%; }
.pilot-line .badge.insc { margin-left: 8px; }
.me-state { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin: 6px 0 0; }
.insc-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; }
.insc-line .btn.small { margin-left: auto; }
.me-state .badge { margin-left: 0; }
.champ-car { margin: 4px 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.champ-car .chip, .champ-car .pill { margin: 0; }
.summary .insc-line .btn.small { margin-left: 16px; }

/* ===== 1.10.4 Fondos de tarjeta (sin imágenes). Clase en <html>: fondo-a | fondo-b | fondo-c ===== */
.fondo-a .race-card { background-image: linear-gradient(100deg, rgba(0,138,226,.07) 0%, rgba(0,138,226,0) 45%); }
.fondo-a .race-card.special { background-image: linear-gradient(100deg, rgba(212,160,23,.08) 0%, rgba(212,160,23,0) 45%); }
.fondo-b .race-card { background-image: linear-gradient(115deg, transparent 0 62%, rgba(0,138,226,.09) 62% 67%, transparent 67% 70%, rgba(0,138,226,.06) 70% 73%, transparent 73%); }
.fondo-c .race-card { position: relative; overflow: hidden; }
.fondo-c .race-card::after { content: ""; position: absolute; top: 0; right: 0; width: 84px; height: 84px; pointer-events: none;
  background: conic-gradient(rgba(0,138,226,.16) 25%, transparent 0 50%, rgba(0,138,226,.16) 0 75%, transparent 0) 0 0 / 12px 12px;
  -webkit-mask-image: linear-gradient(225deg, #000 0%, transparent 70%); mask-image: linear-gradient(225deg, #000 0%, transparent 70%); }
.fondo-c .race-card > * { position: relative; z-index: 1; }

/* 1.10.4 bandera del circuito junto al título */
.with-flag .flag { display: inline-block; vertical-align: -1px; margin-right: 8px; line-height: 0; }
.with-flag .flag svg { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
h1.with-flag .flag svg { width: 27px; height: 18px; }

/* 1.10.4 botón Volver */
.back-row { margin: 0 0 10px; }
a.back-btn { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }

/* 1.10.4 pista corta en Mis carreras */
.card-hint { font-size: 13px; color: var(--muted, #888); align-self: center; }

/* 1.10.4 día de la semana en el bloque de fecha */
.date-badge .wd { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }

/* 1.10.5 estado siempre abajo a la derecha, mismo tamaño en todas las tarjetas */
.race-card .go { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; grid-column: 1 / -1; }
.race-card .go .badge.status { margin-left: auto; font-size: 12px; line-height: 1; padding: 5px 10px; width: 92px; text-align: center; white-space: nowrap; box-sizing: border-box; }

/* 1.10.6 ventana «Añadir al calendario» */
.cal-dialog { max-width: 360px; width: calc(100vw - 32px); }
.cal-opts { display: grid; gap: 8px; margin: 8px 0 12px; }
.cal-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line, rgba(127,127,127,.3)); border-radius: 10px; cursor: pointer; }
.cal-opt:has(input:checked) { border-color: #008ae2; }
.cal-opt input { margin-top: 3px; width: 18px; height: 18px; accent-color: #008ae2; flex: none; }
.cal-opt b { display: block; font-weight: 700; }
.cal-opt small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.cal-opt[hidden] { display: none; }
.cal-dialog .dialog-actions { flex-wrap: wrap; }

/* 1.10.8 botones de repartir (naranja) y stints */
.assign-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 24px; }
.assign-bar .btn { flex: 1 1 220px; }
.btn.btn-orange { background: #f28c28; border-color: #f28c28; color: #1a1a1a; }
.btn.btn-orange:hover, .btn.btn-orange:focus-visible { background: #e07b17; border-color: #e07b17; }
.stint .stint-when { font-weight: 600; }
.stint .laps { font-size: 13px; }
.lap-avg { display: block; margin-top: 4px; font-weight: 400; }

/* 1.10.9 hora en el bloque de fecha */
.date-badge .bt { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--accent-ink); letter-spacing: .02em; }

/* 1.10.9 tarjeta de línea: ocupación arriba a la izquierda, categoría junto al nombre */
.car-head-main { min-width: 0; flex: 1 1 200px; }
.car-head-main .pill.occ { display: inline-block; margin: 0 0 6px; }
.car-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.car-title h2 { margin: 0; }
.car-title .pill { margin: 0; }

/* 1.10.10 etiqueta de línea centrada con el nombre en la lista Equipo */
.pilot-line-top strong { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; line-height: 1.25; }
.pilot-line-top strong .linea-tag { margin-left: 0; line-height: 1.4; vertical-align: baseline; }

/* 1.10.12 botones naranja con texto blanco */
.btn.btn-orange { color: #fff; background: #b8590d; border-color: #b8590d; } /* 4.7:1 con blanco (WCAG AA) */
.btn.btn-orange:hover, .btn.btn-orange:focus-visible { background: #a34e0b; border-color: #a34e0b; color: #fff; }
.assign-all-bar { margin-top: 8px; }
.assign-all-bar .assign-all { max-width: none; width: 100%; }

/* 1.10.14: official slots */
.slot-free[hidden] { display: none !important; }
/* 1.10.15: iOS Safari / Android Chrome give native date & time inputs an
   intrinsic min-width that ignores the grid track, so date and time overlapped.
   Date gets its own full row; time + «Quitar» share the second row. */
.official-slots .os-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "d d" "t q"; gap: 6px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--input-border); }
.official-slots .os-row:last-child { border-bottom: 0; }
.official-slots .os-row [data-os=date] { grid-area: d; }
.official-slots .os-row [data-os=time] { grid-area: t; }
.official-slots .os-row button { grid-area: q; }
.official-slots .os-row input { min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
.field-label { font-weight: 600; }

/* 1.10.15: native date/time controls never wider than their box (iOS + Android). */
input[type="date"], input[type="time"] { box-sizing: border-box; min-width: 0; max-width: 100%; display: block; -webkit-appearance: none; appearance: none; }
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; min-width: 0; }
input[type="date"]::-webkit-datetime-edit { padding: 0; }
.stack label, .slot-fields label, .slot-free label { min-width: 0; max-width: 100%; }
dialog .stack { min-width: 0; }

/* 1.10.16: línea driver rows: name + availability left, button right, centred. */
.line-roster .driver-row { justify-content: space-between; align-items: center; }
.line-roster .driver-row .who { flex: 1 1 auto; }
.line-roster .driver-row > .btn { flex: none; margin-left: auto; }
/* 1.10.16: «Apuntarme» only as wide as its text, same space above and below. */
.line-roster > .btn.join-line { align-self: flex-start; width: auto; margin: 12px 0; }
.line-roster > .btn.join-line + .move-pilot { margin-top: 0; }

/* 1.10.17: Slot row + setup file in «Datos de la carrera»; race editor two-up fields. */
.plan-data .slot-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.plan-data .slot-now { font-weight: 600; color: var(--text); }
.plan-data .pq-note { margin: 0 0 8px; }
.setup-field { display: flex; flex-direction: column; gap: 6px; }
.setup-field > label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.setup-file { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.setup-file .row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slot-stray[hidden] { display: none !important; }

/* 1.12.0: championship líneas */
.round-linea .pilot-line{flex-wrap:wrap}
.lineas-matrix .mx-check{color:var(--accent-fill);font-weight:800;font-size:16px;text-align:left;padding-left:2px;line-height:1}
.lineas-matrix .mx-row{border-bottom:1px solid color-mix(in srgb, currentColor 10%, transparent);padding-top:5px;padding-bottom:5px}
.lineas-matrix .mx-row:first-child{border-bottom-color:color-mix(in srgb, currentColor 18%, transparent)}
@media (hover:hover) and (min-width:700px){.lineas-matrix .mx-row:not(:first-child):hover{background:color-mix(in srgb, currentColor 5%, transparent)}}

.race-card .go .badge-stack { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.race-card .go .badge-stack .badge.status { width: auto; min-width: 92px; margin: 0; }

/* 1.14.0: «Horas sin cubrir» (thin bar per línea). */
.cover { margin: 6px 0 10px; }
.cover-bar { position: relative; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(127,127,127,.18); }
.cover-bar span { position: absolute; top: 0; bottom: 0; }
.cover-bar .ok { background: var(--ok, #1f8a4c); }
.cover-bar .gap { background: var(--danger); }
.cover-ends { display: flex; justify-content: space-between; font-size: 12px; margin-top: 2px; }
.cover-gaps { margin: 2px 0 0; font-size: 13px; color: var(--danger); }
dialog .discord-types label.check { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; }
dialog .discord-types label.check input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: none; }

/* 1.15.0: Carrera tab. «Tus relevos» on top, «Todos los stints» collapsed, each stint's editor on tap,
   and the DST change as a red pill wherever it appears. */
.my-relevos { background: var(--card); border-radius: var(--radius); padding: 12px 14px; margin: 12px 0; }
.my-relevos h2 { margin: 0 0 6px; font-size: 16px; }
.my-relevos ul { list-style: none; margin: 0; padding: 0; }
.my-relevos li { padding: 6px 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.my-relevos li:first-child { border-top: 0; }
.my-relevos .when { font-weight: 700; }
.my-relevos .line { color: var(--muted); }
.my-relevos p { margin: 0; color: var(--muted); }
.dst-pill { display: inline-block; background: var(--danger); color: #fff; font-weight: 700; font-size: 12px; line-height: 1.2; padding: 2px 8px; border-radius: 999px; margin-left: 4px; white-space: nowrap; }
details.stint { padding: 0; }
details.stint { margin-bottom: 0; }
details.stint > summary { list-style: none; cursor: pointer; padding: 6px 12px; margin: 0; min-height: 44px; display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: center; flex-wrap: nowrap; }
details.stint > summary .stint-when { min-width: 0; }
details.stint > summary::-webkit-details-marker { display: none; }
details.stint > summary .stint-who { margin-left: auto; font-weight: 600; text-align: right; }
details.stint > summary .stint-who.none { color: var(--muted); font-weight: 400; }
details.stint .stint-edit { padding: 0 12px 10px; display: flex; flex-direction: column; gap: 6px; }
details.stint .stint-edit .laps { margin-left: 0; }
details.all-stints .stint-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
details.all-stints { margin: 0 0 8px; }
details.all-stints details.stint > summary { display: grid; color: var(--text); font-weight: 400; }
details.all-stints details.stint > summary b { font-weight: 700; }
details.plan-data:has(+ details.all-stints) { margin-bottom: 0; }

/* 1.15.0: disclosure toggles («Datos de la carrera», «Todos los stints», «Fecha de fin») as blue pills
   with a chevron that turns when open. */
details.extra > summary, summary.pill-toggle {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  max-width: 100%;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 4px;
  background: var(--accent-fill);
  color: #fff;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
}
details.extra > summary:hover, summary.pill-toggle:hover { background: var(--accent-fill-hover); }
details.extra > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
details.extra > summary::-webkit-details-marker { display: none; }
details.extra > summary::marker { content: ""; }
details.extra > summary .chev, summary.pill-toggle .chev {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 2px 2px 0;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
details.extra[open] > summary .chev, details[open] > summary.pill-toggle .chev { transform: rotate(45deg); margin: 0 2px 4px 0; }
details.plan-data[open] > summary, details.all-stints[open] > summary { margin-bottom: 8px; }
details.plan-data:has(+ details.all-stints) { margin-bottom: 8px; }

/* 1.16.0 */
/* One pill component for every disclosure toggle; wins over any older summary rule. */
details > summary.pill-toggle { display: inline-flex; width: auto; background: var(--accent-fill); color: #fff; border: 0; border-radius: 4px; min-height: 40px; padding: 8px 14px; font-weight: 700; font-size: 14px; }
details > summary.pill-toggle::-webkit-details-marker { display: none; }
.pq-pill { display: inline-block; background: var(--accent-fill); color: #fff; font-weight: 700; font-size: 12px; line-height: 1.2; padding: 2px 8px; border-radius: 999px; margin-left: 4px; white-space: nowrap; }
.totals-card { background: var(--card); border-radius: var(--radius); padding: 12px 14px; margin: 12px 0; }
.totals-card h2 { margin: 0 0 6px; font-size: 16px; }
.totals-card .totals { list-style: none; margin: 0; padding: 0; }
.totals-card .totals li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.totals-card .totals li:first-child { border-top: 0; }
.short-notice { background: #fde8e8; color: #7a1212; border-radius: var(--radius); padding: 10px 14px; margin: 12px 0; }
html[data-theme="dark"] .short-notice { background: #3a1717; color: #ffd6d6; }
.short-notice .short-title { margin: 4px 0 6px; font-weight: 700; }
.short-notice .short-title a { color: inherit; }
.short-notice details.extra { margin: 0 0 6px; }
.short-notice .short-line { margin: 6px 0 0; font-size: 14px; }
.slot-av-list { display: flex; flex-direction: column; gap: 10px; }
.slot-av { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.slot-av:first-child { border-top: 0; padding-top: 0; }
.slot-av-when { font-weight: 700; font-size: 14px; }
.seg.seg-small .seg-btn { min-height: 36px; font-size: 13px; padding: 6px 8px; }
.slot-sub .slot-av-when { font-weight: 600; font-size: 13px; min-width: 120px; }
.wa-bar { margin: 8px 0 16px; }
a.btn.wa-share { text-decoration: none; display: inline-flex; align-items: center; }
.slot-av .seg { max-width: 520px; }

/* 1.17.0: car brand logo before the model name (about the text height), monochrome:
   the SVGs are black; the filter turns them #212121 (light theme) or #e6e6e6 (dark). */
.with-brand { display: inline-flex; align-items: center; gap: 6px; min-width: 0; vertical-align: middle; } /* centred on the line even next to inline text or tags */
.brand-logo { flex: none; display: inline-block; height: 16px; width: auto; max-width: 56px; object-fit: contain; vertical-align: -3px; filter: brightness(0) invert(0.13); }
html:not([data-theme="light"]) .brand-logo { filter: brightness(0) invert(0.9); }
.linea-tag .brand-logo, .tu-linea .brand-logo { height: 13px; margin-right: 4px; vertical-align: -2px; }
.mx-check .brand-logo { height: 12px; max-width: 40px; margin-left: 3px; vertical-align: -1px; }
.car-pick-row { display: flex; align-items: center; gap: 8px; }
.car-pick-row select { flex: 1; min-width: 0; }
.pick-logo:empty { display: none; }
.pick-logo .brand-logo { height: 20px; max-width: 48px; }

/* 1.18.0: Bienvenida (one-time screen for new pilots). Mobile first. */
.welcome { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.welcome-sec { background: var(--card); border-radius: var(--radius, 12px); padding: 16px; }
.welcome-sec h2 { font-size: 18px; margin: 0 0 10px; }
.welcome-par { margin: 0 0 12px; white-space: pre-line; line-height: 1.5; overflow-wrap: anywhere; }
.welcome-sec .welcome-par:last-child { margin-bottom: 0; }
.welcome-sec .welcome-par + .welcome-link { margin-top: 2px; }
.welcome-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; width: 100%; box-sizing: border-box; }
.welcome-video { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #111; }
.welcome-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-tap { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #111; cursor: pointer; display: block; }
.video-tap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 12px; background: rgba(0, 0, 0, .72); }
.video-play::after { content: ""; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #fff; }
.video-tap:hover .video-play, .video-tap:focus-visible .video-play { background: var(--accent-fill); }
.welcome-caption { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.welcome-steam { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.welcome-sublink { font-size: 14px; color: var(--accent-ink, var(--accent)); text-decoration: underline; text-underline-offset: 2px; }
.welcome-steam-fields { display: grid; grid-template-columns: 1fr; gap: 10px; }
/* «Todo listo»: the one clear main action of the screen. */
.welcome-done { display: flex; justify-content: center; padding: 10px 0 12px; margin-top: 4px; border-top: 1px solid var(--line); }
.welcome-ok { width: 100%; min-height: 56px; font-size: 18px; font-weight: 800; letter-spacing: .01em; border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 110, 200, .35); }
.welcome-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.welcome-intro h1 { font-size: 22px; margin: 0 0 8px; line-height: 1.25; }
.welcome-rules { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; line-height: 1.45; }
.welcome-rules li::marker { color: var(--accent); }
.welcome-form textarea { min-height: 110px; }
input[type="url"] { box-sizing: border-box; min-width: 0; }
@media (min-width: 720px) {
  .welcome-sec { padding: 20px 22px; }
  .welcome-link { width: auto; }
  .welcome-steam { flex-direction: row; justify-content: flex-start; gap: 16px; }
  .welcome-steam-fields { grid-template-columns: 1fr 210px; }
  .welcome-ok { width: auto; min-width: 320px; }
}

/* 1.18.1: «Soy nuevo» name fields */
.welcome-name { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.welcome-name .field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.welcome-name input { width: 100%; }
.welcome-err { grid-column: 1 / -1; margin: 0; color: var(--danger, #c0392b); font-weight: 600; }
.welcome-ok:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
@media (max-width: 480px) { .welcome-name { grid-template-columns: 1fr; } }