/* Layout: a late-night ride home. Dark-first; a night scene of one Blue Line trip sits beside the
   status card the person at home sees. Then three audiences, travel-together rules, signals, one waitlist. */
:root {
  --night: #0D1424; --panel: #141E33; --panel2: #1A2640; --text: #E9EEF6; --dim: #9AA6BC; --rule: #27344D;
  --lamp: #FFC56E; --lamp-bg: #F5B54E; --on-lamp: #1C1300; --ok: #66D4BA; --alert: #FF9474; --route: #4AA3E8;
  --display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --night: #EEF1F6; --panel: #FFFFFF; --panel2: #F6F8FB; --text: #16203A; --dim: #55607A; --rule: #D4DAE5;
  --lamp: #9A5D00; --lamp-bg: #F2B24C; --on-lamp: #1C1300; --ok: #1C8A71; --alert: #BF4528; --route: #2A78BE; color-scheme: light; } }
:root[data-theme="light"] {
  --night: #EEF1F6; --panel: #FFFFFF; --panel2: #F6F8FB; --text: #16203A; --dim: #55607A; --rule: #D4DAE5;
  --lamp: #9A5D00; --lamp-bg: #F2B24C; --on-lamp: #1C1300; --ok: #1C8A71; --alert: #BF4528; --route: #2A78BE; color-scheme: light; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--night); color: var(--text); font: 400 1.0625rem/1.65 var(--body); }
a { color: var(--lamp); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--lamp-bg); outline-offset: 2px; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.05; margin: 0; text-wrap: balance; }
h3 { font-family: var(--body); font-weight: 800; font-size: 1.1rem; line-height: 1.3; }
.eyebrow { font: 500 .76rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lamp); margin: 0; }
.fine { font-size: .875rem; color: var(--dim); }

.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 400 1.6rem/1 var(--display); }
.brand svg { width: 32px; height: 32px; flex: none; }
.nav { display: flex; gap: 22px; font: 600 .95rem/1 var(--body); }
.nav a { color: var(--dim); text-decoration: none; }
.nav a:hover { color: var(--text); }

.hero .wrap { padding-block: 48px 28px; display: grid; gap: 18px; }
.hero h1 { font-size: clamp(3rem, 8.5vw, 6.4rem); max-width: 11ch; }
.hero h1 em { font-style: italic; color: var(--lamp); }
.hero .lede { font-size: 1.22rem; max-width: 36em; margin: 0; color: var(--text); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 800 1rem/1 var(--body);
  text-decoration: none; cursor: pointer; border: 2px solid var(--lamp-bg); background: var(--lamp-bg); color: var(--on-lamp); }
.btn:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--rule); }
.btn.ghost:hover { border-color: var(--dim); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* tonight scene */
.tonight { padding-block: 12px 56px; }
.scene { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--rule); border-radius: 14px; padding: 20px; min-width: 0; display: grid; gap: 12px; align-content: start; }
.card .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.card .hd h2 { font-size: 1.5rem; }
.svgbox { overflow-x: auto; border-radius: 10px; background: var(--panel2); }
.svgbox svg { display: block; width: 100%; min-width: 600px; height: auto; }
.s-sky { fill: var(--panel2); }
.s-route { stroke: var(--route); stroke-width: 7; stroke-linecap: round; fill: none; }
.s-street { stroke: var(--rule); stroke-width: 10; stroke-linecap: round; fill: none; }
.s-stop { fill: var(--panel2); stroke: var(--route); stroke-width: 3; }
.s-stop.on { fill: var(--lamp-bg); }
.s-lbl { fill: var(--dim); font: 600 12px var(--body); }
.s-lbl.on { fill: var(--text); }
.s-car { fill: var(--panel); stroke: var(--text); stroke-width: 2; }
.s-member { fill: var(--lamp-bg); }
.s-you { fill: var(--ok); }
.s-home path { fill: var(--panel); stroke: var(--text); stroke-width: 2; }
.s-home rect { fill: var(--lamp-bg); }
.s-note { fill: var(--dim); font: 500 11px var(--mono); letter-spacing: .06em; }
.s-flag { fill: var(--alert); font: 700 11px var(--mono); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .875rem; color: var(--dim); margin: 0; padding: 0; list-style: none; }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.you { background: var(--ok); } .dot.mem { background: var(--lamp-bg); } .dot.flag { background: var(--alert); }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 62px 18px 1fr; gap: 10px; padding-block: 8px; color: var(--dim); transition: color .4s ease; }
.timeline time { font: 500 .85rem/1.5 var(--mono); font-variant-numeric: tabular-nums; }
.timeline .pip { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--rule); margin-top: 5px; transition: background .4s ease, border-color .4s ease; }
.timeline li.done { color: var(--text); }
.timeline li.done .pip { background: var(--ok); border-color: var(--ok); }
.timeline li.now .pip { background: var(--lamp-bg); border-color: var(--lamp-bg); box-shadow: 0 0 0 5px color-mix(in srgb, var(--lamp-bg) 25%, transparent); }
.timeline li.now { color: var(--text); }
.timeline b { display: block; font-weight: 700; }
.timeline span { font-size: .92rem; }
.who { display: flex; align-items: center; gap: 10px; }
.who i { width: 36px; height: 36px; border-radius: 50%; background: var(--panel2); border: 2px solid var(--ok); display: grid; place-items: center; font: 800 .95rem var(--body); font-style: normal; color: var(--ok); }
.who div { line-height: 1.3; } .who small { color: var(--dim); }

/* three audiences */
.three .wrap { padding-block: 24px 56px; display: grid; gap: 28px; }
.three .head h2, .together h2, .signals h2, .join h2, .faq h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.col { border-top: 3px solid var(--lamp-bg); padding-top: 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.col:nth-child(2) { border-color: var(--ok); }
.col:nth-child(3) { border-color: var(--route); }
.col ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--dim); }
.col ul li::marker { color: var(--text); }
.col p { margin: 0; }

/* together */
.together { background: var(--panel); border-block: 1px solid var(--rule); }
.together .wrap { padding-block: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.together p { margin: 14px 0 0; max-width: 34em; }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rules li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; }
.rules li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--lamp-bg); margin-top: 6px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--lamp-bg) 22%, transparent); }
.rules b { display: block; }
.rules span { color: var(--dim); }

/* signals */
.signals .wrap { padding-block: 56px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; align-items: center; }
.signals p { margin: 14px 0 0; max-width: 34em; }
.board { background: var(--panel); border: 1px solid var(--rule); border-radius: 14px; padding: 18px 20px; display: grid; gap: 4px; font-variant-numeric: tabular-nums; }
.board .row { display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; align-items: center; padding-block: 8px; border-bottom: 1px solid var(--rule); }
.board .row:last-of-type { border-bottom: 0; }
.board .car { font: 700 .9rem var(--mono); }
.meter { height: 8px; border-radius: 99px; background: var(--panel2); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--ok); border-radius: 99px; }
.meter.warn i { background: var(--alert); }
.board .n { font: 500 .85rem var(--mono); color: var(--dim); }
.board .n.warn { color: var(--alert); font-weight: 700; }

/* join */
.join .wrap { padding-block: 56px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.join .count { font: 500 .95rem var(--mono); color: var(--dim); margin: 14px 0 0; }
.join .count b { color: var(--text); }
form.wl { background: var(--panel); border: 1px solid var(--rule); border-radius: 14px; padding: 24px; display: grid; gap: 16px; min-width: 0; scroll-margin-top: 16px; }
.f { display: grid; gap: 6px; min-width: 0; }
.f label, .f legend { font: 700 .92rem/1.3 var(--body); }
.f input[type=email], .f input[type=text], .f input[type=password], .f select { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--rule); border-radius: 10px; background: var(--panel2); color: var(--text); font: 400 1rem var(--body); }
.f input:hover, .f select:hover { border-color: var(--dim); }
fieldset.f { border: 0; margin: 0; padding: 0; }
.checks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 4px; }
.checks label { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--rule); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-weight: 600; }
.checks label small { display: block; font-weight: 400; color: var(--dim); font-size: .82rem; line-height: 1.35; }
.checks input { accent-color: var(--lamp-bg); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.checks label:has(input:checked) { border-color: var(--lamp-bg); background: color-mix(in srgb, var(--lamp-bg) 10%, transparent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.status { margin: 0; font-weight: 700; min-height: 1.6em; }
.status.ok { color: var(--ok); } .status.err { color: var(--alert); }

.faq .wrap { padding-block: 8px 64px; max-width: 820px; margin: 0 auto; display: grid; gap: 4px; }
.faq h2 { margin-bottom: 10px; }
.faq details { border-top: 1px solid var(--rule); padding-block: 14px; }
.faq summary { font-weight: 800; cursor: pointer; }
.faq details p { margin: 8px 0 0; color: var(--dim); max-width: 62ch; }

.sos { border: 1px solid var(--alert); border-radius: 12px; padding: 12px 16px; font-size: .95rem; }
.sos b { color: var(--alert); }

footer { border-top: 1px solid var(--rule); }
footer .wrap { padding-block: 24px 36px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .875rem; color: var(--dim); }

@media (max-width: 900px) {
  .scene, .together .wrap, .signals .wrap, .join .wrap { grid-template-columns: minmax(0, 1fr); }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .nav { display: none; }
}
@media (max-width: 480px) { .checks { grid-template-columns: minmax(0, 1fr); } form.wl, .card { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .timeline li, .timeline .pip { transition: none; } }

/* meters + admin */
.meter i.w0 { width: 2%; } .meter i.w1 { width: 30%; } .meter i.w3 { width: 90%; }
.adm-wrap { padding-block: 0 56px; }
.adm-bar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.adm-bar .count { margin: 0; font: 500 .95rem var(--mono); }
.adm-box { margin-top: 16px; }
.adm { border-collapse: collapse; width: 100%; font-size: .9rem; font-variant-numeric: tabular-nums; }
.adm th, .adm td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.adm th { font: 500 .75rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.adm-csv { width: 100%; min-height: 160px; margin-top: 12px; font: 400 .8rem var(--mono); background: var(--panel); color: var(--text); border: 1px solid var(--rule); }