/* F1 Simulator — Driver's Guide. Shared stylesheet for every page in this folder. */

:root {
  --bg: #f4f4f2;
  --surface: #ffffff;
  --surface-2: #ececef;
  --text: #1f2326;
  --muted: #5e6166;
  --line: #dcdce0;
  --navy: #111217;
  --navy-text: #f1ede2;
  --accent: #d7141e;
  --accent-soft: #fbe3e4;
  --link: #1d4f8a;
  --good: #2f6b3a;
  --good-soft: #dfeedd;
  --warn: #9b2c1f;
  --warn-soft: #f6dcd6;
  --kbd-bg: #ffffff;
  --kbd-line: #c4c5cc;
  --us: #1d4f8a;
  --ijn: #a3261b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1418;
    --surface: #161e24;
    --surface-2: #1e2830;
    --text: #e6e2d6;
    --muted: #9ea4a8;
    --line: #2c3740;
    --navy: #08090c;
    --navy-text: #efe9da;
    --accent: #ff4a52;
    --accent-soft: #2e1416;
    --link: #8cc0f5;
    --good: #8fd19a;
    --good-soft: #15281a;
    --warn: #f0917f;
    --warn-soft: #321a16;
    --kbd-bg: #1f2932;
    --kbd-line: #3e4b56;
    --us: #8cc0f5;
    --ijn: #f08a7c;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1418; --surface: #161e24; --surface-2: #1e2830; --text: #e6e2d6; --muted: #9ea4a8;
  --line: #2c3740; --navy: #08090c; --navy-text: #efe9da; --accent: #ff4a52; --accent-soft: #2e1416;
  --link: #8cc0f5; --good: #8fd19a; --good-soft: #15281a; --warn: #f0917f; --warn-soft: #321a16;
  --kbd-bg: #1f2932; --kbd-line: #3e4b56; --us: #8cc0f5; --ijn: #f08a7c;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--link); text-underline-offset: 2px; }
img { max-width: 100%; }

h1, h2, h3, .brand, .eyebrow, nav.site a, th {
  font-family: "Titillium Web", "Arial Narrow", system-ui, sans-serif;
}
h1, h2, h3 { line-height: 1.2; letter-spacing: .01em; }
h2 {
  font-size: 28px; margin: 56px 0 14px; padding-bottom: 6px;
  border-bottom: 2px solid var(--line); text-transform: uppercase;
}
h3 { font-size: 21px; margin: 32px 0 8px; }
h2 + h3 { margin-top: 18px; }
p, ul, ol { margin: 0 0 14px; }
li { margin-bottom: 4px; }

/* ---- site header / nav ---- */
header.site {
  background: var(--navy); color: var(--navy-text);
  border-bottom: 4px solid var(--accent);
}
.site-inner {
  max-width: 1080px; margin: 0 auto; padding: 12px 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
}
.brand {
  color: var(--navy-text); text-decoration: none; font-size: 24px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; gap: 10px;
}
.brand svg { width: 30px; height: 30px; flex: none; }
nav.site { display: flex; flex-wrap: wrap; gap: 2px 4px; }
nav.site a {
  color: var(--navy-text); text-decoration: none; text-transform: uppercase; letter-spacing: .08em;
  font-size: 15px; padding: 5px 10px; border-radius: 4px; opacity: .85;
}
nav.site a:hover { opacity: 1; background: rgba(255,255,255,.08); }
nav.site a[aria-current="page"] { opacity: 1; background: rgba(255,255,255,.12); box-shadow: inset 0 -2px 0 var(--accent); }

/* ---- page hero ---- */
.hero { background: var(--navy); color: var(--navy-text); padding: 40px 16px 44px; }
.hero-inner { max-width: 1080px; margin: 0 auto; }
.eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: 13px; font-weight: 600; color: var(--accent); }
.hero h1 { margin: 6px 0 12px; font-size: clamp(32px, 5vw, 50px); text-transform: uppercase; letter-spacing: .03em; }
.hero .lede { max-width: 760px; font-size: 19px; opacity: .88; margin: 0; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.btn {
  display: inline-block; padding: 9px 18px; border-radius: 4px; text-decoration: none; font-weight: 600;
  border: 2px solid var(--accent); color: var(--navy-text);
}
.btn.primary { background: var(--accent); color: #1a1206; }
.btn:hover { filter: brightness(1.08); }

/* ---- main content ---- */
main { max-width: 1080px; margin: 0 auto; padding: 8px 16px 64px; }
main.narrow > * { max-width: 800px; }
main.narrow > .wide { max-width: none; }

.toc {
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 14px 18px; margin: 28px 0 0; max-width: 800px;
}
.toc strong { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 6px; }
.toc ol, .toc ul { margin: 0; padding-left: 20px; columns: 2 220px; column-gap: 32px; }
.toc li { break-inside: avoid; }

/* ---- cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 20px 0; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px;
  text-decoration: none; color: var(--text); display: block;
}
a.card:hover { border-color: var(--accent); }
.card h3 { margin: 0 0 6px; font-size: 19px; color: var(--link); }
.card p { margin: 0; font-size: 15px; color: var(--muted); }

/* ---- callouts ---- */
.note, .tip, .warn {
  border-left: 4px solid var(--accent); background: var(--accent-soft);
  padding: 10px 14px; border-radius: 0 6px 6px 0; margin: 16px 0;
}
.tip { border-color: var(--good); background: var(--good-soft); }
.warn { border-color: var(--warn); background: var(--warn-soft); }
.note > :last-child, .tip > :last-child, .warn > :last-child { margin-bottom: 0; }
.note strong:first-child, .tip strong:first-child, .warn strong:first-child { text-transform: uppercase; font-size: 14px; letter-spacing: .06em; }

/* ---- keys ---- */
kbd {
  display: inline-block; min-width: 1.6em; padding: 0 6px; text-align: center;
  font: 600 14px/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: var(--kbd-bg); border: 1px solid var(--kbd-line); border-bottom-width: 2px;
  border-radius: 4px; white-space: nowrap;
}

/* ---- tables ---- */
.table-wrap { overflow-x: auto; margin: 14px 0 20px; border: 1px solid var(--line); border-radius: 6px; }
table { border-collapse: collapse; width: 100%; background: var(--surface); font-size: 15px; }
th, td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { background: var(--surface-2); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td:first-child { white-space: nowrap; }
table.keys td:first-child { width: 1%; }

/* ---- mission blocks ---- */
.mission {
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 22px 10px; margin: 22px 0;
}
.mission h3 { margin-top: 18px; font-size: 24px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.meta li {
  font-size: 13px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); margin: 0;
}
.meta li.us { border-color: var(--us); color: var(--us); font-weight: 600; }
.meta li.ijn { border-color: var(--ijn); color: var(--ijn); font-weight: 600; }
.briefing { font-style: italic; color: var(--muted); border-left: 3px solid var(--line); padding-left: 12px; }
.mission h4 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--accent);
  margin: 16px 0 6px;
}
.side-us { color: var(--us); }
.side-ijn { color: var(--ijn); }

dl.defs { margin: 0 0 14px; }
dl.defs dt { font-weight: 700; margin-top: 10px; }
dl.defs dd { margin: 2px 0 0 0; }

footer.site { border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
footer.site .site-inner { padding: 18px 16px 28px; }
footer.site a { color: var(--muted); }

@media (max-width: 640px) {
  body { font-size: 16px; }
  h2 { font-size: 24px; }
  .mission { padding: 2px 14px 8px; }
  nav.site a { font-size: 14px; padding: 4px 7px; }
}

/* ---- F1 additions ---- */
header.site { border-bottom-color: var(--accent); }
.btn.primary { color: #fff; }
h1, h2, h3, .brand, .eyebrow, nav.site a, th { font-weight: 700; }
.tyre { display: inline-block; width: 1.5em; height: 1.5em; line-height: 1.3em; border-radius: 50%; text-align: center;
  font-weight: 800; font-size: 13px; border: 3px solid; background: #16171c; color: #fff; vertical-align: middle; }
.tyre.s { border-color: #e12323; } .tyre.m { border-color: #fac828; } .tyre.h { border-color: #f0f0f0; }
.checker { height: 10px; background: repeating-conic-gradient(#fff 0 25%, #111 0 50%) 0 0 / 20px 20px; }