/* AC Drift Tuner — a dark motorsport tuning interface.

   The job of this sheet is to make a dense screen of numbers scannable while
   the driver is typing them into the game's own setup page, so the styling
   works hard on hierarchy and contrast and stays out of the way of the data.
   Orange is the accent, not the surface: it marks the value you are looking
   for and the thing you have selected, and nothing else.

   Headings borrow the app icon's brush-and-grunge energy (display font,
   torn-edge accents, a one-shot smoke drift on the hero card); the numbers
   the driver actually reads stay in the plain, proven type below. Both the
   font subsets in fonts/ are self-hosted rather than pulled from Google's
   CDN, so the site keeps its one-external-host security claim intact. */

@font-face {
  /* Chakra Petch, SIL OFL 1.1 -- fonts/OFL.txt. Thai + Latin only (the two
     subsets this page actually sets), weight 700 only (the only weight any
     rule below uses) -- two ~10 KB files rather than a whole family. */
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ChakraPetch-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/ChakraPetch-700-thai.woff2") format("woff2");
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC;
}

:root {
  /* Depth: the page recedes, cards come forward. */
  --bg-0: #080a0d;
  --bg-1: #0d1014;
  --bg-2: #12161b;

  --surface-1: #161a20;
  --surface-2: #1b2027;
  --surface-3: #222831;

  --orange: #ff6a00;
  --orange-dark: #cc4f00;
  --orange-soft: rgba(255, 106, 0, 0.14);
  --orange-line: rgba(255, 106, 0, 0.38);

  --text-0: #ffffff;
  --text-1: #e5e7eb;
  --text-2: #9ca3af;

  --line: #2a3038;
  --line-soft: rgba(42, 48, 56, 0.6);

  --good: #22c55e;
  --warn: #f59e0b;
  --bad: #ef4444;

  --th-red: #a51931;
  --th-blue: #2d2a4a;

  --radius: 12px;
  --radius-sm: 8px;

  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
  --sans: "Segoe UI", "Leelawadee UI", "Noto Sans Thai", system-ui, sans-serif;
  /* Headings and labels only -- never the values a driver copies into the
     game, which stay on --sans/--mono for maximum readability. */
  --display: "Chakra Petch", "Noto Sans Thai", var(--sans);

  --shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.28);
  --ease: 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* The manual "reduce effects" toggle in the header, and the page backdrop's
   own fade-in transition, both respect the OS motion preference too. */
@media (prefers-reduced-motion: reduce) {
  #page-backdrop img { transition: none; }
}
body.reduce-fx #page-backdrop { display: none; }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  /* The photo backdrop is the true base layer now (below); this is only
     what shows before a car is ever picked, or if the photo fails to load. */
  background: var(--bg-0);
  color: var(--text-1);
  font: 18.5px/1.5 var(--sans);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- page backdrop ---------- */

#page-backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* z-index 0 (not auto, not -1) is load-bearing. Being `position: fixed`,
     this paints in the positioned-element layer, which sits ABOVE every
     static block box -- so with `auto` it covered the whole sidebar, whose
     rows are all `position: static`. (Cards and the header survived only
     because they happen to be positioned themselves.) Pinning it to 0 and
     lifting `main` to 1 below puts the page back on top of it for good. */
  z-index: 0;
}
#page-backdrop img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Scaled up so the blur's soft edge never shows a sliver of the frame. */
  transform: scale(1.12);
  filter: blur(22px) saturate(1.25) brightness(0.8);
  opacity: 0;
  transition: opacity 1100ms ease;
}
#page-backdrop img.show { opacity: 1; }
/* A light, even wash -- not a vignette that fades the photo out toward the
   edges. The header darkens its own text separately (see `header`'s own
   background), so this does not need to carry that job too, and the photo
   can stay visibly there everywhere instead of reading as "faded". */
#page-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 15% -10%, rgba(255, 106, 0, 0.14), transparent 55%),
    rgba(8, 10, 13, 0.4);
}

.hidden { display: none !important; }
.muted { color: var(--text-2); }
.small { font-size: 16px; }
.error { color: var(--bad); min-height: 18px; font-size: 17px; }

/* ---------- brand ---------- */

.brand { display: flex; align-items: center; gap: 12px; }

.brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: block;
  object-fit: cover;
  border: 1px solid var(--line);
}

.brand-text { display: flex; align-items: baseline; gap: 7px; position: relative; }
h1 {
  font: 700 23px/1 var(--display);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-0);
}
/* "AC" sits on a rough brush-painted patch, the same way the app icon's own
   lettering does -- white text over a slanted orange swipe with a torn,
   hand-cut edge, instead of a thin underline. The one spot allowed to look
   spray-painted rather than drawn with a ruler. */
h1 em {
  font-style: normal;
  color: var(--text-0);
  position: relative;
  z-index: 0;
  padding: 1px 6px 2px 5px;
  margin: 0 -2px;
}
h1 em::before {
  content: "";
  position: absolute;
  inset: -15% -14% -20% -12%;
  z-index: -1;
  transform: rotate(-2deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 44'%3E%3Cpath d='M3 14 C1 9 6 4 13 5 S32 1 44 4 S66 0 78 5 S96 3 98 10 C99 17 97 24 98 30 C99 35 94 33 88 36 S70 40 58 37 S34 42 22 38 S6 40 3 33 C0 27 4 21 3 14Z' fill='%23ff6a00'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}

/* "Th." with the flag's stripes under it, kept deliberately small. */
.brand-th {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-2);
  padding-bottom: 3px;
  border-bottom: 3px solid var(--th-red);
  box-shadow: 0 3px 0 var(--th-blue);
  line-height: 1.1;
}

header .muted { font-size: 15.5px; letter-spacing: 0.2px; }

/* ---------- boot / first-run ---------- */

.boot {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 50;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 106, 0, 0.09), transparent 60%),
    var(--bg-0);
}

.boot-card {
  position: relative;
  background: linear-gradient(180deg, var(--surface-1), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 38px;
  width: min(520px, 90vw);
  text-align: center;
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* The accent hairline every card carries. */
.boot-card::before,
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), transparent 65%);
}

.boot-logo {
  width: 84px; height: 84px;
  border-radius: 18px;
  margin: 0 auto 18px;
  display: block;
  box-shadow: 0 0 0 1px var(--line), 0 10px 30px rgba(0, 0, 0, 0.5);
}
.boot-tagline {
  font-size: 14px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 20px;
  font-weight: 700;
}
.boot-card h2 { font-size: 22px; margin-bottom: 8px; font-weight: 650; color: var(--text-0); }
.boot-card input { width: 100%; margin: 16px 0 4px; }

.spinner {
  width: 30px; height: 30px;
  margin: 0 auto 16px;
  border: 3px solid var(--line);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- top bar ---------- */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 18px;
  border-bottom: 1px solid var(--line);
  /* Translucent -- the page backdrop's blurred car photo shows through
     here, prime real estate at the very top of the page. The logo, brand
     text, and buttons all sit on their own fully-opaque surfaces, so none
     of that loses contrast against whatever photo is behind it. */
  background: linear-gradient(180deg, rgba(22, 26, 32, 0.82), rgba(13, 16, 20, 0.86));
  backdrop-filter: blur(2px);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}
.header-actions { display: flex; align-items: center; gap: 8px; }

/* ---------- layout ---------- */

main {
  flex: 1;
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 0;
  /* Above #page-backdrop, which is fixed and would otherwise paint over
     everything static in here. */
  position: relative;
  z-index: 1;
}

aside {
  border-right: 1px solid var(--line);
  /* Slightly translucent so the car photo behind still reads through the
     sidebar, without the list ever losing contrast. */
  background: rgba(13, 16, 20, 0.86);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.picker {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* A flex item's default min-width is `auto`, not 0 -- without this, a row
     inside (car name + track name, now set in bigger type) can force this
     whole column wider than `aside`, instead of letting its own ellipsis
     rules do the shrinking. Only showed up once type sizes grew enough for
     a row's natural content width to exceed the sidebar's own width. */
  min-width: 0;
  flex: 1;
  padding: 13px 13px 10px;
  border-bottom: 1px solid var(--line-soft);
}
.picker:last-child { border-bottom: none; }
.picker.recent { flex: 0 0 auto; max-height: 190px; }
.picker.skill { flex: 0 0 auto; }
.picker.recent .list { overflow-y: auto; }
.picker.recent:empty,
.picker.recent.hidden { display: none; }
.picker > label {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--text-2);
  margin-bottom: 8px;
}

.list { overflow-y: auto; margin-top: 8px; flex: 1; min-height: 0; }

.row {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  transition: background var(--ease), border-color var(--ease);
}
.row:hover { background: var(--surface-2); border-left-color: var(--line); }
/* Selected: an orange edge and a faint wash, not a solid orange block. */
.row.active {
  background: var(--orange-soft);
  border-color: var(--orange-line);
  border-left: 2px solid var(--orange);
  box-shadow: inset 0 0 22px rgba(255, 106, 0, 0.06);
}
.row .name { font-size: 17px; color: var(--text-1); }
.row.active .name { color: var(--text-0); font-weight: 600; }
.row .meta { font-size: 14.5px; color: var(--text-2); margin-top: 1px; }
.row.active .meta { color: #d9b39b; }
.row.recent-row .meta { display: flex; align-items: center; gap: 5px; }

/* A photo card for each car, not just its name -- easier to recognise at a
   glance than text alone, the same way a server list reads faster with a
   track photo on it than without. The photo is the mod's own preview image,
   already used on the hero card once picked; this just gives it a second,
   earlier job. */
.row-car { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.row-thumb {
  width: 46px;
  height: 46px;
  border-radius: 7px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--line-soft);
}
.row-thumb.empty {
  background: radial-gradient(70% 70% at 30% 30%, rgba(255, 106, 0, 0.14), var(--surface-2));
}
.row.active .row-thumb { box-shadow: 0 0 0 1.5px var(--orange); }
.row-body { min-width: 0; flex: 1; }
.row-body .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- skill selector ---------- */

.skill-tabs { display: flex; gap: 6px; margin-top: 8px; }
.skill-btn {
  flex: 1;
  /* Block, not the inline-flex every other button gets: these stack a name,
     a sub-label and a count, and as flex items they would sit in a row and
     shrink until the words broke apart. */
  display: block;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-2);
  border-radius: var(--radius-sm);
  padding: 8px 4px;
  font: inherit;
  font-size: 15.5px;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.skill-btn:hover { border-color: var(--orange-line); color: var(--text-1); }
.skill-btn .skill-sub { display: block; font-size: 14px; opacity: 0.75; }
.skill-btn .skill-progress {
  display: block;
  font: 600 13.5px/1.4 var(--mono);
  margin-top: 4px;
  color: var(--text-2);
}
.skill-btn.active {
  background: var(--orange-soft);
  color: var(--text-0);
  border-color: var(--orange);
  font-weight: 600;
  box-shadow: 0 0 16px rgba(255, 106, 0, 0.12);
}
.skill-btn.active .skill-progress { color: #f0b183; }
.skill-btn .skill-progress.done { color: var(--good); }

/* ---------- content area ---------- */

#content {
  overflow-y: auto;
  padding: 18px;
  min-height: 0;
  /* Translucent on purpose -- the page backdrop shows through the gutter
     around and between cards, staying visible rather than fading to black.
     Every card underneath stays fully opaque, so nothing this sits behind
     loses any readability. */
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(255, 106, 0, 0.05), transparent 55%),
    rgba(8, 10, 13, 0.3);
}

.empty {
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--text-2);
  text-align: center;
}

/* ---------- cards ---------- */

.card {
  position: relative;
  background: linear-gradient(180deg, var(--surface-1), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Each card carries its own faint backdrop so the sections read as different
   places rather than one long list.  All of them are drawn in CSS: a texture
   built from gradients costs nothing and cannot fail to load. */
.card[data-scene]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}
.card > * { position: relative; z-index: 1; }

/* Track: circuit sweeps. */
.card[data-scene="track"]::after {
  background:
    radial-gradient(60% 120% at 88% 50%, rgba(255, 106, 0, 0.07), transparent 60%),
    repeating-linear-gradient(76deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 34px);
}
/* Setup: engineering blueprint grid. */
.card[data-scene="setup"]::after {
  background:
    linear-gradient(90deg, rgba(255, 106, 0, 0.05), transparent 32%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 22px);
}
/* Feedback: tyre smoke drifting off. */
.card[data-scene="feedback"]::after {
  background: radial-gradient(70% 130% at 12% 110%, rgba(255, 255, 255, 0.045), transparent 62%);
}
/* History: motion streaks. */
.card[data-scene="history"]::after {
  background: repeating-linear-gradient(
    -74deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 26px);
}
/* Missing physics: hazard hatching, warm rather than orange. */
.card[data-scene="gaps"]::after {
  background: repeating-linear-gradient(
    45deg, rgba(245, 158, 11, 0.05) 0 8px, transparent 8px 20px);
}
/* In-game choices: tyre tread. */
.card[data-scene="advice"]::after {
  background: repeating-linear-gradient(
    90deg, rgba(255, 255, 255, 0.02) 0 3px, transparent 3px 13px);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}
.card h2 {
  font: 700 16.5px/1 var(--display);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-2);
}
/* flex-wrap so a button row drops to a second line on narrow screens instead
   of overflowing the card and getting clipped by whatever sits next to it. */
.card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

/* Setup card, 2026-09-12: the feedback buttons (ถูกใจ/ไม่ถูกใจ/เปลี่ยนเซ็ทอัพ/
   ให้คะแนน) and the setup-management buttons (จำเซ็ตอัพ/คัดลอก) used to sit in
   one flat row with equal weight -- a user reported not knowing which button
   "saved" anything, or what to do after clicking one. Splitting them into a
   labelled, slightly emphasised block (feedback -- the thing that actually
   teaches the optimiser) and a plain utility row (setup management, unrelated
   to feedback) fixes both: the hint text says what the block is for, and
   #setup-progress living inside it means the "what happened" message shows up
   right where the driver just clicked, not further down the card. Mirrors the
   desktop app's identical fix. */
.feedback-group {
  background: var(--surface-1);
  border: 1px solid var(--orange-line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 12px;
}
.feedback-hint {
  font-size: 14px;
  color: var(--text-2);
  margin-bottom: 10px;
}
.feedback-group #setup-progress { margin: 10px 0 0; }
.utility-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.badge {
  font: 600 14px/1.6 var(--sans);
  letter-spacing: 0.4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.badge.on { background: var(--orange-soft); color: #ffc9a3; border-color: var(--orange-line); }
.badge.good { background: rgba(34, 197, 94, 0.12); color: var(--good); border-color: rgba(34, 197, 94, 0.4); }

/* ---------- car hero ---------- */

#hero-card { padding: 0; }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 168px;
}
.hero-media {
  position: relative;
  background: var(--bg-2);
  overflow: hidden;
}
/* Taken out of flow on purpose: the photo should fill whatever height the
   card ends up being, never stretch the card to its own proportions. */
.hero-media img.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fade the photo into the card so it reads as backdrop, not a pasted picture. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 10, 13, 0.35) 0%, transparent 40%, var(--bg-1) 97%);
}
.hero-media.empty-media {
  background:
    radial-gradient(80% 120% at 30% 100%, rgba(255, 106, 0, 0.16), transparent 60%),
    var(--bg-2);
}

.hero-info {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}
.hero-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.hero-badge { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.hero-title {
  font: 700 25.5px/1.15 var(--display);
  color: var(--text-0);
  letter-spacing: 0.3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-sub { font-size: 15.5px; color: var(--text-2); }
.hero-sub b { color: var(--orange); font-weight: 600; }

/* Headline numbers, mirroring how a telemetry readout groups them. */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.stat {
  background: var(--surface-1);
  padding: 8px 10px;
  min-width: 0;
}
.stat .k {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-2);
  display: block;
}
.stat .v {
  font: 700 22px/1.25 var(--mono);
  color: var(--text-0);
  display: block;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat .u { font-size: 13.5px; color: var(--text-2); font-weight: 600; }
.stat.accent .v { color: var(--orange); }

/* ---------- track traits ---------- */

.trait-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.trait {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.trait label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 6px;
}
.trait select, .trait input[type="number"] { width: 100%; }
.trait .hint { display: block; font-size: 14px; color: var(--text-2); margin-top: 5px; }
/* The website reads traits from the shipped data rather than letting them be
   edited, so they are shown as plain values instead of selects. */
.trait-value { font-size: 17px; color: var(--text-1); font-weight: 600; }

.speed-trait { grid-column: 1 / -1; }
.speed-estimate {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}
.speed-estimate .speed-value {
  font: 700 26px/1 var(--mono);
  color: var(--text-0);
}
.speed-estimate.set .speed-value { color: var(--orange); }
.speed-estimate .speed-unit { font-size: 14px; color: var(--text-2); font-weight: 600; }
.speed-estimate .speed-source {
  font-size: 13px;
  color: var(--text-2);
  margin-left: 2px;
}
.speed-estimate.set .speed-source { color: var(--orange); }

/* ---------- "ไม่ชอบ ลองอันอื่น" symptom checklist ---------- */

.symptom-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.symptom-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-size: 15px;
  color: var(--text-1);
  cursor: pointer;
}
.symptom-option:has(input:checked) {
  background: var(--orange-soft);
  border-color: var(--orange-line);
}
.symptom-option input { margin-top: 2px; }

#symptom-note { width: 100%; margin-bottom: 4px; }

#back-to-current {
  display: inline-block;
  font-size: 14.5px;
  color: var(--orange);
  margin-bottom: 8px;
}

/* ---------- saved setups ---------- */

.saved-setup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  background: var(--surface-2);
  margin-bottom: 8px;
}
.saved-setup-row.active {
  background: var(--orange-soft);
  border-color: var(--orange-line);
}
.saved-setup-label { font-size: 15.5px; color: var(--text-1); }
.saved-setup-row.active .saved-setup-label { color: var(--text-0); font-weight: 600; }

/* The track's own outline, sat beside its numbers. */
.track-layout { display: flex; align-items: flex-start; gap: 16px; }
.track-outline {
  width: 128px;
  height: 92px;
  flex-shrink: 0;
  object-fit: contain;
  /* AC draws these as near-white line art on transparency, so they already
     read on a dark card -- they only need an accent glow to sit in the
     palette.  (Inverting turns them black: don't.) */
  opacity: 0.92;
  filter: drop-shadow(0 0 5px rgba(255, 106, 0, 0.55));
}
.track-facts-wrap { flex: 1; min-width: 0; }

.warn-line {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-left: 3px solid var(--warn);
  color: #f5c86b;
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font-size: 16px;
  margin: 8px 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.warn-line svg { flex-shrink: 0; margin-top: 1px; }

/* ---------- in-game choices ---------- */

.advice {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 10px;
}
.advice-head { font-size: 17px; margin-bottom: 3px; color: var(--text-1); }
.advice-head b { color: var(--orange); }
.advice .why { font-size: 16px; color: var(--text-2); line-height: 1.55; }

/* ---------- setup values ---------- */

/* A row of category buttons replacing the old one-after-another scroll --
   only the active category's .tab-block stays visible below (see
   renderSetupBody() in app.js). */
.tabstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.tabstrip-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-2);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.tabstrip-btn svg { color: var(--text-2); }
.tabstrip-btn:hover { background: var(--surface-2); color: var(--text-1); }
.tabstrip-btn.active {
  background: var(--orange-soft);
  border-color: var(--orange-line);
  color: var(--text-0);
}
.tabstrip-btn.active svg { color: var(--orange); }

.tab-block { margin-top: 16px; }
.tab-block:first-child { margin-top: 6px; }

/* Mirrors AC's four per-corner boxes so a value can be matched to its box. */
.wheel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  font-weight: 650;
  color: var(--text-1);
  margin: 14px 0 4px;
  padding-left: 8px;
  border-left: 2px solid var(--orange);
}
.wheel-title:first-child { margin-top: 4px; }
.wheel-code {
  font: 700 13px/1 var(--mono);
  letter-spacing: 0.8px;
  color: var(--text-2);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 5px;
}

.value-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background var(--ease), border-color var(--ease);
}
.value-row:hover { background: var(--surface-2); border-color: var(--line-soft); }
.value-row.done { opacity: 0.4; }
.value-row input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--orange);
  cursor: pointer;
}
.value-row .label { font-size: 17px; color: var(--text-1); }
.value-row .why { font-size: 14.5px; color: var(--text-2); margin-top: 2px; line-height: 1.5; }
.value-row .num {
  font: 700 23px/1 var(--mono);
  color: var(--orange);
  min-width: 84px;
  text-align: right;
  letter-spacing: -0.3px;
}
.value-row .num .unit {
  font-size: 14px;
  color: var(--text-2);
  margin-left: 3px;
  font-weight: 600;
}
.value-row .num.moved::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--good);
  margin-left: 6px;
  vertical-align: middle;
}

/* Where this value sits inside the range the car actually allows.  It is a
   readout, not a control -- the number still gets typed into the game. */
.range {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.range .rend { font: 600 13px/1 var(--mono); color: var(--text-2); }
.rtrack {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: visible;
}
.rtrack b {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--orange-dark), var(--orange));
}
.rtrack i {
  position: absolute;
  top: 50%;
  width: 9px; height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--orange);
  border: 2px solid var(--bg-1);
  transform: translateY(-50%);
  box-shadow: 0 0 8px rgba(255, 106, 0, 0.5);
}

/* ---------- performance score ---------- */

.score-block { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; flex-wrap: wrap; }
.score-ring { position: relative; width: 84px; height: 84px; flex-shrink: 0; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring .ring-bg { fill: none; stroke: var(--surface-3); stroke-width: 7; }
.score-ring .ring-fill {
  fill: none;
  stroke: var(--orange);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dasharray 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
.score-ring .ring-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}
.score-ring .ring-num { font: 700 28px/1 var(--mono); color: var(--text-0); }
.score-ring .ring-den { font-size: 13px; color: var(--text-2); letter-spacing: 0.6px; }
.score-tiles {
  flex: 1;
  min-width: 220px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.score-tiles .stat { padding: 7px 10px; }
.score-tiles .stat .v { font-size: 19px; }

/* ---------- ratings ---------- */

.rating { margin: 12px 0; }
.rating label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 16.5px;
  color: var(--text-2);
  margin-bottom: 7px;
}
.rating b { color: var(--orange); font: 700 20.5px/1 var(--mono); }
#score-note { width: 100%; margin: 6px 0 12px; }

/* ---------- history ---------- */

.hist-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 17px;
}
.hist-row:last-of-type { border-bottom: none; }
.hist-row .when { font-size: 14.5px; color: var(--text-2); margin-top: 2px; }
.hist-row .scores { font: 700 18.5px/1 var(--mono); color: var(--text-1); align-self: center; }

#history-chart:empty { display: none; }
#history-chart {
  margin: 4px 0 14px;
  padding: 10px 12px 8px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
#history-chart svg { display: block; width: 100%; height: 64px; }
#history-chart .trend-line { fill: none; stroke: var(--orange); stroke-width: 2; }
/* Dots are zero-length stroked paths, so they take a stroke, not a fill. */
#history-chart .trend-dot { fill: none; stroke: var(--orange); }
#history-chart .trend-dot.optimizer { stroke: var(--good); }
#history-chart .trend-grid { stroke: var(--line); stroke-width: 1; }
#history-chart .trend-caption {
  font: 600 14px/1.5 var(--mono);
  color: var(--text-2);
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}

/* ---------- controls ---------- */

input[type="text"], input[type="search"], input[type="number"], select {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text-1);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  font: inherit;
  width: 100%;
  transition: border-color var(--ease), box-shadow var(--ease);
}
input::placeholder { color: #6b7280; }
input:focus, select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.12);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  background: var(--surface-3);
  border-radius: 3px;
  width: 100%;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--orange);
  cursor: pointer;
  border: 2px solid var(--bg-0);
  box-shadow: 0 0 10px rgba(255, 106, 0, 0.45);
}

button {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text-1);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: border-color var(--ease), background var(--ease),
              box-shadow var(--ease), color var(--ease);
}
button:hover {
  border-color: var(--orange-line);
  color: var(--text-0);
  box-shadow: 0 0 14px rgba(255, 106, 0, 0.1);
}
button.primary {
  background: linear-gradient(180deg, var(--orange), var(--orange-dark));
  color: #14161a;
  border-color: var(--orange);
  font-weight: 650;
}
button.primary:hover { filter: brightness(1.1); box-shadow: 0 0 18px rgba(255, 106, 0, 0.3); }
/* Dark glass, for the top bar. */
button.ghost { background: rgba(255, 255, 255, 0.03); }
button.small { padding: 6px 12px; font-size: 16px; }
/* Effects are on by default; this just says so and lets a driver who wants
   to read numbers fast during a session switch them off without hunting
   through a settings page. */
#fx-toggle.off { color: var(--text-2); }
#fx-toggle svg { opacity: 0.85; }
#fx-toggle.off svg { opacity: 0.5; }
button.danger { color: #f89090; }
button.danger:hover { border-color: var(--bad); box-shadow: 0 0 14px rgba(239, 68, 68, 0.12); }
button:disabled { opacity: 0.4; cursor: default; }
button:disabled:hover { border-color: var(--line); filter: none; box-shadow: none; }
button svg { flex-shrink: 0; }

/* ---------- login / signup ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 6, 8, 0.72);
  backdrop-filter: blur(3px);
}

.modal-card {
  position: relative;
  width: min(400px, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--surface-1), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 20px;
  box-shadow: var(--shadow);
}
.modal-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), transparent 65%);
}
.modal-card h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-0);
  margin-bottom: 6px;
}
.modal-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 25.5px;
  line-height: 1;
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
}
.modal-close:hover { color: var(--text-0); box-shadow: none; }

#auth-form { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.field { display: block; }
.field > span {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 6px;
}
#auth-form button { justify-content: center; margin-top: 2px; }
.auth-switch { margin-top: 14px; text-align: center; }
.auth-switch a { color: var(--orange); text-decoration: none; font-weight: 600; }
.auth-switch a:hover { text-decoration: underline; }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid var(--orange-line);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  font-size: 17px;
  color: var(--text-0);
  z-index: 60;
  box-shadow: var(--shadow);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #39414d; }

/* ---------- responsive ----------
   Tuning numbers must stay readable at every width, so the sidebar gives up
   room before the content does, and the stat strip wraps rather than shrinks. */

@media (max-width: 1180px) {
  main { grid-template-columns: 250px 1fr; }
  .hero { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
  /* Three abbreviations side by side stop fitting here; stacking keeps every
     label on one line rather than breaking words apart. */
  .skill-tabs { flex-direction: column; }
  .skill-btn { display: flex; align-items: baseline; gap: 6px; text-align: left; padding: 7px 10px; }
  .skill-btn .skill-sub { display: inline; }
  .skill-btn .skill-progress { margin: 0 0 0 auto; }
}

@media (max-width: 980px) {
  main { grid-template-columns: 212px 1fr; }
  .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { grid-template-columns: 1fr; }
  /* Stacked, the photo needs a height of its own or it collapses to nothing
     now that it no longer takes part in layout. */
  .hero-media { height: 152px; }
  .hero-media::after {
    background: linear-gradient(180deg, transparent 30%, var(--bg-1) 100%);
  }
}

@media (max-width: 760px) {
  /* Three buttons plus the brand no longer fit one row once the header
     picked up a wider display font and a third (fx-toggle) button -- wrap
     instead of letting the row overflow the viewport. */
  header { flex-wrap: wrap; row-gap: 8px; }
  .header-actions { flex-wrap: wrap; justify-content: flex-end; }
  h1 { font-size: 19.5px; }
  main { grid-template-columns: 1fr; }
  aside {
    border-right: none;
    border-bottom: 1px solid var(--line);
    flex-direction: row;
    overflow-x: auto;
    max-height: 168px;
  }
  .picker { min-width: 210px; border-bottom: none; border-right: 1px solid var(--line-soft); }
  /* Unlike car/track, recent keeps `flex: 1` here instead of the desktop
     layout's `0 0 auto` -- in this row-direction strip that base rule holds
     it at its own content's full natural width forever (flex-shrink: 0), so
     a recent row (car name + track name, in bigger type now) that's wider
     than one screen pushes the whole picker off it instead of eliding. */
  .picker.recent { max-height: none; flex: 1; min-width: 210px; }
  #content { padding: 12px; }
  .track-layout { flex-direction: column; }
}