/* THE SETUP PAGE. A full page, not a drawer - every dial next to a live picture
   of what it does, so nobody has to be told what expo means. */
body.setuppage {
  margin: 0; background: #08080b; color: #d7d7de;
  font: 400 13px/1.5 var(--font, system-ui);
  -webkit-font-smoothing: antialiased;
}

#shead {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 16px; border-bottom: 1px solid #22222a; background: #0c0c0f;
  position: sticky; top: 0; z-index: 5;
}
#shead .mark { height: 34px; width: auto; }
#shead h1 {
  margin: 0; font: 800 20px/1 var(--font, system-ui);
  letter-spacing: .18em; text-transform: uppercase; color: #fff;
}
#shead .grow, #sfoot .grow { flex: 1; }
.backlink {
  padding: 8px 14px; border: 1px solid #33333d; border-radius: 8px;
  background: #141419; color: #9a9aa6; text-decoration: none;
  font: 700 10px/1 var(--font, system-ui); letter-spacing: .16em; text-transform: uppercase;
}
.backlink:hover { border-color: var(--red, #e8112d); color: #fff; }

.lede { margin: 8px 16px 0; max-width: 1100px; color: #9a9aa6; font-size: 11.5px; }
.lede b { color: #fff; }

/* EVERYTHING ON ONE SCREEN (Scott: no scrolling). The cards tile across the
   width instead of stacking, and the whole page is sized to the window. */
#sbody {
  padding: 8px 14px 12px; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  align-content: start;
}

.card {
  background: #0c0c0f; border: 1px solid #22222a; border-radius: 12px;
  padding: 10px 12px 12px;
}
.card h2 {
  margin: 0 0 8px; font: 800 13px/1 var(--font, system-ui);
  letter-spacing: .18em; text-transform: uppercase; color: #fff;
}
.card h2 small {
  margin-left: 10px; font: 700 10px/1 var(--font, system-ui);
  letter-spacing: .14em; color: #5f5f6b; text-transform: uppercase;
}

.split { display: grid; grid-template-columns: minmax(190px, 1fr) auto; gap: 12px; align-items: start; }

.dials label {
  display: grid; grid-template-columns: 7.6rem 1fr 2.8rem; align-items: center; gap: 8px;
  margin: 1px 0;
}
.dials label > span {
  font: 700 10px/1.3 var(--font, system-ui); letter-spacing: .14em;
  text-transform: uppercase; color: #9a9aa6;
}
.dials input[type=range] { width: 100%; accent-color: var(--red, #e8112d); }
.dials label > b {
  justify-self: end; color: #fff; font: 700 13px/1 ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.dials label.chk { grid-template-columns: 10rem auto 1fr; }
.dials label.chk input[type=checkbox] {
  width: 18px; height: 18px; margin: 0; accent-color: var(--red, #e8112d); cursor: pointer;
}
#aidamt { transition: opacity .15s ease; }

.hint { margin: 2px 0 9px; color: #7e7e8b; font-size: 11px; line-height: 1.35; max-width: 42ch; }
.hint.big { margin-bottom: 10px; }
.hint b, .hint i { color: #b9b9c4; font-style: normal; }

.viz { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.viz canvas {
  background: #101014; border: 1px solid #22222a; border-radius: 12px; display: block;
  max-width: 100%; height: auto;
}
.vlab { color: #5f5f6b; font-size: 10px; line-height: 1.3; max-width: 36ch; text-align: center; }

#sfoot {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 16px; border-top: 1px solid #22222a; background: #0c0c0f;
}
/* the footer only shows when it has something to say */
#sfoot:has(#ssay:empty) { display: none; }
#ssay { color: #4dff59; font: 700 11px/1 var(--font, system-ui); letter-spacing: .1em; }

/* inside the game's panel there is already a header and a way back */
body.setuppage.embed #shead, body.setuppage.embed .lede { display: none; }
body.setuppage.embed #sbody { padding-top: 18px; }


/* NO SCROLLING: the page is exactly the window, and the cards share what is
   left after the header and the footer. */
html, body.setuppage { height: 100%; overflow: hidden; }
body.setuppage { display: flex; flex-direction: column; }
#sbody { flex: 1; min-height: 0; overflow: auto; }
@media (max-height: 780px) {
  .viz canvas { width: 250px; }
  .hint { display: none; }
  .card h2 small { display: none; }
}

/* the touch-steering picker */
#ssys { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
#ssys button {
  padding: 7px 11px; border: 1px solid #33333d; border-radius: 8px;
  background: #141419; color: #9a9aa6; cursor: pointer;
  font: 700 10px/1 var(--font, system-ui); letter-spacing: .12em; text-transform: uppercase;
}
#ssys button:hover { border-color: #55555f; color: #fff; }
#ssys button.on { border-color: var(--red, #e8112d); background: #23131a; color: #fff; }


/* ============ DIALS BOTH SIDES, PICTURE IN THE MIDDLE (Scott) ============ */
#sbody {
  display: grid !important;
  grid-template-columns: minmax(280px, 24%) minmax(0, 1fr) minmax(280px, 24%) !important;
  grid-template-rows: 100% !important;
  gap: 0 !important; padding: 0 !important;
  overflow: hidden !important;
}
.lede { display: none; }

.scol {
  min-height: 0; min-width: 0; overflow: hidden;
  padding: 8px 12px 10px;
  display: flex; flex-direction: column; justify-content: space-evenly;
}
#sleft { border-right: 1px solid var(--line2); }
#srightcol { border-left: 1px solid var(--line2); }
.grp {
  font: 900 italic 12px/1 var(--font); letter-spacing: .18em;
  text-transform: uppercase; color: #7d8390;
  padding: 0 0 2px; margin-top: 3px;
}
/* BIG WORDS, THE SLIDER UNDERNEATH (Scott) - the columns had acres of room
   and the rows were squeezed onto one small line anyway. Each dial is now its
   name in large type with the value beside it, and the slider full width on
   its own line below. */
.scol .row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 3px 10px;
  padding: 7px 10px 9px; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent;
}
.scol .row input[type=range], .scol .row #ssys { grid-column: 1 / -1; }
.scol .row:hover { background: rgba(255,255,255,.035); }
.scol .row.on { background: rgba(255,45,149,.10); border-color: rgba(255,45,149,.42); }
.scol .row.wide { grid-template-columns: 1fr; }
.scol .row.chk { grid-template-columns: minmax(0, 1fr) auto; }
.scol .row.chk input { width: 20px; height: 20px; }
.rn { font: 800 16px/1.2 var(--font); color: #d6dae1; letter-spacing: .02em; }
.scol .row.on .rn { color: #fff; }
.scol .row b { font: 800 15px/1 ui-monospace, Consolas, monospace; color: #ff2d95; text-align: right; }
.scol input[type=range] { width: 100%; margin: 0; }
#ssys { display: flex; flex-wrap: wrap; gap: 5px; }
#ssys button { padding: 7px 13px; font-size: 12.5px; }

#scentre {
  min-width: 0; min-height: 0; overflow: hidden;
  padding: 10px 16px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
#sttl { margin: 0; font: 900 italic 15px/1 var(--font); letter-spacing: .05em;
        text-transform: uppercase; color: #fff; flex: none; }
#svizwrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
#svizwrap canvas { display: block; }
#sinfo {
  margin: 0; flex: none;
  height: 4.65em; overflow: hidden;
  font: 500 11.5px/1.55 var(--font); color: #9aa0ab; max-width: 62ch;
}
#sread { display: none; }

@media (max-width: 900px) {
  #sbody { grid-template-columns: minmax(240px, 30%) minmax(0, 1fr) minmax(240px, 30%) !important; }
}

/* what Auto Drive actually does, said plainly under its switch */
.rnote { margin: 4px 14px 12px; color: var(--dim, #9a9aa6); font-size: 12px; line-height: 1.5; }
.rnote b { color: #fff; }
.rnote.on { color: #ffd76a; }


/* ---------- THE TRACK SWITCHES (Scott) ----------
   One row across the bottom of the page, exactly the way they sat in the car
   options - never stacked. Setup's own colours: the strip above the footer,
   the club's pink on a tick. */
#ftrack {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 6px 10px;
  padding: 9px 16px; border-top: 1px solid #22222a; background: #0c0c0f;
}
/* Reset on the left, the track switches in the middle, Report a bug on the
   far right - one row, one theme (Scott) */
#ftrack .fticks { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; justify-content: center; }
#ftrack .fbtn { font-family: inherit; }
#ftrack .fbtn:hover { border-color: rgba(255,45,149,.5); color: #fff; }
#ftrack .ftick {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid #2a2a33; border-radius: 8px;
  background: #141419; color: #9aa0ab; cursor: pointer; white-space: nowrap;
  font: 800 11px/1 var(--font, system-ui); letter-spacing: .12em;
  text-transform: uppercase; user-select: none;
}
#ftrack .ftick:hover { border-color: #3a3a45; color: #d6dae1; }
#ftrack .ftick:has(input:checked) {
  border-color: rgba(255,45,149,.5); background: rgba(255,45,149,.10); color: #fff;
}
#ftrack input[type=checkbox] {
  width: 16px; height: 16px; margin: 0; accent-color: #ff2d95; cursor: pointer;
}
@media (max-width: 640px) { #ftrack { gap: 5px 7px; padding: 8px 10px; }
  #ftrack .ftick { padding: 6px 9px; font-size: 10px; } }

/* SHORT SCREENS SCROLL (Scott's buddy: options were below the fold with no
   way down). Under 820px of height every column scrolls itself; tall
   screens keep the exact no-scroll fit they always had. */
@media (max-height: 820px) {
  .scol { overflow-y: auto !important; justify-content: flex-start !important; }
  .scol > * { flex: 0 0 auto; }
  #scentre { overflow-y: auto !important; }
}


/* ---------- THE PHONE: ONE LIST OF SLIDERS (Scott 2026-09-03) ----------
   No picture in the middle, no columns - every dial stacked in one column,
   the page scrolls. */
@media (max-width: 640px) {
  /* THE SLICK ONE (Scott 2026-09-03): every dial on ONE line - name, slider,
     value - and the picture of the chosen dial at the BOTTOM of the list. */
  #sbody { display: flex !important; flex-direction: column !important; overflow: auto !important; height: auto !important; }
  #sleft { order: 1; } #srightcol { order: 2; } #scentre { order: 3; }
  /* nothing is squeezed to fit the panel height - the list scrolls instead */
  .scol, #scentre { flex: none !important; height: auto !important; min-height: 0 !important; }
  .scol { overflow: visible !important; border: 0 !important; padding: 4px 12px 0; justify-content: flex-start !important; }
  .scol .grp { margin-top: 8px; padding-bottom: 4px; }
  .scol .row { margin: 0; padding: 5px 8px; grid-template-columns: 38% minmax(0, 1fr) 46px; align-items: center; column-gap: 8px; }
  .scol .row .rn { font-size: 14px; }
  .scol .row input[type=range] { grid-column: 2; grid-row: 1; margin: 0; }
  .scol .row b { grid-column: 3; grid-row: 1; font-size: 13px; }
  .scol .row.chk { grid-template-columns: minmax(0, 1fr) auto; }
  .scol .row.wide { grid-template-columns: 1fr; }
  .rnote { margin: 2px 14px 8px; font-size: 11px; }
  #scentre { display: flex !important; padding: 10px 12px 14px; gap: 6px; }
  #svizwrap { flex: none; height: 230px; }
  #sinfo { height: auto; max-height: 4.65em; }
  #sfoot { display: none !important; }
  /* no drivers stand view on a phone - you tilt the phone (Scott) */
  .row[data-key="view"], .grp:has(+ .row[data-key="view"]) { display: none !important; }
  #ftrack { justify-content: center; }
  #ftrack .fticks { order: -1; width: 100%; }
}