/* NYC Live: shared tokens → foundations → components.
   Screen layout: styles/map.css and styles/desk.css.
   Examples: design-system.html. Usage: docs/design-system.md. */

/* Semantic colors resolve from the active color scheme. */
:root {
  color-scheme: light dark;
  --bg: light-dark(#eef1f5, #0e1116);
  --shape: light-dark(#dde8f6, #16202e);
  --card: light-dark(#ffffff, #181d24);
  --chip: light-dark(#eef1f5, #222831);
  --ink: light-dark(#15191e, #eef1f5);
  --brand-ink: light-dark(#111111, #f5f0e4);
  --muted: light-dark(#5d6671, #9aa4b0);
  --line: light-dark(#e3e7ec, #262d36);
  --line-strong: light-dark(#c9d0d8, #3a434e);
  --accent: light-dark(#1d3fbf, #7b96ff);
  --on-accent: light-dark(#ffffff, #0b1230);
  --accent-ink: var(--accent);
  --bike: light-dark(#0067b1, #5fb2ff);
  --ok: light-dark(#0d6e3d, #7fdca5);
  --ok-bg: light-dark(#def3e6, #14301f);
  --warn: light-dark(#7a4f00, #ffd27a);
  --warn-bg: light-dark(#fff0cc, #352a10);
  --bad: light-dark(#a8231b, #ff978c);
  --bad-bg: light-dark(#fde6e3, #3a1714);

  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-4-5: 18px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  --control-height: 36px;
  --control-height-compact: 28px;
  --control-height-touch: 44px;
  --shadow: 0 1px 2px light-dark(rgb(20 30 50 / .06), rgb(0 0 0 / .4)),
    0 6px 20px light-dark(rgb(20 30 50 / .06), rgb(0 0 0 / .25));
  --shadow-selected: 0 1px 2px rgb(0 0 0 / .12);
  --backdrop: rgb(0 0 0 / .4);
  --z-controls: 2;
  --z-tooltip: 3;

  --font: "Figtree", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-caption: 13px;
  --text-md: 14px;
  --text-base: 16px;
  --text-emphasis: 17px;
  --text-metric-compact: 18px;
  --text-lg: 20px;
  --text-metric: 24px;
  --text-title: 26px;
  --text-value: 28px;
  --text-route: 15px;
  --weight-normal: 500;
  --weight-medium: 600;
  --weight-strong: 700;
  --weight-display: 800;
  --leading-body: 1.45;
  --leading-compact: 1.3;
  --tracking-label: .08em;
  --type-display: var(--weight-display) clamp(36px, 6vw, 54px)/1 var(--font);
  --type-title: var(--weight-display) var(--text-title)/1.1 var(--font);
  --type-heading: var(--weight-display) var(--text-lg)/1.1 var(--font);
  --type-subheading: var(--weight-strong) var(--text-md)/1.2 var(--font);
  --type-metric: var(--weight-display) var(--text-metric)/1 var(--font);
  --type-compact-heading: var(--weight-display) var(--text-emphasis)/1.15 var(--font);
  --type-value: var(--weight-display) var(--text-value)/1 var(--font);
  --size-icon: 22px;
  --opacity-muted: .45;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Use the final outlined master as an alpha mask so explicit theme overrides
   and system preferences share the same geometry and brand colors. */
.brand-heading { margin: 0; line-height: 1; }
.brand-logo {
  display: block; flex: none; width: 160px; aspect-ratio: 432 / 128;
  background: var(--brand-ink);
  mask: url("assets/brand/logo-horizontal.svg") center / contain no-repeat;
}
@media (forced-colors: active) {
  .brand-logo { forced-color-adjust: none; background: CanvasText; }
}

/* Heading classes describe visual rank, not HTML rank. */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: var(--weight-normal) var(--text-base)/var(--leading-body) var(--font);
  font-variant-numeric: tabular-nums;
  padding-block: var(--space-5) var(--space-8);
  padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
}
.text-display { font: var(--type-display); letter-spacing: -.02em; }
.text-title { margin: 0; font: var(--type-title); letter-spacing: -.01em; }
.text-title--responsive { font-size: clamp(var(--text-title), 4vw, 34px); }
.text-heading { margin: 0; font: var(--type-heading); }
.text-compact-heading { margin: 0; font: var(--type-compact-heading); color: var(--ink); }
.text-subheading { margin: 0; font: var(--type-subheading); color: var(--ink); }
.text-item { font-size: var(--text-emphasis); font-weight: var(--weight-strong); }
.text-value { font: var(--type-value); }
.text-unit { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--muted); }
.text-caption { font-size: var(--text-caption); }
.text-body-sm { font-size: var(--text-md); }
.text-normal { font-weight: var(--weight-normal); }
.text-medium { font-weight: var(--weight-medium); }
.text-strong { font-weight: var(--weight-strong); }
.text-label { font-size: var(--text-sm); font-weight: var(--weight-strong); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); }
.text-meta { font-size: var(--text-sm); color: var(--muted); }
.text-meta-strong { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--muted); }
.text-fine { font-size: var(--text-xs); color: var(--muted); }
.text-muted { color: var(--muted); }
.text-warning { color: var(--warn); font-weight: var(--weight-medium); }
:where(a) { color: var(--accent-ink); text-underline-offset: 2px; }
.link--muted { color: var(--muted); }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* A card clips its contents; popovers and dialogs can scroll. */
.card { background: var(--card); border-radius: var(--radius-xl); box-shadow: var(--shadow); overflow: hidden; min-width: 0; }
.pad { padding: var(--space-4-5) var(--space-5); }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.section-head--baseline { align-items: baseline; }
.list-row { padding-block: var(--space-3); border-top: 1px solid var(--line); }
.list-row:first-child { border-top: 0; }
.popover, .dialog { background: var(--card); color: var(--ink); box-shadow: var(--shadow); border: 1px solid var(--line); overflow-y: auto; }
.popover { margin: 0; padding: var(--space-4); border-radius: var(--radius-lg); }
.dialog { padding: var(--space-6); border: 0; border-radius: var(--radius-xl); width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.dialog::backdrop { background: var(--backdrop); }
.dialog > form > h2 { margin-bottom: var(--space-3-5); }

/* Low-specificity defaults let variants and screen layouts compose. */
:where(button, .btn, input, select) {
  min-height: var(--control-height); padding: var(--space-2) var(--space-3-5);
  font: var(--weight-medium) var(--text-md)/1.2 var(--font);
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
}
:where(button, .btn) { cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5); }
:where(input, select) { width: 100%; min-width: 0; min-height: var(--control-height-touch); font-weight: var(--weight-normal); font-size: var(--text-base); }
/* Keep native selection/keyboard behavior; own the closed control's geometry. */
.select-control { position: relative; display: grid; min-width: 0; color: var(--muted); }
.select-control > select { appearance: none; padding-inline: var(--space-3) 40px; text-overflow: ellipsis; }
.select-control::after {
  content: ""; position: absolute; top: calc(50% - 1px); right: var(--space-4);
  width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-50%) rotate(45deg); pointer-events: none;
}
.select-control:has(> select:disabled)::after { opacity: var(--opacity-muted); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--quiet { min-height: auto; border: 0; background: transparent; color: var(--accent-ink); padding: 0; justify-self: start; }
.btn--floating { height: var(--control-height-touch); padding: 0 var(--space-3-5); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.btn--icon { width: var(--control-height-touch); padding: 0; font-size: var(--text-lg); flex: none; }
.btn--icon > svg { width: var(--size-icon); height: var(--size-icon); }
:where(button, input, select):disabled, .btn[aria-disabled="true"] { opacity: var(--opacity-muted); cursor: not-allowed; }
.btn[aria-disabled="true"] { pointer-events: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
:where(input, select):focus-visible { outline-width: 2px; }
@media (forced-colors: active) {
  .select-control > select { appearance: auto; padding-inline: var(--space-3); }
  .select-control::after { display: none; }
}
@media (hover: hover) {
  :where(button, .btn):not(:disabled):not([aria-disabled="true"]):hover { border-color: var(--muted); }
}
.field { display: grid; gap: var(--space-1-5); margin-bottom: var(--space-3-5); }
.field > label, label.field { font-size: var(--text-caption); font-weight: var(--weight-strong); color: var(--muted); }
.field--compact { margin-bottom: 0; }
label.field--compact { font-size: var(--text-sm); }
.field--compact :is(input, select) { font-size: var(--text-md); }
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }

/* A selectable list is a labeled group of ordinary buttons, not an ARIA listbox. */
.select-list { max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.select-list > button { display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.select-list > button:last-child { border-bottom: 0; }
.select-list > button[aria-pressed="true"] { background: var(--chip); box-shadow: inset var(--space-1) 0 0 var(--accent); }
.select-list__label { margin-right: var(--space-1); }

/* Layer selections share their surface, copy hierarchy and icon slot. */
.toggle-item { display: grid; gap: var(--space-2); border-radius: var(--radius-lg); padding: var(--space-1-5) var(--space-2); }
.toggle-item.is-selected { background: color-mix(in srgb, var(--chip) 60%, transparent); }
.toggle-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2-5); width: 100%; min-height: var(--control-height-touch); border: 0; background: transparent; padding: var(--space-1) 0; text-align: left; border-radius: var(--radius-sm); }
.toggle-row--icon { grid-template-columns: var(--size-icon) minmax(0, 1fr) auto; }
.toggle-row__copy { display: grid; min-width: 0; }
.toggle-row__title { font: var(--type-subheading); }
.toggle-row__meta { line-height: var(--leading-compact); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toggle-item__details { display: grid; gap: var(--space-2); padding-left: calc(var(--size-icon) + var(--space-2-5)); }
.toggle-item__details[hidden] { display: none; }
.layer-icon { width: var(--size-icon); height: var(--size-icon); border-radius: var(--radius-sm); display: grid; place-items: center; font: var(--weight-display) var(--text-sm)/1 var(--font); background: var(--badge-bg, var(--accent)); color: var(--badge-ink, #fff); }

/* Segmented selection uses aria-pressed; this is not a tab panel. */
.seg { display: inline-flex; max-width: 100%; background: var(--chip); border-radius: var(--radius-md); padding: 3px; gap: 3px; }
.seg > button { min-height: var(--control-height-compact); border: 0; background: transparent; border-radius: var(--radius-sm); padding: var(--space-1-5) var(--space-3); color: var(--muted); font-size: var(--text-caption); }
.seg > button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-selected); }
.seg--fill { display: flex; }
.seg--fill > button { flex: 1; min-width: 0; padding-inline: var(--space-1-5); }

/* Number and label hierarchy shared by both screens. */
.metric { background: var(--chip); border-radius: var(--radius-lg); padding: var(--space-2-5) var(--space-3); min-width: 0; }
.metric > b { display: block; font: var(--type-metric); }
.metric > span { font-size: var(--text-sm); color: var(--muted); font-weight: var(--weight-medium); }
.metric.zero > b { color: var(--bad); }
.metric--inline { background: none; padding: 0; display: flex; gap: var(--space-1); align-items: baseline; }
.metric--inline > b { font-size: var(--text-base); }
.metric--compact > b { font-size: var(--text-metric-compact); }
.metric--compact > span { font-size: var(--text-caption); font-weight: var(--weight-normal); }

/* Selectable departure tile: use a button and expose selection with aria-pressed. */
.choice { border: 0; border-radius: var(--radius-lg); background: var(--chip); color: var(--ink); padding: var(--space-2-5) var(--space-3) var(--space-2); display: grid; gap: var(--space-0-5); justify-items: center; }
.choice > b { font: var(--type-metric); }
.choice > span:not(.bullet) { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--muted); }
.choice .bullet { font-size: var(--text-sm); margin-top: var(--space-1); }
.choice[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.choice[aria-pressed="true"] > span:not(.bullet) { color: var(--on-accent); }
.choice[aria-pressed="true"] .bullet { box-shadow: 0 0 0 2px var(--on-accent); }
@media (hover: hover) { .choice:not(:disabled):hover { outline: 2px solid var(--line-strong); outline-offset: -2px; } }

/* Status is named in text; color is a second cue. */
.pill { display: inline-block; border-radius: var(--radius-pill); padding: 3px var(--space-2-5); font-size: var(--text-sm); font-weight: var(--weight-strong); background: var(--chip); color: var(--muted); }
.pill--source { padding-block: var(--space-1); font-size: var(--text-caption); font-weight: var(--weight-medium); }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.status-value { border-radius: var(--radius-md); padding: var(--space-2-5) var(--space-1); font-weight: var(--weight-strong); background: var(--chip); min-height: var(--control-height-touch); display: grid; place-items: center; }
.status-value.ok { background: var(--ok-bg); color: var(--ok); }
.status-value.warn { background: var(--warn-bg); color: var(--warn); }
.status-value.bad { background: var(--bad-bg); color: var(--bad); }
.fresh { font-size: var(--text-sm); color: var(--muted); font-weight: var(--weight-normal); }
.fresh.stale { color: var(--bad); }
.msg { color: var(--muted); padding-block: var(--space-2-5); }
.msg.err { color: var(--bad); }
.notice { border-radius: var(--radius-lg); padding: var(--space-2-5) var(--space-3); font-size: var(--text-md); background: var(--warn-bg); color: var(--warn); }
.notice.bad { background: var(--bad-bg); color: var(--bad); }
.notice > b, .notice-title { display: block; font-size: var(--text-sm); font-weight: var(--weight-strong); text-transform: uppercase; letter-spacing: var(--tracking-label); margin-bottom: var(--space-0-5); }
.notice--plain { display: grid; gap: 3px; padding: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: var(--text-caption); line-height: 1.35; }
.notice--plain .notice-title { margin: 0; font-size: var(--text-xs); color: var(--warn); }
.notice--plain > p { margin: 0; }

/* Details inside an existing card surface; the screen owns its position. */
.tooltip { padding: var(--space-3) var(--space-3-5); color: var(--muted); font-size: var(--text-md); }
.tooltip > h3 { margin-bottom: var(--space-1); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.tooltip > p { margin: 0; }
.tooltip > p + p { margin-top: var(--space-1); }
.source-list { margin: 0; padding-left: var(--space-4); line-height: 1.5; }
.source-list > li + li { margin-top: var(--space-1-5); }
.legend { display: flex; gap: var(--space-1-5) var(--space-3); flex-wrap: wrap; font-size: var(--text-sm); color: var(--muted); font-weight: var(--weight-medium); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; background: var(--legend-color); }
.legend i.bar { position: relative; width: 16px; height: 4px; vertical-align: 2px; background: none; }
.legend i.bar::before, .legend i.bar::after { content: ""; position: absolute; top: 0; left: 0; width: 6px; height: 4px; border-radius: var(--radius-pill); background: var(--legend-color); }
.legend i.bar::after { left: 9px; }

/* Route identity is data, separate from UI action and status colors. */
.bullet {
  --c: #808183; --t: #fff;
  display: inline-grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: 50%;
  background: var(--c); color: var(--t); font: var(--weight-strong) 1em/1 var(--font); flex: none;
}
.bullet.diamond { border-radius: 3px; transform: rotate(45deg) scale(.84); }
.bullet.diamond span { transform: rotate(-45deg); }
.bullet--sm { font-size: var(--text-xs); }
.bullet--caption { font-size: var(--text-caption); }
.bullet--md { font-size: var(--text-route); }
.bullet--lg { font-size: var(--text-lg); }
.bullet--inline { font-size: var(--text-xs); vertical-align: 1px; margin-inline: 1px; }
.bullet--wide > span { font-size: .62em; }

/* Existing switch motion has an immediate reduced-motion variant. */
.switch { width: 34px; height: 20px; border-radius: var(--radius-pill); background: var(--line-strong); position: relative; transition: background .15s; flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgb(0 0 0 / .25); }
[aria-pressed="true"] > .switch { background: var(--accent); }
[aria-pressed="true"] > .switch::after { transform: translateX(14px); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }