/* The track builder's page (track builder spec §2), in DESIGN.md's look:
   Panel Navy cards, Titillium Web, white type, Accent Mint for the
   go-ahead and Signal Red for problems. */

@font-face { font-family: "Titillium Web"; src: url("fonts/TitilliumWeb-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("fonts/TitilliumWeb-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("fonts/TitilliumWeb-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("fonts/TitilliumWeb-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  color-scheme: dark;
  --ground: #080B17;
  --card: #0E1326;
  --raised: #1F274A;
  --line: rgba(154, 163, 191, .16);
  --line-strong: rgba(154, 163, 191, .34);
  --ink: #FFFFFF;
  --dim: #9AA3BF;
  --mint: #3DF2A6;
  --mint-wash: rgba(61, 242, 166, .13);
  --red: #EB4334;
  --red-text: #FF8A7F;
  --red-wash: rgba(235, 67, 52, .14);
  --amber: #E8B931;
  --heat-cool: #33CC4D;
  --heat-hot: #E6261A;
  --cyan: #66D9FF;
  --display: "Titillium Web", "Segoe UI", Arial, sans-serif;
  /* The system's: the game has no monospace among its fonts (§13.3). */
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 14px/1.45 var(--display); }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }
.unsupported { max-width: 32em; margin: 12vh auto 0; padding: 0 1.5em; text-align: center; }

.app { max-width: 1680px; margin: 0 auto; padding-inline: 16px; padding-block: 14px 32px; display: grid; gap: 12px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.label { font: 700 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.mono { font-family: var(--mono); }
.dim { color: var(--dim); }
.caption { font-size: 12px; color: var(--dim); }
.foot { margin: 0; font-size: 12px; color: var(--dim); }

/* the header */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.brand { display: flex; align-items: baseline; gap: 12px; }
.wordmark { font: italic 700 30px/1 var(--display); letter-spacing: -.01em; }
.tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.btn { height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-strong); background: transparent; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.btn:hover { background: var(--raised); }
.btn:disabled { opacity: .4; cursor: default; background: transparent; }
.btn.primary { background: var(--mint); color: var(--card); border-color: var(--mint); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.small { height: 30px; padding: 0 10px; font-size: 13px; }
.btn.icon { width: 36px; padding: 0; }

.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 6px; font-weight: 600; color: var(--dim); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.seg button:hover { color: var(--ink); background: var(--raised); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--ink); color: var(--card); }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid rgba(255, 255, 255, .25); }

/* the track's details */
.meta { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: end; padding: 12px 14px; }
.meta .f { display: grid; gap: 7px; min-width: 0; }
.text { height: 36px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--raised); padding: 0 10px; width: 100%; }
#name { width: 220px; font-weight: 600; }
#tid { width: 190px; font-family: var(--mono); font-size: 13px; }
.meta .stats { margin-left: auto; display: flex; gap: 18px; align-items: end; }
.stat { display: grid; gap: 4px; text-align: right; }
.stat b { font: 600 20px/1 var(--display); font-variant-numeric: tabular-nums; }
#statProbs { color: var(--mint); }
#statProbs.bad { color: var(--red-text); }

/* steppers, as the game's: an arrow either side of a value box */
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper button { width: 30px; height: 36px; border-radius: 6px; border: 1px solid var(--line-strong); background: transparent; cursor: pointer; font-weight: 700; color: var(--dim); }
.stepper button:hover { color: var(--ink); background: var(--raised); }
.stepper .val { position: relative; }
.stepper input, .stepper output { width: 74px; height: 36px; border-radius: 6px; border: 1px solid transparent; background: var(--raised); text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; display: grid; place-items: center; padding-right: 14px; }
.stepper output { width: 46px; padding: 0; }
.stepper .unit { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--dim); font-size: 12px; pointer-events: none; }
.stepper input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.stepper input { -moz-appearance: textfield; }
.bad .stepper input, .bad .stepper output, .bad .lanes, .bad .seg, .bad .text { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }

/* the work area: the pieces on the left, the ride view, the whole lap and
   the panel stacked on the right; one column on a phone, the ride view
   first */
.work { display: grid; gap: 12px; align-items: start; grid-template-columns: minmax(330px, 400px) minmax(0, 1fr); grid-template-areas: "edit ride" "edit over" "edit side"; }
.pane-edit { grid-area: edit; position: relative; align-self: stretch; min-height: 460px; }
.ride { grid-area: ride; position: relative; overflow: hidden; }
.over { grid-area: over; }
.side { grid-area: side; position: relative; }
.fill { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; }
.side .fill { position: static; }
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 10px; flex-wrap: wrap; }
.pane-head.tight { padding-top: 0; }

/* the palette */
.palette { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 0 14px 12px; }
.pal { display: grid; justify-items: center; gap: 4px; padding: 8px 2px 7px; border-radius: 8px; border: 1px solid var(--line); background: transparent; cursor: grab; font-size: 12px; font-weight: 600; color: var(--dim); }
.pal:hover { background: var(--raised); color: var(--ink); border-color: var(--line-strong); }
.pal svg { width: 36px; height: 18px; overflow: visible; }

/* the piece list: a track of 500 pieces is 500 rows, and those out of view
   skip their layout (§5.5) */
.list { list-style: none; margin: 0; padding: 0 8px 12px; overflow: auto; flex: 1; min-height: 0; }
.piece { border-radius: 8px; border: 2px solid transparent; margin-bottom: 2px; }
.piece:not(.sel) { content-visibility: auto; contain-intrinsic-size: auto 46px; }
.piece.sel { background: var(--raised); border-color: var(--ink); }
.piece.fresh { animation: fresh .9s ease-out; }
@keyframes fresh { from { background: var(--mint-wash); transform: translateX(-6px); } }
.head { display: grid; grid-template-columns: 26px 34px minmax(0, 1fr) auto auto 28px; align-items: center; gap: 8px; padding: 7px 4px 7px 8px; cursor: pointer; border-radius: 6px; }
.head:hover { background: rgba(31, 39, 74, .6); }
.sel .head:hover { background: transparent; }
.head .idx { font: 600 12px/1 var(--mono); color: var(--dim); text-align: right; }
.head svg { width: 34px; height: 16px; overflow: visible; }
.head .what { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head .what b { font-weight: 600; }
.head .what span { color: var(--dim); margin-left: 6px; font-size: 13px; }
.head .at { font: 400 12px/1 var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.rm { width: 28px; height: 28px; border-radius: 6px; border: 0; background: transparent; color: var(--dim); cursor: pointer; display: grid; place-items: center; opacity: 0; padding: 0; }
.rm:hover { color: var(--red-text); background: var(--red-wash); }
.piece:hover .rm, .piece.sel .rm, .rm:focus-visible { opacity: 1; }
.leaving { animation: leave .17s ease-in forwards; pointer-events: none; }
@keyframes leave { to { opacity: 0; transform: translateX(-10px); } }
.mini-lanes { display: grid; grid-template-rows: repeat(4, 3px); gap: 1px; width: 14px; }
.mini-lanes i { display: block; border-radius: 1px; background: rgba(154, 163, 191, .18); }
.badge { min-width: 18px; height: 18px; border-radius: 9px; background: var(--red); color: var(--ink); font: 700 11px/18px var(--display); text-align: center; padding: 0 5px; }
.piece.drop-before { box-shadow: 0 -3px 0 var(--mint); }
.piece.drop-after { box-shadow: 0 3px 0 var(--mint); }
.list.drop-end { box-shadow: inset 0 -3px 0 var(--mint); }

/* the open piece's fields */
.fields { display: flex; flex-wrap: wrap; gap: 12px 16px; padding: 4px 10px 12px 42px; align-items: end; }
.fields .f { display: grid; gap: 6px; }
.fields .wide { flex-basis: 100%; }
.fields .readout { font-size: 13px; color: var(--dim); flex-basis: 100%; font-variant-numeric: tabular-nums; }
.fields .readout b { color: var(--ink); font-weight: 600; }
.fields .readout .over { color: var(--red-text); }
.fields .probs { flex-basis: 100%; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.fields .probs li { color: var(--red-text); font-size: 13px; padding-left: 14px; position: relative; }
.fields .probs li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 2px; background: var(--red); }
.fields .actions { flex-basis: 100%; display: flex; gap: 6px; flex-wrap: wrap; }
.note-in { width: 220px; }
.presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.presets button { padding: 6px 10px; justify-content: center; }
.lanes { display: inline-flex; gap: 4px; border-radius: 8px; border: 1px solid transparent; }
.lanes button { width: 40px; height: 36px; border-radius: 6px; border: 1px solid var(--line-strong); background: transparent; cursor: pointer; display: grid; place-items: center; font-weight: 700; line-height: 1; }
.lanes button small { display: block; font-size: 9px; letter-spacing: .08em; color: var(--dim); font-weight: 700; min-height: 1em; }
.lanes button[aria-pressed="true"] { background: var(--ink); color: var(--card); border-color: var(--ink); }
.lanes button[aria-pressed="true"] small { color: var(--card); }

/* the side view, to scale (§2.5) */
.shape { position: relative; width: 100%; aspect-ratio: 300 / 64; container-type: inline-size; border-radius: 6px; background: rgba(10, 15, 32, .7); border: 1px solid var(--line); overflow: hidden; }
.shape svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.shape .grab { position: absolute; top: 0; bottom: 0; width: 16px; margin-left: -8px; cursor: ew-resize; touch-action: none; }
.shape .grab::after { content: ""; position: absolute; left: 7px; top: 34%; height: 32%; width: 2px; border-radius: 1px; background: var(--ink); }
.shape .grab:hover::after { box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.shape .lift { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--card); cursor: ns-resize; touch-action: none; }
.len-badge { position: absolute; top: 5px; transform: translateX(-50%); background: var(--ink); color: var(--card); font: 700 12px/1 var(--display); padding: 4px 7px; border-radius: 5px; pointer-events: none; white-space: nowrap; z-index: 2; font-variant-numeric: tabular-nums; }
.len-badge.bad { background: var(--red); color: var(--ink); }
.shape .scale { position: absolute; right: 7px; top: 6px; display: grid; justify-items: end; gap: 2px; font: 400 10px/1 var(--mono); color: var(--dim); pointer-events: none; }
.shape .scale i { display: block; height: 3px; border: 1px solid var(--dim); border-bottom: 0; order: 1; }
.shape-f .caption { margin-top: 2px; }

/* the ride view */
.ride canvas { display: block; width: 100%; aspect-ratio: 2.6 / 1; max-width: 100%; }
.hud { position: absolute; display: flex; gap: 8px; align-items: center; }
.hud-card { background: rgba(14, 19, 38, .9); border-radius: 10px; padding: 8px 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.hud.tl { left: 10px; top: 10px; }
.hud.tr { right: 10px; top: 10px; }
.hud.bl { left: 10px; bottom: 10px; }
.hud.br { right: 10px; bottom: 10px; }
.hud .btn { background: rgba(14, 19, 38, .9); }
.hud .caption.hud-card { padding: 6px 10px; }
.follow { display: flex; align-items: center; gap: 4px; padding: 5px 6px 5px 10px; }
.follow .label { margin-right: 4px; }
.follow button { width: 30px; height: 26px; border-radius: 6px; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.follow button i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.follow button[aria-pressed="true"] { background: var(--raised); box-shadow: inset 0 0 0 2px var(--ink); }
.readouts { display: grid; grid-template-columns: auto auto; gap: 2px 14px; align-items: baseline; }
.readouts b { font: italic 700 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.readouts .lap { text-align: right; font: 700 13px/1 var(--display); letter-spacing: .06em; }
.readouts .clock { text-align: right; font-variant-numeric: tabular-nums; }
.heatbar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--raised); position: relative; overflow: hidden; margin-top: 6px; width: 180px; }
.heatbar i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--heat-cool), var(--heat-hot)); background-size: 180px 100%; }
.heatbar::after { content: ""; position: absolute; left: 85%; top: 0; bottom: 0; width: 2px; background: var(--ink); opacity: .8; }
.toast-ride { font: italic 700 18px/1 var(--display); letter-spacing: .04em; padding: 9px 14px; opacity: 0; transition: opacity .25s; }
.toast-ride.on { opacity: 1; }
.toast-ride.clean { color: var(--heat-cool); }
.toast-ride.rough { color: var(--amber); }
.toast-ride.crash, .toast-ride.overheat { color: var(--red); }
.toast-ride.cooled, .toast-ride.trick { color: var(--cyan); }

/* the whole lap */
.over .pane-head { padding-bottom: 6px; }
.over canvas { display: block; width: 100%; height: 160px; cursor: pointer; }
.exag { letter-spacing: .06em; text-transform: none; font-weight: 400; }
.laptimes { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.laptimes span { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--display); font-variant-numeric: tabular-nums; }
.laptimes i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.hoverline { font: 400 12px/1.2 var(--mono); color: var(--dim); padding: 0 14px 10px; min-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* problems, ride notes and the file */
.panel { padding: 0 14px 14px; overflow: auto; min-height: 0; }
.side .panel { max-height: 330px; }
.probs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.prob { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 10px; padding: 9px 10px; border-radius: 8px; background: var(--red-wash); cursor: pointer; border: 2px solid transparent; }
.prob:hover { border-color: rgba(235, 67, 52, .5); }
.prob .sev { width: 8px; height: 8px; border-radius: 2px; background: var(--red); margin-top: 6px; }
.prob .where { font: 400 12px/1.3 var(--mono); color: var(--dim); overflow-wrap: anywhere; }
.prob .where b { color: var(--ink); font-weight: 600; }
.prob .msg { font-size: 14px; overflow-wrap: anywhere; }
.prob.new { animation: fresh .9s ease-out; }
.empty { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 8px; background: var(--mint-wash); }
.empty svg { flex: none; }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.notes li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(31, 39, 74, .55); font-size: 14px; }
.notes li[data-piece] { cursor: pointer; }
.notes .dots { display: flex; gap: 3px; padding-top: 5px; }
.notes .dots i { width: 9px; height: 9px; border-radius: 50%; }
.notes .tag { margin-right: 6px; }
.notes .tag.bad { color: var(--red-text); }
.notes .tag.rough { color: var(--amber); }
.panel-cap { font-size: 12px; color: var(--dim); margin: 0 0 10px; }
.yaml { margin: 0; font: 400 12.5px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; counter-reset: ln; }
.yaml .l { display: block; padding-left: 44px; position: relative; border-radius: 3px; }
.yaml .l::before { counter-increment: ln; content: counter(ln); position: absolute; left: 0; width: 30px; text-align: right; color: rgba(154, 163, 191, .5); }
.yaml .l.on { background: rgba(255, 255, 255, .08); }
.yaml .l.bad { background: var(--red-wash); }
.yaml .l.bad::after { content: ""; position: absolute; left: 35px; top: .62em; width: 6px; height: 6px; border-radius: 2px; background: var(--red); }
.y-k { color: var(--dim); }
.y-p { color: var(--ink); font-weight: 600; }
.y-c { color: rgba(154, 163, 191, .65); font-style: italic; }
.yaml-note { margin: 10px 0 0; }
.yaml-copy { display: block; margin-bottom: 10px; }

/* the toast, with Undo after a piece is removed */
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 9; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 16px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line-strong); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.toast span { overflow-wrap: anywhere; }

/* the loader, then the start screen over the page */
.boot { position: fixed; inset: 0; z-index: 8; display: flex; overflow: auto; padding: 16px; background: var(--ground); transition: background-color .4s; }
.boot > * { margin: auto; }
.boot.scrim { background: rgba(8, 11, 23, .8); backdrop-filter: blur(3px); }
.boot-load { display: grid; justify-items: center; gap: 12px; text-align: center; }
.boot-load .wordmark { font-size: clamp(52px, 10vw, 88px); }
.quip { font: italic 700 14px/1.4 var(--display); letter-spacing: .1em; color: var(--dim); margin: 8px 0 14px; max-width: 34ch; text-wrap: balance; }
.progress { width: min(320px, 72vw); height: 6px; border-radius: 3px; background: var(--raised); overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--mint); transition: width .28s ease-out; }
#bootError { white-space: pre-line; max-width: 60ch; text-align: left; }
.start { width: min(1000px, 100%); padding: 20px; display: grid; gap: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.start-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.start-head h1 { font: 600 28px/1 var(--display); margin: 0; }
.start-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.scratch { display: grid; gap: 14px; padding: 14px; border-radius: 10px; background: var(--raised); min-width: 0; }
.scratch svg { display: block; width: 100%; height: auto; border-radius: 6px; }
.scratch h2 { font: 700 22px/1.1 var(--display); margin: 0; }
.scratch p { margin: 0; color: var(--dim); max-width: 52ch; }
.scratch .f { display: grid; gap: 7px; }
.btn.big { height: 48px; font-size: 18px; padding: 0 20px; justify-self: start; }
.open-col { display: grid; gap: 10px; min-width: 0; }
.open-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.open-list button { width: 100%; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; padding: 9px 10px; border-radius: 8px; border: 2px solid transparent; background: transparent; cursor: pointer; }
.open-list button:hover, .open-list button:focus-visible { background: var(--raised); border-color: var(--ink); outline: none; }
.open-list b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.open-list .meta-line { display: block; color: var(--dim); font-size: 13px; }
.tag { font: 700 10px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.import { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
.paste { display: grid; gap: 8px; }
.paste textarea, .yaml-copy { width: 100%; min-height: 150px; padding: 10px; border-radius: 6px; border: 1px solid var(--line-strong); background: #0A0F20; font: 400 12.5px/1.5 var(--mono); resize: vertical; }
.paste .btn { justify-self: start; }
.import-error { color: var(--red-text); font-size: 13px; margin: 0; overflow-wrap: anywhere; }

@media (max-width: 960px) {
  .work { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ride" "over" "edit" "side"; }
  .pane-edit { min-height: 0; }
  .fill { position: static; }
  .list { max-height: 70vh; }
  .ride canvas { aspect-ratio: 1.9 / 1; }
  .meta .stats { margin-left: 0; }
  .tools { margin-left: 0; }
  .hud.tr .heatbar { width: 120px; }
}
@media (max-width: 760px) {
  .start-grid { grid-template-columns: minmax(0, 1fr); }
  .start { padding: 14px; }
}
@media (max-width: 560px) {
  .palette { padding-inline: 8px; }
  .pal { font-size: 11px; }
  .fields { padding-left: 10px; }
  .hud.bl, .readouts .lap, .follow .label, .hud.br .caption { display: none; }
  .hud-card { padding: 6px 9px; }
  .readouts b { font-size: 18px; }
  .hud.tr .heatbar { width: 84px; }
  .follow button { width: 24px; }
  #name, #tid { width: 100%; }
  .meta .f { flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}