/* Cache Rider — the Industry system from the design: Barlow Condensed times,
   hairline rows, blueprint frames for the one or two objects a screen needs
   edges on. The agency's route colours are the only colour, apart from the
   steel accent. */

@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400.woff2") format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500.woff2") format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700; font-display: swap; src: url("../fonts/barlow-700.woff2") format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 400; font-display: swap; src: url("../fonts/barlow-condensed-400.woff2") format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-600.woff2") format('woff2'); }

:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-100: #eef6ff;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-900: #1d2d3d;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);
  --cr-muted: #56575a;
  --cr-line: color-mix(in srgb, #1d1f20 13%, transparent);
  --cr-hover: color-mix(in srgb, #1d1f20 5%, transparent);
  --cr-scrim: color-mix(in srgb, #2b2b2d 55%, transparent);
  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
  --radius-md: 4px;
  --tab-h: 58px;
  --warn-bg: #fdf0c2; --warn-ink: #4d3a00; --warn-edge: #e0a800;   /* a warning that must be seen: a stop skipped */
  --cr-late: #d4302b;   /* a bus running late */
  color-scheme: light;
}
/* Dark: data-theme is always written before first paint (index.html), the device's look when the rider hasn't
   picked one, so the dark tokens live in this one scope. */
:root[data-theme="dark"] {
  --color-bg: #101214; --color-surface: #1a1d20; --color-text: #eef0f2;
  --color-accent: #94bce3; --color-accent-600: #b5d9fd; --color-accent-700: #b5d9fd;
  --color-accent-100: #1d2d3d; --color-accent-900: #e6f2ff;
  --color-divider: rgba(238,240,242,.2); --cr-muted: #b3b6bb; --cr-line: rgba(238,240,242,.13);
  --cr-hover: rgba(238,240,242,.06); --cr-scrim: rgba(0,0,0,.6);
  --shadow-md: 0 3px 10px rgba(0,0,0,.5); --shadow-lg: 0 12px 32px rgba(0,0,0,.6);
  --warn-bg: #3b3005; --warn-ink: #ffe28a; --warn-edge: #e0a800; --cr-late: #e5483f;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
/* Window sizes, as app/wide.js: a phone's layout under 840px, expanded 840px up.
   Type a step larger on a big touch screen (a tablet, 600px or wider), everything with it: every size is in rem */
@media (min-width: 600px) and (pointer: coarse) { html { font-size: 18px; } }
body {
  margin: 0; height: 100%; background: var(--color-bg); color: var(--color-text);
  font: 400 0.9375rem/1.55 var(--font-body); -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; margin: 0; }
p { margin: 0 0 10px; }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
svg { display: block; flex: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.hidden { display: none !important; }
.muted { color: var(--cr-muted); }

/* ── app frame ─────────────────────────────────────────────────────────── */
#app { height: 100%; display: flex; flex-direction: column; }
#top { display: none; }
#body { flex: 1; min-height: 0; display: flex; position: relative; }
#side { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative; background: var(--color-bg); }
/* a stop page opened from the map slides up over it, and a swipe down at its top sends it back */
#side.sheet-in { transition: transform .28s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { #side.sheet-in { transition: none; } }
#mapcol { display: none; position: relative; background: var(--color-surface); overflow: hidden; }   /* a card slid out below is clipped, not scrolled to */
#body.map-open #side { display: none; }
#body.map-open #mapcol { display: block; flex: 1; }
#tabs {
  flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: 1px solid var(--cr-line);   /* three, and a season's (main.js) */
  padding: 0 8px env(safe-area-inset-bottom); background: var(--color-bg); position: relative; z-index: 500;
}
#tabs a {
  min-height: var(--tab-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 0.7812rem; font-weight: 500; color: var(--cr-muted); text-decoration: none;
}
#tabs a[aria-current] { font-weight: 600; color: var(--color-accent-700); box-shadow: inset 0 2px 0 var(--color-accent); }
/* A new version of the app is in, the open one old: a bar above the tabs with a reload. */
.updatebar { flex: none; position: relative; z-index: 500; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; background: var(--color-text); color: var(--color-bg); font-size: 0.9375rem; }   /* a strip in the frame, above the tabs: it takes room, it covers nothing */
.updatebar > span { flex: 1; min-width: 0; }
.updatebar .btn { min-height: 40px; padding: 0 16px; }
.updatebar .btn-icon { padding: 0; width: 40px; color: inherit; }

@media (min-width: 840px) {
  #top {
    display: flex; align-items: center; gap: 20px; padding: 10px 20px; border-bottom: 1px solid var(--cr-line);
    position: relative; z-index: 600; background: var(--color-bg);
  }
  #top .wordmark { font-family: var(--font-heading); font-weight: 600; font-size: 1.5rem; text-decoration: none; color: inherit; }
  #top nav { display: flex; gap: 4px; }
  #top nav a { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; font-size: 0.9375rem; font-weight: 500; color: var(--cr-muted); text-decoration: none; }
  #top nav a[aria-current] { font-weight: 600; color: var(--color-accent-700); box-shadow: inset 0 -2px 0 var(--color-accent); }
  /* three parts: the name and tabs, the search in the middle, the day and time; the search gives way first */
  #top .topleft { flex: 1 1 0; display: flex; align-items: center; gap: 20px; }
  #top .search { flex: 0 1 480px; min-width: 260px; }
  #top .wordmark, #top nav a { white-space: nowrap; }
  #top .search .input { height: 44px; font-size: 0.9375rem; padding-left: 40px; }
  #top .search .lead { left: 12px; }
  #tabs { display: none; }
  /* the day and time: Tue Sep 29 12:22 PM */
  .topclock { flex: 1 1 0; display: flex; justify-content: flex-end; align-items: baseline; gap: 14px; padding-left: 4px; font-family: var(--font-heading); font-weight: 600; font-size: 1.375rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
  .topclock .md { color: var(--cr-muted); }
  .topclock .hm { font-size: 1.625rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
  .topclock small { font-size: 0.9375rem; letter-spacing: .04em; margin-left: 3px; color: var(--cr-muted); }
  /* The map is always the whole width underneath; the panel sits over it, and is put away for the Map tab (#/map).
     The map is never resized for it: it only moves its centre (its padding). */
  #mapcol { display: block; position: absolute; inset: 0; }
  #side { position: absolute; top: 0; bottom: 0; left: 0; z-index: 480; width: 420px; border-right: 1px solid var(--cr-line); }
  #body.map-open #side { display: block; transform: translateX(-100%); visibility: hidden; }
  #body.map-open #mapcol { flex: none; }
  #body:not(.map-open) .mapnotice { left: 432px; }
  .m-only { display: none !important; }
  /* the panel on the right (Settings, this computer): the map's card, notice and buttons across from it */
  [data-panel="right"] #side { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--cr-line); }
  [data-panel="right"] #body.map-open #side { transform: translateX(100%); }
  [data-panel="right"] #body:not(.map-open) .mapnotice { left: 12px; right: 432px; }
  [data-panel="right"] .mapcard { right: auto; left: 16px; }
  [data-panel="right"] #map .maplibregl-ctrl-top-right, [data-panel="right"] #map .maplibregl-ctrl-bottom-right { right: auto; left: 0; }
  [data-panel="right"] #map .maplibregl-ctrl-top-right .maplibregl-ctrl { float: left; margin: 10px 0 0 10px; }
  [data-panel="right"] #map .maplibregl-ctrl-bottom-right .maplibregl-ctrl { float: left; margin: 0 0 10px 10px; }
}
/* narrower, the time alone: the search keeps its room */
@media (min-width: 840px) and (max-width: 1179px) { .topclock > span:first-child { display: none; } }
/* a narrow expanded window (a landscape tablet): the name, the links and the time at their own widths, the search the rest */
@media (min-width: 840px) and (max-width: 1023px) {
  #top { gap: 12px; padding-inline: 12px; }
  #top .topleft { flex: none; gap: 10px; }
  #top nav a { padding: 0 8px; }
  #top .search { flex: 1 1 auto; min-width: 120px; }
  .topclock { flex: none; }
}

/* ── type ──────────────────────────────────────────────────────────────── */
.t { font-family: var(--font-heading); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.01em; }
.t small { font-size: .5em; margin-left: 2px; letter-spacing: .02em; }
.t-60 { font-size: 3.75rem; } .t-60 small { font-size: 1.875rem; margin-left: 5px; }
.t-56 { font-size: 3.5rem; } .t-56 small { font-size: 1.75rem; margin-left: 4px; }
.t-42 { font-size: 2.625rem; } .t-42 small { font-size: 1.3125rem; margin-left: 3px; }
.t-36 { font-size: 2.25rem; }
.t-26 { font-size: 1.625rem; } .t-26 small { font-size: 0.8125rem; }
.t-25 { font-size: 1.5625rem; } .t-25 small { font-size: 0.8125rem; }
.t-22 { font-size: 1.375rem; } .t-22 small { font-size: 0.6875rem; }
.t-21 { font-size: 1.3125rem; } .t-21 small { font-size: 0.6875rem; }
.t-20 { font-size: 1.25rem; } .t-20 small { font-size: 0.625rem; }
.t-17 { font-size: 1.0625rem; } .t-17 small { font-size: 0.5625rem; }
.eyebrow { font-size: 0.7188rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-700); }
.section { display: flex; align-items: center; gap: 8px; padding: 16px 16px 8px; font-family: var(--font-heading); font-weight: 600; font-size: 0.875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-muted); }
.section.between { justify-content: space-between; align-items: baseline; padding: 14px 16px 10px; }
.section .note { font-family: var(--font-body); font-weight: 400; font-size: 0.8125rem; letter-spacing: 0; text-transform: none; }
/* a place's heading as the start of a journey: the whole line taps, the note says what the tap does */
a.section.pick { color: var(--color-text); text-decoration: none; min-height: 48px; align-items: center; }
a.section.pick > .note { display: inline-flex; align-items: center; gap: 2px; flex: none; color: var(--color-accent); font-weight: 500; white-space: nowrap; }
.sched { display: inline-flex; align-items: center; gap: 4px; font-size: 0.6562rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--cr-muted); white-space: nowrap; }
.rel { font-size: 0.8438rem; color: var(--cr-muted); }
.fine { padding: 14px 16px 18px; font-size: 0.7812rem; line-height: 1.45; color: var(--cr-muted); }
.fine a { color: inherit; }

/* route badge — the agency's colour, the design's inset hairline */
.badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 1px; flex: none;
  font-family: var(--font-heading); font-weight: 600; line-height: 1; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
  min-width: 36px; height: 36px; padding: 0 6px; border-radius: 6px; font-size: 1.25rem;
}
.badge small { font-size: .6em; letter-spacing: .03em; }
/* 16's AM and PM in the small badges: at .6em of a 20 or 24 px badge they came out 7 px, a smudge on its navy */
.badge-20 small, .badge-24 small { font-size: .75em; letter-spacing: .02em; }
.badge-44 { min-width: 44px; height: 44px; padding: 0 7px; border-radius: 7px; font-size: 1.5625rem; }
.badge-32 { min-width: 32px; height: 32px; padding: 0 5px; border-radius: 5px; font-size: 1.125rem; }
.badge-30 { min-width: 30px; height: 30px; padding: 0 5px; border-radius: 5px; font-size: 1.0625rem; }
.badge-28 { min-width: 28px; height: 28px; padding: 0 4px; border-radius: 4px; font-size: 1rem; }
.badge-24 { min-width: 24px; height: 24px; padding: 0 4px; border-radius: 4px; font-size: 0.8125rem; }
.badge-20 { min-width: 20px; height: 20px; padding: 0 3px; border-radius: 4px; font-size: 0.6875rem; }
/* a route under the pointer on a desktop, on the map or here: its badges ringed */
.badge.hov, .uchip.hov { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent); }
/* directions: leave now, or at a day and time picked */
/* the shuttle where the ways couldn't have it: which loop, the ride, when it runs */
.shuttle-also { display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 12px; }
.sa-row { display: flex; gap: 10px; align-items: flex-start; color: inherit; text-decoration: none; }
.sa-row > .icon:last-child, .sa-row > svg:last-child { margin-left: auto; flex: none; align-self: center; color: var(--cr-muted); }
/* The shuttle when it's the better way: said as the way, not a footnote */
.sa-row.better { margin: 0 -16px; padding: 12px 16px; background: var(--color-accent-100); box-shadow: inset 4px 0 0 var(--color-accent); }
.sa-row.better b { color: var(--color-accent-700); }
/* Walking the whole way, under the way picked */
.jrow.walkall { display: flex; flex-direction: row; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.jrow.walkall .mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.jrow.walkall > svg { flex: none; color: var(--cr-muted); }
/* Quicker on foot: said in the words, not lit as a second answer beside the way picked */
.jrow.walkall { background: var(--color-bg); }
.jrow.walkall.better .mid > b { color: var(--color-accent-700); }
/* A walk's hill: the word first, bold, in the text's own colour (red is a late bus's); STEEP in capitals */
.sub b.hill, .dist b.hill { font-weight: 700; color: var(--color-text, currentColor); }
.sub b.hill.steep, .dist b.hill.steep { text-transform: uppercase; letter-spacing: 0.04em; }
.chips-inline { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sa-row .col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sa-row .sub { font-size: 0.8125rem; line-height: 1.4; color: var(--cr-muted); }
.gowhen { display: flex; flex-direction: column; gap: 8px; padding: 4px 16px 10px; }
.gw-row { display: flex; flex-wrap: wrap; gap: 8px; }
.gw-row > .btn { gap: 8px; max-width: 100%; min-width: 0; }
.gw-row > .btn[aria-expanded="true"] { background: var(--cr-hover); }   /* open: its choices under the row */
.gw-row > .btn .gw-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gowhen-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gowhen-pick[hidden] { display: none; }
.gowhen-pick .input { width: auto; flex: 1 1 140px; min-height: 44px; }
.badges { display: flex; gap: 4px; flex-wrap: wrap; }
.badges.wide { gap: 6px; }

/* ── controls ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-weight: 500; font-size: 1rem; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent; padding: 0 14px; min-height: 44px; border-radius: var(--radius-md); white-space: nowrap;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: var(--cr-hover); }
.btn-ghost { color: var(--color-accent-700); padding-inline: 4px; font-size: 1.0625rem; gap: 2px; }
.btn-ghost:hover { background: var(--cr-hover); }
.btn-icon { width: 44px; padding: 0; }
.btn-block { width: 100%; }
.btn-lg { min-height: 52px; font-size: 1.0625rem; }
.search { position: relative; }
.input {
  width: 100%; height: 54px; font: 500 1.0625rem var(--font-body); color: var(--color-text); background: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-text) 35%, transparent); border-radius: var(--radius-md); padding: 0 14px 0 46px;
  -webkit-appearance: none; appearance: none; margin: 0; box-sizing: border-box;
}
.input::-webkit-search-decoration, .input::-webkit-search-results-button, .input::-webkit-search-results-decoration { -webkit-appearance: none; display: none; }
.input::-webkit-search-cancel-button { -webkit-appearance: none; width: 16px; height: 16px; cursor: pointer; background: currentColor; opacity: .6; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat; }
.input::placeholder { color: var(--cr-muted); font-weight: 400; }
.input:focus { border-color: var(--color-accent); }
.search .lead { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--cr-muted); pointer-events: none; line-height: 0; }
.search .clear { position: absolute; right: 6px; top: 5px; }

/* blueprint frame — registration marks outside the box */
.blueprint { position: relative; border: 1px solid var(--color-divider); border-radius: 0; }
.blueprint > .corner { position: absolute; width: 11px; height: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); pointer-events: none; }
.blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }
.btn.blueprint { border-radius: 0; }
.btn-primary.blueprint { border-color: var(--color-accent); }

/* ── screen pieces ─────────────────────────────────────────────────────── */
.titlebar { display: flex; align-items: center; justify-content: space-between; padding: 4px 16px 12px; }
.titlebar .wordmark { font-family: var(--font-heading); font-weight: 600; font-size: 1.5rem; letter-spacing: -.01em; }
.backbar { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 0; }
.head { padding: 2px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.head h1 { font-size: 2.125rem; line-height: 1.02; }
.head.tight { padding: 4px 16px 12px; gap: 2px; }
.head.tight h1 { line-height: 1.05; }
.pad { padding: 0 16px; }
.notice { display: flex; align-items: center; gap: 8px; padding: 8px 16px 10px; font-size: 0.8438rem; color: var(--cr-muted); }
.notice b { color: var(--color-text); font-weight: 600; }
.callout { margin: 0 16px 12px; padding: 12px 14px; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; background: var(--color-accent-100); color: var(--color-accent-900); }
.callout b { font-weight: 600; }
.callout .sub { font-size: 0.8438rem; opacity: .85; margin-top: 2px; }
.callout.alert .sub + .sub { margin-top: 8px; }
.callout.alert .sub b { display: block; margin-bottom: 1px; }
.callout.alert a { color: inherit; font-weight: 600; }
/* unannounced detours: ours, not the agency's, so never its colours; a question, quietly, with a dashed edge */
.callout.unann { background: transparent; color: var(--color-text); box-shadow: inset 0 0 0 1px var(--cr-line); border: 1px dashed var(--cr-line); }
.callout.unann a { color: inherit; font-weight: 600; }
.callout .fine { font-size: 0.75rem; color: var(--cr-muted); margin: 6px 0 0; padding: 0; }
/* a route going past a stop on a detour, not one of its own: its badge ringed in dashes, as the map dots its way round */
.detoured .badge { outline: 2px dashed var(--rc); outline-offset: 2px; }
.badgelink.detoured { align-items: center; gap: 7px; margin-left: 4px; }
.dtag { font-size: 0.6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cr-muted); }
.callout.past > .detoured { display: inline-flex; align-self: start; margin: 4px 4px 0; }
.qbadge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--rc); color: var(--rt, #fff); font-family: var(--font-heading); font-weight: 700; font-size: 0.8125rem; line-height: 1; flex: none; }
.detourcard { padding: 4px 16px 16px; font-size: 0.9375rem; display: flex; flex-direction: column; gap: 16px; }
.detourcard > .ditem { display: flex; flex-direction: column; gap: 8px; }   /* a notice, or a way round: its lines together */
.detourcard .callout { margin: 4px 0 0; }   /* a notice in the card: the card's own edges, not a page's */
.detourcard p { margin: 0; }
.detourcard a { color: inherit; font-weight: 600; }
.detourcard .fine { font-size: 0.8125rem; color: var(--cr-muted); padding: 0; }
.qnote { color: var(--cr-muted); }
.qmark { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 0.625rem; font-weight: 700; line-height: 1; color: var(--cr-muted); vertical-align: 1px; margin-left: 4px; }
/* yellow, and only for what changes a rider's trip: a route skipping a stop, a stop not served, a bus days off */
.warnmark { display: inline-block; padding: 1px 6px; background: var(--warn-bg); color: var(--warn-ink); box-shadow: inset 3px 0 0 var(--warn-edge); font-weight: 600; }
.stoprow .dist .alert { color: var(--color-accent-700); font-weight: 600; }
/* A stop shut by notice: 'Closed · through Sat' in the time's place, in the notice's colour */
.stoprow .end.closedend .t { color: var(--color-accent-700); }
.eyebrow.alert { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; }
.eyebrow.alert.warnmark { padding: 3px 7px; }
.alertrow { padding: 12px 16px; border-bottom: 1px solid var(--cr-line); display: flex; flex-direction: column; gap: 6px; font-size: 0.875rem; }
.alertrow b { font-size: 1rem; }
/* the badges and title: a tap shows the alert on the map */
.alerthead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; color: inherit; text-decoration: none; }
.alerthead b { grid-row: 2; grid-column: 1 / -1; }
.alerthead .alertmap { grid-row: 1; grid-column: 2; display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; font-weight: 500; color: var(--color-accent-700); }
.alerthead:hover b { text-decoration: underline; }
.alertrow p { margin: 0; }
.alertrow .muted a { color: inherit; }
.list { border-top: 1px solid var(--cr-line); }

/* the departure row: badge · headsign + Scheduled · time + relative */
.row {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; min-height: 66px;
  padding: 10px 16px; border-bottom: 1px solid var(--cr-line); color: inherit; text-decoration: none;
}
a.row:hover, .row.tap:hover { background: var(--cr-hover); }
.row .mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.row .mid .name { font-size: 0.9688rem; font-weight: 500; line-height: 1.25; }
.row .mid .sub { font-size: 0.8125rem; color: var(--cr-muted); }
.row .end { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }

/* the stop row on the home and search lists */
.stoprow {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 76px;
  padding: 12px 16px; border-bottom: 1px solid var(--cr-line); color: inherit; text-decoration: none;
}
.stoprow:hover { background: var(--cr-hover); }
/* the stop a rider came from, on its route's page */
.stoprow.here { background: var(--color-accent-100); box-shadow: inset 4px 0 0 var(--color-accent); }
/* a stop's route badges open the route: a press shows it */
.badgelink { display: inline-flex; border-radius: 6px; text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; transition: transform .1s, opacity .1s; }
.badgelink:active { transform: scale(.92); opacity: .75; }
.badgelink:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (hover: hover) { .badgelink:hover { opacity: .85; } }
.stoprow .mid { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.stoprow .name { font-size: 1.0625rem; font-weight: 500; line-height: 1.2; text-wrap: pretty; }
.stoprow .name .town { color: var(--cr-muted); font-weight: 400; }
.stoprow .dist { font-size: 0.7812rem; color: var(--cr-muted); }
.stoprow .end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.stoprow .end .when { display: flex; align-items: center; gap: 6px; }
.stoprow .end .rel { font-size: 0.8125rem; }

/* next bus block */
.next { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--cr-line); border-bottom: 1px solid var(--cr-line); }
.next .top { display: flex; align-items: center; justify-content: space-between; }
.next .big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.next .big .rel { font-size: 1.125rem; }
.next .who { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 500; }
.next .who .day { font-size: 0.8438rem; color: var(--cr-muted); font-weight: 400; }

/* the twin, across the road */
.twin { margin: 0 16px 10px; padding: 11px 14px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; text-decoration: none; color: inherit; cursor: pointer; }
.twin .mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.twin .mid .name { font-size: 1rem; font-weight: 500; }
.twin .when { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.twin .when .rel { font-size: 0.8125rem; }
/* the map card's twin, at the right of the eyebrow line */
.mapcard .busline .dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 3px var(--color-text); flex: none; margin: 0 8px; }
.mapcard .busline .livetag { margin-left: auto; }
/* a shared road's routes, each a row: badge, name, where it runs, and the chevron that says it opens */
.mapcard .roadroutes { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.mapcard .roadroute { all: unset; cursor: pointer; border-radius: 6px; display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--color-text); }
.mapcard .roadroute .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mapcard .roadroute .name { font-weight: 600; }
.mapcard .roadroute .sub { font-size: 0.8125rem; color: var(--cr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mapcard .roadroute > svg { color: var(--cr-muted); flex: none; }
.mapcard .roadroute:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* a road's stop: where its next bus goes, which tells the two sides of the road apart */
.stoprow .go { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 500; line-height: 1.3; }
.eyerow { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 22px; }
.eyerow .eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* the stop page's across-the-road row: the other side's stop and its next bus */
.acrossrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--cr-line); color: inherit; text-decoration: none; }
.acrossrow > svg { color: var(--color-accent-700); }
.acrossrow .mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acrossrow .mid .eyebrow { line-height: 1.35; }
.acrossrow .mid .name { font-size: 1rem; font-weight: 500; line-height: 1.25; }
.acrossrow .mid .sub { font-size: 0.8125rem; color: var(--cr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acrossrow .end { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.acrossrow .end .when { display: flex; align-items: center; gap: 6px; }
.acrossrow .end .rel { font-size: 0.7812rem; color: var(--cr-muted); white-space: nowrap; }
@media (hover: hover) { .acrossrow:hover { background: var(--cr-hover); } }

/* the pulse card on the home screen */
.pulse { display: block; margin: 4px 16px; padding: 14px; color: inherit; text-decoration: none; cursor: pointer; }
.pulse .top { display: flex; justify-content: space-between; align-items: center; }
.pulse .big { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.pulse .big .rel { font-size: 1rem; white-space: nowrap; }
.pulse .sub { font-size: 0.8438rem; color: var(--cr-muted); margin-top: 4px; }
.pulse .loops { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cr-line); }
.pulse .loop { display: flex; align-items: center; gap: 8px; }
.pulse .loop .col { display: flex; flex-direction: column; gap: 2px; }
.pulse .loop .rel { font-size: 0.7812rem; white-space: nowrap; }
.pulse .foot { margin-top: 10px; }

/* route grid */
.chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px 16px 12px; }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--cr-line); text-decoration: none; color: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer; }
.chip:hover { border-color: var(--color-accent); }
.chip[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent-700); background: var(--color-accent-100); }

/* by-route group (the hub's bay list and a route's day) */
.group { padding: 14px 16px; border-bottom: 1px solid var(--cr-line); display: flex; flex-direction: column; gap: 10px; }
.group .top { display: flex; align-items: center; gap: 10px; }
.group .top .col { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.group .top .name { font-size: 1rem; font-weight: 500; }
.group .top .sub { font-size: 0.8125rem; color: var(--cr-muted); }
.group .three { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
.group .three > div { padding: 9px 10px; border: 1px solid var(--cr-line); display: flex; flex-direction: column; gap: 4px; }
.group .three > div:first-child { border-color: var(--color-accent); }
.group .three .rel { font-size: 0.7812rem; }

/* empty / no-service states */
.empty { padding: 24px 16px; display: flex; flex-direction: column; gap: 6px; }
.empty h2 { font-size: 1.5rem; }
.empty p { font-size: 0.9375rem; color: var(--cr-muted); margin: 0; }
.dayhead { padding: 14px 16px 6px; font-family: var(--font-heading); font-weight: 600; font-size: 0.875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-muted); border-top: 1px solid var(--cr-line); }
.dayhead .quiet, .dayhead .shape { font-family: var(--font-body); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--color-text); }
.next .quiet { font-weight: 600; color: var(--color-text); }
.dayhead .dayalert { font-family: var(--font-body); font-weight: 500; letter-spacing: 0; text-transform: none; }   /* a system alert is about this day */

/* saved stops */
.section.saved .edit { margin-left: auto; min-height: 36px; padding: 0 8px; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.backbar .save { margin-left: auto; font-size: 1rem; gap: 6px; }
/* Share: the phone's own glyph and the word, quiet, beside Save or across from Back */
.sharebtn { margin-left: auto; font-size: 0.9375rem; gap: 6px; color: var(--cr-muted); padding-inline: 8px; }
.sharebtn + .save { margin-left: 0; }
.sharedlg { width: min(340px, calc(100vw - 32px)); padding: 16px; border: 0; border-radius: 12px; background: var(--color-bg); color: var(--color-text); box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.sharedlg::backdrop { background: rgba(0,0,0,.5); }
.sharedlg .sd-top { display: flex; align-items: flex-start; gap: 8px; }
.sharedlg h2 { flex: 1; margin: 6px 0 0; font-size: 1.125rem; font-weight: 600; line-height: 1.25; }
.sharedlg .sd-close { margin: -4px -8px 0 0; color: var(--cr-muted); }
.sharedlg .sd-qr { margin: 14px auto 0; width: 220px; max-width: 100%; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #fff; }
.sharedlg .sd-qr svg { display: block; width: 100%; height: 100%; }
.sharedlg .sd-lines { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; font-size: 0.875rem; color: var(--cr-muted); text-align: center; }
.sharedlg .sd-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.sharedlg .sd-acts .btn { justify-content: center; gap: 8px; min-height: 48px; }
.placestar { flex: none; margin-left: auto; font-size: 0.9375rem; gap: 6px; padding-inline: 8px; color: var(--cr-muted); }
.placestar[aria-pressed="true"] { color: var(--color-accent-700); }
.placestar.bare span { display: none; }   /* beside a title with Share: the star alone, named in its label */
.placestar + .sharebtn { margin-left: 0; }
.head .name:has(.placestar) { display: flex; align-items: center; gap: 8px; }
.placedlg .pd-where { margin: 4px 0 0; color: var(--cr-muted); font-size: 0.875rem; }
.placedlg .pd-names { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.placedlg .pd-name { justify-content: space-between; min-height: 48px; }
.placedlg .pd-name small { font-size: 0.75rem; font-weight: 400; opacity: .8; }
.placedlg .pd-other { display: flex; gap: 8px; margin-top: 12px; }
.placedlg .pd-other .input { flex: 1; min-width: 0; padding-left: 12px; }
.placedlg .pd-forget { margin-top: 10px; width: 100%; justify-content: center; }
.placedlg .pd-note { padding: 10px 0 0; text-align: center; }
.sharedlg .sd-also { width: 100%; justify-content: center; margin-top: 6px; }
.placerow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--cr-line); }
.placerow .mid { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.placerow .name { font-weight: 500; }
.placerow .sub { font-size: 0.8438rem; color: var(--cr-muted); }
.placerow > svg { color: var(--cr-muted); flex: none; }
.placelist .section .edit { font-size: 0.9375rem; }
.placelist .section > span { display: inline-flex; align-items: center; gap: 8px; }
.placeedit { display: none; align-items: center; border-bottom: 1px solid var(--cr-line); }
.placeedit .placerow { flex: 1; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.placeedit .note { font-size: 0.8125rem; color: var(--color-accent-700); }
.placeedit .btn-icon { color: var(--cr-muted); margin-right: 8px; }
.placelist.editing .placeitem > a { display: none; }
.placelist.editing .placeedit { display: flex; }
.shareblock { display: flex; gap: 16px; align-items: center; margin: 16px; padding: 14px; border: 1px solid var(--cr-line); border-radius: 12px; }
.shareblock .sb-qr { flex: none; width: 112px; height: 112px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #fff; cursor: zoom-in; }
.shareblock .sb-qr svg { display: block; width: 100%; height: 100%; }
.shareblock .sb-side { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 0.875rem; color: var(--cr-muted); }
.shareblock .sb-side b { font-size: 1rem; color: var(--color-text); font-weight: 600; }
.shareblock .sb-send { align-self: flex-start; margin-top: 8px; gap: 6px; min-height: 40px; }
.sharedlg .sd-url { width: 100%; margin-top: 10px; font-size: 0.8125rem; padding: 8px; }
.backbar .save[aria-pressed="true"] svg { color: var(--color-accent-700); }
.editrow { cursor: default; }
.editrow:hover { background: none; }
.row-actions { flex-direction: row !important; gap: 6px !important; }
.row-actions .btn-icon { width: 40px; min-height: 40px; }

/* install: Chrome's card, Safari's sheet */
/* the app's own icon, as the home screen will show it */
.cr { width: 44px; height: 44px; flex: none; display: block; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--cr-line), 0 0 0 1px var(--cr-line); }
.cr.big { width: 56px; height: 56px; border-radius: 12px; }
.install { margin: 4px 16px 10px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.install .who { display: flex; gap: 12px; align-items: center; }
.install .col, .ios-install .col { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.install .title { font-family: var(--font-heading); font-weight: 600; font-size: 1.3125rem; line-height: 1.05; }
.install .sub { font-size: 0.875rem; line-height: 1.35; color: var(--cr-muted); }
.install .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.install .acts .btn { min-height: 44px; }
.install .btn-primary { font-family: var(--font-body); font-size: 1rem; font-weight: 600; }
.ios-install .scrim { background: rgba(29,31,32,.38); }
.ios-install .sheet { padding: 20px 16px calc(34px + env(safe-area-inset-bottom)); gap: 14px; border-radius: 0; }
.ios-install .who { display: flex; gap: 14px; align-items: flex-start; }
.ios-install .col { gap: 4px; }
.ios-install .title { font-family: var(--font-heading); font-weight: 600; font-size: 1.625rem; line-height: 1.05; }
.ios-install .sub { font-size: 0.9375rem; line-height: 1.4; color: var(--cr-muted); text-wrap: pretty; }
.ios-install .who .btn-icon { margin: -10px -8px 0 0; color: var(--cr-muted); }
.ios-install .steps { display: flex; flex-direction: column; border-bottom: 1px solid var(--cr-line); }
.ios-install .step { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 52px; border-top: 1px solid var(--cr-line); font-size: 1rem; line-height: 1.3; }
.ios-install .step b { font-weight: 600; }
.ios-install .step .n { font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; color: var(--color-accent-700); }
.ios-install .step .ic { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--cr-line); color: var(--color-accent-700); }
@media (min-width: 840px) { .ios-install .sheet { max-width: 480px; left: 50%; right: auto; transform: translateX(-50%); } }

/* the USU campus shuttle: live rows, load meters, chips in its own colours */
.uchip { display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; border-radius: 5px; font-family: var(--font-heading); font-weight: 600; line-height: 1; letter-spacing: .01em; white-space: nowrap; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.usq { width: 12px; height: 12px; flex: none; margin: 0 12px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.urow .mid { gap: 6px; }
.urow.off .mid .sub { color: var(--cr-muted); }
.liveline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.meter { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.meter i { width: 10px; height: 6px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 35%, transparent); }
.meter i.on { background: var(--color-text); box-shadow: none; }
.meter.wide i { width: 18px; }
/* a time the feed has moved: the timetable's crossed out, small, beside the estimate */
.wasline { font-size: 0.8438rem; color: var(--cr-muted); white-space: nowrap; }   /* 'Scheduled 3:15 PM', the time struck */
.wasline s { text-decoration: line-through; }
.whent { display: inline-flex; align-items: baseline; gap: 6px; }
/* a time from the feed, not the timetable: always blue, so a rider can tell an estimate at a glance */
.est, .t.est, .giant.est { color: var(--color-accent-700); }
.was { text-decoration: line-through; color: var(--cr-muted); font-family: var(--font-heading); font-weight: 500; white-space: nowrap; margin-right: 6px; }
.whent .was { margin-right: 0; }
/* the night's end on a departure: 'Last full run', 'Last run (partial, to …)' */
.lastrun { font-size: 0.6562rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.35; color: var(--color-text); }
.livetag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.6562rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-700); white-space: nowrap; }
/* a plain dot: a halo pressed against it read as one blur, and a ring clear of it as a radio button picked */
.livetag i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex: none; }
/* Still: it pulsed, a box-shadow animation that repainted every frame for every tag on screen, twenty and more on a
   route's sheet, and kept a phone's processor a quarter busy doing nothing. Only the finger moves things. */
.nobus { margin: 4px 16px 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.nobus .title { font-family: var(--font-heading); font-weight: 600; font-size: 1.625rem; line-height: 1.05; }
.nobus .sub { font-size: 0.9375rem; line-height: 1.45; color: var(--cr-muted); text-wrap: pretty; }
.bus { cursor: pointer; }
.bus-marker { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: var(--bus-color); color: var(--bus-ink, #fff); box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; transform: scale(var(--bus-scale, 1)); }
.bus-marker svg { width: 14px; height: 14px; }
.bus.on .bus-marker { box-shadow: 0 0 0 3px var(--color-accent); }
.bus.dim .bus-marker { opacity: .4; }
.bus.away { display: none; }   /* on a way drawn, a bus not its own */
.bus.stacked { visibility: hidden; pointer-events: none; }   /* another at its spot shows for it, with how many (map.js stackBuses) */
/* upright on the screen, the marker turned to the bus's course (--course) on a map turned to --map-bearing (map.js) */
.bus-n { position: absolute; left: 50%; top: 50%; transform-origin: 0 0; transform: rotate(calc(var(--map-bearing, 0deg) - var(--course, 0deg))) translate(-21px, -19px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--color-text); color: var(--color-bg); font: 700 0.6875rem/16px var(--font-heading); text-align: center; box-shadow: 0 0 0 2px var(--color-bg); pointer-events: none; }
#map.bus-small .bus:not(.lit):not(.on) .bus-n { display: none; }   /* far off, but on a bus drawn full size there (lit, picked) */
.alsohere { display: flex; gap: 6px; align-items: baseline; font-size: 0.875rem; color: var(--cr-muted); }
.alsohere a { color: var(--color-accent-700); }
/* zoomed out: the circle goes, the arrow takes the route's colour, and nothing is tappable */
#map.bus-small .bus { pointer-events: none; }
#map.bus-small .bus-marker { border-color: transparent; background: transparent; box-shadow: none; }
#map.bus-small .bus-marker svg { width: 26px; height: 26px; }
/* zoomed out, an arrow in its route's colour sits on its route's line: a solid ring in the map's ink (white by
   night, near-black by day), drawn under the arrow so the shape stays whole, with a hair of the paper colour
   outside it, so it reads on its own line and on the roads alike */
#map.bus-small .bus-marker svg { overflow: visible; filter: drop-shadow(0 0 1px var(--color-bg)); }
/* Far off, a bus is a hollow arrow in its route's colour with the paper showing through: it reads on its own
   line, which a solid arrow of the same colour didn't. The Aggie Shuttle's is told from Connect's at a glance
   whatever its colour (its reds and oranges are Connect's too, on the same streets) by its shape, an A (map.js
   ARROW_A): far off drawn in strokes of its colour, close in a solid A on a marker squared where Connect's is round. */
#map.bus-small .bus-marker path { fill: var(--color-bg); stroke: var(--bus-color); stroke-width: 3.5; stroke-linejoin: round; }
#map.bus-small .bus.on .bus-marker path { stroke: var(--color-accent); }
/* A Connect bus close in: its route's number upright in its ring, in the ink its badge would have on that colour
   (ink.js textOn), and a notch on the ring's edge the way it heads, the arrow's work. Far off the hollow arrow, but for a
   bus lit or picked, full size anywhere. Off duty (grey) or a route named in words, never .num: the arrow. */
.bus-num, .bus-head { display: none; }
#map:not(.bus-small) .bus.num .bus-marker > svg, #map .bus.num:is(.lit, .on) .bus-marker > svg { display: none; }
#map:not(.bus-small) .bus.num :is(.bus-num, .bus-head), #map .bus.num:is(.lit, .on) :is(.bus-num, .bus-head) { display: block; }
/* px, not rem: it lives in a ring of so many px. Turned back by the bus's turn on the screen (as .bus-n) */
.bus-num { font: 600 14px/1 var(--font-heading); font-variant-numeric: tabular-nums; color: var(--num-ink); transform: rotate(calc(var(--map-bearing, 0deg) - var(--course, 0deg))); }
.bus-head { position: absolute; left: 50%; top: 0; width: 12px; height: 9px; transform: translate(-50%, -88%); background: #fff; clip-path: polygon(50% 0, 100% 100%, 0 100%); pointer-events: none; }
.bus-head::after { content: ''; position: absolute; inset: 30% 25% 17%; background: var(--bus-color); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

.bus.shuttle .bus-marker { border-radius: 6px; }
/* a bus on the lit route keeps its badge and its tap at any zoom, so tapping a stop finds its buses */
#map.bus-small .bus.lit, #map.bus-small .bus.on { pointer-events: auto; }
#map.bus-small .bus.lit .bus-marker, #map.bus-small .bus.on .bus-marker { transform: none; border-color: #fff; background: var(--bus-color); box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3); }
#map.bus-small .bus.on .bus-marker { box-shadow: 0 0 0 3px var(--color-accent); }
#map.bus-small .bus.lit .bus-marker svg, #map.bus-small .bus.on .bus-marker svg { width: 14px; height: 14px; }
#map.bus-small .bus.lit .bus-marker path, #map.bus-small .bus.on .bus-marker path { fill: var(--bus-ink, #fff); stroke: none; }
/* the Aggie Shuttle's A (map.js ARROW_A): solid on the full marker (its square), in strokes far off (its legs a stroke
   wide, there's no hollow to it). A shuttle bus is full-size where the shuttle's lines are drawn (near campus from
   13.5, or asked for), charters too, and in strokes elsewhere, as every bus is below Connect's zoom (bus-small): a
   full marker with no line under it read as a bus off its route. A lit or picked one keeps its full marker anywhere,
   as Connect's do. Tappable wherever Connect's are: the charters had kept their squares only because an arrow couldn't
   be tapped, and the loops' buses squared up a zoom after their lines, two rules where one does. */
.bus-marker path.as { display: none; }
#map.bus-small .bus.shuttle .bus-marker path.af, #map:not(.u-lines) .bus.shuttle .bus-marker path.af { display: none; }
#map.bus-small .bus.shuttle .bus-marker path.as, #map:not(.u-lines) .bus.shuttle .bus-marker path.as { display: inline; fill: var(--color-bg); stroke: var(--bus-color); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#map:not(.u-lines) .bus.shuttle .bus-marker { border-color: transparent; background: transparent; box-shadow: none; }
#map:not(.u-lines) .bus.shuttle .bus-marker svg { width: 26px; height: 26px; overflow: visible; filter: drop-shadow(0 0 1px var(--color-bg)); }
/* a black loop by night (map.js uedge): its A's strokes far off haloed in near-white, not the paper's dark */
#map.bus-small .bus.shuttle.edged .bus-marker svg, #map:not(.u-lines) .bus.shuttle.edged .bus-marker svg { filter: drop-shadow(0 0 1px #e8eaed) drop-shadow(0 0 1px #e8eaed); }
#map.bus-small .bus.shuttle.edged .bus-marker path.as, #map:not(.u-lines) .bus.shuttle.edged .bus-marker path.as { fill: #e8eaed; }   /* and inside it: an A outlined, its middle the outline's white, not the dark paper */
#map .bus.shuttle.lit .bus-marker path.af, #map .bus.shuttle.on .bus-marker path.af { display: inline; }
#map .bus.shuttle.lit .bus-marker path.as, #map .bus.shuttle.on .bus-marker path.as { display: none; }
#map:not(.u-lines) .bus.shuttle.lit .bus-marker, #map:not(.u-lines) .bus.shuttle.on .bus-marker { transform: none; border-color: #fff; background: var(--bus-color); box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.3); }
#map:not(.u-lines) .bus.shuttle.on .bus-marker { box-shadow: 0 0 0 3px var(--color-accent); }
#map:not(.u-lines) .bus.shuttle.lit .bus-marker svg, #map:not(.u-lines) .bus.shuttle.on .bus-marker svg { width: 14px; height: 14px; }
/* thumbs: bigger buses, zoom buttons and satellite toggle on touch screens; the mouse keeps the small ones */
@media (pointer: coarse) {
  .bus-marker { width: 30px; height: 30px; }
  .bus-marker svg { width: 18px; height: 18px; }
  #map.bus-small .bus-marker svg { width: 26px; height: 26px; }
  #map.bus-small .bus.lit .bus-marker svg, #map.bus-small .bus.on .bus-marker svg { width: 18px; height: 18px; }
  .bus-num { font-size: 18px; }
  .bus-head { width: 14px; height: 10px; }
  #map .maplibregl-ctrl-group button { width: 46px; height: 46px; }
}
#map .maplibregl-ctrl-group button.satbtn, #map .maplibregl-ctrl-group button.nearbtn { display: flex; align-items: center; justify-content: center; padding: 0; color: var(--color-text); }
.satbtn svg, .nearbtn svg { display: block; }
#map .northctl { display: none; }
#map .northctl.on { display: block; }
#map .maplibregl-ctrl-group button.northbtn { display: flex; align-items: center; justify-content: center; padding: 0; color: var(--color-accent-700); }
.northbtn svg { display: block; transition: transform .2s; }
.satbtn[aria-pressed="true"] { color: var(--color-accent-700); background: var(--color-accent-100); }
.fine.offhours { padding-top: 6px; }
.buscard .hours { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.8438rem; color: var(--cr-muted); }
.buscard .hours b { color: var(--color-text); font-weight: 600; }
.buscard .head { gap: 10px; }
.buscard .top { display: flex; justify-content: space-between; align-items: center; }
.buscard .who { display: flex; align-items: center; gap: 10px; }
.buscard .who .mid { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.buscard .who .name { font-family: var(--font-heading); font-weight: 600; font-size: 1.75rem; line-height: 1.05; }
.buscard .who .nth { font-size: 0.8438rem; color: var(--cr-muted); }
.buscard .load { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--cr-muted); }
.nextstops { border-top: 1px solid var(--cr-line); padding: 6px 0 10px; position: relative; }
.nextstops .line { position: absolute; left: 24px; top: 28px; bottom: 32px; width: 2px; }
.nextstops .ns { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 10px; align-items: center; min-height: 46px; padding: 0 16px; color: inherit; text-decoration: none; }
.nextstops .ns .dot { display: flex; justify-content: center; }
.nextstops .ns .dot i { width: 10px; height: 10px; box-shadow: inset 0 0 0 1.5px var(--color-text); }
.nextstops .ns.here .dot i { box-shadow: none; }
.nextstops .ns .nm { font-size: 0.9688rem; font-weight: 500; }
.nextstops .ns.here .nm { font-weight: 600; }
.nextstops .ns .when { font-size: 0.875rem; color: var(--cr-muted); white-space: nowrap; }

/* sheets — the permission ask, the map's stop card */
.scrim { position: absolute; inset: 0; background: var(--cr-scrim); z-index: 700; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 710; background: var(--color-bg); padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-lg); }
.sheet .grip { width: 40px; height: 4px; border-radius: 2px; background: var(--cr-line); margin: 0 auto 6px; }
.sheet .title { display: flex; align-items: center; gap: 10px; color: var(--color-accent-700); }
.sheet .title h2 { font-size: 1.625rem; color: var(--color-text); }
.sheet p { font-size: 1rem; line-height: 1.5; }
.sheet p.sub { font-size: 0.9062rem; color: var(--cr-muted); }
.sheet p.fine { padding: 0; font-size: 0.8125rem; }

/* ── map ───────────────────────────────────────────────────────────────── */
#map { position: absolute; inset: 0; }
#map canvas { outline: none; }
@media (max-width: 839px) { #map .maplibregl-ctrl-top-right { top: 60px; } }   /* a phone's compass, under the search bar */
.mapbar { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; gap: 8px; z-index: 450; }
.mapbar .search { flex: 1; }
.mapbar .input { height: 50px; font-size: 1rem; padding-left: 44px; box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--color-text) 30%, transparent); }
.mapbar .search .lead { left: 13px; }
.mapcard { position: absolute; left: 0; right: 0; bottom: 0; z-index: 450; background: var(--color-bg); border-top: 1px solid var(--cr-line); box-shadow: var(--shadow-lg); max-height: 70%; overflow-y: auto; overscroll-behavior: contain; transform: translateY(calc(100% + 40px)); visibility: hidden; pointer-events: none; }
/* shut, it goes all the way: past the gap a wide screen leaves under it, and its shadow with it */
.mapcard.open { transform: none; visibility: visible; pointer-events: auto; }
/* swiped down once: the head alone, the map showing through; the card's rows and buttons wait under it */
.mapcard.peek { max-height: var(--peek, 110px); overflow: hidden; }
/* the Center's board on a phone: the map's height, an empty band over the bays (the map's to touch) and the board
   under it, all one scroll, so down slides the board up over the map and back at the top it rests where it was */
.mapcard.open:has(> .hubsheet) { top: var(--hub-top, 0px); max-height: none; padding-top: var(--hub-room, 0px); background: transparent; border-top: 0; box-shadow: none; pointer-events: none; scrollbar-width: none; }
.mapcard.open:has(> .hubsheet)::-webkit-scrollbar { display: none; }
.mapcard.open:has(> .hubsheet) > * { pointer-events: auto; display: flow-root; }
/* only while a board is in it: a card put in its place (a spot's long press at the Center) scrolls as any card does */
.mapcard.hubfold:is(:has(> .hubsheet), :has(> .pagesheet), :has(> .routesheet)) { overflow-y: hidden; }
/* the board's room a registered length, so a fold eases it: its padding and the ground painted from it move as one */
@property --hub-room { syntax: '<length>'; inherits: true; initial-value: 0px; }
.mapcard.hubslide { transition: --hub-room .28s cubic-bezier(.2, .7, .2, 1); }   /* folded to its countdown: a swipe up or a tap opens it, it doesn't scroll */   /* margins kept inside, no gap that's the map's */
/* the board's ground, from the band's end down, painted on the card's scrolled content so it moves with the board */
.mapcard.open:has(> .hubsheet) { background: linear-gradient(transparent var(--hub-room, 0px), var(--color-bg) var(--hub-room, 0px)) local; }
.mapcard.open:has(> .hubsheet) > .grip { border-radius: 0; border-top: 1px solid var(--cr-line); box-shadow: 0 -6px 18px rgba(0,0,0,.18); cursor: default; }
/* a stop's page and a route's on a phone, the same way (map.js sheetPlace): resting at its opening height, one scroll over the map */
@media (max-width: 839px) {
  .mapcard.open:has(> .pagesheet), .mapcard.open:has(> .routesheet) { top: var(--hub-top, 0px); max-height: none; padding-top: var(--hub-room, 0px); background: linear-gradient(transparent var(--hub-room, 0px), var(--color-bg) var(--hub-room, 0px)) local; border-top: 0; box-shadow: none; pointer-events: none; scrollbar-width: none; }
  .mapcard.open:has(> .pagesheet)::-webkit-scrollbar, .mapcard.open:has(> .routesheet)::-webkit-scrollbar { display: none; }
  .mapcard.open:has(> .pagesheet) > *, .mapcard.open:has(> .routesheet) > * { pointer-events: auto; display: flow-root; }
  .mapcard.open:has(> .pagesheet) > .grip, .mapcard.open:has(> .routesheet) > .grip { border-radius: 0; border-top: 1px solid var(--cr-line); box-shadow: 0 -6px 18px rgba(0,0,0,.18); cursor: default; }
  .mapcard.open:has(> .pagesheet) > .pagesheet { background: var(--color-bg); min-height: calc(100% - var(--hub-room, 0px) - 24px); }
  .mapcard.open:has(> .routesheet) > .head, .mapcard.open:has(> .routesheet) > .routesheet { background: var(--color-bg); }
  .mapcard.open:has(> .routesheet) > .routesheet { min-height: calc(100% - var(--hub-room, 0px) - 160px); }
  /* its head held under the search bar as the list scrolls up under it: a sticky edge is inside the board's band, so
     pulled up by it */
  .mapcard.open:has(> .routesheet) > .routehead { top: calc(-1 * var(--hub-room, 0px)); }
}
/* the bar is 40 by 4; the handle around it is the whole width and tall enough for a thumb, and the browser never gets the drag */
.mapcard .grip { display: block; width: 100%; height: 24px; padding: 10px calc(50% - 20px); box-sizing: border-box; background: var(--cr-line); background-clip: content-box; border-radius: 2px; touch-action: none; cursor: grab; }
.mapcard .head { padding: 6px 16px 12px; gap: 6px; }
.mapcard .head .name { display: flex; align-items: center; gap: 10px; }
.mapcard .head .name > span:first-child { font-family: var(--font-heading); font-weight: 600; font-size: 1.75rem; line-height: 1.05; flex: 1; }
.mapcard .open { padding: 12px 16px 14px; display: flex; gap: 8px; }
.mapcard .head .muted { font-size: 0.8438rem; line-height: 1.4; }
.mapcard .open .btn-primary { flex: 1; }
.mapcard .open .btn-secondary { flex: 0 0 auto; padding-inline: 16px; }
/* over the card (450, and after it in the page): a board or a stop's or route's sheet raised reaches up under the search bar */
.mapresults { position: absolute; top: 68px; left: 12px; right: 12px; z-index: 460; background: var(--color-bg); box-shadow: var(--shadow-md); max-height: 72%; overflow-y: auto; overscroll-behavior: contain; }
.mapresults .stoprow { min-height: 56px; padding: 8px 14px; }
.mapresults a.section { color: inherit; text-decoration: none; }   /* a place's whole heading shows it on the map */
.mapnotice { position: absolute; left: 12px; right: 12px; top: 68px; z-index: 440; }
.mapnotice .callout { margin: 0; }
.mapnotice .notice-min { grid-template-columns: auto minmax(0,1fr) auto; align-items: center; padding: 8px 6px 8px 12px; gap: 8px; font-size: 0.875rem; }
.notice-min .nm-text { all: unset; cursor: pointer; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notice-min.open .nm-text { white-space: normal; }
.notice-min .nm-text .sub { display: block; }
.notice-min .nm-x { all: unset; cursor: pointer; display: grid; place-items: center; width: 32px; height: 32px; opacity: .75; }
.notice-min :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.maplibregl-ctrl-attrib { font: 0.625rem var(--font-body) !important; background: color-mix(in srgb, var(--color-bg) 80%, transparent) !important; color: var(--cr-muted) !important; }
.maplibregl-ctrl-attrib a { color: inherit !important; }
.maplibregl-ctrl-group { background: var(--color-bg) !important; box-shadow: var(--shadow-md) !important; border-radius: var(--radius-md) !important; }
.maplibregl-ctrl-group button + button { border-top-color: var(--cr-line) !important; }
:root[data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
.stop-marker { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--color-bg); box-shadow: 0 0 0 1px rgba(0,0,0,.25); cursor: pointer; }
.stop-marker.on { width: 20px; height: 20px; border-width: 3px; box-shadow: 0 0 0 2px var(--color-accent); }
.spot-marker { width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); border: 2px solid var(--color-bg); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.me-marker { pointer-events: none; }   /* the map's under it: no button of its own */
.me-marker { width: 16px; height: 16px; border-radius: 50%; background: var(--color-accent); border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 0 0 8px color-mix(in srgb, var(--color-accent) 25%, transparent); }

/* expanded (840px up, as app/wide.js): the map's own bar hides, the header search serves; the map's buttons stack top right */
@media (min-width: 840px) {
  .mapbar { display: none; }
  .mapresults, .mapnotice { top: 12px; }
  .mapbar, .mapresults, .mapnotice { max-width: 480px; }
  .mapcard { max-width: 480px; left: auto; right: 16px; bottom: 16px; border: 1px solid var(--cr-line); }
}

/* ---- directions: the ways to a stop, each a card of legs ---- */
.golink { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: 0.875rem; font-weight: 500; color: var(--color-accent-700); text-decoration: none; }
@media (hover: hover) { .golink:hover { text-decoration: underline; text-underline-offset: 3px; } }
.golinks { display: flex; gap: 18px; flex-wrap: wrap; }
/* a timed stop (a timepoint): the timetable is kept to here, an early bus waiting for its time */
.tpmark { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 0.75rem; font-weight: 500; color: var(--cr-muted); white-space: nowrap; vertical-align: 1px; }
.run-n .tpmark { margin-left: 0; display: flex; }
.croute.tp .c-t { font-weight: 700; }
.tpline { display: flex; align-items: flex-start; gap: 6px; font-size: 0.8125rem; color: var(--cr-muted); line-height: 1.35; }
.tpline svg { margin-top: 2px; }
/* no bus there: POOL where it goes, and the phone's maps for the rest */
.nobus-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.nobus-maps { padding: 4px 16px 16px; font-size: 0.9375rem; }
.nobus-maps a { color: var(--color-accent-700); }
.fromacts { display: flex; flex-wrap: wrap; gap: 10px; margin-left: -4px; }   /* the words in line with the button above */
.fromacts[hidden] { display: none; }
.fromacts .btn-ghost { font-size: 0.875rem; min-height: 36px; }
/* the directions' ways as rows: leave → arrive, when, and the legs a badge and a word each; the one drawn marked */
.jrows { border-top: 1px solid var(--cr-line); }
.jrow { display: flex; flex-direction: column; gap: 4px; padding: 10px 16px; border-bottom: 1px solid var(--cr-line); cursor: pointer; }
.jrow:hover { background: var(--cr-hover); }
.jrow:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.jrow.picked { background: var(--color-accent-100); box-shadow: inset 4px 0 0 var(--color-accent); }
.jrow .jt { display: flex; align-items: baseline; gap: 6px; }
.jrow .jt .to { color: var(--cr-muted); }
.jrow .jt .rel { margin-left: auto; font-size: 0.8438rem; color: var(--cr-muted); }
.jrow .jlegs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 0.8438rem; color: var(--cr-muted); }
.jrow .jleg { display: inline-flex; align-items: center; gap: 4px; }
.jrow .jleg svg { color: var(--color-accent-700); }
.jrow .sep { color: var(--cr-line-strong, var(--cr-muted)); }
.leg .mid .name .badge { vertical-align: -3px; margin-left: 2px; }
/* on a phone the sheet is the map's card, and holds its height from way to way (--jh), so the rows stay put */
.mapcard:has(> .journeysheet):not(.peek) { height: var(--jh, auto); }
/* a stop's page as the map's sheet: opened out, it's the page, the map a strip above it */
@media (min-width: 840px) { .mapcard:has(> .pagesheet):not(.peek) { max-height: calc(100% - 72px); } }   /* a phone's is a board (map.js sheetPlace) */
.mapcard > .pagesheet .backbar { padding-top: 0; }
/* in the card, the head in one line: Back as its arrow beside where to; the page's eyebrow and town left out */
.mapcard .gohead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; }
.mapcard .gohead > :not(.backbar):not(.head) { grid-column: 1 / -1; }
.mapcard .gohead .backbar { display: contents; }   /* its two buttons either side of the title, not above it */
.mapcard .gohead .backbar > .btn:first-child { grid-column: 1; grid-row: 1; align-self: start; margin-left: 4px; font-size: 0; gap: 0; min-width: 40px; padding-inline: 8px; }
.mapcard .gohead .head { grid-column: 2; grid-row: 1; }
.mapcard .gohead .placestar { grid-column: 3; grid-row: 1; align-self: start; }
.mapcard .gohead .sharebtn { grid-column: 4; grid-row: 1; align-self: start; margin-right: 8px; }
.mapcard .gohead .head.tight { padding: 2px 16px 8px 0; }
.mapcard .gohead .head .eyebrow, .mapcard .gohead .head .muted { display: none; }
.mapcard .gohead .head.tight h1 { font-size: 1.375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.journeysheet { padding: 8px 16px 8px; }
.legs { display: flex; flex-direction: column; position: relative; }
.leg { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; padding: 8px 0; }
.leg > svg, .leg > .badge { position: relative; justify-self: center; background: var(--color-bg); }
.leg > svg { color: var(--color-accent-700); padding: 4px 0; box-sizing: content-box; }
/* a shuttle loop's chip carries its name ('Evening', '8th East'): squeezed into the badge's square, on the line */
.leg > .uchip { position: relative; justify-self: center; width: 36px; min-width: 0 !important; padding: 0 2px; box-sizing: border-box; font-size: 0.5938rem !important; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.05; overflow: hidden; }
.leg .mid { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 4px; }
.leg .mid .name { font-size: 0.9688rem; font-weight: 500; line-height: 1.25; }
.leg .mid .sub { font-size: 0.8438rem; color: var(--cr-muted); line-height: 1.35; }
.leg .mid .sub a { color: inherit; }
.leg .mid .sub b { color: var(--color-text); font-weight: 600; }
.leg .mid .sub .livetag { margin-left: 6px; }
.leg.change .mid .name { font-size: 0.9062rem; }
.pickfrom { padding-top: 12px; }

/* ---- the landing: the watchface on the phone ---- */
.land { min-height: 100%; display: flex; flex-direction: column; }
.land-top { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 0 16px; min-height: 56px; }
.land-top .wordmark { font-family: var(--font-heading); font-weight: 600; font-size: 1.375rem; letter-spacing: -.01em; }
.land-right { display: flex; align-items: center; gap: 4px; }
.land-date { font-family: var(--font-heading); font-weight: 600; font-size: 1.125rem; letter-spacing: .08em; text-transform: uppercase; padding-right: 8px; }
.land-top .btn-icon { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text); }
.land-top .btn-icon[aria-pressed="true"] { color: var(--color-accent-700); background: var(--color-accent-100); }
.land-alert { margin-top: 10px; }
/* the hero: the right-hand rule from the watchface, one answer set large */
.land-hub { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 12px 16px; border-top: 1px solid var(--cr-line); border-bottom: 1px solid var(--cr-line); color: inherit; text-decoration: none; }
.land-hub > svg:first-child { color: var(--color-accent-700); flex: none; }
.land-hub > svg:last-child { color: var(--cr-muted); flex: none; }
.land-hub .col { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; font-weight: 500; }
.land-hub .sub { font-size: 0.8438rem; font-weight: 400; color: var(--cr-muted); }
.land-hub .sub b { color: var(--color-text); font-weight: 600; }
.land-usu { margin-top: -1px; }   /* one rule between it and the Center's line */
.land-usu .udots { flex: none; width: 18px; height: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; place-items: center; }
.land-usu .udots i { width: 100%; aspect-ratio: 1; border-radius: 50%; }
.land > .ask { padding-top: 14px; }
.land-purpose { margin: 14px 16px 0; font: 600 1.25rem/1.3 var(--font-heading); text-wrap: pretty; }   /* a first visit: what it is, in a line */   /* where to: first on a first visit, under the rider's stop and the stops beside it after */
.hero { display: flex; flex-direction: column; gap: 14px; margin: 18px 12px 0 16px; padding-right: 16px; border-right: 2px solid var(--color-text); color: inherit; text-decoration: none; }
.hero .eye { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hero .eye .eyebrow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-main { display: flex; flex-direction: column; gap: 14px; color: inherit; text-decoration: none; }
.hero .stopname { font-size: 1.25rem; font-weight: 500; line-height: 1.2; }
.giant { display: flex; align-items: center; font-family: var(--font-heading); font-weight: 600; font-size: clamp(100px, 40vw, 170px); line-height: .8; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin: 6px 0 0 -4px; }
.giant.long { font-size: clamp(90px, 36vw, 160px); }   /* 10:30 AM: two-digit hours and the meridiem, a size down to fit a phone */
.giant .ap { align-self: flex-end; font-size: .26em; line-height: 1; margin: 0 0 .12em .12em; letter-spacing: .02em; }
.giant .colon { display: flex; flex-direction: column; gap: .2em; margin: 0 .06em; }
.giant .colon i { display: block; width: .12em; height: .12em; background: var(--color-accent); }
.giant.count { align-items: baseline; gap: .06em; }
.giant.count .unit { font-size: .38em; color: var(--color-accent); letter-spacing: 0; }
.hero .who { display: flex; align-items: center; gap: 12px; }
.hero .who .mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hero .who .dest { font-size: 1rem; font-weight: 500; line-height: 1.25; }
.hero .who .sub, .hero .sub { font-size: 0.8438rem; color: var(--cr-muted); }
.hero .who .rt { font-family: var(--font-heading); font-weight: 600; font-size: 2.125rem; line-height: 1; color: var(--color-accent-700); white-space: nowrap; }
.hero .who .side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hero .then { display: flex; align-items: baseline; gap: 18px; padding-top: 14px; border-top: 1px solid var(--cr-line); }
.hero .then .eyebrow.muted { color: var(--cr-muted); }
.hero .then .day, .land-row .day { font-family: var(--font-body); font-size: 0.7188rem; color: var(--cr-muted); margin-left: 4px; }
.hero .loops { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 14px; border-top: 1px solid var(--cr-line); }
.hero .loops .loop { display: flex; align-items: center; gap: 8px; }
.hero .loops .col { display: flex; flex-direction: column; gap: 2px; }
.hero-none { font-family: var(--font-heading); font-weight: 600; font-size: 2.75rem; line-height: 1; display: flex; flex-direction: column; gap: 8px; padding: 10px 0 4px; }
.hero-none .sub { font-family: var(--font-body); font-weight: 400; font-size: 0.875rem; }
/* The big stop's next bus on its way (home.js comingLine): a route's line in small (its rail, rings and bus dot, the
   route page's own), hung from the route's badge above it, the bus at the top and this stop at the foot. Rows a size
   down from the route page's, without their rules; the rail under the badge's middle and the words under its route's. */
.hero .homeline { display: block; flex: none; padding: 0; border-top: 0; margin-top: -4px; color: inherit; text-decoration: none; }
.hero .rs-list.line.homeline > * { position: relative; min-height: 32px; padding: 2px 0 2px 56px; border-bottom: 0; background-position: 20.5px 0; }
.hero .rs-list.line.homeline > :first-child { background-position: 20.5px 100%; }
.hero .rs-list.line.homeline > :last-child { background-position: 20.5px 0; }
.hero .homeline .c-ring, .hero .rs-list.line.homeline > .busrow > i { left: 22px; }
/* a bus at its stop: its words above the line, the rail starting at the stop's filled ring */
.hero .rs-list.line.homeline > .busrow.at { background-image: none; }
.hero .rs-list.line.homeline > .busrow.at + * { background-size: 3px 50%; background-position: 20.5px 100%; }
.hero .rs-list.line.homeline > .busrow.at + :last-child { background-image: none; }
.hero .rs-list.line.homeline > .busrow { gap: 8px; min-height: 32px; font-size: 0.875rem; }
.hero .homeline .croute { gap: 8px; }
.hero .homeline .c-t { width: 62px; }
.hero .homeline .c-n { font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero .homeline .croute.here { background-color: transparent; box-shadow: none; }
.hero .homeline .croute.here .c-n { font-weight: 600; }
.hero .homeline .rs-foldsum { display: flex; align-items: center; min-height: 26px; font-size: 0.8125rem; color: var(--cr-muted); }
.hero .homeline .rs-foldsum::before { content: ""; position: absolute; left: 22px; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--rc); background: var(--color-bg); }
.hero-then { color: inherit; text-decoration: none; }
/* nothing saved yet: what Save does, a line under the big stop (home.js) */
.land-hint { display: flex; align-items: flex-start; gap: 8px; margin: 14px 28px 6px 16px; font-size: 0.8125rem; line-height: 1.4; color: var(--cr-muted); text-wrap: pretty; }
.land-hint svg { flex: none; margin-top: 1px; color: var(--color-accent-700); }
.land-hint b { color: var(--color-text); font-weight: 600; }
/* beneath: the pulse as one line, then the rows */
.land-eye { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; min-height: 28px; font-size: 0.7188rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--cr-muted); border-top: 1px solid var(--cr-line); }
.routes { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; padding: 2px 16px 14px; }
.routes a { height: 54px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--cr-line); cursor: pointer; text-decoration: none; }
.routes a:hover { border-color: var(--color-accent); }
.routes a.wide { grid-column: 1 / -1; justify-content: flex-start; gap: 12px; padding: 0 12px; color: inherit; }   /* a route named in words (home.js chips), its times beside it */
.rt-when { font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.routes.campus { display: flex; flex-wrap: wrap; gap: 8px; }
.routes.campus a { display: inline-flex; width: auto; height: auto; aspect-ratio: auto; border: 0; padding: 0; }
.land-eye .edit { font-size: 0.8125rem; letter-spacing: 0; text-transform: none; min-height: 28px; padding: 0 4px; }
.land-rows { display: flex; flex-direction: column; }
.land-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 64px; padding: 10px 16px; border-top: 1px solid var(--cr-line); color: inherit; text-decoration: none; }
.land-rows .land-row:first-child { border-top: 0; }
.land-row .col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.land-row .name { font-size: 1rem; font-weight: 500; }
.land-row .sub { font-size: 0.7812rem; color: var(--cr-muted); }
.land-row .end { display: flex; align-items: center; gap: 8px; }
/* one ask for location */
.ask { padding: 0 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.ask .btn-lg { min-height: 52px; font-family: var(--font-heading); font-weight: 600; font-size: 1.1875rem; letter-spacing: .01em; gap: 8px; }
.ask-note { font-size: 0.7812rem; line-height: 1.45; color: var(--cr-muted); text-align: center; text-wrap: pretty; }
/* where the stops are sorted from: location, or a spot picked on the map (home.js whereFrom) */
.land-near { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; font-size: 0.875rem; color: var(--cr-muted); }
.land-near svg { vertical-align: -3px; margin-right: 3px; }
.land-near a, .land-link { color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 4px 0; font: inherit; cursor: pointer; display: inline-flex; align-items: center; }
@media (min-width: 840px) { .land-top { display: none; } .hero { margin-top: 16px; } }
/* expanded: the header's box is the one search; the panel's own boxes, the home page's and the search page's, go */
@media (min-width: 840px) { #side .ask > #search, #side .pad:has(> #search) { display: none; } }

/* the Transit Center board */
.tc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 14px 16px 12px; }
.tc-head .col { display: flex; flex-direction: column; gap: 2px; }
.tc-head h1 { margin: 0; font-size: 2.125rem; line-height: 1.02; }
.tc-clock { font-family: var(--font-heading); font-weight: 600; font-size: 1.125rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; padding-bottom: 3px; }
.tc-together { margin: 4px 16px 0; padding: 14px; }
.tc-together .top { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: end; }
.tc-together .col { display: flex; flex-direction: column; gap: 6px; }
.tc-together .col .t { line-height: .9; }
.tc-together .sub, .tc-together .cap { font-size: 0.8438rem; color: var(--cr-muted); }
.tc-together .cap { font-size: 0.7812rem; }
.tc-together .end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tc-count { font-size: 2.625rem; color: var(--color-accent-700); }
.tc-count.late { color: var(--cr-late); }   /* past the group's minute, its buses still in: how late, counting */
.tc-together .bars { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cr-line); display: flex; flex-direction: column; gap: 8px; }
.tc-together .segs { display: grid; gap: 3px; }
/* not .seg: that's the settings' two-button switch, whose border and corners boxed each bar */
.tc-together .tc-seg { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tc-together .tc-seg i { width: 100%; height: 8px; box-shadow: inset 0 0 0 1.5px var(--rc); }
.tc-together .tc-seg.in i { background: var(--rc); box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
.tc-together .tc-seg b { font-family: var(--font-heading); font-weight: 600; font-size: 0.75rem; line-height: 1; color: var(--cr-muted); }
.tc-together .tc-seg.in b { color: var(--color-text); }
.tc-together .tc-seg { color: inherit; text-decoration: none; }
.tc-together .tc-seg em { font-family: var(--font-heading); font-style: normal; font-weight: 600; font-size: 0.6875rem; line-height: 1; color: var(--cr-late); white-space: nowrap; }   /* when a late one leaves */
.land-alert.mine .mine-list { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }   /* a detour at the rider's own stop, at the top of home */
.land-alert.mine .mine-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: inherit; text-decoration: none; }
.tc-note b.late { color: var(--cr-late); }
.tc-late { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; line-height: 1.2; color: var(--cr-late); }   /* a picked route leaving late: first thing said */
.tc-note { font-size: 0.8125rem; color: var(--cr-muted); }
.tc-note b { font-weight: 600; color: var(--color-text); }
.tc-conn { display: block; margin-top: 4px; }
.tc-conn.waits { color: var(--color-text); }
.row.cancelled .name { color: var(--cr-muted); }
.row.cancelled .end s { color: var(--cr-muted); }
.cancelnote { color: var(--warn-ink); font-weight: 600; font-size: 0.75rem; letter-spacing: .06em; text-transform: uppercase; }
.cancelnotice b { color: var(--color-text); }
.tc-loops { margin: 22px 16px 0; }
.tc-loops .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 14px 8px; border-bottom: 1px solid var(--cr-line); }
.tc-loops .note { font-size: 0.7812rem; color: var(--cr-muted); }
.tc-loops .grid { display: grid; grid-template-columns: 1fr 1fr; }
.tc-loop { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; }
.tc-loop + .tc-loop { border-left: 1px solid var(--cr-line); }
.tc-loop:hover { background: var(--cr-hover); }
.tc-loop.on { background: var(--color-accent-100); box-shadow: inset 0 0 0 2px var(--color-accent); }
.tc-loop .who { display: flex; align-items: center; gap: 10px; }
.tc-loop .name { font-size: 0.9688rem; font-weight: 500; line-height: 1.2; }
.tc-loop .when { display: flex; flex-direction: column; gap: 4px; }
.tc-loop .when .t small { font-size: 1rem; margin-left: 3px; }
.tc-loop .whent .was { font-size: 1.25rem; }
.tc-loop .rel .was { margin-right: 4px; }
.tc-loop .rel { font-size: 0.8125rem; color: var(--cr-muted); white-space: nowrap; }
.tc-loop .where { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; line-height: 1.3; }
.tc-loop .where i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--cr-muted); }
.tc-loop .where.live i { background: var(--color-accent); }
.hbay { display: block; width: 28px; height: 28px; text-decoration: none; cursor: pointer; }
.hbay .b { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; font-family: var(--font-heading); font-weight: 600; font-size: 1rem; line-height: 1; box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.35); }
.hbay .tag { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); font-family: var(--font-heading); font-weight: 600; font-size: 0.625rem; line-height: 1; letter-spacing: .03em; padding: 2px 4px; white-space: nowrap; background: var(--color-bg); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--cr-line); border-radius: 3px; }
/* at the Center: a bus moving over the badges, one standing under its badge (its number is what a rider reads) */
#map.hubon .bus { z-index: 2; }
#map.hubon .bus.parked { z-index: 0; }
.bus.athub { display: none; }   /* its route's badge stands on it */
.maplibregl-marker.hbay { z-index: 3; }   /* the bays' badges over every bus: one driving by covered a route's badge, its time with it (its own bus in is the badge's HERE) */
.hbay .tag.in { background: var(--color-accent-700); color: var(--color-bg); box-shadow: 0 0 0 1.5px var(--color-bg); }   /* in: solid, the live blue, as a late one's is red (it was a pale tint, missed) */
.hbay .tag.late { background: var(--cr-late); color: #fff; box-shadow: 0 0 0 1.5px var(--color-bg); }   /* its bus in late, so out late */
.hbay.off > * { opacity: .45; filter: grayscale(1); }   /* done for the day: no colour, nothing to board (on the contents: the marker's own opacity is MapLibre's) */
.hbay.dim > * { opacity: .35; }
.hbay.on .b { box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent); }
.mapcard .hubhead { padding: 0 0 6px; }
.mapcard .hubhead > .blueprint { margin-top: 0; }
.tc-pick { margin: 22px 16px 0; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.tc-pick .top { display: flex; align-items: center; gap: 12px; }
.tc-pick .col { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.tc-pick .title { font-family: var(--font-heading); font-weight: 600; font-size: 1.5rem; line-height: 1.05; }
.tc-pick .sub { font-size: 0.8438rem; color: var(--cr-muted); }
.tc-pick .words { font-size: 0.875rem; }
.tc-pick .cells { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
.tc-pick .cell { padding: 9px 10px; border: 1px solid var(--cr-line); display: flex; flex-direction: column; gap: 4px; }
.tc-pick .cell.first { border-color: var(--color-accent); }
.tc-pick .cell .t { font-size: 1.375rem; }
.tc-pick .cell .t small { font-size: 0.6875rem; margin-left: 2px; }
.tc-pick .cell .whent { gap: 5px; flex-wrap: wrap; }
.tc-pick .cell .was { font-size: 0.8125rem; }
.tc-pick .cell .rel { font-size: 0.7812rem; color: var(--cr-muted); }
.tc-foot { margin: 0; padding: 22px 16px 20px; font-size: 0.7812rem; line-height: 1.45; color: var(--cr-muted); text-wrap: pretty; }

/* About: settings as rows, the control at the right */
.setrows { border-top: 1px solid var(--cr-line); }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 10px 16px; border-bottom: 1px solid var(--cr-line); }
.setrow .col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.setrow .t { font-size: 1rem; font-weight: 500; }
.setrow .s { font-size: 0.8125rem; color: var(--cr-muted); }
.setrow > .btn, .setrow > .seg { flex: none; }
.seg { display: inline-flex; border: 1px solid var(--color-divider); border-radius: var(--radius-md); overflow: hidden; }
.seg button { min-height: 44px; padding: 0 12px; border: 0; background: var(--color-bg); color: var(--color-text); font: 500 0.9375rem var(--font-body); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--color-divider); }
.seg button[aria-pressed="true"] { background: var(--color-accent-100); color: var(--color-accent-700); font-weight: 600; }
/* a saved stop's star: the app's blue, not yellow, which is kept for what changes a trip */
.savedmark { display: inline-flex; align-items: center; gap: 5px; }
.savedmark svg { color: var(--color-accent); flex: none; }
/* the nearest stop's distance and direction; a tap turns the arrow with the phone */
/* no vertical padding: the label is a flex row, and any would make it taller and push the stop name down */
.pointer { display: inline; margin: 0 -4px; padding: 0 4px; border: 0; background: none; font: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.pointer .needle { display: inline-block; width: 11px; height: 11px; margin-right: 4px; vertical-align: -1px; line-height: 0; color: var(--color-accent-700); transition: transform .2s linear; }
.pointer .needle svg { display: block; width: 11px; height: 11px; }
.pointer.live { color: var(--color-accent-700); }
.pointer.ask .pw, .pointer[aria-pressed="true"] .pw { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.pointer[aria-pressed="true"] .pw { text-decoration-style: solid; }
@media (prefers-reduced-motion: reduce) { .pointer .needle { transition: none; } }
/* the stop page's compass: the ring keeps north north, the needle points to the stop */
.dial { display: flex; align-items: center; gap: 18px; margin: 2px 16px 14px; padding: 10px 14px; border: 1px solid var(--cr-line); cursor: pointer; }
.dial .walk { align-self: flex-start; display: inline-flex; align-items: center; gap: 1px; margin-top: 4px; font-size: 0.8438rem; font-weight: 500; color: var(--color-accent-700); text-decoration: none; white-space: nowrap; }
.dial .walk svg { width: 15px; height: 15px; }
@media (hover: hover) { .dial .walk:hover { text-decoration: underline; text-underline-offset: 3px; } }
.dial .face { position: relative; width: 108px; height: 108px; flex: none; }
.dial .ring, .dial .needle { position: absolute; inset: 0; display: block; transition: transform .2s linear; }
.dial .ring { color: var(--cr-muted); }
.dial .ring svg, .dial .needle svg { display: block; width: 100%; height: 100%; }
.dial .needle { color: var(--color-accent-700); }
.dial .txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dial .pw { font-family: var(--font-heading); font-weight: 600; font-size: 1.875rem; line-height: 1.02; letter-spacing: -.01em; }
.dial .hint { font-size: 0.7812rem; line-height: 1.3; color: var(--cr-muted); }
.dial.live .pw { color: var(--color-accent-700); }
.dial[aria-pressed="true"] .hint { color: var(--color-accent-700); }
@media (prefers-reduced-motion: reduce) { .dial .ring, .dial .needle { transition: none; } }
/* the Transit Center pick's times open the bay's stop page */
.tc-pick a.cell { color: inherit; text-decoration: none; }
@media (hover: hover) { .tc-pick a.cell:hover { background: var(--cr-hover); } }
/* The map keeps its drags. Some Android browsers (DuckDuckGo) took an up-and-down drag on it as scrolling the
   page, hid their address bar, and dropped the drag: the map claims its touches, and the page itself neither
   scrolls nor bounces while the map is open. */
#map, #map .maplibregl-canvas-container, #map canvas { touch-action: none; }
html:has(#body.map-open), html:has(#body.map-open) body { overscroll-behavior: none; overflow: hidden; }

/* a page that takes the whole width on a wide screen, the map put away */
/* the day, an hour to a column */
.hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); border-left: 1px solid var(--cr-line); }
.hr { display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 12px; border-right: 1px solid var(--cr-line); border-bottom: 1px solid var(--cr-line); }
.hr.now { background: var(--color-accent-100); }
.hr-h { font-size: 0.7188rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-muted); padding-bottom: 2px; }
.hr.now .hr-h { color: var(--color-accent-700); }
.hr-dep { display: flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.hr-dep .est { color: var(--color-accent-700); }
/* gone: the time muted, the badge only a little, so 16's navy stays navy and its AM or PM readable (at .4 the whole
   of it went gray, its suffix white on gray) */
.hr-dep.past, .hr-dep.past > span { color: var(--cr-muted); }   /* gone; a link while its run is still out */
.hr-dep.past .badge { opacity: .7; }
button.hr-dep { background: none; border: 0; padding: 2px 4px; margin: 0 -4px; color: inherit; cursor: pointer; text-align: left; }
button.hr-dep:hover { background: var(--cr-hover); }
a.hr-dep { color: inherit; text-decoration: none; padding: 2px 4px; margin: 0 -4px; }
a.hr-dep:hover { background: var(--cr-hover); }
.tc-day { margin-top: 12px; }
/* the day as one row of times, a run open: scrolled sideways */
button.hr-dep.on { opacity: 1; box-shadow: inset 0 0 0 2px var(--color-accent); background: var(--color-accent-100); }
.run-top { display: flex; align-items: center; gap: 12px; }
.run-top .col { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.run-top b { font: 600 1.25rem var(--font-heading); }
/* the run before and the one after, beside the title: a tap (or a swipe across the sheet) switches to it */
/* the steps beside the title: where the row has no room for both, 'from here' goes (the 5:30, to Hyrum, says it) */
.rs .run-top { container-type: inline-size; }
@container (max-width: 470px) { .rs-here { display: none; } }
.rs-steps { display: flex; flex: none; gap: 4px; }
.rs-step { display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-width: 64px; min-height: 40px; padding: 0 4px; border: 1px solid var(--cr-line); background: none; color: var(--color-text); font: 600 0.9375rem var(--font-heading); font-variant-numeric: tabular-nums; cursor: pointer; }
.rs-step:hover { background: var(--cr-hover); }
.rs-step.past { color: var(--cr-muted); }
.rs-step.none { border-color: transparent; cursor: default; }
.rs-step svg { flex: none; }
.run-top .muted { font-size: 0.8438rem; color: var(--cr-muted); }
.run-stop.hot { background: var(--cr-hover); }
.run-stop.skipped { padding-block: 3px; }
.run-stop.skipped .run-n { color: var(--cr-muted); font-size: 0.8125rem; }
.run-stop.skipped .run-n em { display: inline; margin-left: 4px; color: var(--warn-edge); }
/* where the bus waits between runs, or becomes another route: stay on */
.run-div { display: flex; align-items: baseline; gap: 10px; padding: 8px 4px; background: var(--color-accent-100); border-bottom: 1px solid var(--cr-line); }
.run-div .run-n b { font-weight: 600; }
.run-div .run-n em { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-style: normal; font-size: 0.7812rem; color: var(--color-accent-900); letter-spacing: 0; text-transform: none; font-weight: 500; }
.run-stop.later .run-t { color: var(--cr-muted); }
.run-n em.warnmark { align-self: flex-start; display: inline-block; margin-top: 2px; }
.run-stop { display: flex; align-items: baseline; gap: 10px; padding: 5px 4px; break-inside: avoid; color: inherit; text-decoration: none; border-bottom: 1px solid var(--cr-line); }
.run-stop:hover { background: var(--cr-hover); }
.run-t { flex: none; width: 64px; font: 600 1.0625rem var(--font-heading); font-variant-numeric: tabular-nums; }
.run-t small { font-size: 0.625rem; margin-left: 2px; }
.run-t.est { color: var(--color-accent-700); }
.run-n { font-size: 0.875rem; line-height: 1.3; }
.run-n em { display: block; font-style: normal; font-size: 0.6562rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-muted); }
.run-then { margin: 0; font-size: 0.875rem; color: var(--cr-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* the Transit Center's next hour: one row a departure, the estimate over the timetable's time */
.tcb .note { font-size: 0.75rem; color: var(--cr-muted); }
.tcb-row { display: grid; grid-template-columns: 64px auto minmax(0, 1fr) 52px; align-items: center; gap: 10px; min-height: 52px; padding: 6px 16px; border-bottom: 1px solid var(--cr-line); color: inherit; text-decoration: none; }
.tcb-row.on { background: var(--color-accent-100); }
/* routes leaving together on time: one row, their badges */
.tcb-group .tcb-mid { grid-column: 2 / -1; gap: 6px; }
.tcb-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.tcb-badges a { display: inline-flex; border-radius: 4px; text-decoration: none; }   /* the badge's number was underlined: the browser's own link line */
@media (hover: hover) { .tcb-row:hover { background: var(--cr-hover); } }
.tcb-t { display: flex; flex-direction: column; align-items: flex-start; }
.tcb-t .t { font-size: 1.375rem; }
.tcb-t .was { font-size: 0.75rem; }
.tcb-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tcb-mid .dest { font-size: 0.9062rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcb-mid .sub { font-size: 0.6562rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-muted); }
.tcb-mid .sub.live { color: var(--color-accent-700); }
.tcb-tag { display: flex; justify-content: flex-end; }
.tcb-tag .tag { font-family: var(--font-heading); font-weight: 600; font-size: 0.6875rem; padding: 2px 5px; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--cr-line); }
.tcb-tag .tag.in { background: var(--color-accent-100); color: var(--color-accent-900); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 45%, transparent); }
/* the rest of the Center's day: a line a route, its badges and how it leaves (the words beside one badge, under many) */
.tcd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 48px; padding: 8px 16px; border-bottom: 1px solid var(--cr-line); color: inherit; text-decoration: none; }
.tcd-w { flex: 1 1 14em; font-size: 0.9375rem; }
.tcd-none .tcd-w { color: var(--cr-muted); }
.tcd-none .badge { opacity: .7; }
.tcd .day-hint { padding: 0 16px; }
@media (hover: hover) { a.tcd-row:hover { background: var(--cr-hover); } }
/* a route's page: its buses between the stops, and the stops done for the day set back */
.busrow { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--color-accent-100); color: var(--color-accent-900); border-bottom: 1px solid var(--cr-line); font-size: 0.875rem; font-weight: 500; }
.busrow > i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 3px var(--color-text); flex: none; }
.busrow .livetag { margin-left: auto; }
a.busrow { text-decoration: none; }
a.busrow > svg { color: var(--color-accent-700); flex: none; }
@media (hover: hover) { a.busrow:hover { background: var(--cr-hover); } }
.doneday .stoprow { opacity: .5; }
.lastrun-note { align-items: flex-start; }
/* staying on the bus: its next route's stops, dimmed until the bus is past the Transit Center */
.section.onward { gap: 8px; letter-spacing: .06em; }
.section.onward span { flex: 1; }
.later .stoprow, .later .croute { opacity: .5; }
/* a route: its head (what a swiped-down sheet keeps), then its stops a line each, time first */
.routehead { display: grid; gap: 10px; }
.rs-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rs-name .mid { display: grid; min-width: 0; }
.rs-name .name { font: 600 1.375rem var(--font-heading); line-height: 1.1; }
.rs-name .sub { font-size: 0.8125rem; color: var(--cr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-ways { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rs-ways .chip.on { border-color: var(--color-accent); color: var(--color-accent-700); }
.rs-count { margin-left: auto; font: 600 0.8125rem var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--cr-muted); }
.routepage .routehead { padding: 4px 16px 12px; }
/* on a phone the route's stops are the map's card (a board, map.js sheetPlace), its head held at the top while the list scrolls under it */
/* a route's other half (16 PM from 16 AM) */
.rs-also { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; font: 400 0.875rem/1.35 var(--font-body); letter-spacing: 0; color: var(--color-text); text-decoration: none; }
.rs-also-t { flex: 1; min-width: 0; }
.rs-also svg { color: var(--cr-muted); }
.mapcard > .routehead { position: sticky; top: 0; z-index: 1; background: var(--color-bg); border-bottom: 1px solid var(--cr-line); }
.rs-alert { display: block; padding: 10px 12px; }
.rs-alert summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.rs-alert summary::-webkit-details-marker { display: none; }
.rs-alert summary b { flex: 1; min-width: 0; }
.rs-alert summary .more { font-size: 0.8125rem; opacity: .75; }
.rs-alert[open] summary .more { display: none; }
.rs-alert > .sub { margin-top: 6px; }
.rs-list { border-top: 1px solid var(--cr-line); }
.croute { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px; border-bottom: 1px solid var(--cr-line); color: inherit; text-decoration: none; }
@media (hover: hover) { a.croute:hover { background: var(--cr-hover); } }
.croute.here { background: var(--color-accent-100); box-shadow: inset 4px 0 0 var(--color-accent); }
.croute .c-t { flex: none; width: 78px; display: flex; align-items: center; color: var(--cr-muted); }
.croute .c-t .t, .croute .c-t .whent { color: var(--color-text); }
.croute .c-t .t.est { color: var(--color-accent-700); }   /* a live time blue here too: the rule above had outranked .est */
.croute .c-n { flex: 1; min-width: 0; font-size: 0.9375rem; line-height: 1.25; }
.croute .c-n .town { color: var(--cr-muted); }
/* a stop by its announced landmark, its street address under it, muted (ui.js heard()) */
.addr { display: block; font-size: 0.7812rem; font-weight: 400; line-height: 1.3; color: var(--cr-muted); letter-spacing: 0; text-transform: none; }
.addr-in { color: var(--cr-muted); font-weight: 400; }
.leg .mid .sub.addr { margin-top: -2px; }
.croute .c-n > small { display: block; font-size: 0.7812rem; color: var(--color-accent-700); }   /* the line under a stop's name, not a badge's AM or PM (it took their white) */
.croute .c-n > small.c-turn { margin-top: 2px; }   /* an out-and-back's far end: it turns round here */
.c-turn svg { display: inline-block; vertical-align: -3px; margin-right: 4px; }
.croute .c-b { display: flex; gap: 3px; margin-top: 4px; }
.croute .c-r { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 0.8125rem; color: var(--cr-muted); white-space: nowrap; }
.croute .c-t .whent { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }   /* the timetable's minute struck above the estimate */
.croute .c-t .was { font-size: 0.6875rem !important; line-height: 1.1; }
/* A route drawn as a line (map.js LINE, on trial): its stops on a rail in the route's colour (--rc, as the map draws
   it), each a ring; a bus between two stops a dot on the rail, its row its words; one at a stop, the stop's ring filled,
   with how many when more than one */
.rs-list.line > .croute, .rs-list.line > .busrow, .rs-list.line > .endservice { position: relative; padding-left: 34px; }
/* the rail as each row's background (a separator's own rules are its ::before and ::after), half a row at either end */
.rs-list.line > * { background-image: linear-gradient(var(--rc), var(--rc)); background-repeat: no-repeat; background-size: 3px 100%; background-position: 14px 0; }
.rs-list.line > :first-child { background-size: 3px 50%; background-position: 14px 100%; }
.rs-list.line > :last-child { background-size: 3px 50%; background-position: 14px 0; }
.rs-list.line > .endservice::before { margin-left: 8px; }
.c-ring { position: absolute; left: 15.5px; top: 50%; width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; box-sizing: border-box; border-radius: 50%; border: 3px solid var(--rc); background: var(--color-bg); }   /* (no z-index: over the sheet's pinned head, it drew) */
.c-ring.on { width: 21px; height: 21px; margin: -10.5px 0 0 -10.5px; border: 0; background: var(--rc); box-shadow: 0 0 0 3px var(--color-bg), 0 0 12px 2px color-mix(in srgb, var(--rc) 55%, transparent); }
.c-ring.on::after, .rs-list.line > .busrow > i::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-top: 1px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--color-bg); }
.c-ring > b { position: absolute; left: 13px; top: -12px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--color-text); color: var(--color-bg); font: 700 0.6875rem/15px var(--font-heading); text-align: center; }
.rs-list.line > .busrow { background-color: transparent; color: var(--color-text); font-weight: 600; min-height: 38px; }
.rs-list.line > .busrow > i { position: absolute; left: 15.5px; top: 50%; width: 21px; height: 21px; margin: -10.5px 0 0 -10.5px; background: var(--rc) !important; box-shadow: 0 0 0 3px var(--color-bg), 0 0 12px 2px color-mix(in srgb, var(--rc) 55%, transparent); }
.rs-list.line > .busrow.at > i { display: none; }   /* at its stop: the stop's ring is its dot */
/* above it: the next run from each end, large, and the day's span with its last runs */
.re-ends { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 12px 16px 4px; }
.re-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 14px; color: inherit; text-decoration: none; }
.re-col + .re-col { padding: 0 0 0 14px; border-left: 1px solid var(--cr-line); }
.re-k { font: 600 0.75rem/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--cr-muted); }
.re-n { font: 600 2.5rem/.95 var(--font-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.re-n small { font-size: .4em; margin-left: .12em; letter-spacing: 0; color: var(--cr-muted); }
.re-n.est { color: var(--color-accent-700); }
.re-s { font-size: 0.8125rem; color: var(--cr-muted); }
.re-last { display: flex; flex-direction: column; gap: 3px; padding: 8px 16px 12px; font-size: 0.875rem; }
.re-last .gone { color: var(--cr-muted); }
/* another operator's route (map.js opNote): whose bus, its fare, no live times, its timetable */
.rs-op { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px 4px; font-size: 0.875rem; line-height: 1.4; }
.rs-op a { color: inherit; }
.rs-op .warnmark { align-self: flex-start; margin-bottom: 4px; }
/* the stops between two key stops, folded: how many and their times, a small ring on the rail; open, their rows */
.rs-list.line .rs-fold > .croute { position: relative; padding-left: 34px; }
.rs-fold > summary { position: relative; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 16px 4px 34px; border-bottom: 1px solid var(--cr-line); font-size: 0.8125rem; color: var(--cr-muted); cursor: pointer; list-style: none; }
.rs-fold > summary::-webkit-details-marker { display: none; }
.rs-fold > summary::before { content: ""; position: absolute; left: 15.5px; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--rc); background: var(--color-bg); }
.rs-fold > summary svg { transition: transform .15s; }
.rs-fold[open] > summary svg { transform: rotate(180deg); }
.rs-fold .c-ring:not(.on) { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-width: 2px; }   /* a folded stop, opened: smaller than a key stop's ring */
.rs-every { color: var(--color-accent-700); text-decoration: none; }   /* the key stops' switch, beside the count: not a way */
.rs-all { padding: 12px 16px; }
.rs-all .btn { min-height: 48px; }
/* on a stop's list, between tonight's last bus and the next day's first */
.endservice { display: flex; align-items: center; gap: 12px; padding: 18px 16px 4px; font: 600 0.9375rem var(--font-heading); letter-spacing: .14em; text-transform: uppercase; color: var(--color-text); }
.endservice::before, .endservice::after { content: ''; flex: 1; border-top: 2px solid var(--color-text); }
.endservice + .dayhead { border-top: 0; }
/* the morning's first run, starting partway along: where it starts, and where the stops before it are served from */
.endservice.firstrun { font-size: 0.8125rem; letter-spacing: .1em; padding-top: 12px; color: var(--color-accent-700); }
.endservice.firstrun::before, .endservice.firstrun::after { border-top-color: var(--color-accent); }
.yourstop { margin-top: 4px; }
.endstop .dist { color: var(--color-accent-700); }

/* ── a run on a phone: a sheet over the stop page, its day's times in a row, the map, its stops under it ── */
.phone-day { padding: 0 16px 20px; }
/* its head: the day on the left, the last bus on the right (they ran together, unstyled) */
.phone-day .ws-eye { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 14px 0 8px; font-size: 0.8125rem; color: var(--cr-muted); }
.phone-day .ws-eye > span:first-child { font-family: var(--font-heading); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.phone-day .hours { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.day-hint { margin: 10px 0 0; font-size: 0.7812rem; color: var(--cr-muted); }
.phone-stop .runopen, .phone-stop .next[data-trip] { cursor: pointer; }
.phone-stop .runopen:active, .phone-stop .next[data-trip]:active { background: var(--cr-hover); }
#runsheet { position: absolute; inset: 0; z-index: 700; }
@media (min-width: 840px) { #runsheet { right: auto; width: 420px; } }
.rs-scrim { position: absolute; inset: 0; background: color-mix(in srgb, #000 45%, transparent); }
.rs { position: absolute; left: 0; right: 0; bottom: 0; height: 92%; display: flex; flex-direction: column; background: var(--color-bg); box-shadow: var(--shadow-lg); transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.rs-grip { flex: none; width: 40px; height: 4px; margin: 8px auto 4px; border-radius: 2px; background: var(--cr-line); }
.rs .run-top { flex: none; padding: 2px 8px 8px 16px; }
.rs-list { flex: 1; min-height: 0; padding: 0 16px 18px; }
/* the run sheet's list scrolls on its own; the route sheet's (the same class) is the map card's, which scrolls it: a
   scroll box of its own there, with nothing to scroll and its overscroll contained, swallowed the finger */
.rs .rs-list { overflow-y: auto; overscroll-behavior: contain; }
@media (prefers-reduced-motion: reduce) { .rs { transition: none; } }
/* On a phone or a tablet the run's sheet covers the lower part of the map, the run drawn on the map above it, which
   stays the finger's: no shade over it, and the stop's own sheet put by until the run's closes */
@media (max-width: 839px) {
  #runsheet { top: 50%; pointer-events: none; transition: top .22s cubic-bezier(.2,.7,.2,1); }
  #runsheet.folded { top: calc(100% - var(--rs-fold, 120px)); }   /* swiped down: its head alone, the map above */
  #runsheet .rs { overflow: hidden; }   /* folded, its list is clipped, not spilled over the tabs */
  #runsheet .rs-scrim { display: none; }
  #runsheet .rs { height: 100%; pointer-events: auto; border-top: 1px solid var(--cr-line); box-shadow: 0 -6px 18px rgba(0,0,0,.18); }   /* its shade up over the map, not down over the tabs */
  #body:has(> #runsheet) #mapcard { visibility: hidden; }
}
/* the wide About: the alerts and the data on the right */

/* The Transit Center beside a wide screen's map: the header has the clock; the group card and the loops slimmer, so
   the next hour's departures (what a desk comes for) start above the fold. The loops as a row each, not two cards. */
@media (min-width: 840px) {
  .tc-clock { display: none; }
  .tc-together { padding: 10px 14px; }
  .tc-together .col .t { font-size: 2.75rem; }
  .tc-together .bars { margin-top: 10px; padding-top: 10px; }
  .tc-loops { margin-top: 14px; }
  .tc-loops .grid { grid-template-columns: 1fr; }
  .tc-loop { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding: 8px 14px; }
  .tc-loop + .tc-loop { border-left: 0; border-top: 1px solid var(--cr-line); }
  .tc-loop .who { flex: 1; min-width: 0; }
  .tc-loop .when { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; column-gap: 8px; row-gap: 0; }
  .tc-loop .when .wasline { flex-basis: 100%; text-align: right; }
  .tc-loop .when .t-36 { font-size: 1.625rem; }
  .tc-loop .where, .tc-loop .lastrun { flex-basis: 100%; }
}
/* The home page's big card at the Transit Center: the board's own group card, and the way to the board. */
.hubhero { margin: 14px 16px 0; display: flex; flex-direction: column; gap: 8px; }
.hubhero .tc-together { margin: 0; }
.hubhero-open { gap: 8px; min-height: 44px; }

/* ---- directions, redesigned (2026-10-06): From and To as a pair, the start picker, leave or arrive and when, the way
   picked summed up and told as a timeline, the same way later, the other ways as rows */
.pair { position: relative; display: flex; flex-direction: column; border: 1px solid var(--cr-line); padding: 6px 48px 6px 12px; }
.pair .pr { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.pair .pr + .pr { border-top: 1px solid var(--cr-line); }
.pair .pr-k { flex: none; width: 40px; font-family: var(--font-heading); font-weight: 600; font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cr-muted); }
.pair .pr-v { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 500; font-size: 0.9688rem; color: inherit; background: none; border: 0; padding: 4px 0; text-align: left; }
.pair .pr-v > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.pair .pr-v > svg { flex: none; color: var(--cr-muted); }
.pair button.pr-v { cursor: pointer; }
.pair button.pr-v[aria-expanded="true"] { color: var(--color-accent-700); }
.pair .pr-swap { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--color-accent-700); border: 1px solid var(--cr-line); }
.whenrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.whenrow .seg button { min-height: 40px; }
.whenrow .btn { min-height: 40px; gap: 6px; }
.fromacts { margin: 0; }
.startpick { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 6px; }
.pickhead h2 { font-family: var(--font-heading); font-weight: 600; font-size: 1.75rem; line-height: 1; margin: 0; }
#side > .startpick, .gohead > .startpick { padding: 0 16px 16px; }
.sp-search { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 12px; border: 1px solid var(--cr-line); background: var(--cr-hover); color: var(--cr-muted); text-decoration: none; font-size: 0.9375rem; }
.sp-main { all: unset; box-sizing: border-box; position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; background: var(--color-accent); color: #fff; cursor: pointer; }
.sp-main .col, .sp-row .col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-main b { font-family: var(--font-heading); font-weight: 600; font-size: 1.125rem; letter-spacing: .01em; }
.sp-main .sub { font-size: 0.8125rem; opacity: .85; }
.sp-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 14px; border: 1px solid var(--cr-line); color: inherit; text-decoration: none; }
.sp-row + .sp-row { margin-top: -9px; border-top: 0; }
.sp-row > svg { flex: none; color: var(--color-accent-700); }
.sp-row b { font-weight: 600; font-size: 0.9688rem; }
.sp-row .sub { font-size: 0.8125rem; color: var(--cr-muted); }
.sp-row .sub .badge, .sp-row .sub .uchip { vertical-align: -3px; }
.sp-sec { padding: 10px 0 2px; font-family: var(--font-heading); font-weight: 600; font-size: 0.75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cr-muted); }
.jsum { gap: 2px; }
.jsum .eyebrow { color: var(--color-accent-700); }
.jsum .js-t { display: flex; align-items: baseline; gap: 8px; }
.jsum .js-t .to { color: var(--cr-muted); font-size: 1.25rem; }
.jsum .js-t .dur { margin-left: auto; font-size: 0.9375rem; color: var(--cr-muted); }
.jsum .sub { font-size: 0.875rem; color: var(--cr-muted); }
.jsum .js-legs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.jsum .js-legs .sep { color: var(--cr-line-strong, var(--cr-muted)); }
.tline { padding: 6px 0 2px; }
.tl { display: grid; grid-template-columns: 44px 22px minmax(0, 1fr); gap: 0 10px; --c: var(--cr-muted); }
.tl-t { font-family: var(--font-heading); font-weight: 600; font-size: 1.0625rem; font-variant-numeric: tabular-nums; line-height: 1; padding-top: 3px; text-align: right; }
.tl-n { position: relative; display: block; }
.tl-n::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--c); }
.tl.walk .tl-n::before, .tl.off .tl-n::before, .tl.end .tl-n::before { background: repeating-linear-gradient(to bottom, var(--cr-muted) 0 3px, transparent 3px 7px); width: 2px; margin-left: -1px; }
.tl.end .tl-n::before { bottom: auto; height: 12px; }
.tl.off .tl-n::before { background: var(--c); width: 4px; margin-left: -2px; }   /* the ride's line runs down to the off ring */
.tl.change .tl-n::before { background: var(--c); }
.tl-n i { position: absolute; left: 50%; top: 4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; box-sizing: border-box; background: var(--color-bg); border: 2.5px solid var(--color-text); }
.tl-n.on i { border-color: var(--c); border-width: 3px; }
.tl-n.end i { background: var(--color-text); }
.tl-n.none i { display: none; }
.tl-b { display: flex; flex-direction: column; gap: 3px; padding: 0 0 18px; min-width: 0; }
.tl-b .name { font-size: 0.9688rem; font-weight: 500; line-height: 1.25; }
.tl-b .sub { font-size: 0.8438rem; color: var(--cr-muted); line-height: 1.35; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tl-b .sub.addr { margin-top: -2px; display: block; }
.tl-b .sub b { color: var(--color-text); font-weight: 600; }
.tl-b .sub a { color: inherit; }
.tl-bus { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 2px; font-weight: 500; }
.tl-bus .livetag { margin-left: 2px; }
.tl-b .missed { color: var(--cr-late); }
.tl-b .missed b { color: var(--cr-late); }
.tl-change { margin: 2px 0 6px; padding: 10px 12px; background: var(--color-accent-100); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 35%, transparent); display: flex; flex-direction: column; gap: 3px; }
.tl-change .eyebrow { color: var(--color-accent-900); }
.tl-change .name .badge { vertical-align: -4px; margin-left: 2px; }
.tl.now .tl-b > .name, .tl.now .tl-bus { color: var(--color-accent-700); }
.tl.now .tl-n i { box-shadow: 0 0 0 3px var(--color-accent-100); }
.tl.change.now .tl-change { box-shadow: inset 0 0 0 2px var(--color-accent); }
.later { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 6px 0 12px; border-top: 1px solid var(--cr-line); margin-top: 2px; }
.later .k { font-family: var(--font-heading); font-weight: 600; font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cr-muted); }
.later .ts { display: flex; gap: 6px; flex-wrap: wrap; }
.later .chip { min-height: 32px; padding: 0 10px; font-family: var(--font-heading); font-weight: 600; font-size: 0.9375rem; }
.otherways { padding: 10px 0 8px; }
.journeysheet .jrows { margin: 0 -16px; }
.jrow .jr-top { display: flex; align-items: center; gap: 10px; }
.jrow .jr-time { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.jrow .jr-time small { font-size: 0.75rem; color: var(--cr-muted); margin-top: 2px; }
.jrow > .sub { font-size: 0.8438rem; color: var(--cr-muted); }
.jrow .jlegs .uchip { font-size: 0.6875rem; padding: 0 6px; height: 20px; }
.mapcard .gohead .gowhen { padding-top: 6px; }
/* Directions: the way straight across a busy road, said under the way picked (not a row to pick: the chip does that) */
.jrow.straightalt { cursor: default; background: var(--color-bg); }
.jrow.straightalt:hover { background: var(--color-bg); }
/* the Center's directions link: under its name beside a wide screen's board, at the top of a phone's board under its countdown */
.tc-go { padding: 10px 16px 2px; }
.tc-head .tc-go { padding: 6px 0 0; }

/* The Pumpkin Walk (views/pumpkin.js): its dusk at the top, framed as the app frames its maps; its nights in a strip */
.pk-hero { margin: 0 0 6px; }
.mapcard .pk-hero { display: none; }   /* a phone's card: the vines round the map are its art, the map the more of the screen, */
.mapcard .pk-back { display: none; }   /* and no Back bar: its tab is right there, and the card rests on the next shuttle */
.pk-hero .pk-clip { aspect-ratio: 400 / 170; overflow: hidden; background: #1a1238; }
.pk-hero .pk-art { display: block; width: 100%; height: 100%; }
.pk-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.875rem; }
.pk-next { display: flex; flex-direction: column; gap: 10px; padding: 2px 16px 14px; }
.pk-next .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pk-nextrow { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.pk-big { font-family: var(--font-heading); font-weight: 600; font-size: 3.5rem; line-height: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-big small { font-size: .38em; margin-left: .12em; letter-spacing: 0; color: #e8611c; }
.pk-big.est { color: var(--color-accent-700); }
.pk-nextrow .mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pk-nextrow .dest { font-size: 1rem; font-weight: 500; }
.pk-nextrow .sub { font-size: 0.8438rem; color: var(--cr-muted); }
.pk-next .then { display: flex; align-items: baseline; gap: 14px; }
.pk-live { margin: 14px 16px 0; color: inherit; text-decoration: none; }
.pk-from .pk-from-name { display: inline-flex; align-items: center; gap: 8px; }
.pk-from .note { color: inherit; }
/* its nights to the last, a little calendar a week to a row, Monday first: tonight lit, a night with no shuttle struck */
.pk-cal { margin: 0 16px; }
.pk-wk, .pk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.pk-wk span { text-align: center; font: 600 0.6875rem/1 var(--font-heading); letter-spacing: .1em; color: var(--cr-muted); padding-bottom: 6px; }
.pk-day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 6px; border-radius: 6px; background: var(--cr-hover); }
.pk-day b { font: 600 1.25rem/1 var(--font-heading); font-variant-numeric: tabular-nums; }
.pk-day span { font-size: 0.6875rem; font-variant-numeric: tabular-nums; color: var(--cr-muted); white-space: nowrap; }
.pk-day.tonight { box-shadow: inset 0 3px 0 #e8611c; background: rgba(232,97,28,.14); }
.pk-day.off { background: none; }
.pk-day.off b { color: var(--cr-muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.pk-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px; }

/* The Pumpkin Walk's vine under the map's search (views/pumpkin-art.js): over the map, under its buttons, search and
   card, never taking a tap; on a phone along the search box's bottom edge (.mapbar: 10 px down, 50 high), on a wide
   screen along the top of the map beside the page (which lies over its first 420 px, #side); its stretch of vine
   repeated the map's width either way, running off its edges */
#pk-deco { display: none; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
#body.pk-on #pk-deco { display: block; }
#pk-deco .pk-swag { position: absolute; top: 59px; left: 0; width: 100%; height: 40px; display: block; }   /* off both edges, carrying on past them; its loops' tops clear of the box, not cut off under it */
@media (min-width: 840px) {
  #pk-deco { left: 420px; } :root[data-panel="right"] #pk-deco { left: 0; right: 420px; }
  #pk-deco .pk-swag { top: 1px; }   /* under the map's buttons, top right */
}

/* ---- The Pumpkin Walk at night (views/pumpkin.js; Claude Design's, templates/pumpkin-walk-explore): its own
   palette in either theme, over a phone's card and a wide screen's page alike. */
.mapcard:has(> .pagesheet > .pk-page), #side:has(.pk-page), .pk-page {
  --color-bg: #16112b; --color-surface: #211a3d; --color-text: #f3eee6; --cr-muted: #b9b0c9; --cr-line: rgba(243,238,230,.14);
  --color-divider: rgba(243,238,230,.22); --color-accent: #94bce3; --color-accent-600: #b5d9fd; --color-accent-700: #b5d9fd;
  --color-accent-100: #2a2250; --cr-hover: rgba(243,238,230,.06); --pk-orange: #e8611c; color-scheme: dark;
}
.mapcard:has(> .pagesheet > .pk-page) > .grip { --cr-line: rgba(243,238,230,.3); }
#side:has(.pk-page) { background: var(--color-bg); }
.pk-page { background: var(--color-bg); color: var(--color-text); padding-bottom: 8px; }
/* tall enough on a phone's card for its head to rise to the top, the resting countdowns scrolled off above it */
.mapcard > .pagesheet > .pk-page { min-height: calc(100dvh + 48px); }
/* where a phone's card rests (map.js: its .next and .head): both stops' next, side by side, a tap to the line */
.pk-fold.next.head { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 6px 20px 14px; border: 0; cursor: pointer; }
.pk-fcol { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-right: 16px; }
.pk-fcol + .pk-fcol { padding: 0 0 0 16px; border-left: 1px solid var(--cr-line); }
.pk-fk { font: 600 0.8125rem/1 var(--font-heading); letter-spacing: .12em; text-transform: uppercase; color: var(--cr-muted); }
.pk-fcol.home .pk-fk { color: var(--color-accent); }
.pk-fn { font: 600 3rem/.9 var(--font-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-fn small, .pk-ln small { font-size: .4em; margin-left: .1em; letter-spacing: 0; color: var(--pk-orange); }
.pk-fn.est, .pk-ln.est { color: var(--color-accent-700); }
.pk-fsub { font-size: 0.8125rem; color: var(--cr-muted); }
@media (min-width: 840px) { .pk-fold.next.head { display: none; } }   /* beside the map, the line says it */
/* its head */
.pk-headx { padding: 28px 20px 0; display: flex; flex-direction: column; gap: 4px; }
.pk-eyes { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 600 0.8125rem/1 var(--font-heading); letter-spacing: .12em; text-transform: uppercase; }
.pk-season { color: var(--pk-orange); }
.pk-when { color: var(--cr-muted); }
.pk-title { font: 600 3rem/1 var(--font-heading); letter-spacing: -.01em; margin-top: 6px; }
.pk-headx .pk-sub { color: var(--cr-muted); }
/* the line: its top stop and its foot, the shuttles on the road between */
/* its foot in the flow, 200 px down, so the line is as tall as that stop is: at 300 px fixed, its kicker on two
   lines on a phone ('The walk's far end · Stop 8001'), the link below was drawn over its next times */
/* the line: its two stops, the shuttles on the road between in rows of their own; the rail dashed down from the top
   stop's ring to the foot's, each part drawing its own stretch */
.pk-line { --pk-rail: repeating-linear-gradient(rgba(232,97,28,.55) 0 6px, transparent 6px 11px); position: relative; margin: 26px 20px 0; }
.pk-lstop { position: relative; padding-left: 40px; display: flex; flex-direction: column; gap: 8px; }
.pk-lstop.top { background: var(--pk-rail) 9px 24px / 2px calc(100% - 24px) no-repeat; }
.pk-lstop.foot { background: var(--pk-rail) 9px 0 / 2px 24px no-repeat; }
.pk-roads { display: flex; flex-direction: column; gap: 8px; min-height: 56px; padding: 16px 0; background: var(--pk-rail) 9px 0 / 2px 100% no-repeat; }
.pk-road { position: relative; display: flex; align-items: center; min-height: 26px; padding-left: 40px; }
.pk-ring { position: absolute; left: 0; top: 14px; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--pk-orange); background: var(--color-bg); }
/* a shuttle at the stop: its ring filled, the way it's going in it, and how many when more than one */
.pk-ring.on { background: var(--pk-orange); box-shadow: 0 0 0 4px var(--color-bg), 0 0 16px 3px rgba(232,97,28,.5); }
.pk-ring.on::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pk-ring.on.up::after { border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid var(--color-bg); margin-top: -1px; }
.pk-ring.on.down::after { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--color-bg); margin-top: 1px; }
.pk-ring.on.wait::after { width: 6px; height: 6px; background: var(--color-bg); }
.pk-ring > b { position: absolute; left: 13px; top: -10px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--color-text); color: var(--color-bg); font: 700 0.6875rem/15px var(--font-heading); text-align: center; }
.pk-lrow { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.pk-lname { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pk-lk { font: 600 0.75rem/1 var(--font-heading); letter-spacing: .12em; text-transform: uppercase; color: var(--cr-muted); }
.pk-lk.near { color: var(--color-accent); }
.pk-lplace { font: 600 1.875rem/1 var(--font-heading); text-transform: uppercase; letter-spacing: .02em; color: inherit; text-decoration: none; }
.pk-lsub { font-size: 0.875rem; color: var(--cr-muted); }
.pk-ln { font: 600 4.5rem/.85 var(--font-heading); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.pk-ln small { font-size: .36em; }
.pk-lthen { display: flex; align-items: baseline; gap: 14px; min-height: 17px; font: 600 1.0625rem/1 var(--font-heading); font-variant-numeric: tabular-nums; color: var(--cr-muted); }
.pk-lthen .w { font: 0.8125rem/1.3 var(--font-body); }
.pk-lthen .livetag, .pk-lthen .sched { margin-left: auto; align-self: center; }
.pk-road > i { position: absolute; left: -1px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--pk-orange); box-shadow: 0 0 0 4px var(--color-bg), 0 0 16px 3px rgba(232,97,28,.5); }
.pk-road > i::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pk-road.up > i::after { border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid var(--color-bg); margin-top: -1px; }
.pk-road.down > i::after { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--color-bg); margin-top: 1px; }
.pk-road.wait > i::after { width: 8px; height: 8px; background: var(--color-bg); }
.pk-blab { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 0.875rem; }
.pk-blab b { font: 600 0.75rem/1 var(--font-heading); letter-spacing: .12em; text-transform: uppercase; color: var(--pk-orange); }
.pk-quiet { margin: -8px 20px 0 60px; font-size: 0.8125rem; color: var(--cr-muted); }
/* back down to the map, on a phone (beside it, it's there) */
.pk-maplink { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 4px 20px 0 60px; color: var(--color-accent-700); text-decoration: none; font-size: 0.9375rem; font-weight: 500; }
#side .pk-maplink { display: none; }
/* the night: how much is left, now on it, the last shuttle back */
.pk-tonight { margin: 18px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.pk-tn { display: flex; justify-content: space-between; align-items: baseline; }
.pk-tn .k { font: 600 0.875rem/1 var(--font-heading); letter-spacing: .12em; text-transform: uppercase; color: var(--cr-muted); }
.pk-tn .v { font: 600 1.25rem/1 var(--font-heading); font-variant-numeric: tabular-nums; }
.pk-bar { position: relative; height: 6px; background: rgba(243,238,230,.14); }
.pk-bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--pk-orange); }
.pk-bar > b { position: absolute; top: -5px; width: 2px; height: 16px; margin-left: -1px; }
.pk-bar > b.now { background: var(--color-text); }
.pk-bar > b.last { background: var(--cr-muted); }
.pk-ends { display: flex; justify-content: space-between; font-size: 0.8125rem; color: var(--cr-muted); font-variant-numeric: tabular-nums; }
.pk-ends .now { color: var(--color-text); }
.pk-last { margin: 2px 0 0; font-size: 0.9375rem; }
.pk-last b { font: 600 1.125rem/1 var(--font-heading); }
.pk-page .pk-cal { margin-top: 20px; }
/* the city's word on the walk and getting there (this year's) */
.pk-city { margin: 18px 20px 0; padding-top: 14px; border-top: 1px solid var(--cr-line); font-size: 0.875rem; color: var(--cr-muted); }
.pk-city p { margin: 0 0 8px; }
.pk-city b { color: var(--color-text); font-weight: 600; }
.pk-city a { color: var(--color-accent-700); }