/* Giant Slalom - one stylesheet, no framework, no external font. */
:root {
  --ink: #0d1520;
  --paper: #f3f7fb;
  --panel: #ffffff;
  --line: #c9d6e4;
  --dim: #5b6b7d;
  --red: #c8262a;
  --blue: #1f4fb8;
  --go: #0f7b3f;
  --shadow: 0 1px 2px rgba(13, 21, 32, .10), 0 6px 18px rgba(13, 21, 32, .07);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 15px/1.55 var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 1100px; margin: 0 auto; padding: 18px 18px 64px; }
h1 { font-size: 1.9rem; letter-spacing: -.02em; margin: .2em 0 .1em; }
h2 { font-size: 1.25rem; letter-spacing: -.01em; margin: 1.7em 0 .5em; }
h3 { font-size: 1.02rem; margin: 1.3em 0 .4em; }
p, li { max-width: 74ch; }
a { color: var(--blue); }
.lede { color: var(--dim); font-size: 1.05rem; margin: .2em 0 1.2em; }
.bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0; }
button, select, input[type=number] {
  font: inherit; color: inherit; background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 13px; cursor: pointer;
}
button:hover { border-color: var(--dim); }
button.primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
button.primary:hover { background: #16409c; }
button:disabled { opacity: .5; cursor: default; }
input[type=range] { width: 210px; vertical-align: middle; }
label { font-size: .92rem; color: var(--dim); }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; box-shadow: var(--shadow); margin: 12px 0;
}
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: 5px 9px; border-bottom: 1px solid var(--line); }
th { color: var(--dim); font-weight: 600; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .04em; }
/* every generated table scrolls inside its own box, so a wide one never widens the page on a phone */
#resTable, #resStart, #provTable, #bestList, #labOut, .tscroll { overflow-x: auto; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
tr.me td { background: #fff7d6; font-weight: 600; }
tr.out td { color: var(--dim); }
.tag { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); }
.tag.red { color: var(--red); border-color: var(--red); }
.tag.blue { color: var(--blue); border-color: var(--blue); }
.tag.go { color: var(--go); border-color: var(--go); }
code, .mono { font-family: var(--mono); font-size: .92em; }
.small { font-size: .86rem; color: var(--dim); }
.viewwrap { position: relative; background: #9fc2e4; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow); }
#view { display: block; width: 100%; height: min(62vh, 560px); }
#hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--mono); }
.hudbox { position: absolute; background: rgba(10, 18, 28, .62); color: #fff; border-radius: 9px;
  padding: 7px 11px; backdrop-filter: blur(3px); }
#hudTime { top: 10px; left: 10px; font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.05; }
#hudTime .sub { display: block; font-size: .72rem; font-weight: 400; opacity: .8;
  letter-spacing: 0; }
#hudSpeed { top: 10px; right: 10px; text-align: right; font-size: 1.5rem; font-weight: 700; }
#hudSpeed .sub { display: block; font-size: .72rem; font-weight: 400; opacity: .8; }
#hudMeters { bottom: 10px; left: 10px; font-size: .8rem; line-height: 1.7; }
#hudMeters b { display: inline-block; min-width: 7.2em; font-weight: 400; opacity: .75;
  padding-right: 8px; }
#hudGate { bottom: 10px; right: 10px; font-size: .9rem; text-align: right; }
#hudMsg { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  background: rgba(10, 18, 28, .78); color: #fff; padding: 14px 22px; border-radius: 12px;
  font-size: 1.2rem; text-align: center; max-width: 80%; }
#hudMsg .big { display: block; font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; }
#hudMsg .fault { color: #ff8b8b; }
.bar-meter { height: 7px; background: rgba(255, 255, 255, .28); border-radius: 4px; overflow: hidden;
  margin-top: 3px; width: 130px; }
.bar-meter i { display: block; height: 100%; background: #ffd166; }
.keys { display: inline-block; border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 5px; padding: 0 6px; font-family: var(--mono); font-size: .84em;
  background: var(--panel); }
#labCanvas { width: 100%; height: 330px; display: block; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; }
.note { border-left: 3px solid var(--blue); padding-left: 12px; margin: 14px 0; color: var(--dim); }
.note.warn { border-left-color: var(--red); }
footer { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--dim); font-size: .86rem; }
/* Touch controls: shown on touch screens and narrow windows, under the view so they never cover
   the HUD.  touch-action:none so a held button is not taken for a scroll or a zoom. */
.touchpad { display: none; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 10px; }
.tbtn { min-height: 64px; font-size: 1.05rem; font-weight: 600; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tbtn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (pointer: coarse), (max-width: 760px) {
  .touchpad { display: grid; }
}
@media (max-width: 640px) {
  .wrap { padding: 12px 12px 48px; }
  #view { height: 46vh; }
  #hudTime { font-size: 1.4rem; }
  /* the meters and the gate box both sat bottom-of-view and collided under ~400 px */
  #hudMeters { font-size: .68rem; line-height: 1.5; padding: 5px 8px; }
  #hudMeters b { min-width: 6.6em; padding-right: 4px; }
  #hudGate { bottom: auto; top: 74px; right: 10px; font-size: .78rem; padding: 5px 8px; }
  #hudSpeed { font-size: 1.2rem; }
  table { font-size: .82rem; }
  th, td { padding: 4px 5px; }
}