/* Styled after Sound Transit's own "Link System Map": navy title band, white
   land, pale-blue water with chamfered shorelines, thick side-by-side line
   colors, white station markers outlined in near-black. */
:root {
    color-scheme: light;
    --navy: #162a3b;
    --land: #ffffff;
    --text: #2c2a2a;
    --muted: #5b6472;
    --water: #e3eef7;
    --panel: #f2f3f3;
    --station: #ffffff;
    --station-stroke: #2c2a2a;
    --place-label: #4d4d4f;
    --selected: #ffd34d;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--land);
    color: var(--text);
    font-family: "Myriad Pro", "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

header {
    background: var(--navy);
    color: #ffffff;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Map / 2 panels / 6 panels: one pill-shaped button group. */
#view-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#view-switch button {
    font: inherit;
    font-size: 14px;
    color: #ffffff;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
    white-space: nowrap;
}

#view-switch button:hover {
    border-color: #ffffff;
}

#view-switch button[aria-pressed="true"] {
    background: #ffffff;
    color: var(--navy);
    border-color: #ffffff;
}

/* Device preview: the page goes dark like the physical panel, and the map
   is drawn LED-by-LED on #device instead of the SVG. */
body.preview main {
    background: #000000;
}

#device {
    display: block;
    image-rendering: pixelated;
}

#device[hidden],
#map[hidden] {
    display: none;
}

header h1 {
    margin: 0;
    font-size: 34px;
    font-weight: 400;
    letter-spacing: 0.01em;
}

header h1 strong {
    font-weight: 800;
}

footer {
    background: var(--navy);
    color: #ffffff;
    padding: 8px 28px;
    display: flex;
    justify-content: flex-end;
}

#status {
    font-size: 13px;
    opacity: 0.85;
}

/* Trains are last-known positions while the data is stale (see setStale). */
body.stale .train,
body.stale .train-tail {
    opacity: 0.35;
}

main {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--land);
}

#map {
    width: 100%;
    height: 100%;
    background: var(--land);
}

/* Fill + same-color round-joined stroke rounds the convex corners of the
   chamfered shoreline polygons, the way the reference map's water does. */
.water {
    fill: var(--water);
    stroke: var(--water);
    stroke-width: 24;
    stroke-linejoin: round;
}

.island {
    fill: var(--land);
}

.place-label {
    fill: var(--place-label);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.02em;
    pointer-events: none;
}

.rail-line {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.led-dot {
    fill: #ffffff;
    opacity: 0.55;
    pointer-events: none;
}

.station-pill {
    fill: var(--station);
    stroke: var(--station-stroke);
    stroke-width: 1.8;
}

.station-label {
    fill: var(--text);
    font-size: 14px;
}

/* Stations are clickable: pins "my station" (see app.js). */
.station-pill,
.station-label {
    cursor: pointer;
}

.station-pill:focus {
    outline: none;
}

.station-pill:focus-visible {
    stroke: var(--navy);
    stroke-width: 3;
}

.station-pill.selected {
    fill: var(--selected);
    stroke-width: 2.6;
}

.station-label.selected {
    font-weight: 700;
}

.station-label.terminus {
    font-weight: 700;
}

.line-bullet-circle {
    stroke: #ffffff;
    stroke-width: 2;
}

.line-bullet-text {
    fill: #ffffff;
    font-size: 18px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
}

.legend-panel {
    fill: var(--panel);
}

.legend-text {
    fill: var(--text);
    font-size: 14px;
}

.legend-text tspan.bold {
    font-weight: 700;
}

.train-tail {
    stroke: var(--station-stroke);
    stroke-width: 2;
    pointer-events: none;
}

.train {
    stroke: var(--station-stroke);
    stroke-width: 2;
    /* No CSS transition: trains snap from LED to LED (see hopAlongLeds in
       app.js), like a physical LED strip, rather than gliding. */
}

/* "My station" arrivals board, top-right above Redmond. */
.board-hint {
    fill: var(--muted);
    font-size: 14px;
}

.board-title {
    fill: var(--text);
    font-size: 19px;
    font-weight: 700;
}

.board-close {
    fill: var(--muted);
    font-size: 24px;
    cursor: pointer;
}

.board-close:hover,
.board-close:focus-visible {
    fill: var(--text);
    outline: none;
}

.board-direction {
    fill: var(--muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.board-row,
.board-time {
    fill: var(--text);
    font-size: 15px;
}

.board-time {
    font-weight: 700;
}

.board-sched {
    fill: var(--muted);
    font-size: 12px;
    font-weight: 400;
}

.board-empty {
    fill: var(--muted);
    font-size: 14px;
    font-style: italic;
}