/* robo-jev-web adaptation. Everything the website changes lives here, so the
   vendored copy stays easy to diff against upstream.

   Upstream is a forklift licence-exam game. This site shows the same vehicle to
   make one point — that System 1 drives it — so the exam's judging and scoring
   surface is removed, the task's own progress is kept but made small, and the
   evidence that a model is deciding is promoted. The rule used throughout:
   exam judging goes, task progress shrinks, System 1 evidence grows. */

/* ── Removed: judging, scoring and the licence test's own apparatus ───────── */

/* Local leaderboard and recording/replay both write files through the upstream
   Python server, which this site does not run. */
.leaderboard,
.recording-panel,
/* The examiner's verdict, its per-item marks and its event log are the exam
   score. jev_examiner.js no longer asks for them either. */
#jev-verdict,
#jev-judgments,
#jev-log,
/* The end-of-run result card carries the grade and the score-submit form. */
#result-overlay,
/* Four driver's-eye wheel views, for checking whether a tyre touched the line. */
#mirror-suite,
/* The "exam-style loop course · 4 minute limit" hint line. */
.hint {
  display: none !important;
}

/* ── Kept but small: the clock and the stage line ─────────────────────────── */

/* The four-minute limit is exam pressure, but elapsed time is still the only
   measure of the run, so the clock stays where it is and only gets smaller.
   It sits over the top bar on purpose; that is not one of the collisions. */
.race-timer {
  top: 17px;
  min-width: 0;
  padding: 6px 16px;
  border-radius: 10px;
}
.race-timer span {
  font-size: 8px;
}
.race-timer strong {
  font-size: 19px;
}

/* The stage banner is not exam scaffolding: it is the task itself, and the
   evidence that System 1 finished a multi-step job. Kept as it is. */

/* The centre of the scene is for the vehicle, so the command callout becomes a
   line rather than a slab across the middle of the picture. */
.drive-command {
  min-width: 0;
  max-width: min(560px, calc(100vw - 720px));
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  padding: 8px 18px;
}
.drive-command strong {
  font-size: 15px;
}
.drive-command span {
  font-size: 11px;
}

/* Both were centred at the same 232/236px and landed on top of each other
   whenever a warning fired while System 1 drove. */
.edge-warning,
body.jev-driving .edge-warning {
  top: auto;
  bottom: 168px;
}
#jev-ticker {
  display: none !important;
}

/* ── Promoted: what System 1 is deciding ─────────────────────────────────── */

/* The examiner panel becomes the decision panel: its verdict is gone, so what
   is left is the live decision feed and the call/latency/cost line. It rises
   into the space the hidden leaderboard and recording panels used to hold
   (184px to 596px), which is also what keeps it off the bottom bar. */
.jev-panel {
  top: 184px;
  bottom: auto;
  width: 246px;
  max-height: min(340px, calc(100% - 360px));
  overflow: hidden auto;
}
/* Four or five decisions are enough to read the rhythm; the rest scrolls. */
.jev-drive-feed li {
  font-size: 10px;
}
/* There is no examiner any more, so the panel says what it now is. */
.jev-panel .jev-heading .eyebrow,
.jev-panel .jev-heading h2 {
  font-size: 0;
  white-space: nowrap;
}
.jev-panel .jev-heading .eyebrow::after {
  content: "SYSTEM 1 · LIVE";
  font-size: 9px;
}
.jev-panel .jev-heading h2::after {
  content: "Decision feed";
  font-size: 17px;
}

/* The entry is a five-column grid built for a 300px panel. At this width the
   chips wrapped onto a third line, so the row becomes two explicit lines: the
   manoeuvre it chose, then what that means for pace, offset and mast. */
.jev-drive-entry {
  grid-template-columns: 34px minmax(0, 1fr);
  row-gap: 2px;
}
.jev-drive-maneuver {
  grid-column: 2;
}
.jev-drive-pedal {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.jev-drive-entry > time {
  grid-row: 1 / span 2;
  align-self: start;
}
.jev-drive-pedal > span {
  font-size: 9px;
}

/* The full decision board carries every option Jev weighed, and it is the best
   evidence there is — but it needs the middle of the picture, which is where
   the forklift is. A 3D demo whose vehicle is hidden behind a panel is not
   making its point, so the board stays off and the feed beside it carries the
   same decisions in one line each. */
.jev-board {
  display: none !important;
}

/* ── Manual and autonomous are now a visible choice ───────────────────────── */

.mode-group {
  align-items: flex-start;
}
.mode-switch {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 9px;
  background: rgba(10, 16, 20, 0.72);
  border: 1px solid rgba(120, 150, 170, 0.28);
}
.mode-option {
  border: 0;
  border-radius: 6px;
  padding: 8px 12px;
  background: none;
  color: #9fb3c2;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
}
.mode-option:hover:not([aria-pressed="true"]):not(:disabled) {
  color: #d8e6f0;
}
.mode-option[aria-pressed="true"] {
  background: #2f6f9e;
  color: #f2f8fc;
}
#mode-system1[aria-pressed="true"] {
  background: #2f86c4;
}
.mode-option:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Upstream changes nothing about the manual pad while System 1 drives, so the
   biggest thing on screen went on inviting a keypress that does nothing. */
body.jev-driving .drive-pad,
body.jev-driving .mast-keys,
body.jev-driving .brake-button {
  opacity: 0.32;
  filter: saturate(0.25);
  pointer-events: none;
}
/* No label suffix here: those eyebrows are rotated, so appended text reads
   vertically. The dimmed keys and the mode switch already say who is driving. */

/* ── Layout: the right stack holds the sensors alone ──────────────────────── */

/* LIFT CONTROL moved to the bottom bar in index.html, so the top-anchored right
   stack is just the sensor suite and stops running past a short frame. Its
   feeds are sized by aspect-ratio, so narrowing the stack shrinks all six
   streams together and gives the scene back the width they were taking. */
.right-stack {
  bottom: 168px;
  display: flex;
  flex-direction: column;
  width: min(344px, calc(100vw - 52px));
}
.sensor-suite {
  min-height: 0;
  overflow: hidden;
}
.mast-panel {
  position: absolute;
  right: 26px;
  bottom: 25px;
  width: min(344px, calc(100vw - 52px));
}

/* The control bar is no longer centred on the viewport: the mast panel sits at
   its right, so it centres in the space that is left. */
.controls {
  left: 26px;
  right: 396px;
  transform: none;
  justify-content: center;
}

/* ── First run: who drives? ──────────────────────────────────────────────── */

/* Upstream opens with "press W to start", so manual is the default and the one
   thing this page exists to show is behind a key nobody finds. This asks once,
   in the middle of the scene, and steps aside for the rest of the run. */
/* .start-choice sets display: flex, which beats the UA rule for [hidden]. */
.start-choice[hidden] {
  display: none !important;
}
.start-choice {
  position: absolute;
  z-index: 9;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
  width: min(560px, calc(100vw - 760px));
  min-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px 20px;
  border-radius: 16px;
  border: 1px solid rgba(70, 240, 176, 0.45);
  background: rgba(8, 12, 15, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  color: #eef3f6;
}
.start-choice > .eyebrow {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #7fe8c0;
}
.start-choice-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.start-choice-options button {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 16px 16px;
  border-radius: 10px;
  border: 1px solid rgba(120, 150, 170, 0.32);
  background: rgba(16, 24, 30, 0.8);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.16s,
    background 0.16s;
}
.start-choice-options button:hover {
  border-color: rgba(70, 240, 176, 0.75);
  background: rgba(24, 40, 44, 0.9);
}
.start-choice-options button[data-choice="system1"] {
  border-color: rgba(70, 240, 176, 0.55);
  background: rgba(18, 44, 42, 0.86);
}
.start-choice-options strong {
  font-size: 16px;
  font-weight: 650;
}
.start-choice-options span {
  font-size: 11px;
  line-height: 1.55;
  color: rgba(214, 224, 230, 0.72);
}
.start-choice small {
  font-size: 10px;
  color: rgba(214, 224, 230, 0.5);
}

/* While the question stands, the manual prompt behind it is noise. */
.start-choice:not([hidden]) ~ .drive-command,
#app:has(.start-choice:not([hidden])) .drive-command {
  display: none;
}

/* The English chips are longer than the Korean ones they replaced, and the feed
   panel is narrower than the one they were laid out for, so the heading stacks
   rather than being clipped at its right edge. */
.jev-panel .jev-heading {
  flex-wrap: wrap;
  gap: 6px;
}
.jev-panel .jev-heading-actions {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
.jev-panel .jev-drive-toggle,
.jev-panel .jev-status {
  font-size: 9px;
  padding: 3px 7px;
  white-space: nowrap;
}

/* Which System 1 model drives, on the start card: the same two-way choice as the site's
   other playgrounds, in this demo's colours. */
.start-choice-model {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(214, 224, 230, 0.72);
}
.start-choice-model span {
  margin-right: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 9px;
}
.start-choice-model button {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(120, 150, 170, 0.32);
  background: rgba(16, 24, 30, 0.8);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.start-choice-model button[aria-pressed="true"] {
  border-color: rgba(70, 240, 176, 0.75);
  background: rgba(18, 44, 42, 0.86);
  color: #e6fff4;
}
.start-choice-model button:disabled {
  opacity: 0.45;
  cursor: default;
}