/* Layout: dusk sky masthead over a top-down I-80 that scrolls under the cars; each day gets an overhead gantry sign, cars sit in two lanes (one on phones), waitlist and chain key below. Single committed dusk look. */
:root {
  --sky-top: #161b33;
  --sky-low: #4a2f5e;
  --glow: #ff9a5a;
  --ridge: #0f1424;
  --bg: #10131f;
  --asphalt: #2a2c33;
  --asphalt-dark: #222429;
  --paint: #f2efe4;
  --yellow: #f6c445;
  --sign: #0b6b45;
  --card: rgba(16, 19, 31, .86);
  --card-solid: #1b1f30;
  --ink: #f3f1ea;
  --muted: #a8adbd;
  --edge: rgba(255, 255, 255, .14);
  --good: #7be0a6;
  --warn: #ffc46b;
  --bad: #ff8b80;
  --font-display: "Bungee", "Arial Black", Impact, sans-serif;
  --font-body: "Overpass", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Overpass Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.45; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
.wrap { max-width: 1000px; margin: 0 auto; padding-inline: 16px; padding-block: 0 48px; display: grid; gap: 18px; }

/* Sky */
.sky { position: relative; margin-inline: -16px; padding: 34px 16px 70px; background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-low) 72%, var(--glow) 128%); overflow: hidden; text-align: left; }
.sky .inner { max-width: 1000px; margin: 0 auto; position: relative; z-index: 2; display: grid; gap: 10px; }
.sky .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--yellow); }
.sky h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 9vw, 84px); line-height: .92; letter-spacing: .01em; color: var(--ink); text-shadow: 0 4px 0 rgba(0,0,0,.25); }
.sky h1 span { color: var(--yellow); }
.sky .sub { font-size: 16px; color: var(--ink); opacity: .9; max-width: 60ch; }
.ridge { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: 90px; z-index: 1; }
.moon { position: absolute; right: 9%; top: 26px; width: 54px; height: 54px; border-radius: 50%; background: #fff3d6; box-shadow: 0 0 40px 8px rgba(255, 220, 160, .35); z-index: 1; }
.star { position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%; opacity: .7; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .15; } }

/* Strip */
.strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 14px 4px; border-radius: 999px; background: var(--card-solid); border: 1px solid var(--edge); font-size: 14px; }
.chip b { font-family: var(--font-mono); font-size: 16px; font-variant-numeric: tabular-nums; }
.chip.good { color: var(--good); }
.chip.warn { color: var(--warn); }
.strip .spacer { flex: 1; }
.save-state { font-size: 13px; color: var(--muted); }
.btn { border: 2px solid var(--edge); background: var(--card-solid); border-radius: 10px; padding: 8px 14px 6px; font-weight: 700; cursor: pointer; transition: transform .12s, border-color .12s; }
.btn:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.go { background: var(--yellow); color: #1a1406; border-color: var(--yellow); }
.btn.danger { color: var(--bad); }
.btn[disabled] { opacity: .45; cursor: default; transform: none; }
.banner { padding: 12px 16px; border-radius: 12px; background: var(--card-solid); border: 1px dashed var(--edge); color: var(--muted); font-size: 14px; }
.banner b { color: var(--ink); }

/* Road */
.road { position: relative; border-radius: 18px; overflow: hidden; background: var(--asphalt); padding: 18px 46px 34px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.road::before { /* edge lines: yellow on the left, white on the right, like a divided highway */
  content: ""; position: absolute; inset: 0 40px; border-left: 4px solid var(--yellow); border-right: 4px solid var(--paint); pointer-events: none; opacity: .9;
}
.dash { position: absolute; top: 0; bottom: 0; left: 50%; width: 6px; margin-left: -3px; background: repeating-linear-gradient(180deg, var(--paint) 0 38px, transparent 38px 86px); background-size: 6px 86px; animation: roll .55s linear infinite; opacity: .85; pointer-events: none; }
@keyframes roll { from { background-position: 0 0; } to { background-position: 0 86px; } }
.shoulder { position: absolute; top: 0; bottom: 0; width: 40px; background-color: #1d3b2d; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='96' viewBox='0 0 40 96'%3E%3Cpath d='M20 6 L32 30 H26 L35 48 H27 L37 66 H3 L13 48 H5 L14 30 H8 Z' fill='%23123326'/%3E%3Crect x='18' y='66' width='4' height='8' fill='%233a2a1e'/%3E%3C/svg%3E"); background-size: 40px 96px; animation: trees 1.1s linear infinite; pointer-events: none; }
.shoulder.l { left: 0; }
.shoulder.r { right: 0; background-position-x: 20px; animation-duration: 1.25s; }
@keyframes trees { from { background-position-y: 0; } to { background-position-y: 96px; } }
.road-inner { position: relative; display: grid; gap: 22px; }

.gantry { justify-self: center; position: relative; z-index: 2; background: var(--sign); border-radius: 10px; padding: 5px; box-shadow: 0 8px 0 rgba(0,0,0,.25); max-width: 100%; }
.gantry > div { border: 2.5px solid #fff; border-radius: 7px; padding: 8px 18px 6px; text-align: center; display: grid; gap: 2px; }
.gantry .day { font-family: var(--font-display); font-size: clamp(18px, 4vw, 26px); color: #fff; letter-spacing: .02em; line-height: 1.05; }
.gantry .meta { font-size: 13px; color: #fff; opacity: .85; font-weight: 600; }

.lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 52px; position: relative; z-index: 1; }
@media (max-width: 760px) {
  .lanes { grid-template-columns: minmax(0, 1fr); }
  .dash { left: 76px; }
  .road { padding: 14px 28px 28px; }
  .road::before { inset: 0 22px; }
  .shoulder { width: 22px; }
}
.slot { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 14px; align-items: center; }
.slot:nth-child(even) { transform: translateY(26px); }
@media (max-width: 760px) { .slot:nth-child(even) { transform: none; } .slot { grid-template-columns: 96px minmax(0, 1fr); } }

.car-btn { position: relative; border: 0; background: none; padding: 0; cursor: pointer; width: 100%; animation: bob 1.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.car-btn svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 6px rgba(0,0,0,.45)); transition: transform .2s; }
.slot { position: relative; }
.slot:hover, .slot:focus-within { z-index: 5; }
.car-wrap { position: relative; }
@media (hover: hover) { .car-wrap:hover .car-btn svg { transform: scale(1.32) translateY(-6px) rotate(-2deg); } }
.peek { position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%) scale(.92); transform-origin: left center; width: 240px; background: var(--card-solid); border: 2px solid var(--yellow); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s, transform .15s, visibility .15s; z-index: 6; box-shadow: 0 18px 40px rgba(0,0,0,.55); }
@media (hover: hover) { .car-wrap:hover .peek, .car-btn:focus-visible + .peek { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); } }
.peek h4 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 15px; line-height: 1.1; overflow-wrap: anywhere; }
.peek dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: 13px; }
.peek dt { color: var(--muted); }
.peek dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.peek .open { color: var(--good); }
.leave { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; font-size: 13px; }
.leave dt { color: var(--muted); }
.leave dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.leave .tbd { color: var(--warn); font-weight: 600; }
.slot.mine .info { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow); }
.you { font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: .06em; background: var(--yellow); color: #1a1406; padding: 2px 7px 0; border-radius: 999px; }
.me-chip { display: inline-flex; gap: 8px; align-items: center; padding: 5px 6px 3px 14px; border-radius: 999px; background: rgba(246, 196, 69, .14); color: var(--yellow); font-weight: 700; font-size: 14px; }
.me-chip button { border: 0; background: rgba(255,255,255,.08); color: var(--ink); font-size: 12px; font-weight: 700; padding: 4px 10px 2px; border-radius: 999px; cursor: pointer; }
.me-chip button[disabled] { opacity: .5; cursor: default; }
.as { font-size: 15px; }
.as b { color: var(--yellow); }
.car-btn .pupil { animation: look 4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes look { 0%, 40%, 100% { transform: translateX(0); } 50%, 70% { transform: translateX(-3px); } }
.car-btn:hover .pupil { transform: translateY(-1.5px); animation: none; }
.name-rule { font-size: 13px; color: var(--warn); font-weight: 700; }
.car-btn::before { content: ""; position: absolute; left: 8%; right: 8%; top: -52px; height: 60px; background: linear-gradient(0deg, rgba(255, 230, 150, .32), rgba(255, 230, 150, 0)); clip-path: polygon(22% 100%, 78% 100%, 100% 0, 0 0); pointer-events: none; }
@keyframes bob { 0%, 100% { transform: translate(0, 0) rotate(0); } 30% { transform: translate(1.5px, -3px) rotate(.6deg); } 65% { transform: translate(-1.5px, 1px) rotate(-.6deg); } }
.puff { position: absolute; bottom: -6px; width: 10px; height: 10px; border-radius: 50%; background: rgba(220, 220, 230, .35); animation: puff 1.4s ease-out infinite; pointer-events: none; }
.puff.a { left: 30%; } .puff.b { left: 62%; animation-delay: .7s; }
@keyframes puff { from { transform: translateY(0) scale(.6); opacity: .7; } to { transform: translateY(46px) scale(2.2); opacity: 0; } }
.beep { position: absolute; left: 50%; top: -20px; transform: translate(-50%, 0) scale(.6); background: var(--yellow); color: #1a1406; font-family: var(--font-display); font-size: 14px; padding: 4px 10px 2px; border-radius: 10px; opacity: 0; pointer-events: none; white-space: nowrap; z-index: 3; }
.beep.go { animation: beep .9s ease-out; }
@keyframes beep { 15% { opacity: 1; transform: translate(-50%, -14px) scale(1.1); } 70% { opacity: 1; transform: translate(-50%, -22px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -34px) scale(.9); } }

.info { background: var(--card); backdrop-filter: blur(4px); border: 1px solid var(--edge); border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; min-width: 0; }
.info .name { font-family: var(--font-display); font-size: 17px; line-height: 1.1; overflow-wrap: anywhere; display: flex; gap: 8px; align-items: center; }
.info .swatch { width: 12px; height: 12px; border-radius: 4px; flex: none; border: 1px solid rgba(255,255,255,.4); }
.info .who { font-size: 14px; color: var(--muted); }
.owner { font-family: var(--font-body); font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--yellow); overflow-wrap: anywhere; }
.owner.big { font-size: 16px; margin-top: -6px; }
.info .who b { color: var(--ink); }
.info .riders { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.info .row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pill { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px 1px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--muted); }
.pill.open { background: rgba(123, 224, 166, .16); color: var(--good); }
.pill.full { background: rgba(255, 139, 128, .16); color: var(--bad); }
.pill.time { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; color: var(--ink); }
.grab { justify-self: start; border: 0; background: none; padding: 0; color: var(--yellow); font-weight: 800; font-size: 14px; cursor: pointer; }
.grab:hover { text-decoration: underline; }

/* Panels */
.panels { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 760px) { .panels { grid-template-columns: minmax(0, 1fr); } }
.panel { background: var(--card-solid); border: 1px solid var(--edge); border-radius: 16px; padding: 16px; display: grid; gap: 12px; min-width: 0; }
.panel h2 { font-family: var(--font-display); font-weight: 400; font-size: 20px; }
.panel p { margin: 0; color: var(--muted); font-size: 14px; }
.wait-list { display: flex; flex-wrap: wrap; gap: 8px; }
.wait { display: inline-flex; gap: 6px; align-items: center; padding: 5px 6px 3px 12px; border-radius: 999px; background: rgba(255, 196, 107, .14); color: var(--warn); font-weight: 700; font-size: 14px; }
.wait small { font-weight: 600; opacity: .8; }
.wait .x { border: 0; background: none; color: inherit; cursor: pointer; width: 24px; height: 24px; border-radius: 50%; }
.wait .x:hover { background: rgba(255,255,255,.1); }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; }
.inline-form input, .inline-form select { padding: 9px 10px 7px; border-radius: 10px; border: 1px solid var(--edge); background: var(--bg); min-width: 0; }
.inline-form input { flex: 1 1 160px; }
.chains dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 14px; }
.chains dt { font-family: var(--font-mono); font-weight: 600; color: var(--warn); }
.chains dd { margin: 0; color: var(--muted); }
.chains a { color: var(--yellow); font-weight: 700; }

/* Dialogs */
dialog { border: 1px solid var(--edge); border-radius: 18px; padding: 0; background: var(--card-solid); color: var(--ink); width: min(480px, calc(100vw - 32px)); max-height: calc(100% - 32px); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
dialog::backdrop { background: rgba(5, 7, 15, .65); backdrop-filter: blur(2px); }
.dlg { display: grid; gap: 14px; padding: 20px; }
.dlg h2 { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.05; overflow-wrap: anywhere; }
.dlg .meta { color: var(--muted); font-size: 14px; }
.cabin { border: 5px solid var(--car); border-radius: 48px 48px 26px 26px; padding: 12px 12px 18px; background: rgba(0,0,0,.3); display: grid; gap: 12px; }
.front-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; color: var(--muted); text-align: center; }
.dash-bar { height: 10px; border-radius: 999px; background: rgba(159, 211, 255, .35); margin: -4px 12% 0; }
.srow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.seat2 { --seat-c: rgba(255,255,255,.12); display: grid; justify-items: center; align-content: start; gap: 3px; border: 0; background: none; padding: 6px 2px; border-radius: 12px; color: var(--ink); min-width: 0; font: inherit; }
button.seat2 { cursor: pointer; transition: transform .12s, background .12s; }
button.seat2:hover { transform: translateY(-3px); background: rgba(123, 224, 166, .08); }
.chair { position: relative; width: 56px; height: 62px; }
.chair .head { position: absolute; top: 0; left: 50%; width: 24px; height: 10px; margin-left: -12px; border-radius: 6px; background: var(--seat-c); }
.chair .back { position: absolute; top: 12px; left: 8px; right: 8px; height: 30px; border-radius: 14px 14px 6px 6px; background: var(--seat-c); }
.chair .bottom { position: absolute; bottom: 0; left: 1px; right: 1px; height: 22px; border-radius: 8px 8px 14px 14px; background: color-mix(in srgb, var(--seat-c) 72%, #000); }
.chair .ini { position: absolute; top: 17px; left: 0; right: 0; text-align: center; font-weight: 800; font-size: 13px; color: #17130a; }
.chair.driving::after { content: ""; position: absolute; top: -7px; left: 50%; width: 30px; height: 30px; margin-left: -15px; border: 3px solid rgba(255,255,255,.55); border-radius: 50%; box-sizing: border-box; }
.seat2.open .head, .seat2.open .back, .seat2.open .bottom { background: rgba(123, 224, 166, .1); border: 2px dashed var(--good); }
.seat2.open .ini, .seat2.sel .ini { color: var(--good); font-size: 18px; top: 14px; }
.seat2.sel { --seat-c: var(--yellow); }
.seat2.sel .ini { color: #1a1406; }
.seat2.sel .lbl { color: var(--yellow); }
.seat2.open .lbl { color: var(--good); }
.seat2.held { opacity: .55; }
.seat2.mine .chair { filter: drop-shadow(0 0 6px var(--yellow)); }
.seat2 .lbl { font-size: 12.5px; font-weight: 800; text-align: center; overflow-wrap: anywhere; line-height: 1.15; }
.seat2 .pos { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; text-align: center; line-height: 1.2; }
.seat2 .x { border: 0; background: none; color: var(--muted); font-size: 11px; font-weight: 700; cursor: pointer; padding: 2px 4px; }
.seat2 .x:hover { color: var(--bad); }
@media (max-width: 400px) { .chair { width: 46px; height: 52px; } .chair .back { top: 11px; height: 24px; } .chair .bottom { height: 18px; } .chair .ini { top: 13px; } }
.seat-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.seat-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.05); }
.seat-list .n { font-family: var(--font-mono); font-size: 12px; color: var(--muted); width: 46px; flex: none; }
.seat-list .who { flex: 1; font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
.seat-list .empty .who { color: var(--good); font-weight: 600; }
.seat-list .held .who { color: var(--muted); font-weight: 600; }
.seat-list .x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 700; }
.seat-list .x:hover { color: var(--bad); }
.field { display: grid; gap: 4px; }
.field label { font-size: 13px; font-weight: 700; color: var(--muted); }
.field input, .field select, .field textarea { padding: 9px 10px 7px; border-radius: 10px; border: 1px solid var(--edge); background: var(--bg); width: 100%; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .row2 { grid-template-columns: 1fr; } }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches button { width: 30px; height: 30px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; }
.swatches button[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--bg) inset; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.msg { background: var(--bg); border: 1px dashed var(--yellow); border-radius: 10px; padding: 12px; font-family: var(--font-mono); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.err { color: var(--bad); font-size: 13px; }
.linkish { border: 0; background: none; padding: 0; color: var(--yellow); font-weight: 700; font-size: 13px; cursor: pointer; justify-self: start; }

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--yellow); color: #1a1406; padding: 10px 18px 8px; border-radius: 999px; font-weight: 800; font-size: 14px; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; z-index: 10; }
.toast.show { opacity: 1; }
textarea.copy-fallback { width: 100%; min-height: 200px; font-family: var(--font-mono); font-size: 13px; background: var(--bg); border: 1px solid var(--edge); border-radius: 10px; padding: 10px; }

@media (prefers-reduced-motion: reduce) {
  .dash, .shoulder, .car-btn, .puff, .star, .car-btn .pupil { animation: none !important; }
  .puff { display: none; }
  .beep.go { animation: none; }
  .car-btn:hover svg, .btn:hover { transform: none; }
}