:root {
  --bg: #06080a;
  --bg-deep: #030405;
  --carbon: #0b0e11;
  --carbon-raised: #101419;
  --carbon-input: #050709;
  --brass: #c9a05a;
  --brass-light: #e0c17c;
  --brass-dim: rgba(201, 160, 90, 0.42);
  --brass-soft: rgba(201, 160, 90, 0.20);
  --ink: #edf1f2;
  --muted: #aeb8bd;
  --blue: #8ac5e3;
  --blue-soft: rgba(138, 197, 227, 0.16);
  --green: #9bdfba;
  --green-soft: rgba(155, 223, 186, 0.13);
  --orange: var(--brass-light);
  --orange-soft: rgba(224, 193, 124, 0.12);
  --red: #e18a7c;
  --input: var(--carbon-input);
  --mono: ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
}

body {
  max-width: 1060px;
  margin: 0 auto;
  padding: 30px 22px 52px;
  background-color: var(--bg-deep);
  /* A restrained carbon-fiber weave: diagonal strands, not a flat gray fill. */
  background-image:
    radial-gradient(circle at 15% -5%, rgba(129, 163, 178, 0.10), transparent 28rem),
    radial-gradient(circle at 92% 10%, rgba(201, 160, 90, 0.07), transparent 24rem),
    linear-gradient(135deg, rgba(255, 255, 255, 0.035) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.035) 50%, rgba(255, 255, 255, 0.035) 75%, transparent 75%),
    linear-gradient(45deg, rgba(0, 0, 0, 0.30) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.30) 50%, rgba(0, 0, 0, 0.30) 75%, transparent 75%);
  background-size: auto, auto, 8px 8px, 8px 8px;
  background-attachment: fixed;
}

.top {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: end;
  padding: 4px 0 22px;
  border-bottom: 1px solid var(--brass-dim);
}

.mark {
  margin: 0;
  color: var(--brass-light);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

h1 {
  margin: 3px 0 0;
  color: #f4f7f7;
  font-size: clamp(34px, 6vw, 48px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  text-shadow: 0 0 22px rgba(160, 190, 199, 0.16);
}

.lede {
  max-width: 37em;
  margin: 0;
  color: var(--muted);
}

.driver-line {
  margin: 18px 0 0;
  color: #c4cdd0;
  font-size: 14px;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav a {
  color: var(--blue);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--brass-light);
  text-decoration: underline;
}

.equation {
  margin: 17px 2px 0;
  padding: 0 2px;
}

.equation p {
  max-width: 88em;
  margin: 0;
  color: #77848a;
  font-size: 11px;
  line-height: 1.55;
}

.cars {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.car,
.add-card {
  border: 1px solid var(--brass-dim);
  border-radius: 12px;
  background-color: rgba(10, 13, 16, 0.92);
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.024) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.024) 50%, rgba(255, 255, 255, 0.024) 75%, transparent 75%),
    linear-gradient(45deg, rgba(0, 0, 0, 0.16) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.16) 50%, rgba(0, 0, 0, 0.16) 75%, transparent 75%);
  background-size: 8px 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.car {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
}

.results {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  margin: -2px -2px 1px;
  padding: 0 10px 8px;
  border: 1px solid rgba(201, 160, 90, 0.23);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(5, 8, 10, 0.96), rgba(12, 16, 18, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  font-variant-numeric: tabular-nums;
}

.result-name {
  margin: 0 -10px;
  padding: 10px 10px 7px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.trap-note,
.trap-meta {
  margin: 0 -10px;
  padding: 0 10px 8px;
  color: var(--brass-light);
  font-size: 11px;
  letter-spacing: 0.035em;
}

.trap-note { color: var(--muted); }

.pull {
  display: grid;
  grid-template-columns: minmax(5.8em, 1fr) minmax(8.6em, 9.5em) minmax(6.5em, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 38px;
  border-top: 1px solid rgba(174, 184, 189, 0.10);
}

.pull-name {
  color: #d4dcde;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.045em;
}

.pull-time {
  color: var(--green);
  font-family: var(--mono);
  font-size: clamp(18px, 2.2vw, 23px);
  font-weight: 800;
  line-height: 1;
  text-align: right;
  text-shadow: 0 0 14px rgba(155, 223, 186, 0.20);
  white-space: nowrap;
}

.pull-time.miss {
  color: var(--red);
  text-shadow: none;
}

.pull-margin {
  color: #78868c;
  font-family: var(--mono);
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}

.pull-margin.best {
  color: var(--brass-light);
  font-weight: 800;
}

.error {
  margin: 0;
  color: var(--red);
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 11px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.field-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.025em;
}

.field:nth-child(-n+3) .field-label { color: #f0a15b; }
.field:nth-child(n+4):nth-child(-n+5) .field-label { color: var(--green); }

input,
button {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid rgba(201, 160, 90, 0.28);
  border-radius: 7px;
  color: var(--ink);
  background: var(--input);
  font: inherit;
}

input:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

.run-action {
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 5px;
  padding-top: 22px;
}

.run {
  border-color: var(--brass-light);
  color: #17130b;
  background:
    linear-gradient(180deg, #e2c27b 0%, #c29a52 46%, #86652d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 214, 0.55),
    inset 0 -2px 0 rgba(70, 43, 12, 0.34),
    0 0 20px rgba(201, 160, 90, 0.15);
  font-weight: 850;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.run:hover {
  background:
    linear-gradient(180deg, #f0d495 0%, #d2aa61 46%, #9a7739 100%);
}

.status {
  min-height: 1.2em;
  margin: 0;
  color: var(--brass-light);
  font-size: 12px;
}

.remove {
  align-self: start;
  width: auto;
  min-height: 34px;
  padding: 6px 11px;
  border-color: var(--brass-soft);
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  cursor: pointer;
}

.remove:hover:not(:disabled) {
  border-color: var(--red);
  color: var(--red);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.add-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 13px 16px;
  border-color: var(--brass-soft);
  background-color: rgba(8, 11, 13, 0.92);
}

.add-card button {
  flex: 0 0 auto;
  width: auto;
  min-height: 38px;
  border-color: var(--brass-dim);
  color: var(--ink);
  background: rgba(10, 14, 17, 0.84);
  font-weight: 750;
  cursor: pointer;
}

.add-card button:hover {
  border-color: var(--brass-light);
  color: var(--brass-light);
  background: rgba(201, 160, 90, 0.08);
}

.add-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

footer {
  margin-top: 30px;
  color: #758188;
  font-size: 13px;
}

@media (max-width: 760px) {
  body { padding: 24px 15px 42px; }
  .top { flex-direction: column; align-items: start; gap: 14px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  .grid { grid-template-columns: 1fr; }
  .run-action { padding-top: 0; }
  .pull { grid-template-columns: minmax(4.8em, 1fr) minmax(7.9em, 8.6em) minmax(5.2em, 1fr); gap: 8px; }
  .add-card { align-items: stretch; flex-direction: column; }
  .add-card button { width: 100%; }
}

/* Futuristic timeslip presentation */
.results {
  padding: 0 14px 16px;
  border-color: rgba(201, 160, 90, 0.38);
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.025), transparent 25%),
    linear-gradient(180deg, rgba(4, 7, 9, 0.98), rgba(12, 16, 18, 0.90));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 8px 24px rgba(0, 0, 0, 0.22);
}

.slip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  margin: 0 -14px 2px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(201, 160, 90, 0.30);
  background: linear-gradient(90deg, rgba(201, 160, 90, 0.10), transparent 72%);
}

.slip-header .result-name {
  margin: 0;
  padding: 0;
  color: #f4f7f7;
  font-size: 16px;
  letter-spacing: 0.12em;
}

.slip-tag,
.slip-section-tag {
  color: var(--brass-light);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.slip-section {
  margin-top: 11px;
}

.slip-section + .slip-section {
  margin-top: 17px;
  padding-top: 5px;
  border-top: 1px solid rgba(201, 160, 90, 0.24);
}

.slip-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 29px;
}

.slip-section-title {
  margin: 0;
  color: var(--brass-light);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

.slip-section .pull {
  min-height: 36px;
  border-top-color: rgba(174, 184, 189, 0.12);
}

.slip-section-head + .pull {
  border-top-color: rgba(201, 160, 90, 0.20);
}

.drag-row .pull-name {
  color: #e1b06a;
  text-transform: uppercase;
}

.trap-speed,
.trap-unit {
  color: #f0a15b;
  text-shadow: 0 0 14px rgba(240, 161, 91, 0.18);
}

.trap-speed {
  font-size: clamp(18px, 2.2vw, 23px);
}

.trap-unit {
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

@media (max-width: 460px) {
  .results { padding-left: 10px; padding-right: 10px; }
  .slip-header { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
  .slip-tag, .slip-section-tag { font-size: 8px; letter-spacing: 0.09em; }
}

/* Results-only layout: a compact, two-panel futuristic time slip. */
.slip-body {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(210px, 0.78fr);
  gap: 14px;
  align-items: start;
  margin-top: 10px;
}

.slip-body .slip-section {
  min-width: 0;
  margin: 0;
  padding: 9px 11px 10px;
  border: 1px solid rgba(201, 160, 90, 0.24);
  border-radius: 8px;
  background: rgba(3, 6, 8, 0.56);
}

.slip-body .slip-section + .slip-section {
  margin-top: 0;
  padding-top: 9px;
  border-top: 1px solid rgba(201, 160, 90, 0.24);
}

.slip-body .slip-section-head {
  min-height: 24px;
}

.slip-body .slip-section-title {
  font-size: 10px;
  letter-spacing: 0.16em;
}

.slip-body .slip-section-tag {
  font-size: 8px;
  letter-spacing: 0.10em;
}

.slip-body .pull {
  min-height: 31px;
  gap: 8px;
  grid-template-columns: minmax(4.8em, 1fr) minmax(5.8em, auto) minmax(4.7em, 0.8fr);
}

.slip-body .pull-name {
  font-size: 11px;
  letter-spacing: 0.035em;
}

.slip-body .pull-time {
  font-size: clamp(14px, 1.7vw, 17px);
  letter-spacing: -0.02em;
}

.slip-body .pull-margin {
  font-size: 10px;
}

.drag-panel {
  border-color: rgba(240, 161, 91, 0.34) !important;
  background:
    linear-gradient(145deg, rgba(240, 161, 91, 0.06), transparent 48%),
    rgba(3, 6, 8, 0.66) !important;
}

.drag-panel .slip-section-title,
.drag-panel .slip-section-tag {
  color: #f0a15b;
}

.drag-panel .pull {
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-height: 52px;
  border-top-color: rgba(240, 161, 91, 0.18);
}

.drag-panel .pull-name {
  color: #e1b06a;
  font-size: 10px;
  line-height: 1.25;
}

.drag-panel .trap-speed {
  font-size: clamp(17px, 2vw, 20px);
}

.drag-panel .trap-unit {
  font-size: 10px;
}

@media (max-width: 720px) {
  .slip-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 460px) {
  .slip-body {
    gap: 10px;
  }

  .slip-body .pull {
    grid-template-columns: minmax(4.8em, 1fr) minmax(5.4em, auto) minmax(4.6em, 0.8fr);
  }
}

/* Option B roll results: signature pulls first, supporting windows underneath. */
.roll-window-layout {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.roll-window-layout .b-feature {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  padding: 12px;
}

.roll-window-layout .metric {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 128px;
  padding: 13px;
  border: 1px solid rgba(155, 223, 186, 0.19);
  border-radius: 7px;
  background: linear-gradient(160deg, rgba(155, 223, 186, 0.08), rgba(0, 0, 0, 0.10));
}

.roll-window-layout .metric .range {
  color: #edf1f2;
  font-size: 13px;
}

.roll-window-layout .metric .time {
  color: var(--green);
  font-size: clamp(20px, 2.8vw, 30px);
}

.roll-window-layout .metric .metric-label {
  color: var(--green);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.roll-window-layout .metric .metric-margin {
  min-height: 1.2em;
  color: #78868c;
  font-family: var(--mono);
  font-size: 10px;
  text-align: right;
  white-space: nowrap;
}

.roll-window-layout .metric .metric-margin.best {
  color: var(--brass-light);
  font-weight: 800;
}

.roll-window-layout .b-rest {
  padding: 12px 14px;
}

.roll-window-layout .b-rest-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.roll-window-layout .b-rest .pull {
  min-height: 28px;
}

.roll-window-layout .b-rest .pull-time {
  font-size: 14px;
}

@media (max-width: 560px) {
  .roll-window-layout .b-feature {
    grid-template-columns: 1fr;
  }

  .roll-window-layout .metric {
    min-height: 92px;
  }
}

/* High-end racing display: use the full results bay without adding noise. */
body {
  max-width: 1180px;
  padding: 32px 24px 56px;
}

.top {
  position: relative;
  padding: 7px 0 24px;
  border-bottom-color: rgba(201, 160, 90, 0.52);
}

.top::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 180px;
  height: 3px;
  background: linear-gradient(90deg, var(--brass-light), transparent);
  box-shadow: 0 0 16px rgba(201, 160, 90, 0.30);
}

.mark,
.site-nav a { text-shadow: 0 0 12px rgba(224, 193, 124, 0.18); }

.driver-line {
  max-width: 78em;
  margin-top: 16px;
  color: #aeb8bd;
  font-size: 12px;
}

.cars { gap: 18px; margin-top: 17px; }

.car {
  position: relative;
  overflow: hidden;
  gap: 17px;
  padding: 16px;
  border-color: rgba(201, 160, 90, 0.48);
  background-color: rgba(7, 10, 12, 0.95);
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    inset 0 0 0 1px rgba(255, 255, 255, 0.015);
}

.car::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0.035), transparent 18%, transparent 78%, rgba(201,160,90,0.035));
}

.results {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 14px 15px;
  border-color: rgba(201, 160, 90, 0.48);
  background:
    linear-gradient(110deg, rgba(255,255,255,0.035), transparent 27%),
    linear-gradient(180deg, rgba(4,7,9,0.985), rgba(10,14,16,0.94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    inset 0 -20px 40px rgba(0,0,0,0.13),
    0 12px 26px rgba(0,0,0,0.24);
}

.slip-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  min-height: 78px;
  margin: 0 -14px;
  padding: 13px 16px 12px;
  border-bottom: 1px solid rgba(201,160,90,0.34);
  background:
    linear-gradient(90deg, rgba(201,160,90,0.13), transparent 44%),
    linear-gradient(135deg, rgba(255,255,255,0.025), transparent 55%);
}

.slip-identity { min-width: 0; }
.slip-kicker {
  display: block;
  margin-bottom: 4px;
  color: #78868c;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.slip-header .result-name {
  overflow: hidden;
  margin: 0;
  padding: 0;
  color: #f4f7f7;
  font-size: clamp(14px, 1.7vw, 18px);
  letter-spacing: 0.12em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.speed-readout {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 7px;
  padding: 5px 11px 6px;
  border-left: 1px solid rgba(240,161,91,0.42);
  border-right: 1px solid rgba(240,161,91,0.42);
  background: rgba(240,161,91,0.045);
  font-family: var(--mono);
  white-space: nowrap;
}

.speed-label {
  grid-column: 1 / -1;
  color: #c58a52;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.speed-value {
  color: #f0a15b;
  font-size: clamp(22px, 3vw, 31px);
  line-height: 0.95;
  text-shadow: 0 0 16px rgba(240,161,91,0.20);
}

.speed-unit {
  color: #e1b06a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.slip-header .slip-tag {
  align-self: start;
  padding-top: 5px;
  color: var(--brass-light);
  font-size: 8px;
}

.slip-body {
  grid-template-columns: minmax(0, 1.72fr) minmax(220px, 0.78fr);
  gap: 15px;
  margin-top: 14px;
}

.slip-body .slip-section {
  padding: 11px 12px 12px;
  border-color: rgba(201,160,90,0.29);
  background: rgba(2,5,7,0.68);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

.slip-body .slip-section-head { min-height: 27px; }
.slip-body .slip-section-title { color: #d7b56d; font-size: 10px; }

.roll-window-layout { gap: 11px; }
.roll-window-layout .b-feature {
  gap: 10px;
  padding: 0;
  background: transparent;
}

.roll-window-layout .metric {
  min-height: 124px;
  padding: 14px 13px 12px;
  border-color: rgba(155,223,186,0.27);
  background:
    linear-gradient(145deg, rgba(155,223,186,0.11), transparent 68%),
    linear-gradient(180deg, rgba(16,30,25,0.62), rgba(3,8,8,0.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 5px 13px rgba(0,0,0,0.17);
}

.roll-window-layout .metric::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 7px;
  background: var(--green);
  box-shadow: 0 0 10px rgba(155,223,186,0.28);
}

.roll-window-layout .metric .range { font-size: 12px; font-weight: 750; letter-spacing: 0.04em; }
.roll-window-layout .metric .time { font-size: clamp(22px, 2.8vw, 30px); }
.roll-window-layout .metric .metric-label { color: #7fb99a; font-size: 8px; }

.roll-window-layout .b-rest {
  padding: 10px 12px 11px;
  border: 1px solid rgba(174,184,189,0.13);
  border-radius: 7px;
  background: rgba(0,3,5,0.35);
}

.roll-window-layout .b-rest-head {
  margin-bottom: 2px;
  color: #809096;
  font-size: 9px;
}

.roll-window-layout .b-rest .pull { min-height: 27px; }
.roll-window-layout .b-rest .pull-time { font-size: 13px; }

.drag-panel {
  border-color: rgba(240,161,91,0.40) !important;
  background:
    linear-gradient(150deg, rgba(240,161,91,0.09), transparent 45%),
    rgba(3,6,8,0.70) !important;
}

.drag-panel .slip-section-title,
.drag-panel .slip-section-tag { color: #e1a15d; }
.drag-panel .pull { min-height: 47px; border-top-color: rgba(240,161,91,0.20); }
.drag-panel .pull:first-of-type { border-top-color: rgba(240,161,91,0.33); }
.drag-panel .pull-name { color: #d39a59; font-size: 9px; letter-spacing: 0.045em; }
.drag-panel .trap-speed { font-size: clamp(17px, 2vw, 22px); }
.drag-panel .trap-unit { color: #e1a15d; font-size: 9px; }

/* The graph is a visual readout of the existing roll equation, not new physics. */
.speed-graph {
  margin: 0 0 11px;
  padding: 10px 10px 7px;
  border: 1px solid rgba(155,223,186,0.20);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(155,223,186,0.055), transparent 55%),
    rgba(1,5,6,0.75);
}

.speed-graph-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 4px;
}

.speed-graph-title {
  color: #9bdfba;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.15em;
}

.speed-graph-legend {
  color: #71817f;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.07em;
}

.speed-graph svg { display: block; width: 100%; height: 190px; overflow: visible; }
.graph-grid { stroke: rgba(155,223,186,0.11); stroke-width: 1; stroke-dasharray: 3 5; }
.graph-axis { stroke: rgba(201,160,90,0.35); stroke-width: 1; }
.graph-line { fill: none; stroke: #9bdfba; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(155,223,186,0.32)); }
.graph-dot { fill: #e1a15d; stroke: #0a0e10; stroke-width: 2; }
.graph-y-label, .graph-x-label, .graph-time-label { fill: #dc9c59; font-family: var(--mono); font-size: 9px; }
.graph-time-label { fill: #7d9188; font-size: 8px; }

.grid {
  position: relative;
  z-index: 1;
  gap: 9px;
}

.field-label { font-size: 11px; }
input { min-height: 40px; border-color: rgba(201,160,90,0.36); background: rgba(2,5,7,0.92); }
input::placeholder { color: #607078; }
.run-action { padding-top: 21px; }
.run { min-height: 40px; }
.status { font-size: 11px; }

.add-card { border-color: rgba(201,160,90,0.30); background: rgba(6,9,11,0.90); }

@media (max-width: 760px) {
  body { padding: 24px 15px 42px; }
  .slip-header { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .slip-header .slip-tag { grid-column: 1 / -1; grid-row: 2; padding-top: 0; }
  .speed-readout { grid-column: 2; grid-row: 1; }
}

@media (max-width: 560px) {
  .speed-graph svg { height: 170px; }
  .speed-graph-legend { display: none; }
  .roll-window-layout .b-feature { grid-template-columns: 1fr; }
  .roll-window-layout .metric { min-height: 96px; }
}

/* Interaction and flow refinements: entry first, complete results second, trace last. */
.results:empty { display: none; }

.speed-graph {
  margin: 16px 0 0;
  padding: 14px 14px 12px;
  border-color: rgba(155, 223, 186, 0.28);
  background:
    linear-gradient(180deg, rgba(155, 223, 186, 0.075), transparent 58%),
    linear-gradient(135deg, rgba(201, 160, 90, 0.045), transparent 35%),
    rgba(1, 5, 6, 0.84);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 8px 22px rgba(0,0,0,0.20);
}

.speed-graph-head { margin-bottom: 8px; }
.speed-graph-legend { color: #9aaca7; }
.speed-graph svg { height: 300px; }
.graph-hitarea {
  fill: rgba(155, 223, 186, 0.001);
  cursor: crosshair;
  pointer-events: all;
}
.graph-hover-line {
  stroke: rgba(224, 193, 124, 0.70);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  pointer-events: none;
}
.graph-hover-dot {
  fill: #f0a15b;
  stroke: #f9e0a8;
  stroke-width: 2;
  filter: drop-shadow(0 0 5px rgba(240,161,91,0.7));
  pointer-events: none;
}
.graph-tooltip { pointer-events: none; }
.graph-tooltip-bg {
  fill: rgba(4, 8, 10, 0.96);
  stroke: rgba(224, 193, 124, 0.78);
  stroke-width: 1;
}
.graph-tooltip-text {
  fill: #f5d995;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

@media (max-width: 560px) {
  .speed-graph svg { height: 235px; }
}

/* Two-car head-to-head bay. Each car still has exactly one active input. */
.cars {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.car .grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.add-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.comparison {
  margin-top: 18px;
}

.comparison[hidden] { display: none; }

.vs-panel {
  overflow: hidden;
  border: 1px solid rgba(201, 160, 90, 0.50);
  border-radius: 12px;
  background:
    linear-gradient(115deg, rgba(201, 160, 90, 0.075), transparent 30%),
    linear-gradient(180deg, rgba(8, 12, 14, 0.97), rgba(3, 6, 8, 0.96));
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.vs-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 13px;
  border-bottom: 1px solid rgba(201, 160, 90, 0.28);
  background: linear-gradient(90deg, rgba(201,160,90,0.12), transparent 55%);
}

.vs-kicker {
  display: block;
  color: #c58a52;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.vs-title {
  margin: 3px 0 0;
  color: #f4f7f7;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vs-rule {
  color: var(--brass-light);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.vs-table {
  padding: 0 14px 10px;
  font-variant-numeric: tabular-nums;
}

.vs-row {
  display: grid;
  grid-template-columns: minmax(9em, 1.35fr) repeat(2, minmax(8em, 1fr)) minmax(8.5em, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 35px;
  border-top: 1px solid rgba(174, 184, 189, 0.11);
}

.vs-table-head {
  min-height: 38px;
  border-top: 0;
  color: #758188;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.vs-table-head span:not(:first-child),
.vs-number,
.vs-delta,
.vs-delta-label {
  text-align: right;
}

.vs-car-label {
  color: var(--green);
}

.vs-car-label.car-two { color: var(--brass-light); }

.vs-delta-label { color: #8a989d; }

.vs-group-label {
  margin: 12px 0 4px;
  padding: 6px 0 5px;
  color: var(--green);
  border-bottom: 1px solid rgba(155, 223, 186, 0.20);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.18em;
}

.vs-group-label.drag-group-label {
  color: #e1a15d;
  border-bottom-color: rgba(240, 161, 91, 0.23);
}

.vs-metric {
  color: #cbd4d6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.035em;
}

.vs-number {
  color: var(--green);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.vs-number.car-two { color: var(--brass-light); }
.vs-trap-row .vs-number { color: #f0a15b; }

.vs-delta {
  color: #aeb8bd;
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
}

.vs-delta.quicker { color: var(--green); }
.vs-delta.slower { color: #e1a15d; }
.vs-delta.even { color: var(--blue); }

.vs-note {
  margin: 4px 18px 16px;
  color: #7d8a8f;
  font-size: 11px;
}

.graph-axis-label {
  fill: #d7b56d;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.graph-axis-tick {
  stroke: rgba(201,160,90,0.38);
  stroke-width: 1;
}

@media (max-width: 760px) {
  .cars { grid-template-columns: 1fr; }
  .car .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .vs-row {
    grid-template-columns: minmax(6em, 1fr) repeat(2, minmax(5.2em, 1fr)) minmax(5.4em, 1fr);
    gap: 6px;
  }
  .vs-table { padding-left: 9px; padding-right: 9px; }
  .vs-metric { font-size: 10px; }
  .vs-number, .vs-delta { font-size: 10px; }
  .vs-table-head { font-size: 7px; }
  .vs-note { margin-left: 12px; margin-right: 12px; }
}

@media (max-width: 460px) {
  .car .grid { grid-template-columns: 1fr; }
  .vs-head { align-items: start; flex-direction: column; gap: 7px; }
  .vs-rule { align-self: end; }
}

/* In VS mode each slip gets the full width of its card so the featured
   numbers stay legible instead of being squeezed beside the trap panel. */
.cars.two-up .slip-body {
  grid-template-columns: 1fr;
}

.cars.two-up .roll-window-layout .metric .time {
  font-size: clamp(19px, 2.4vw, 26px);
}

/* Readability pass: keep the roll cards wide, then give every row a real line. */
.slip-body {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.roll-window-layout {
  gap: 14px;
}

.roll-window-layout .b-feature {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
}

.roll-window-layout .metric {
  min-width: 0;
  min-height: 136px;
  padding: 14px;
}

.roll-window-layout .metric .range,
.roll-window-layout .metric .time,
.roll-window-layout .metric .metric-margin {
  min-width: 0;
}

.roll-window-layout .metric .time {
  display: block;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.roll-window-layout .b-rest {
  padding: 13px 14px 15px;
}

.roll-window-layout .b-rest-head {
  margin-bottom: 6px;
}

.roll-window-layout .b-rest .pull {
  grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
  gap: 14px;
  min-height: 38px;
  line-height: 1.35;
}

.roll-window-layout .b-rest .pull-name {
  min-width: 0;
}

.roll-window-layout .b-rest .pull-time,
.roll-window-layout .b-rest .pull-margin {
  white-space: nowrap;
}

.drag-panel .pull {
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  gap: 16px;
  min-height: 52px;
}

.drag-panel .pull-name {
  min-width: 0;
  line-height: 1.35;
}

.drag-panel .trap-speed,
.drag-panel .trap-unit {
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 620px) {
  .roll-window-layout .b-feature {
    grid-template-columns: 1fr;
  }

  .roll-window-layout .metric {
    min-height: 104px;
  }
}

/* Keep the three featured pulls together where there is room; stack only on
   genuinely narrow phones, where a single-column card is more readable. */
.roll-window-layout .metric .time {
  font-size: clamp(18px, 2.4vw, 26px);
}

@media (max-width: 900px) {
  .cars.two-up .roll-window-layout .b-feature {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .roll-window-layout .b-feature {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 431px) and (max-width: 620px) {
  .roll-window-layout .b-feature {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 431px) and (max-width: 620px) {
  .roll-window-layout .metric {
    padding-left: 6px;
    padding-right: 6px;
  }

  .roll-window-layout .metric .time {
    font-size: 18px;
    letter-spacing: -0.035em;
  }
}

/* Put the drag bay beside the lower Results card, leaving the featured pulls
   spanning the full top of the roll-racing area. */
.slip-body {
  grid-template-columns: minmax(0, 1.55fr) minmax(160px, 0.75fr);
  gap: 15px;
  align-items: start;
}

.roll-panel,
.roll-panel .roll-window-layout {
  display: contents;
}

.roll-panel > .slip-section-head {
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(201, 160, 90, 0.24);
  border-radius: 8px;
  background: rgba(3, 6, 8, 0.56);
}

.roll-window-layout > .b-feature {
  grid-column: 1 / -1;
  grid-row: 2;
}

.roll-window-layout > .b-rest {
  grid-column: 1;
  grid-row: 3;
}

.slip-body > .drag-panel {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  margin: 0;
}

@media (max-width: 900px) {
  .cars.two-up .slip-body {
    grid-template-columns: 1fr;
  }

  .cars.two-up .roll-panel > .slip-section-head,
  .cars.two-up .roll-window-layout > .b-feature,
  .cars.two-up .roll-window-layout > .b-rest,
  .cars.two-up .slip-body > .drag-panel {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 420px) {
  .slip-body {
    grid-template-columns: 1fr;
  }

  .roll-panel > .slip-section-head,
  .roll-window-layout > .b-feature,
  .roll-window-layout > .b-rest,
  .slip-body > .drag-panel {
    grid-column: 1;
    grid-row: auto;
  }
}

/* The graph is a readout, so its scale labels must be legible at a glance. */
.graph-y-label,
.graph-x-label {
  font-size: 12px;
}

.graph-time-label {
  font-size: 11px;
}

.graph-axis-label {
  font-size: 11px;
}

.graph-tooltip-text {
  font-size: 12px;
}

@media (max-width: 620px) {
  .slip-body {
    grid-template-columns: minmax(0, 1.3fr) minmax(170px, 0.78fr);
  }

  .roll-window-layout .b-rest .pull {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 9px;
    min-height: 40px;
  }

  .drag-panel .pull {
    gap: 9px;
  }
}

@media (max-width: 420px) {
  .slip-body {
    grid-template-columns: 1fr;
  }
}

/* A lone car should use the full bay; reserve the two-column split for VS mode. */
.cars.single {
  grid-template-columns: minmax(0, 1fr);
}

/* VS redesign: two compact input cards feed one shared, full-width result bay. */
.car-identity {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 10px;
  border-bottom: 1px solid rgba(155, 223, 186, 0.20);
}
.car-identity-kicker {
  color: #78918a;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
}
.car-identity-name {
  color: var(--green);
  font-size: 17px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.car-identity.car-two { border-bottom-color: rgba(138, 197, 227, 0.32); }
.car-identity.car-two .car-identity-name { color: var(--blue); }
.car.car-two { border-color: rgba(138, 197, 227, 0.34); }

/* Do not render a second copy of every result inside the second card. */
.cars.two-up .car .results { display: none; }
.cars.two-up .car { min-width: 0; }
.cars.two-up .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.vs-panel { margin-top: 18px; }
.vs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(174, 184, 189, .12);
  color: #8e9a9f;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vs-legend-item.car-one { color: var(--green); }
.vs-legend-item.car-two { color: var(--blue); }
.vs-legend-item.delta { color: #b0a17b; }
.vs-results-body {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .85fr);
  gap: 14px;
  padding: 14px;
  align-items: start;
}
.vs-result-box {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(201, 160, 90, .25);
  border-radius: 8px;
  background: rgba(2, 5, 7, .66);
}
.vs-result-box.signature-box { grid-column: 1 / -1; }
.vs-result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px 8px;
  border-bottom: 1px solid rgba(201, 160, 90, .18);
  background: linear-gradient(90deg, rgba(201,160,90,.08), transparent 60%);
}
.vs-result-title {
  margin: 0;
  color: var(--brass-light);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.vs-result-tag {
  color: #76858a;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .10em;
  white-space: nowrap;
}
.vs-result-box .vs-table { padding: 0 13px 11px; }
.vs-result-box .vs-row {
  grid-template-columns: minmax(10em, 1.55fr) repeat(2, minmax(7.6em, 1fr)) minmax(8.7em, 1fr);
  gap: 12px;
  min-height: 38px;
}
.vs-result-box .vs-table-head { min-height: 31px; }
.vs-result-box .vs-table-head,
.vs-result-box .vs-table-head .vs-car-label,
.vs-result-box .vs-table-head .vs-delta-label {
  font-size: 8px;
}
.vs-result-box .vs-metric { font-size: 11px; }
.vs-result-box .vs-number { font-size: 14px; }
.vs-result-box .vs-delta { font-size: 10px; }
.vs-result-box .vs-number.car-one { color: var(--green); }
.vs-result-box .vs-number.car-two { color: var(--blue); }
.vs-result-box .vs-trap-row .vs-number.car-one { color: #f0a15b; }
.vs-result-box .vs-trap-row .vs-number.car-two { color: var(--blue); }
.vs-result-box .vs-car-label.car-two { color: var(--blue); }
.vs-result-box .vs-trap-row { min-height: 44px; }
.vs-result-box.drag-box {
  border-color: rgba(240, 161, 91, .33);
  background: linear-gradient(145deg, rgba(240,161,91,.065), transparent 55%), rgba(2,5,7,.66);
}
.vs-result-box.drag-box .vs-result-title,
.vs-result-box.drag-box .vs-result-tag { color: #e1a15d; }
.vs-result-box.drag-box .vs-result-head { border-bottom-color: rgba(240,161,91,.22); }
.vs-graph { margin: 0 14px 14px; }
.graph-line.car-one { stroke: var(--green); }
.graph-line.car-two { stroke: var(--blue); filter: drop-shadow(0 0 4px rgba(138,197,227,.38)); }
.graph-dot.car-one { fill: #e1a15d; }
.graph-dot.car-two { fill: var(--blue); }
.graph-hover-dot.car-one { fill: #f0a15b; }
.graph-hover-dot.car-two { fill: var(--blue); stroke: #d6f4ff; }
.graph-tooltip-text.car-two-text { fill: var(--blue); }

@media (max-width: 780px) {
  .vs-results-body { grid-template-columns: 1fr; }
  .vs-result-box.signature-box,
  .vs-result-box.results-box,
  .vs-result-box.drag-box { grid-column: 1; }
}
@media (max-width: 560px) {
  .vs-results-body { padding: 10px; gap: 10px; }
  .vs-legend { padding-left: 12px; padding-right: 12px; }
  .vs-result-box .vs-table { padding-left: 8px; padding-right: 8px; }
  .vs-result-box .vs-row {
    grid-template-columns: minmax(6.5em, 1.2fr) repeat(2, minmax(4.6em, 1fr)) minmax(5.5em, .95fr);
    gap: 7px;
  }
  .vs-result-box .vs-metric { font-size: 10px; }
  .vs-result-box .vs-number { font-size: 11px; }
  .vs-result-box .vs-delta { font-size: 9px; }
  .vs-result-box .vs-table-head { font-size: 7px; }
}
@media (max-width: 430px) {
  .cars.two-up .grid { grid-template-columns: 1fr; }
  .vs-result-box .vs-row {
    grid-template-columns: minmax(6em, 1.15fr) repeat(2, minmax(4.2em, 1fr)) minmax(4.8em, .9fr);
    gap: 5px;
  }
  .vs-result-box .vs-result-head { align-items: start; flex-direction: column; gap: 4px; }
}

/* Distance readouts use the existing speed/time trace integrated in feet. */
.distance-value {
  display: block;
  margin-top: 4px;
  color: #9aaca7;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.pull-margin {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}
.pull-margin-delta {
  color: #78868c;
  font-family: var(--mono);
  font-size: 10px;
  white-space: nowrap;
}
.pull-margin-delta.best { color: var(--brass-light); font-weight: 800; }
.metric .distance-value { margin-top: 3px; font-size: 11px; }

/* Keep Results slightly narrower while reserving a real-width Drag Racing bay. */
.vs-results-body {
  grid-template-columns: minmax(0, 1.22fr) minmax(330px, .92fr);
}
.vs-result-box .vs-number,
.vs-result-box .vs-delta {
  white-space: normal;
  line-height: 1.15;
}
.vs-time-value,
.vs-distance-value {
  display: block;
  white-space: nowrap;
}
.vs-distance-value {
  margin-top: 4px;
  color: #8c9b9f;
  font-size: 10px;
  font-weight: 700;
}
.vs-result-box .vs-number.car-one,
.vs-result-box .vs-trap-row .vs-number.car-one { color: var(--green); }
.vs-result-box .vs-number.car-two,
.vs-result-box .vs-trap-row .vs-number.car-two { color: var(--blue); }
.vs-result-box.drag-box .vs-row {
  grid-template-columns: minmax(8em, 1.25fr) repeat(2, minmax(7em, 1fr)) minmax(7.5em, .95fr);
  gap: 8px;
}
.vs-result-box.drag-box .vs-distance-value { color: #aeb8bd; }

@media (max-width: 920px) and (min-width: 781px) {
  .vs-results-body { grid-template-columns: minmax(0, 1.12fr) minmax(300px, .95fr); }
  .vs-result-box.drag-box .vs-row {
    grid-template-columns: minmax(7.2em, 1.15fr) repeat(2, minmax(6.2em, 1fr)) minmax(6.7em, .95fr);
    gap: 6px;
  }
}

/* At tablet widths, stack the shared boxes rather than clipping the four-column data. */
@media (max-width: 900px) {
  .vs-results-body { grid-template-columns: 1fr; }
  .vs-result-box.signature-box,
  .vs-result-box.results-box,
  .vs-result-box.drag-box { grid-column: 1; }
}

/* Keep every drag value inside its row on wide screens too. */
.vs-result-box.drag-box .vs-row {
  grid-template-columns: minmax(7em, 1.25fr) repeat(2, minmax(6em, 1fr)) minmax(6.5em, .95fr);
  gap: 7px;
}
@media (max-width: 1100px) and (min-width: 901px) {
  .vs-result-box.drag-box .vs-row {
    grid-template-columns: minmax(6.5em, 1.15fr) repeat(2, minmax(5.5em, 1fr)) minmax(6em, .95fr);
    gap: 6px;
  }
}

/* ===== Responsive publish pass: phone upright, phone sideways, desktop ===== */

/* Prefer stacking the two input cards before they get too tight. */
@media (max-width: 920px) {
  .cars,
  .cars.two-up {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Single-car Results: keep name | time+distance without stacking onto the rule. */
@media (max-width: 620px) {
  .roll-window-layout .b-rest .pull {
    grid-template-columns: minmax(0, 1.15fr) max-content;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    align-items: start;
    min-height: 48px;
    padding: 7px 0 8px;
  }

  .roll-window-layout .b-rest .pull-name {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .roll-window-layout .b-rest .pull-time {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .roll-window-layout .b-rest .pull-margin {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-items: flex-end;
  }

  .drag-panel .pull {
    grid-template-columns: minmax(0, 1.2fr) max-content;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 2px;
    align-items: start;
    min-height: 52px;
    padding: 6px 0;
  }

  .drag-panel .pull-name {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 9px;
    line-height: 1.3;
  }

  .drag-panel .trap-speed {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    font-size: 15px;
  }

  .drag-panel .trap-unit {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
}

/* VS comparison on a phone: metric on its own line, then three equal value columns. */
@media (max-width: 560px) {
  .vs-results-body {
    padding: 10px;
    gap: 10px;
  }

  .vs-result-box {
    overflow: visible;
  }

  .vs-result-box .vs-table,
  .vs-result-box.drag-box .vs-table {
    padding-left: 10px;
    padding-right: 10px;
  }

  .vs-result-box .vs-row,
  .vs-result-box.drag-box .vs-row,
  .vs-result-box .vs-table-head {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "metric metric metric"
      "c1 c2 delta";
    gap: 4px 8px;
    min-height: 0;
    padding: 8px 0 9px;
    align-items: start;
  }

  .vs-result-box .vs-metric {
    grid-area: metric;
    font-size: 11px;
    line-height: 1.25;
  }

  .vs-result-box .vs-number.car-one,
  .vs-result-box .vs-table-head .vs-car-label.car-one {
    grid-area: c1;
    text-align: left;
  }

  .vs-result-box .vs-number.car-two,
  .vs-result-box .vs-table-head .vs-car-label.car-two {
    grid-area: c2;
    text-align: left;
  }

  .vs-result-box .vs-delta,
  .vs-result-box .vs-table-head .vs-delta-label {
    grid-area: delta;
    text-align: left;
  }

  .vs-result-box .vs-number,
  .vs-result-box .vs-delta {
    font-size: 12px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .vs-result-box .vs-time-value {
    font-size: 12px;
  }

  .vs-result-box .vs-distance-value {
    font-size: 10px;
  }

  .vs-result-box .vs-table-head {
    font-size: 8px;
    letter-spacing: 0.06em;
  }

  /* Fixed trap distances are identical for both cars; hide the duplicate on narrow screens
     so the mph difference keeps a full column. */
  .vs-result-box.drag-box .vs-number .vs-distance-value {
    display: none;
  }

  .vs-graph {
    margin-left: 10px;
    margin-right: 10px;
  }
}

/* Phone sideways: keep usable type and avoid cramped header/input chrome. */
@media (max-width: 920px) and (max-height: 480px) {
  body {
    padding: 14px 12px 28px;
  }

  h1 {
    font-size: 28px;
  }

  .top {
    gap: 8px;
    padding-bottom: 12px;
  }

  .driver-line {
    margin-top: 8px;
    font-size: 11px;
  }

  .car {
    padding: 12px;
    gap: 12px;
  }

  .speed-graph svg {
    height: 220px;
  }
}

/* Desktop and tablet: keep Results + Drag readable without clipping. */
@media (min-width: 561px) {
  .vs-result-box {
    overflow: visible;
  }

  .vs-result-box .vs-row,
  .vs-result-box.drag-box .vs-row {
    grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)) minmax(0, 1fr);
    gap: 10px;
  }

  .vs-result-box .vs-number,
  .vs-result-box .vs-delta {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .vs-time-value,
  .vs-distance-value {
    white-space: nowrap;
  }
}

@media (min-width: 901px) {
  .vs-results-body {
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.95fr);
  }
}

/* Graph labels stay readable after the SVG scales down. */
.speed-graph svg {
  min-height: 210px;
}

.graph-y-label,
.graph-x-label {
  font-size: 13px;
  font-weight: 700;
}

.graph-axis-label {
  font-size: 12px;
  font-weight: 800;
}

.graph-tooltip-text {
  font-size: 13px;
}

@media (max-width: 560px) {
  .speed-graph {
    padding: 12px 8px 10px;
  }

  .speed-graph svg {
    height: 250px;
  }

  .graph-y-label,
  .graph-x-label {
    font-size: 12px;
  }

  .graph-axis-label {
    font-size: 11px;
  }
}

/* Avoid .car overflow clipping focus rings and value edges. */
.car {
  overflow: visible;
}

.results,
.vs-panel {
  overflow: visible;
}


/* Result readability controls: default one step larger, with a user-adjustable scale. */
:root { --result-scale: 1.10; }

.text-scale {
  display: grid;
  gap: 7px;
  max-width: 520px;
  margin: 16px 0 0;
  padding: 11px 13px 10px;
  border: 1px solid rgba(201, 160, 90, 0.24);
  border-radius: 8px;
  background: rgba(5, 8, 10, 0.72);
}

.text-scale-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.text-scale label {
  color: var(--brass-light);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.text-scale output {
  color: var(--green);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
}

.text-scale input[type="range"] {
  width: 100%;
  min-height: 0;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  accent-color: var(--brass-light);
  background: transparent;
  box-shadow: none;
}

.text-scale input[type="range"]:focus {
  border: 0;
  box-shadow: none;
}

.text-scale p {
  margin: 0;
  color: #7f8d92;
  font-size: 11px;
}

/* VS mode gets a little more type while Results gives back some whitespace. */
@media (min-width: 901px) {
  .vs-results-body {
    grid-template-columns: minmax(0, 1.10fr) minmax(335px, .90fr);
    gap: 12px;
    padding: 12px;
  }
}

.vs-result-box .vs-result-head {
  padding: 9px 12px 7px;
}

.vs-result-box .vs-table {
  padding: 0 12px 8px;
}

.vs-result-box .vs-row {
  gap: 8px;
  min-height: 35px;
}

.vs-result-box .vs-table-head {
  min-height: 28px;
}

.vs-result-box .vs-metric {
  font-size: calc(11px * var(--result-scale));
}

.vs-result-box .vs-number {
  font-size: calc(14px * var(--result-scale));
  line-height: 1.15;
}

.vs-result-box .vs-delta {
  font-size: calc(11px * var(--result-scale));
  line-height: 1.15;
}

.vs-result-box .vs-distance-value {
  font-size: calc(10px * var(--result-scale));
}

.vs-result-box.drag-box .vs-row {
  min-height: 47px;
  gap: 7px;
}

/* Single-car results follow the same control, without changing their layout. */
.results .roll-window-layout .metric .time {
  font-size: clamp(18px, calc(2.4vw * var(--result-scale)), calc(26px * var(--result-scale)));
}

.results .roll-window-layout .metric .range,
.results .roll-window-layout .b-rest .pull-name {
  font-size: calc(12px * var(--result-scale));
}

.results .roll-window-layout .b-rest .pull-time,
.results .roll-window-layout .b-rest .pull-margin,
.results .roll-window-layout .metric .metric-margin {
  font-size: calc(13px * var(--result-scale));
}

.results .drag-panel .trap-speed {
  font-size: calc(18px * var(--result-scale));
}

@media (max-width: 900px) {
  .vs-results-body {
    gap: 11px;
  }
}

@media (max-width: 560px) {
  .vs-result-box .vs-number {
    font-size: calc(12px * var(--result-scale));
  }

  .vs-result-box .vs-delta {
    font-size: calc(11px * var(--result-scale));
  }

  .vs-result-box .vs-time-value {
    font-size: inherit;
  }

  .vs-result-box .vs-distance-value {
    font-size: calc(10px * var(--result-scale));
  }
}

/* Header control: keep the result-size slider on the title line and use the
   existing header space instead of adding another page row. */
.top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) minmax(0, 1fr);
  align-items: end;
  gap: clamp(14px, 3vw, 32px);
}

.brand-block,
.top .text-scale,
.top .lede,
.top .site-nav {
  min-width: 0;
}

.top .text-scale {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(82px, 1.25fr) auto;
  grid-template-areas: "label range value";
  align-items: center;
  gap: 0 9px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 7px 10px;
  border-radius: 7px;
}

.top .text-scale-head { display: contents; }
.top .text-scale label { grid-area: label; min-width: 0; font-size: 10px; letter-spacing: .10em; }
.top .text-scale output { grid-area: value; }
.top .text-scale input[type="range"] { grid-area: range; }
.top .text-scale p {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 920px) {
  .top {
    grid-template-columns: minmax(0, .95fr) minmax(190px, 1.25fr);
    gap: 12px 16px;
  }

  .top .text-scale { justify-self: stretch; }
  .top .lede,
  .top .site-nav { grid-column: 1 / -1; }
}

@media (max-width: 460px) {
  .top {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .top .text-scale,
  .top .lede,
  .top .site-nav { grid-column: auto; }
}

/* VS launch control: one centered matchup button between the two input bays. */
@media (min-width: 921px) {
  .cars.two-up {
    position: relative;
    grid-template-columns: minmax(0, 1fr) minmax(168px, 188px) minmax(0, 1fr);
    align-items: start;
  }

  .cars.two-up > .car:first-child { grid-column: 1; }
  .cars.two-up > .car:nth-child(2) { grid-column: 3; }

  .cars.two-up > .run-action {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    padding: 0;
  }

  .cars.two-up > .run-action .status {
    text-align: center;
  }

  .cars.two-up > .run-action .run {
    position: relative;
    min-height: 48px;
    overflow: hidden;
    border-color: #f0d18a;
    background:
      linear-gradient(135deg, rgba(255,255,255,.20), transparent 30%),
      linear-gradient(180deg, #f0cf83 0%, #c79b4c 48%, #8b652d 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 250, 218, .72),
      inset 0 -3px 0 rgba(71, 43, 12, .34),
      0 0 22px rgba(201, 160, 90, .24);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }

  .cars.two-up > .run-action .run::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -75%;
    width: 48%;
    transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transition: left .42s ease;
    pointer-events: none;
  }

  .cars.two-up > .run-action .run:hover {
    transform: translateY(-3px) scale(1.025);
    filter: saturate(1.12) brightness(1.06);
    box-shadow:
      inset 0 1px 0 rgba(255, 250, 218, .82),
      inset 0 -3px 0 rgba(71, 43, 12, .30),
      0 7px 22px rgba(201, 160, 90, .34);
  }

  .cars.two-up > .run-action .run:hover::before {
    left: 135%;
  }

  .cars.two-up > .run-action .run:active {
    transform: translateY(0) scale(.99);
  }
}

/* On smaller screens the matchup remains a normal, centered control in the flow. */
@media (max-width: 920px) {
  .cars.two-up > .run-action {
    grid-column: 1;
    justify-self: center;
    width: min(100%, 260px);
    padding-top: 0;
    text-align: center;
  }

  .cars.two-up > .run-action .run {
    min-height: 46px;
  }
}

/* Keep the vertical axis title in its own lane beside the larger tick labels. */
.graph-axis-label {
  dominant-baseline: middle;
}

/* VS graph readout: keep the live feet-apart result visible above the trace. */
.speed-graph-head {
  flex-wrap: wrap;
}

.speed-graph-gap-label {
  flex: 1 1 auto;
  min-width: 13em;
  color: #f5d995;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .06em;
  text-align: center;
  white-space: nowrap;
}

.graph-tooltip-text.gap-text {
  fill: #f5d995;
}

@media (max-width: 560px) {
  .speed-graph-gap-label {
    order: 2;
    min-width: 0;
    font-size: 9px;
  }

  .vs-graph .speed-graph-head {
    align-items: center;
  }
}

/* ===== Family Brass theme + tight one-car bay (PowerCurve match) ===== */
:root {
  --bg: #050607;
  --bg-deep: #030405;
  --carbon: #0c1016;
  --carbon-raised: #12171f;
  --carbon-input: rgba(4, 6, 9, 0.88);
  --brass: rgba(215, 196, 160, 0.42);
  --brass-light: #e8d7b0;
  --brass-dim: rgba(215, 196, 160, 0.42);
  --brass-soft: rgba(240, 226, 196, 0.22);
  --brass-inset: rgba(106, 87, 56, 0.35);
  --ink: #f4f7fb;
  --muted: #9aa6b8;
  --blue: #7ec8ee;
  --blue-soft: rgba(76, 201, 240, 0.16);
  --green: #b6f27a;
  --green-soft: rgba(200, 255, 74, 0.12);
  --orange: #e8d7b0;
  --red: #ff6b7d;
  --lime: #c8ff4a;
  --accent: #4cc9f0;
  --input: rgba(4, 6, 9, 0.88);
  --sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --brass-face:
    linear-gradient(145deg, rgba(240, 226, 196, 0.12), transparent 38%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, transparent 45%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.25) 0 1px, transparent 1px 3px),
    #12171f;
  --brass-shadow:
    inset 0 0 0 1px rgba(240, 226, 196, 0.22),
    inset 0 0 0 3px rgba(106, 87, 56, 0.35),
    inset 0 0 28px rgba(0, 0, 0, 0.35),
    0 12px 36px rgba(0, 0, 0, 0.45);
  --btn-brass-rim:
    inset 0 0 0 1px rgba(240, 226, 196, 0.22),
    inset 0 0 0 2px rgba(106, 87, 56, 0.35),
    inset 0 1px 0 rgba(255, 246, 224, 0.12),
    0 4px 14px rgba(0, 0, 0, 0.4);
}

html, body {
  background-color: #050607;
  color: #f4f7fb;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 1440px;
  padding: 12px 14px 28px;
  background-color: #050607;
  background-image:
    radial-gradient(1100px 520px at 50% -8%, rgba(76, 201, 240, 0.08), transparent 58%),
    radial-gradient(800px 480px at 92% 88%, rgba(200, 255, 74, 0.04), transparent 52%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.028) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.28) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #0b0e13 0%, #050607 42%, #030405 100%);
  background-attachment: fixed;
}

.site-nav {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(215, 196, 160, 0.42);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(240, 226, 196, 0.10), transparent 40%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.25) 0 1px, transparent 1px 3px),
    rgba(12, 16, 22, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(240, 226, 196, 0.22),
    inset 0 0 0 2px rgba(106, 87, 56, 0.35),
    0 8px 22px rgba(0, 0, 0, 0.35);
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  border: 1px solid transparent;
  color: #b0b8c4;
  background: rgba(4, 6, 9, 0.45);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  text-decoration: none;
  text-shadow: none;
}

.site-nav a:hover {
  color: #e8d7b0;
  border-color: rgba(215, 196, 160, 0.42);
  text-decoration: none;
}

.top {
  align-items: center;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid rgba(215, 196, 160, 0.42);
  border-radius: 14px;
  background: var(--brass-face);
  box-shadow: var(--brass-shadow);
}

.top::after { display: none; }

.mark {
  color: #e8d7b0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-shadow: none;
}

h1 {
  color: #f4f7fb;
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: none;
}

.lede,
.driver-line {
  color: #9aa6b8;
  font-size: 13px;
}

.driver-line {
  margin: 0;
  max-width: none;
}

.top .text-scale {
  border: 1px solid rgba(215, 196, 160, 0.28);
  border-radius: 9px;
  background: rgba(4, 6, 9, 0.55);
  box-shadow: inset 0 0 0 1px rgba(240, 226, 196, 0.08);
}

.top .text-scale label { color: #e8d7b0; }
.top .text-scale output { color: #c8ff4a; }
.top .text-scale input[type="range"] { accent-color: #d4b889; }

.cars { gap: 12px; margin: 0; }

.car,
.add-card,
.vs-panel {
  border: 1px solid rgba(215, 196, 160, 0.42);
  border-radius: 14px;
  background: var(--brass-face);
  box-shadow: var(--brass-shadow);
}

.car::before { display: none; }

.car {
  gap: 10px;
  padding: 12px 14px 14px;
}

.car-identity {
  padding: 0 2px 8px;
  border-bottom: 1px solid rgba(215, 196, 160, 0.22);
}

.car-identity-kicker {
  color: #9aa6b8;
  font-size: 10px;
  letter-spacing: 0.12em;
}

.car-identity-name { color: #c8ff4a; }
.car-identity.car-two { border-bottom-color: rgba(76, 201, 240, 0.35); }
.car-identity.car-two .car-identity-name { color: #7ec8ee; }
.car.car-two { border-color: rgba(76, 201, 240, 0.45); }

/* One car: five entries and Run share one even row on a desktop, no spare band. */
@media (min-width: 1080px) {
  .cars.single .car .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px 10px;
  }
}

.cars.single .car {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 14px 12px;
}

.cars.single .car-identity { grid-column: 1; grid-row: 1; }
.cars.single .remove {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
}
.cars.single .grid,
.cars.single .results { grid-column: 1 / -1; }

.field { gap: 4px; }
.field-label {
  color: #9aa6b8;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.field:nth-child(-n+3) .field-label { color: #e8d7b0; }
.field:nth-child(n+4):nth-child(-n+5) .field-label { color: #c8ff4a; }

input,
button {
  border: 1px solid rgba(180, 200, 230, 0.16);
  border-radius: 9px;
  background: rgba(4, 6, 9, 0.88);
  color: #f4f7fb;
  font-family: var(--sans);
}

input {
  min-height: 40px;
  font-family: var(--mono);
  font-size: 13px;
}

input:focus {
  border-color: rgba(76, 201, 240, 0.55);
  box-shadow: 0 0 0 2px #050607, 0 0 0 4px rgba(76, 201, 240, 0.35);
}

.run-action { padding-top: 18px; gap: 4px; }

.run {
  min-height: 40px;
  border: none;
  border-radius: 9px;
  color: #c8ff4a;
  letter-spacing: 0.06em;
  background:
    linear-gradient(180deg, rgba(200, 255, 74, 0.22), transparent 40%),
    linear-gradient(145deg, rgba(240, 226, 196, 0.12), transparent 42%),
    #1a2210;
  box-shadow: var(--btn-brass-rim), 0 0 18px rgba(200, 255, 74, 0.28);
}

.run:hover {
  filter: brightness(1.08);
  background:
    linear-gradient(180deg, rgba(200, 255, 74, 0.30), transparent 42%),
    linear-gradient(145deg, rgba(240, 226, 196, 0.16), transparent 42%),
    #1e2812;
}

.status { color: #e8d7b0; }

.remove {
  border: 1px solid rgba(180, 200, 230, 0.16);
  color: #9aa6b8;
  background: transparent;
  box-shadow: none;
}

.results {
  margin: 0;
  padding: 8px 10px 10px;
  border: 1px solid rgba(215, 196, 160, 0.28);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 30%),
    rgba(7, 9, 13, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 246, 224, 0.06);
}

.slip-body {
  gap: 10px;
  margin-top: 8px;
  align-items: stretch;
}

.roll-panel > .slip-section-head,
.slip-body .slip-section,
.roll-window-layout .b-rest,
.speed-graph,
.vs-result-box {
  border: 1px solid rgba(215, 196, 160, 0.24);
  border-radius: 10px;
  background: rgba(4, 6, 9, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 246, 224, 0.05);
}

.slip-section-title,
.vs-result-title,
.speed-graph-title {
  color: #e8d7b0;
}

.roll-window-layout { gap: 8px; }
.roll-window-layout .b-feature { gap: 8px; }

.roll-window-layout .metric {
  min-height: 0;
  padding: 10px 12px 11px;
  border: 1px solid rgba(200, 255, 74, 0.22);
  border-radius: 10px;
  background:
    linear-gradient(160deg, rgba(200, 255, 74, 0.08), transparent 62%),
    rgba(8, 12, 10, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.roll-window-layout .metric .time { color: #c8ff4a; }
.roll-window-layout .metric .metric-label { color: #9aa6b8; }
.roll-window-layout .metric::after {
  background: #c8ff4a;
  box-shadow: 0 0 10px rgba(200, 255, 74, 0.35);
}

.roll-window-layout .b-rest { padding: 8px 12px 8px; }
.roll-window-layout .b-rest .pull { min-height: 34px; }
.pull-time { color: #c8ff4a; text-shadow: none; }
.pull-name { color: #d5dde8; }

.slip-body > .drag-panel {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  height: auto;
  border-color: rgba(215, 196, 160, 0.34) !important;
  background:
    linear-gradient(150deg, rgba(212, 184, 137, 0.08), transparent 48%),
    rgba(4, 6, 9, 0.62) !important;
}

.drag-panel .slip-section-title,
.drag-panel .slip-section-tag,
.drag-panel .pull-name,
.trap-speed,
.trap-unit,
.vs-result-box.drag-box .vs-result-title,
.vs-result-box.drag-box .vs-result-tag {
  color: #e8d7b0;
}

.drag-panel .pull {
  flex: 1 1 auto;
  min-height: 40px;
  border-top-color: rgba(215, 196, 160, 0.16);
}

.trap-speed,
.trap-unit { text-shadow: none; }

.speed-graph {
  margin: 8px 0 0;
  padding: 10px 12px 8px;
  border-color: rgba(76, 201, 240, 0.22);
  background:
    linear-gradient(180deg, rgba(76, 201, 240, 0.06), transparent 42%),
    rgba(4, 6, 9, 0.72);
}

.speed-graph-legend,
.speed-graph-gap-label { color: #e8d7b0; }
.graph-line { stroke: #c8ff4a; filter: drop-shadow(0 0 4px rgba(200, 255, 74, 0.35)); }
.graph-grid { stroke: rgba(76, 201, 240, 0.16); }
.graph-axis { stroke: rgba(215, 196, 160, 0.45); }
.graph-y-label,
.graph-x-label,
.graph-axis-label { fill: #e8d7b0; }
.graph-dot,
.graph-hover-dot { fill: #4cc9f0; }
.graph-hover-line { stroke: rgba(232, 215, 176, 0.75); }
.graph-tooltip-bg {
  fill: rgba(7, 9, 13, 0.96);
  stroke: rgba(215, 196, 160, 0.7);
}
.graph-tooltip-text,
.graph-tooltip-text.gap-text { fill: #f4f7fb; }

.add-card {
  margin: 0;
  padding: 10px 14px;
  background: var(--brass-face);
}

.add-card button {
  border: 1px solid rgba(215, 196, 160, 0.42);
  color: #e8d7b0;
  background:
    linear-gradient(180deg, rgba(255, 246, 224, 0.08), transparent 40%),
    #141820;
  box-shadow: var(--btn-brass-rim);
}

.add-card button:hover {
  color: #c8ff4a;
  border-color: rgba(200, 255, 74, 0.45);
  background:
    linear-gradient(180deg, rgba(200, 255, 74, 0.12), transparent 46%),
    #141820;
}

.add-card p,
footer {
  color: #9aa6b8;
}

footer {
  margin: 4px 0 0;
  font-size: 12px;
}

.vs-panel { margin-top: 0; }
.comparison { margin: 0; }
.vs-kicker,
.vs-title,
.vs-rule { color: #e8d7b0; }
.vs-legend { border-bottom-color: rgba(215, 196, 160, 0.18); }
.vs-legend-item.car-one,
.vs-result-box .vs-number.car-one,
.vs-result-box .vs-trap-row .vs-number.car-one,
.graph-line.car-one { color: #c8ff4a; }
.graph-line.car-one { stroke: #c8ff4a; }
.vs-legend-item.car-two,
.vs-result-box .vs-number.car-two,
.vs-result-box .vs-trap-row .vs-number.car-two,
.vs-result-box .vs-car-label.car-two,
.graph-tooltip-text.car-two-text { color: #7ec8ee; }
.graph-line.car-two { stroke: #7ec8ee; }
.vs-result-box.drag-box {
  border-color: rgba(215, 196, 160, 0.34);
  background:
    linear-gradient(145deg, rgba(212, 184, 137, 0.08), transparent 55%),
    rgba(4, 6, 9, 0.62);
}

/* Two-car Run keeps the centered matchup, in the same brass/lime button. */
@media (min-width: 921px) {
  .cars.two-up > .run-action .run {
    border: none;
    color: #c8ff4a;
    background:
      linear-gradient(180deg, rgba(200, 255, 74, 0.24), transparent 42%),
      linear-gradient(145deg, rgba(240, 226, 196, 0.14), transparent 42%),
      #1a2210;
    box-shadow: var(--btn-brass-rim), 0 0 18px rgba(200, 255, 74, 0.32);
  }

  .cars.two-up > .run-action .run:hover {
    filter: brightness(1.1);
    background:
      linear-gradient(180deg, rgba(200, 255, 74, 0.32), transparent 42%),
      linear-gradient(145deg, rgba(240, 226, 196, 0.16), transparent 42%),
      #1e2812;
  }
}

@media (max-width: 1079px) {
  .cars.single .car .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  body { padding: 10px 10px 22px; gap: 8px; }
  .top {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 1.2fr);
    padding: 10px 12px;
  }
}

@media (max-width: 640px) {
  .cars.single .car .grid,
  .car .grid {
    grid-template-columns: 1fr 1fr;
  }
  .cars.single .run-action,
  .run-action { padding-top: 18px; }
  .site-nav a { font-size: 11px; min-height: 30px; padding: 0.25rem 0.5rem; }
}

@media (max-width: 460px) {
  .cars.single .car .grid,
  .car .grid { grid-template-columns: 1fr; }
  .run-action { padding-top: 0; }
  .cars.single .car {
    grid-template-columns: minmax(0, 1fr);
  }
  .cars.single .remove {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
  }
  .cars.single .car-identity { padding-right: 88px; }
  h1 { font-size: 28px; }
}

@media (max-width: 920px) and (max-height: 500px) {
  body { padding: 8px 10px 16px; gap: 6px; }
  .car, .cars.single .car { padding: 8px 10px; gap: 6px; }
  .speed-graph svg { height: 200px; min-height: 180px; }
  .roll-window-layout .metric { padding: 8px 10px; }
  .driver-line { display: none; }
}

/* Tight-bay corrections: no dead Remove on one car, stack drag before labels crush, stack the phone header. */
.cars.single .remove { display: none; }
.cars.single .car-identity { padding-right: 0; }

@media (max-width: 999px) {
  .slip-body {
    grid-template-columns: 1fr;
  }
  .roll-panel > .slip-section-head,
  .roll-window-layout > .b-feature,
  .roll-window-layout > .b-rest,
  .slip-body > .drag-panel {
    grid-column: 1;
    grid-row: auto;
  }
  .drag-panel .pull {
    flex: 0 0 auto;
    min-height: 44px;
  }
  .drag-panel .pull-name {
    font-size: 11px;
    letter-spacing: 0.03em;
    line-height: 1.3;
  }
}

@media (max-width: 720px) {
  .top {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
  }
  .top .text-scale,
  .top .lede {
    grid-column: 1;
    justify-self: stretch;
  }
  .top .text-scale {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .top .text-scale label {
    white-space: nowrap;
  }
}

@media (max-width: 460px) {
  .cars.single .car-identity { padding-right: 0; }
  .roll-window-layout .b-feature {
    grid-template-columns: 1fr;
  }
}

/* App title only: Orbitron (SIL OFL via Google Fonts). */
h1 {
  font-family: "Orbitron", sans-serif;
  letter-spacing: 0.04em;
}

.top .site-nav {
  margin-top: 0;
  align-self: end;
}

/* Speed graph fills the content column instead of a narrow card. */
.speed-graph {
  width: 100%;
  max-width: none;
  align-self: stretch;
  box-sizing: border-box;
}

.results > .speed-graph {
  width: calc(100% + 20px);
  max-width: none;
  margin-left: -10px;
  margin-right: -10px;
}

.vs-panel > .speed-graph {
  width: 100%;
  max-width: none;
}

.speed-graph svg {
  display: block;
  width: 100%;
  max-width: none;
}

/* Final header polish: keep the suite links left, center the mark, and reserve
   the right side for the existing result-size control. */
.top {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "nav brand scale";
  align-items: center;
}

.top .site-nav {
  grid-area: nav;
  order: 0;
  justify-self: start;
  align-self: center;
}

.top .brand-block {
  grid-area: brand;
  justify-self: center;
  text-align: center;
}

.top .text-scale {
  grid-area: scale;
  justify-self: end;
  width: min(100%, 360px);
}

/* A slimmer, more energized VS banner: the data remains unchanged while the
   header reads as a compact launch strip instead of a tall card. */
.vs-head {
  position: relative;
  min-height: 0;
  padding: 8px 14px 7px;
  align-items: center;
  border-bottom-color: rgba(76, 201, 240, 0.30);
  background:
    linear-gradient(90deg, rgba(76, 201, 240, 0.12), transparent 34%, rgba(200, 255, 74, 0.07)),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 5px),
    rgba(8, 12, 16, 0.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}

.vs-head::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4cc9f0 28%, #c8ff4a 72%, transparent);
  box-shadow: 0 0 14px rgba(76, 201, 240, 0.65), 0 0 18px rgba(200, 255, 74, 0.26);
}

.vs-head::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: -1px;
  width: 76px;
  height: 2px;
  background: #c8ff4a;
  box-shadow: 0 0 10px rgba(200, 255, 74, 0.8);
}

.vs-kicker {
  font-size: 7px;
  letter-spacing: 0.22em;
}

.vs-title {
  margin-top: 1px;
  font-size: clamp(16px, 2vw, 19px);
  letter-spacing: 0.10em;
  text-shadow: 0 0 12px rgba(76, 201, 240, 0.24);
}

.vs-rule {
  font-size: 8px;
  letter-spacing: 0.14em;
}

/* Let the trace use the complete card width instead of stopping at the
   Results panel's inner padding. */
.results > .speed-graph {
  width: calc(100% + 28px);
  max-width: none;
  margin-left: -14px;
  margin-right: -14px;
  border-radius: 10px;
}

.vs-panel > .vs-graph {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0 0 12px 12px;
}

@media (max-width: 920px) {
  .top {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 1.25fr);
    grid-template-areas: "brand scale" "nav nav";
  }

  .top .site-nav {
    justify-self: start;
  }
}

@media (max-width: 720px) {
  .top {
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "scale" "nav";
  }

  .top .brand-block,
  .top .text-scale,
  .top .site-nav {
    justify-self: stretch;
  }

  .top .brand-block { text-align: center; }
}

/* VS mode: Run and Remove Opponent are one stacked pair in the gap between
   the two input cards, not a control inside the opponent card. */
.cars.two-up > .run-action .remove {
  align-self: stretch;
  width: 100%;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 9px 10px;
  border-color: rgba(255, 107, 125, 0.78);
  color: #ffd5da;
  background:
    linear-gradient(180deg, rgba(255, 107, 125, 0.28), transparent 46%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.10), transparent 46%),
    rgba(78, 18, 29, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 238, 0.30),
    inset 0 0 0 1px rgba(255, 107, 125, 0.14),
    0 0 14px rgba(255, 107, 125, 0.16);
  font-size: 12px;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
}

.cars.two-up > .run-action .remove:hover:not(:disabled) {
  border-color: #ff9aa7;
  color: #fff1f3;
  background:
    linear-gradient(180deg, rgba(255, 130, 144, 0.38), transparent 46%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), transparent 46%),
    rgba(104, 23, 38, 0.90);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 247, 0.42),
    0 0 18px rgba(255, 107, 125, 0.28);
}

/* Local layout: center the instruction line, and put Drag racing left of Results. */
.driver-line {
  text-align: center;
}

@media (min-width: 1000px) {
  .slip-body {
    grid-template-columns: minmax(160px, 0.75fr) minmax(0, 1.55fr);
  }

  .roll-window-layout > .b-rest {
    grid-column: 2;
    grid-row: 3;
  }

  .slip-body > .drag-panel {
    grid-column: 1;
    grid-row: 3;
  }
}

@media (min-width: 901px) {
  .vs-results-body {
    grid-template-columns: minmax(335px, 0.90fr) minmax(0, 1.10fr);
  }

  .vs-result-box.signature-box {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .vs-result-box.drag-box {
    grid-column: 1;
    grid-row: 2;
  }

  .vs-result-box.results-box {
    grid-column: 2;
    grid-row: 2;
  }
}

/* VS mode: Run and Remove Opponent share the Run button's box and type metrics. */
.cars.two-up > .run-action .run,
.cars.two-up > .run-action .remove {
  width: 100%;
  height: 48px;
  min-height: 48px;
  padding: 9px 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: inherit;
}

@media (max-width: 920px) {
  .cars.two-up > .run-action .run,
  .cars.two-up > .run-action .remove {
    height: 46px;
    min-height: 46px;
  }
}