/*
 * The city pages — the existing-transit map, the key-stats board and the
 * six victory gauges.
 *
 * Builds on site.css: same tokens, plates, rules and Barlow figures. Every
 * rule here is the RESTING state — the map drawn, every figure at its value,
 * every gauge's tick in place — so a page with scripts off, or a reader who
 * has asked for no motion, gets the complete thing. js/city.js opts INTO the
 * movement with Web Animations (fill: backwards) and never needs a class
 * from here to do it, except the hover pairing (tmap--hot / is-hot), which
 * is a resting-state highlight, not an animation.
 *
 * The map's colours are all tokens; only the lines' own stroke is a literal
 * hex, because a line that is red in the agency's feed is red here.
 *
 * Visual thesis: a transit-authority destination board on a drafting table.
 * Region colour is the tick; figures count; the map draws like a pen.
 */

/* Intl metros are not in site.css's six US --area-c map. City pages own the
   continent ticks so London is signage, not a fallback to --accent. */
.page-head--city[data-area="Europe"],
.city-top[data-area="Europe"],
.section[data-area="Europe"] { --area-c: var(--line-cyan); }
.page-head--city[data-area="Asia"],
.city-top[data-area="Asia"],
.section[data-area="Asia"] { --area-c: var(--line-red-lit); }
.page-head--city[data-area="South America"],
.city-top[data-area="South America"],
.section[data-area="South America"] { --area-c: var(--line-yellow); }

/* ── Layout: the map and the board ─────────────────────────────────────── */

.city-top { padding-block: clamp(1.5rem, 3vw, 2.5rem) 0; }
.city-top__grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 980px) {
  .city-top__grid { grid-template-columns: minmax(0, 1.7fr) minmax(17rem, 1fr); gap: 2rem; }
}

/* ── The head: kicker plates, Play CTA ─────────────────────────────────── */

.city-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
}
.city-kicker .plate { font-size: 0.8125rem; min-height: 1.75rem; }
.city-cta { margin-top: 1.35rem; }
.city-cta__where {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.7rem;
}
.city-cta .hero__cta { margin-top: 0; }

/* ── The map ───────────────────────────────────────────────────────────── */

.tmap { border: 1px solid var(--ink); border-top: 3px solid var(--area-c, var(--ink)); background: var(--surface); min-width: 0; }
.tmap__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.6rem 0.85rem 0.6rem 0;
  border-bottom: 1px solid var(--rule);
}
.tmap__head .plate { font-size: 0.875rem; min-height: 1.9rem; }
.tmap__sum { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tmap__sum b { color: var(--ink); font-weight: 500; }

.tm { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 960 / 600; background: var(--surface); }
.tm-ground { fill: var(--surface); }
.tm-water { fill: var(--cp-water); stroke: none; }
/* Roads: hairlines, the heaviest-trafficked class darkest. Non-scaling so a
   phone does not turn them into a wash. */
.tm-road { fill: none; stroke: var(--rule-2); stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tm-road--a { stroke: var(--ink-4); stroke-width: 1.2; }
.tm-road--b { stroke-width: 0.9; }
.tm-road--c { stroke: var(--rule); stroke-width: 0.7; }
/* A line: the agency's colour, round-jointed. stroke-dasharray 1 against a
   pathLength of 1 is the resting (fully drawn) state; the script animates
   stroke-dashoffset from 1 to 0 and never has to measure a path. */
.tm-line { fill: none; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; pointer-events: stroke; cursor: pointer; }
.tm-line[data-mode="commuter"] { stroke-width: 2.6; }
.tm-line[data-mode="brt"], .tm-line[data-mode="tram"] { stroke-width: 2.6; }
/* Bus is the underlay: thinner than commuter so a mesh of local routes
   does not bury the rail. */
.tm-line[data-mode="bus"] { stroke-width: 1.5; }
.tm-line[data-mode="ferry"] { stroke-width: 2.6; }
/* Stations: an ink ring from a zero-length subpath with round caps, a pale
   core from a <use> of the same path. --r is set on the group by the bake. */
.tm-stns { fill: none; stroke: var(--ink); stroke-width: calc(var(--r, 3) * 2px); stroke-linecap: round; }
.tm-stns--core { stroke: var(--surface); stroke-width: calc(max(1px, var(--r, 3) * 2px - 2.4px)); }
.tm-scale__bar { stroke: var(--ink); stroke-width: 3; }
.tm-scale__lbl { font-family: var(--mono); font-size: 11px; fill: var(--ink-2); }
/* The detail inset and the frame on the main map showing where it was cut. */
.tm-inset__mark { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 4 3; }
.tm-inset__ground { fill: var(--surface); }
.tm-inset__frame { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.tm-inset__lbl { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--ink); }

.tmap__cap { padding: 0.65rem 0.85rem 0.75rem; border-top: 1px solid var(--rule); }
/* The key: one chip per line, the agency's colour as a short band. */
.tmap__key { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.tmap__key li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--ink-2);
  line-height: 1.3;
  cursor: pointer;
  padding: 0.15rem 0.2rem;
  border-radius: 1px;
}
.tmap__key li:hover, .tmap__key li:focus-visible { color: var(--ink); }
.tmap__key li:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tmap__key i { display: inline-block; inline-size: 1.1rem; block-size: 4px; background: var(--c, var(--ink)); flex: none; }
.tmap__key small { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); }
.tmap__key--many li { font-size: 0.75rem; }
.tmap__src { margin: 0; font-family: var(--mono); font-size: 0.75rem; line-height: 1.5; color: var(--ink-3); }
.tmap__src b { color: var(--ink-2); font-weight: 500; }
.source-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  vertical-align: -0.15em;
}
.source-icon:hover { text-decoration: underline; }
.tmap__src .source-icon { color: inherit; }
/* No rail: the plate says so over the water and roads. */
.tmap__none {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.tmap__none b { font-family: var(--display); font-weight: 600; font-size: 1.25rem; color: var(--ink); letter-spacing: 0.02em; text-transform: uppercase; }

/* Hover pairing: dim everything that is not the line under the pointer.
   Resting state is fully drawn; this is a highlight, not a hide. */
.tmap--hot .tm-line { opacity: 0.18; }
.tmap--hot .tm-line.is-hot { opacity: 1; }
.tmap--hot .tm-stns [data-i] { opacity: 0.18; }
.tmap--hot .tm-stns [data-i].is-hot { opacity: 1; }
.tmap__key li.is-hot { color: var(--ink); }
.tmap__key li.is-hot i { outline: 1px solid var(--ink); outline-offset: 2px; }

/* ── The board ─────────────────────────────────────────────────────────── */

.board { border: 1px solid var(--ink); background: var(--surface); min-width: 0; }
.board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--ink);
  color: var(--ground);
  padding-inline-end: 0.9rem;
  min-block-size: 2.5rem;
}
.board__head .plate { min-height: 2.5rem; font-size: 0.9375rem; }
.board__head small { font-family: var(--mono); font-size: 0.75rem; color: var(--rule-2); }
.board__rows { margin: 0; padding: 0 0.9rem; }
.board__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.board__row::before {
  content: "";
  position: absolute;
  inset-block: 0.65rem;
  inset-inline-start: -0.9rem;
  inline-size: 3px;
  background: transparent;
}
.board__row:hover::before, .board__row:focus-within::before { background: var(--area-c, var(--accent)); }
.board__row:last-child { border-bottom: 0; }
.board__row dt { font-size: 0.875rem; color: var(--ink-2); grid-column: 1; }
.board__row dt small { display: block; font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); margin-top: 0.1rem; }
.board__row dd {
  margin: 0;
  grid-column: 2;
  grid-row: 1;
  font-family: var(--display);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-align: end;
  white-space: nowrap;
}
.board__row dd .ticks { margin-inline-end: 0.5rem; vertical-align: 0.15em; }
.board__row dd.board__text { font-size: 1.35rem; }
.board__row--none dd { color: var(--ink-3); }
.board__row--derived dt small { color: var(--warn); }
.board__foot { margin: 0; padding: 0.7rem 0.9rem 0.8rem; border-top: 2px solid var(--ink); font-size: 0.8125rem; color: var(--ink-2); line-height: 1.5; }
.board__foot b { color: var(--ink); font-weight: 600; }
/* Difficulty ticks, as the metros ledger draws them (metros.css). */
.board .ticks { display: inline-flex; gap: 2px; }
.board .ticks i { display: inline-block; inline-size: 0.45rem; block-size: 0.9rem; background: var(--rule-2); }
.board .ticks[data-level="1"] i:nth-child(1),
.board .ticks[data-level="2"] i:nth-child(-n+2),
.board .ticks[data-level="3"] i { background: var(--ink); }

/* ── The gauges ────────────────────────────────────────────────────────── */

.gauges {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0 2.5rem;
}
@media (min-width: 680px) { .gauges { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .gauges { grid-template-columns: repeat(3, 1fr); } }
.gauge {
  --today: 0;
  --need: 0.8;
  position: relative;
  padding: 1.35rem 0 1.5rem 1.25rem;
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}
.gauge::before { content: ""; position: absolute; inset-block: 1.5rem 1.65rem; inset-inline-start: 0; inline-size: 4px; background: var(--ink); }
.gauge:hover::before, .gauge:focus-within::before { background: var(--accent); }
.gauge__name { font-size: 1.5rem; margin: 0 0 0.25rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.gauge__name small { font-family: var(--mono); font-size: 0.7rem; font-weight: 400; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; }
/* The track: 0 at the left, the bar at four fifths, the red band from the
   bar to the end. The today tick is the accent, sitting on the track. The
   fill is today's share of the track, already at --today when scripts are off. */
.gauge__track { position: relative; block-size: 0.8rem; margin: 0.85rem 0 0.6rem; background: var(--ground-3); overflow: visible; }
.gauge__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: calc(var(--today) * 100%);
  background: var(--accent-bg);
  pointer-events: none;
}
.gauge__band { position: absolute; inset-block: 0; inset-inline-start: calc(var(--need) * 100%); inset-inline-end: 0; background: var(--crit); }
.gauge__bar { position: absolute; inset-block: -0.25rem; inset-inline-start: calc(var(--need) * 100%); inline-size: 2px; background: var(--ink); transform: translateX(-1px); }
.gauge__tick {
  position: absolute;
  inset-block: -0.3rem;
  inset-inline-start: calc(var(--today) * 100%);
  inline-size: 0.5rem;
  background: var(--accent);
  border: 1.5px solid var(--surface);
  transform: translateX(-50%);
  box-sizing: border-box;
}
.gauge__figs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.gauge__fig { min-width: 0; }
.gauge__fig b {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.gauge__fig b .u { font-size: 0.55em; font-weight: 500; color: var(--ink-2); margin-inline-start: 0.1em; }
.gauge__fig small { display: block; font-size: 0.75rem; line-height: 1.35; color: var(--ink-3); margin-top: 0.25rem; }
.gauge__fig small::before { content: ""; display: inline-block; inline-size: 0.55rem; block-size: 0.55rem; margin-inline-end: 0.35rem; vertical-align: -0.02em; }
.gauge__fig--today small::before { background: var(--accent); }
.gauge__fig--need small::before { background: var(--crit); }
.gauge__fig--need { text-align: end; }
.gauge__why { font-size: 0.875rem; color: var(--ink-2); margin: 0.85rem 0 0; line-height: 1.5; }
.gauge__why b { color: var(--ink); font-weight: 600; }

/* ── Facts, history, given ─────────────────────────────────────────────── */

.history {
  display: grid;
  gap: 1.75rem 2.5rem;
  align-items: start;
}
@media (min-width: 800px) {
  .history { grid-template-columns: minmax(13rem, 20rem) minmax(0, 1fr); }
}
.history .ledger {
  min-width: 0;
  max-width: none;
  border: 1px solid var(--ink);
  background: var(--surface);
}
.history .ledger caption {
  caption-side: top;
  background: var(--ink);
  color: var(--ground);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  max-width: none;
  padding: 0.65rem 0.9rem;
  margin: 0;
}
.history .ledger th, .history .ledger td { padding: 0.45rem 0.9rem; }
.history__copy p { color: var(--ink-2); font-size: 1.0625rem; margin: 0 0 1rem; }
.history__copy p:last-child { margin-bottom: 0; }

.facts {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
@media (min-width: 900px) {
  .facts { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}
.fact {
  border: 1px solid var(--ink);
  border-top: 4px solid var(--area-c, var(--ink));
  background: var(--surface);
  padding: 1.1rem 1.25rem 1.3rem;
  min-width: 0;
}
.fact .plate { margin-bottom: 0.9rem; }
.fact h2 { font-size: 1.65rem; margin: 0 0 0.75rem; padding: 0; border: 0; max-width: none; }
.fact p { font-size: 0.9375rem; color: var(--ink-2); margin: 0 0 0.85rem; line-height: 1.55; }
.fact p:last-child { margin-bottom: 0; }
.fact p b, .fact p strong { color: var(--ink); font-weight: 600; }
.fact + .callout { margin-top: 0.25rem; }

/* The prose column is measured a little tighter than the site's 70ch. */
.prose { max-width: 65ch; }
/* A button inside the prose column: .prose a's accent colour would paint
   the primary button's label the same blue as its ground. */
.prose .btn--primary, .prose .btn--primary:hover { color: var(--on-accent); }

/* ── Phone ─────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* The board: two figures to a row, each with its label beneath. */
  .board__rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .board__row { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; align-content: start; }
  .board__row dd { grid-column: 1; grid-row: 1; text-align: start; font-size: 1.7rem; white-space: normal; }
  .board__row dd.board__text { font-size: 1.2rem; }
  .board__row dt { grid-row: 2; }
  .board__row:nth-last-child(-n + 2) { border-bottom: 0; }
  .board__row::before { inset-inline-start: -0.45rem; }
  /* The six gauges, two to a row; both figures stack at the left. */
  .gauges { grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .gauge { padding: 1rem 0 1.1rem 0.9rem; }
  .gauge::before { inset-block: 1.15rem 1.25rem; }
  .gauge__name { font-size: 1.2rem; }
  .gauge__track { margin-top: 0.65rem; }
  .gauge__figs { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .gauge__fig--need { text-align: start; }
  .gauge__fig b { font-size: 1.5rem; }
  .gauge__fig small { font-size: 0.8125rem; }
  .gauge__why { font-size: 0.8125rem; }
  /* The key's names stay at 13 px; the mono years are 11 px. */
  .tmap__key li, .tmap__key--many li { font-size: 0.8125rem; }
  .fact h2 { font-size: 1.4rem; }
  .city-cta .btn { flex: 1 1 100%; }
}
/* Under 480 px the map's fine labels (the scale's figure, the inset's name)
   would be a few pixels tall: hidden rather than shrunk. The scale bar and
   the inset frame stay. */
@media (max-width: 479.98px) {
  .tm-scale__lbl, .tm-inset__lbl { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tmap--hot .tm-line,
  .tmap--hot .tm-stns [data-i] { transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .fact, .tmap, .board {
    transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .fact:hover, .fact:focus-within { transform: translateY(-3px); }
}