/* Viewer page. Tokens first: a tenant changes --accent and --accent-dark only (set by app.js from the tenant's branding). */
:root {
  --paper: #F3F5F2;      /* page */
  --card: #FFFFFF;       /* panels */
  --ink: #16211F;        /* text */
  --muted: #55615E;      /* secondary text */
  --rule: #D5DCD8;       /* hairlines */
  /* The two tenant values. Everything else is fixed for every tenant. */
  --accent: #0E4A43;       /* tenant accent: at least 5:1 against white (checked when the tenant is set up) */
  --accent-dark: #63C2AE;  /* the same hue lightened for dark mode: at least 5:1 against #17211F (derived at set-up) */
  --sign: var(--accent);   /* header band, the "stop sign" */
  --line: var(--accent);   /* the route line, links, buttons */
  --tint: #E9EEEC;         /* next-stop row */
  --tint: color-mix(in srgb, var(--accent) 10%, #FFFFFF);
  --signal: #F5B700;     /* the bus, for a tenant that sets no bus colours */
  --bus: var(--signal);  /* the bus body, its stripe and point, and its windows: set by app.js from the tenant's branding */
  --bus-accent: #16211F;
  --bus-glass: #16211F;
  --late: #8A4A00;       /* late / attention text */
  --late-bg: #FFF1CF;
  --idle: #7A8582;       /* line and stops when no bus is shown */
  --focus: #16211F;
  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0E1615; --card: #17211F; --ink: #E9EFEC; --muted: #A6B3AF; --rule: #2C3A37;
    --line: var(--accent-dark); --tint: #223833; --tint: color-mix(in srgb, var(--accent-dark) 14%, #17211F); --late: #F4BC6A; --late-bg: #3A2A0C;
    --idle: #7F8C88; --focus: #F5B700;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.45 var(--font); }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, p, ol { margin: 0; padding: 0; }
a { color: var(--line); }

/* ---------- the sign: operator and contract ---------- */
.sign { background: var(--sign); color: #fff; }
.sign-inner { max-width: 1180px; margin: 0 auto; padding: 14px 8px 14px 16px; display: flex; align-items: center; gap: 8px; }
.sign-text { flex: 1; min-width: 0; display: grid; gap: 2px; justify-items: start; }
.operator { font-size: 14px; line-height: 1.3; font-weight: 500; color: #fff; }
/* The tenant's logo always sits on a white plate, so any logo works on any accent, in light and dark. */
.plate { display: block; background: #fff; border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; line-height: 0; }
.plate img { display: block; height: 32px; width: auto; max-width: 168px; object-fit: contain; }
.sign h1 { font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.sign :focus-visible { outline-color: #fff; }
.menu { position: relative; }
.menu summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu[open] summary { background: rgba(255, 255, 255, 0.14); }
.menu-panel { position: absolute; right: 0; top: 50px; z-index: 5; width: min(300px, calc(100vw - 24px)); padding: 14px; display: grid; gap: 12px; background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(8, 30, 27, 0.22); }
.menu-panel :focus-visible { outline-color: var(--focus); }
.menu-panel label { font-size: 14px; font-weight: 600; display: grid; gap: 6px; }
.menu-panel select { font: inherit; min-height: 44px; padding: 8px 10px; border: 1px solid var(--muted); border-radius: 8px; background: var(--card); color: var(--ink); width: 100%; }
.btn { font: inherit; font-weight: 600; min-height: 48px; padding: 10px 18px; border-radius: 10px; border: 2px solid var(--line); background: var(--line); color: #fff; cursor: pointer; }
.btn.quiet { background: transparent; color: var(--line); min-height: 44px; }
@media (prefers-color-scheme: dark) { .btn { color: #0E1615; } .btn.quiet { color: var(--line); } }

/* ---------- layout ---------- */
main { max-width: 1180px; margin: 0 auto; padding: 16px 16px 8px; }
.live { display: grid; gap: 16px; }
.col { display: grid; gap: 16px; align-content: start; min-width: 0; }
.panel { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }

/* ---------- now: the answer ---------- */
.now { padding: 16px 16px 18px; }
.now-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 28px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: 14px; font-size: 14px; font-weight: 600; border: 1.5px solid currentColor; }
.pill svg { flex: none; }
.pill.on { color: var(--line); }
.pill.pause, .pill.warn { color: var(--late); background: var(--late-bg); }
.pill.off { color: var(--muted); }
.chip { font-size: 14px; font-weight: 600; color: var(--muted); }
.chip.late { color: var(--late); }
.headline { margin-top: 12px; font-size: 30px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; min-height: 2.24em; display: flex; align-items: center; }
.sub { margin-top: 6px; color: var(--ink); max-width: 46ch; min-height: 2.9em; }
.fresh { margin-top: 10px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 1.45em; }

/* ---------- the line: stops, times, and the bus between them ---------- */
.line { padding: 14px 0 6px; }
.line-head { padding: 0 16px 8px; font-size: 15px; font-weight: 600; }
.line-head span { display: block; font-weight: 400; font-size: 14px; color: var(--muted); }
.stops { list-style: none; position: relative; }
.stop { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name time" "sub sub"; align-content: start; align-items: baseline; column-gap: 12px; row-gap: 2px; padding: 12px 16px 12px 56px; min-height: 68px; }
.stop::before { content: ""; position: absolute; left: 25px; top: 0; bottom: 0; width: 6px; background: var(--line); }
.stop:first-child::before { top: 26px; border-radius: 3px 3px 0 0; }
.stop.return::before { bottom: auto; height: 22px; }
.node { position: absolute; left: 18px; top: 16px; width: 20px; height: 20px; border-radius: 50%; background: var(--card); border: 4px solid var(--line); }
.stop.is-next { background: var(--tint); }
.stop.is-next .node { background: var(--tint); }
.stop-name { grid-area: name; font-size: 17px; font-weight: 650; line-height: 1.25; }
.row2 { grid-area: sub; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.stop-sub { font-size: 14px; color: var(--muted); }
.t, .t-sub { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t { grid-area: time; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.t small { font-size: 13px; font-weight: 600; margin-left: 3px; letter-spacing: 0; }
.t-sub { font-size: 14px; color: var(--muted); }
.t-sub.late { color: var(--late); font-weight: 600; }
.stop.is-later .t { font-weight: 500; color: var(--muted); }
.stop.return { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
.stop.return .node { top: 12px; left: 20px; width: 16px; height: 16px; border-width: 3px; }
.stop.return .stop-name { font-size: 14px; font-weight: 400; color: var(--muted); }
.stops.is-idle .stop::before { background: var(--idle); }
.stops.is-idle .node { border-color: var(--idle); }
.unserved { margin: 4px 16px 10px 56px; font-size: 14px; color: var(--muted); }
.marker { position: absolute; left: 12px; top: -16px; width: 32px; height: 32px; display: grid; place-items: center; z-index: 2; transition: transform 0.9s ease; }
.marker svg { display: block; overflow: visible; }
.marker::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--line); opacity: 0; animation: live 2.8s ease-out infinite; }
.marker.is-waiting::after { inset: -5px; z-index: -1; border: 4px solid var(--line); background: var(--card); opacity: 1; animation: none; }
@keyframes live { 0% { transform: scale(0.7); opacity: 0.9; } 70%, 100% { transform: scale(1.15); opacity: 0; } }

/* ---------- the route drawing ---------- */
.route { padding: 14px 16px 14px; }
.route-head { font-size: 15px; font-weight: 600; }
.route-note { font-size: 14px; color: var(--muted); margin-top: 2px; }
#map { display: block; width: 100%; margin-top: 8px; }
.leg-case { fill: none; stroke: var(--card); stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; }
.leg { fill: none; stroke: var(--line); stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.leg.idle { stroke: var(--idle); }
.dir { fill: var(--card); }
.m-stop { fill: var(--card); stroke: var(--line); stroke-width: 4; }
.m-stop.idle { stroke: var(--idle); }
.m-stop.unserved { stroke: var(--idle); stroke-width: 2.5; }
.m-label { font: 600 13px var(--font); fill: var(--ink); paint-order: stroke; stroke: var(--card); stroke-width: 5px; stroke-linejoin: round; }
.m-label.unserved { font-weight: 400; fill: var(--muted); }
/* The bus: the tenant's colours inside a fixed edge (dark outline, white keyline outside it), so any body colour stands clear of any background. */
.m-bus-halo { fill: #FFFFFF; stroke: #FFFFFF; stroke-width: 5; stroke-linejoin: round; }
.m-bus-fill { fill: var(--bus); }
.m-bus-trim, .m-bus-glass { fill: var(--bus-glass); }
.m-bus-stripe { fill: var(--bus-accent); }
.m-bus-shell { fill: none; stroke: #16211F; stroke-width: 1.5; stroke-linejoin: round; }
.m-bus-wheel { fill: #16211F; stroke: #FFFFFF; stroke-width: 1; }
.m-bus-point-halo { fill: #FFFFFF; stroke: #FFFFFF; stroke-width: 4.5; stroke-linejoin: round; }
.m-bus-point-fill { fill: var(--bus-accent); stroke: #16211F; stroke-width: 1.5; stroke-linejoin: round; }
.is-waiting .m-bus-point, .is-approx .m-bus-point { display: none; }
.m-ring { display: none; fill: var(--card); stroke: var(--line); stroke-width: 4; }
.m-bus.is-waiting .m-ring { display: block; }
.m-bus.is-waiting .m-pulse { animation: none; }
.m-pulse { fill: none; stroke: var(--line); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; animation: live 2.8s ease-out infinite; }

/* ---------- sign-in ---------- */
.signin { max-width: 440px; margin: 8px auto 0; padding: 22px 20px 24px; }
.signin h2 { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.signin p { margin-top: 10px; }
.signin form { display: grid; gap: 8px; margin-top: 18px; }
.signin label { font-weight: 600; }
.signin input { font: inherit; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--muted); border-radius: 10px; background: var(--card); color: var(--ink); width: 100%; }
.signin input.code { font-size: 26px; font-weight: 700; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; text-align: center; }
.signin .btn { margin-top: 6px; }
.note { padding: 10px 12px; border-left: 4px solid var(--line); background: var(--tint); border-radius: 0 8px 8px 0; font-size: 15px; }
.signin .alt { font-size: 15px; }
.signin .alt a { display: inline-block; padding: 12px 0; }

footer { max-width: 1180px; margin: 0 auto; padding: 10px 16px 28px; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: space-between; }

/* ---------- larger screens ---------- */
@media (min-width: 900px) {
  .sign-inner { padding: 18px 24px; }
  .sign h1 { font-size: 24px; }
  .sign.has-logo .sign-text { grid-template-columns: auto 1fr; align-items: center; column-gap: 20px; }
  .plate { margin-bottom: 0; padding: 8px 12px; }
  .plate img { height: 40px; max-width: 220px; }
  main { padding: 24px 24px 8px; }
  footer { padding: 12px 24px 32px; }
  .live { grid-template-columns: 430px minmax(0, 1fr); gap: 24px; align-items: start; }
  .now { padding: 20px 20px 22px; }
  .headline { font-size: 36px; }
  .route { position: sticky; top: 16px; padding: 18px 20px 20px; }
  .signin { margin-top: 40px; padding: 28px; }
}
@media (max-width: 359px) {
  .headline { font-size: 26px; }
  .stop { padding-right: 12px; column-gap: 8px; }
  .t { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .marker { transition: none; }
  .marker::after, .m-pulse { animation: none; }
}

/* ---------- small additions to the mockup ---------- */
.signin .status-note { min-height: 1.45em; font-size: 15px; }
.signin .status-note:empty { display: none; }
.menu-panel .btn { width: 100%; }
.line-head span:empty { display: none; }

/* ---------- detour: the bus is shown at the nearest point of its route, marked as approximate ---------- */
.m-bus.is-approx .m-pulse { animation: none; opacity: 1; fill: var(--line); fill-opacity: 0.22; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3.5 4.35; }
.m-note-box { fill: var(--late-bg); stroke: var(--late); stroke-width: 1.5; }
.m-note-lead { stroke: var(--late); stroke-width: 1.5; }
.m-note-icon { fill: var(--late); }
.m-note text { font: 400 13px var(--font); fill: var(--ink); }
.m-note .m-note-t1 { font-weight: 600; fill: var(--late); }
.marker.is-approx::after { inset: -5px; z-index: -1; border: 2px dashed var(--ink); background: color-mix(in srgb, var(--line) 22%, var(--card)); opacity: 1; animation: none; }

/* ---------- sign-in: remember this computer ---------- */
.signin .remember { display: flex; gap: 10px; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; }
.signin .remember input { width: 22px; height: 22px; min-height: 0; padding: 0; flex: none; accent-color: var(--line); }
.signin .remember-note { margin: -4px 0 12px; color: var(--muted); font-size: 14px; }