/* Shared tokens. Every text element uses one of four type roles. */
:root {
  --paper: #fff;
  --ink: #000;
  /* MTA Brand Colors / Subway, SIR & ADA: mta.info/document/168976 */
  --food: #D82233;
  --culture: #F6BC26;
  --walk: #0062CF;
  --subway-green: #009952;
  --shop: var(--subway-green);
  --subway-purple: #9A38A1;
  --bullet-size: 1.75rem;
  --font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text-title: 700 clamp(3rem, 28vw, 80rem) / .82 var(--font-family);
  --text-subtitle: 700 1.5rem / 1.2 var(--font-family);
  --text-paragraph: 700 1rem / 1.5 var(--font-family);
  --text-detail: 700 .8125rem / 1.4 var(--font-family);
  --grid-columns: 12;
  --grid-gutter: 1rem;
  --space: 1rem;
  --line: 1px solid var(--ink);
  --control-height: 3rem;
}

/* Four text roles; editorial headings scale within their component. */
body, button, input, select, textarea, .leaflet-container {
  font: var(--text-paragraph);
}
h2, h3, .text-subtitle {
  font: var(--text-subtitle);
  letter-spacing: -.03em;
}
.text-detail, .layer-count, .map-station, .saved-link small,
.leaflet-control-attribution, .leaflet-tooltip {
  font: var(--text-detail);
  letter-spacing: normal;
}

/* Base */
* { box-sizing: border-box; }
html {
  /* Keep the 1920 px composition at the same visual scale on 2K and 4K displays. */
  font-size: clamp(16px, .833333vw, 32px);
  scroll-behavior: smooth;
  scroll-padding-top: var(--space);
}
body { margin: 0; color: var(--ink); background: var(--paper); }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { color: inherit; }
button, a { touch-action: manipulation; }
button, summary { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:disabled { opacity: .4; cursor: default; }
:where(button, a, input, select, summary):focus-visible {
  outline: 3px solid var(--walk);
  outline-offset: 4px;
}
[hidden] { display: none !important; }
body:not(.is-admin) .admin-only { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Shared button variants. Symbols are text in the same Helvetica stack. */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 0; padding: .5rem .75rem;
  background: transparent; color: var(--ink); font: var(--text-paragraph);
  text-decoration: none; cursor: pointer;
}
.button--solid { background: var(--ink); color: var(--paper); }
.button--text { padding: 0 .125rem; }
.button--icon { width: 2.75rem; min-height: 2.75rem; padding: 0; font: var(--text-subtitle); }
.button:is(.button--solid, .button--text, .button--icon, .button--control):is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]):not(.leaflet-disabled) {
  background: var(--category-color, var(--food));
  color: var(--category-ink, var(--paper));
  text-decoration: none;
}
.button:is(:disabled, [aria-disabled="true"], .leaflet-disabled) { opacity: .4; cursor: default; }
/* Tight text highlights inherit the category accent. */
:where(nav a, .place-map-link, .place-photo a, .saved-link a) {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
:where(nav a, .place-map-link, .place-photo a, .saved-link a):is(:hover, :focus-visible) {
  background: var(--category-color, var(--food));
  color: var(--category-ink, var(--paper));
  text-decoration: none;
}
.actions { display: flex; align-items: center; gap: 1rem; }

/* Header and countdown */
/* Shared 12-column grid; horizontal page inset is --space. */
.layout-grid, .masthead, .place-group {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
}
.layout-grid { padding-inline: var(--space); }
.masthead { flex-shrink: 0; padding-top: max(.625rem, env(safe-area-inset-top)); align-items: center; padding-bottom: .625rem; margin: 0 var(--space); border-bottom: var(--line); }
.masthead > .brand { grid-column: span 6; justify-self: start; }
.masthead > nav { grid-column: span 6; justify-self: end; }
.brand, nav { display: flex; align-items: center; gap: .5rem; }
nav { gap: .375rem; font: var(--text-detail); }
nav a, .admin-trigger { padding: 0 .125rem; }
nav a + a::before { content: "/"; margin-right: .375rem; }
.admin-trigger { border: 0; background: none; font: inherit; text-transform: lowercase; }
.admin-trigger::before { content: "/"; margin-right: .375rem; }
.admin-trigger:is(:hover, :focus-visible) { background: var(--ink); color: var(--paper); }
.brand { gap: .1875rem; }
.route-bullet, .line-symbol {
  font: var(--text-paragraph);
  text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 var(--bullet-size); width: var(--bullet-size); height: var(--bullet-size);
  border-radius: 50%; line-height: 1; letter-spacing: 0;
  background: var(--ink); color: var(--paper);
}
.route-red { background: var(--food); }
.route-yellow { background: var(--culture); color: var(--ink); }
.route-blue { background: var(--walk); }
.route-green { background: var(--subway-green); }
.route-purple { background: var(--subway-purple); }

/* Hero: Figma frame "600214" of PASIAMOR (1920 × 1080, of which the hero is the top 1040 and
   the "mapa / ver todo" bar the last 40). Every piece sits at its frame coordinates and --u is
   one frame pixel, one scale for everything so positions, sizes and overlaps match the design.
   The hero fills the screen minus the real bar, which peeks in at the bottom
   (see .section-bar). */
:root { --peek: 40px; } /* the section bar is 40px, as in the Figma frame */
.hero { --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); --card-spin-duration: 1000ms; container-type: inline-size; position: relative; min-height: calc(100vh - var(--peek)); min-height: calc(100dvh - var(--peek)); display: flex; overflow: hidden; border-bottom: var(--line); background: #fafafa; color: #1e1e1e; }
.hero-admin-trigger { position: absolute; top: var(--space); right: var(--space); z-index: 4; padding: .125rem .25rem; font: var(--text-detail); }
.hero-admin-trigger::before { content: none; }
.hero-board {
  /* Fills the width; on screens wider than the design the bottom of the cards is cropped a bit
     more (up to ~140 frame px) before the frame starts shrinking and centering instead. */
  --u: min(100cqw / 1920, (100dvh - var(--peek)) / 900);
  --hero-font: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --hero-type: 700 calc(203.626 * var(--u)) / 1 var(--hero-font);
  /* Figma's spring (damping ≈ .71), sampled for CSS. */
  --ease-spring: linear(0, .03, .1077, .2165, .342, .4728, .6001, .7175, .8208, .9077, .9776, 1.0307, 1.0684, 1.0925, 1.1051, 1.1084, 1.1047, 1.096, 1.084, 1.0703, 1.0561, 1.0424, 1.0297, 1.0187, 1.0094, 1.0019, .9963, .9923, .9898, .9885, .9882, .9887, .9897, .991, .9925, .994, .9955, .9969, .9981, .9991, .9998, 1.0004, 1.0009, 1.0011, 1.0012, 1.0013, 1.0012, 1.0011, 1.001, 1.0008, 1.0006);
  position: relative; width: calc(1920 * var(--u)); margin-inline: auto;
}
.hero-line { position: absolute; display: flex; align-items: center; gap: calc(40 * var(--u)); font: var(--hero-type); letter-spacing: -.05em; white-space: nowrap; }
.hero-line > span { margin-right: .05em; } /* Figma does not track after the last letter */
/* Hover on Pasiamor or Dmowl: it turns grey and the pointer becomes a colored
   dot with a word (app.js reads data-cursor / data-cursor-color). */
.hero-hover { transition: color .25s cubic-bezier(.33, 0, .2, 1); }
.hero-hover:hover { color: #dddcdd; cursor: none; }
.hero-cursor {
  position: fixed; left: 0; top: 0; z-index: 10; pointer-events: none;
  display: flex; align-items: center; gap: 6px; margin: -11px 0 0 -8px; /* dot centered on the pointer */
  font: 700 22px / 1 Helvetica, "Helvetica Neue", Arial, sans-serif; color: var(--cursor-color, #d02700); white-space: nowrap;
  opacity: 0; scale: .6; transform-origin: 8px 11px; transition: opacity .15s var(--ease-out), scale .2s var(--ease-out);
}
.hero-cursor.is-visible { opacity: 1; scale: 1; }
.hero-cursor::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: currentColor; flex: none; }
.hero-line--1 { left: calc(62.93 * var(--u)); top: calc(27 * var(--u)); }
.hero-line--1 > :first-child { min-width: calc(851 * var(--u)); }
.hero-line--1 > :last-child { min-width: calc(632.127 * var(--u)); }
.hero-line--2 { left: calc(62.93 * var(--u)); top: calc(199 * var(--u)); }
.hero-date { display: inline-flex; align-items: baseline; letter-spacing: 0; }
.hero-date > span { display: block; }
.hero-date > :nth-child(1) { margin-right: -.03em; }
.hero-date > :nth-child(3) { margin-left: -.02em; }
.hero-date > :nth-child(4) { margin-left: .02em; margin-right: -.055em; }
.hero-date > :nth-child(6) { margin-left: -.025em; }
.hero-date > :nth-child(7) { margin-left: -.035em; }
.hero-line--3 { left: calc(280.93 * var(--u)); top: calc(396 * var(--u)); width: calc(1464 * var(--u)); justify-content: flex-end; gap: calc(29 * var(--u)); }
.hero-asterisk { width: calc(100 * var(--u)); height: calc(99 * var(--u)); flex: none; color: #1c1c1a; }
.hero-asterisk-button { display: flex; flex: none; padding: 0; margin: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.hero-asterisk-button .hero-asterisk { display: block; }
/* Hover: the asterisk turns once and goes blue #404BE3 (and back when the pointer leaves). */
.hero-asterisk-button { transition: rotate .8s cubic-bezier(.2, .8, .2, 1); }
.hero-asterisk-button .hero-asterisk { transition: color .25s cubic-bezier(.33, 0, .2, 1); }
.hero-asterisk-button:is(:hover, :focus-visible) { rotate: 360deg; }
.hero-asterisk-button:is(:hover, :focus-visible) .hero-asterisk { color: #404be3; }

/* Cards: MetroCards rendered flat from Figma, rotated here. Pressing one spins it (no navigation).
   The card layer is the 1040-tall hero part of the frame: pinned to the top when the screen is
   shorter (cards cropped by the bar), to the bottom when taller. --cx/--cy are card centers in it. */
.hero-cards { --cu: var(--u); --ox: 0; --oy: 0; --card-w: 743.720; --card-h: 469.546; position: absolute; left: 0; right: 0; top: max(0px, 100% - 1040 * var(--cu)); height: calc(1040 * var(--cu)); pointer-events: none; }
/* The link itself doesn't move: a stationary hit area keeps the hover while the art rises,
   so the card never flickers out from under the pointer. */
.hero-card {
  position: absolute; display: block; pointer-events: none;
  margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
  left: calc((var(--cx) - var(--card-w) / 2 + var(--ox)) * var(--cu)); top: calc((var(--cy) - var(--card-h) / 2 + var(--oy)) * var(--cu));
  width: calc(var(--card-w) * var(--cu)); height: calc(var(--card-h) * var(--cu));
}
.hero-card-hit, .hero-card-art { position: absolute; inset: 0; }
.hero-card-hit, .hero-card-tilt { pointer-events: auto; rotate: var(--r); border-radius: 0 calc(31.5 * var(--cu)) calc(31.5 * var(--cu)) calc(31.5 * var(--cu)); }
/* Hover: the card rises by --rise until it is fully visible, every card ending at the same
   height (center at y 590 of the frame). `translate` applies before `rotate`, so it moves straight up.
   It stops lower if needed so the whole card clears the "mapa" bar: --ext is half the rotated
   card's height, and the visible bottom is the hero height (or the frame, if shorter).
   --lift animates 0 → 1. */
@property --lift { syntax: "<number>"; inherits: false; initial-value: 0; }
.hero-card {
  --hero-h: calc(100dvh - var(--peek) - 1px);
  --rise-to: min(590 * var(--cu), min(var(--hero-h), 1040 * var(--cu)) - (var(--ext) + 16) * var(--cu));
  --rise: calc(var(--cy) * var(--cu) - var(--rise-to));
}
.hero-card-art { --lift: 0; translate: 0 calc(-1 * var(--lift) * var(--rise)); transition: --lift .9s var(--ease-in-out); }
.hero-card:focus-visible { z-index: 2; outline: none; }
.hero-card:focus-visible .hero-card-tilt { outline: 3px solid var(--walk); outline-offset: 0; }
.hero-card img { display: block; width: 100%; height: 100%; }
/* Hover: one horizontal turn reveals the back once, then lands on the front.
   The stationary hit area keeps the raised card from flickering under the pointer. */
.hero-card-art { perspective: calc(2400 * var(--cu)); }
.hero-card-flip, .hero-card-tilt { position: absolute; inset: 0; transform-style: preserve-3d; }
.hero-card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* Seen after half a turn, the back keeps the same tilt as the front, as in the Figma back. */
.hero-card-back { transform: rotate(calc(-1 * var(--r))) rotateY(180deg) rotate(var(--r)); }
.hero-card-back-name {
  position: absolute; left: 53.911%; top: 74.214%;
  font: 700 calc(77.02 * var(--cu)) / 1 var(--hero-font); letter-spacing: -.06em; white-space: nowrap;
  color: rgb(255 255 255 / .7);
}
@keyframes hero-card-flip { from { transform: rotateY(0); } to { transform: rotateY(-360deg); } }

@media (hover: hover) and (pointer: fine) {
  .hero-card:hover .hero-card-art { --lift: 1; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-card:hover .hero-card-flip { animation: hero-card-flip var(--card-spin-duration) var(--ease-in-out) both; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-card:focus-visible .hero-card-art { --lift: 1; }
}

.hero-card.is-flipping .hero-card-art { --lift: 1; }
.hero-card--food { --ext: 420.0; --cx: 250.018; --cy: 839.954; --r: -75deg; --category-color: var(--food); }
.hero-card--culture { --ext: 400.9; --cx: 685.198; --cy: 1028.893; --r: -82.007deg; --category-color: var(--culture); }
.hero-card--shop { --ext: 436.0; --cx: 1625.331; --cy: 1091.371; --r: -65.244deg; --category-color: var(--shop); }
.hero-card--walk { --ext: 439.2; --cx: 1113.481; --cy: 1092.303; --r: -60.773deg; --category-color: var(--walk); }
/* Hover: the category name gets highlighted in its line color (label art cut from the card). */
.hero-card .hero-card-label { position: absolute; width: auto; height: auto; opacity: 0; transition: opacity .2s var(--ease-out); }
.hero-card:is(:hover, :focus-visible) .hero-card-label { opacity: 1; }
.hero-card--food .hero-card-label { left: 45.447%; top: 8.093%; width: 11.967%; height: 5.644%; }
.hero-card--culture .hero-card-label { left: 45.447%; top: 8.093%; width: 11.967%; height: 5.644%; }
.hero-card--shop .hero-card-label { left: 50.422%; top: 8.093%; width: 10.084%; height: 5.644%; }
.hero-card--walk .hero-card-label { left: 45.447%; top: 8.093%; width: 13.782%; height: 5.644%; }
.hero-card-bullet {
  position: absolute; left: 87.001%; top: 7.372%;
  width: 7.757%; aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--category-color); color: var(--paper);
  font: 700 calc(37.432 * var(--cu)) / 1 var(--hero-font); letter-spacing: -.05em;
}

/* Entrance, from the Figma prototype: slower cards with a light stagger. */
@media (prefers-reduced-motion: no-preference) {
  .hero-card { animation: hero-card-enter 1.18s var(--ease-out) both; }
  .hero-card--food { animation-delay: .32s; }
  .hero-card--culture { animation-delay: .39s; }
  .hero-card--walk { animation-delay: .46s; }
  .hero-card--shop { animation-delay: .53s; }

  .hero-line { animation: hero-rise .52s var(--ease-out) both; }
  .hero-line--2 { animation-duration: .54s; animation-delay: .12s; }
  .hero-line--3 { animation-duration: .58s; animation-delay: .24s; }
  .hero-asterisk { animation: hero-fade .22s var(--ease-out) .72s both, hero-asterisk .62s var(--ease-spring) .72s both; }
  .hero-card-bullet { animation: hero-fade .18s var(--ease-out) .55s both, hero-bullet .42s var(--ease-spring) .55s both; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-card { animation: hero-fade .2s ease both; }
}

@keyframes hero-card-enter {
  from { opacity: 0; transform: translateY(22%); }
}
@keyframes hero-rise { from { opacity: 0; translate: 0 calc(64 * var(--u)); } }
@keyframes hero-fade { from { opacity: 0; } }
@keyframes hero-asterisk { from { rotate: 165deg; scale: .72; translate: calc(14 * var(--u)) calc(13.86 * var(--u)); } }
@keyframes hero-bullet { from { scale: .68; translate: calc(8.8 * var(--cu)) calc(8.8 * var(--cu)); } }

/* Countdown: the asterisk opens a full-screen countdown (days, hours, minutes) in Helvetica
   #404BE3 on black; the photo between days and hours changes every second. */
.countdown {
  --count-ink: #404be3;
  --count-size: min(13vw, 30svh);
  --count-pad: clamp(1rem, 4vw, 4.5rem);
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-rows: auto 1fr;
  background: #000; color: var(--count-ink); cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.countdown[hidden] { display: none !important; }
.countdown-bar { display: flex; justify-content: flex-end; padding: 1.5rem var(--count-pad); }
.countdown-close {
  border: 0; padding: 0; background: none; color: inherit; cursor: pointer;
  font: 500 .8125rem / 1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase;
}
.countdown-close:is(:hover, :focus-visible) { background: var(--count-ink); color: #000; }
/* Days | gap | photo | gap | hours minutes: equal gaps keep the photo midway between days and hours. */
.countdown-stage { display: flex; align-items: center; padding: 0 var(--count-pad) 4.5rem; min-height: 0; }
.countdown-gap { flex: 1; min-width: 2vw; }
.countdown-side { display: flex; align-items: center; gap: .08em; font-size: var(--count-size); font-weight: 500; line-height: .8; letter-spacing: -.04em; }
.countdown-side--right { gap: .3em; }
.countdown-paren { font-weight: 200; font-size: 1.25em; line-height: .8; transform: translateY(-.04em); }
.countdown-unit { position: relative; display: block; }
.countdown-num { display: block; font-variant-numeric: tabular-nums; }
.countdown-label {
  position: absolute; right: .04em; top: calc(100% + .9rem);
  font-size: .8125rem; font-weight: 500; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
}
/* The photo keeps its own shape (vertical or horizontal) inside a fixed box. */
.countdown-photo { margin: 0; flex: none; display: grid; place-items: center; }
.countdown-photo img { display: block; width: auto; height: auto; max-width: min(24vw, 40svh); max-height: min(24vw, 40svh); }
@media (max-width: 680px) {
  .countdown { --count-size: min(30vw, 16svh); }
  .countdown-stage { flex-direction: column; align-items: stretch; justify-content: center; gap: 2.5rem; padding-bottom: 3rem; }
  .countdown-gap { display: none; }
  .countdown-side--right { justify-content: flex-end; }
  .countdown-photo img { max-width: 64vw; max-height: 30svh; }
}

/* Shared section structure */
.section-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem var(--space); border-bottom: var(--line); }
.section-bar h2 { display: flex; align-items: center; gap: .75rem; }

/* Map */
.map-frame { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); gap: var(--grid-gutter); align-items: start; margin: var(--space); position: relative; isolation: isolate; }
.map-sidebar { grid-column: span 3; display: flex; flex-direction: column; gap: .75rem; min-width: 0; height: 80svh; max-height: 80svh; overflow-y: auto; scrollbar-width: thin; }
.map-sidebar > * { flex-shrink: 0; }
.map-viewport { grid-column: span 9; position: relative; height: 80svh; min-width: 0; }
.map-navigation { display: flex; align-items: center; gap: .5rem; }
.map-navigation #reset-map { display: grid; place-items: center; flex: none; height: calc(var(--control-height) + 2px); width: var(--control-height); padding: 0; border: var(--line); }
#map { height: 100%; width: 100%; min-width: 0; z-index: 0; border: var(--line); background: var(--paper); }
#map-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space); text-align: center; }

.leaflet-top.leaflet-right { top: 1rem; right: .5rem; }
.leaflet-control-zoom { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.map-legend { width: 100%; }
.layer { display: flex; align-items: center; gap: .5rem; width: 100%; min-height: var(--control-height); padding: .625rem var(--space); position: relative; border: var(--line); text-align: left; background: var(--paper); color: var(--ink); }
.layer + .layer { margin-top: -1px; }
.layer .line-symbol { background: var(--category-color); color: var(--category-ink); }
.layer-count { margin-left: auto; }
.layer[aria-pressed=false] { background: var(--paper); color: var(--ink); }
.layer[aria-pressed=false] .line-symbol { background: transparent; color: var(--ink); border: var(--line); }
.layer[aria-pressed=false] .layer-count { text-decoration: line-through; }
.station-panel { width: 100%; padding: var(--space); overflow-wrap: anywhere; }
.map-station { display: grid; place-items: center; background: transparent; border: 0; }
.map-station-badge { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 2px var(--paper); }
.map-note { grid-column: 1 / -1; display: flex; justify-content: flex-end; padding: 0; }
#map-credits .leaflet-control-attribution { float: none; margin: 0; padding: 0; background: none; color: var(--ink); }
#map-credits a { color: inherit; }
.station-index { padding: 0 var(--space); border-bottom: var(--line); }
.station-index summary { display: flex; justify-content: space-between; list-style: none; padding: 1rem 0; }
.station-index summary::-webkit-details-marker { display: none; }
.station-index[open] summary span { transform: rotate(45deg); }
/* Reference composition: two equal halves; photo at bottom left, index at right. */
.places-index { --text-subtitle: 700 clamp(1.5rem, 4.8vw, 5rem) / .98 var(--font-family); margin: 1.5rem var(--space) 0; }
.place-group { padding-block: .25rem; border-top: var(--line); }
.place-group > .place-group-side { grid-column: span 6; }
.place-group > .place-rows { grid-column: span 6; }
.place-group:last-child { border-bottom: var(--line); }
.place-group-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--grid-gutter); row-gap: .5rem; min-width: 0; }
.place-group-heading { display: contents; }
.place-category-letter { grid-column: 1; grid-row: 1; align-self: start; }
.place-category-label { grid-column: 2; grid-row: 1; text-align: right; align-self: start; }
.place-photo { margin: 0; width: 100%; grid-column: 1; grid-row: 2; align-self: start; position: sticky; top: max(var(--space), calc(100dvh - var(--photo-height, 300px) - var(--space))); }
.place-photo-frame { aspect-ratio: 1; position: relative; }
.place-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.place-photo-status { position: absolute; z-index: 2; inset: 0; display: flex; align-items: flex-end; padding: .25rem; pointer-events: none; }
.place-photo-frame.is-drop-target { outline: 3px solid currentColor; outline-offset: -3px; }
.place-photo-frame.is-drop-target::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--paper) 78%, transparent); }
.place-photo figcaption { display: flex; flex-wrap: wrap; gap: .25rem .5rem; justify-content: space-between; padding-top: .25rem; }
.place-photo a { text-decoration: underline; text-underline-offset: .2em; }
.place-photo-upload { margin-left: auto; padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; text-underline-offset: .2em; }
.place-rows { list-style: none; padding: 0; margin: 0; min-width: 0; }
.place-row { margin: 0; }
.place-row-button:is(:hover, :focus-visible) .place-row-name {
  background: var(--category-color);
  color: var(--category-ink);
}
.place-row-button { display: flex; justify-content: space-between; align-items: baseline; gap: var(--grid-gutter); width: 100%; padding: 0; border: 0; background: none; text-align: left; font: var(--text-subtitle); letter-spacing: -.045em; }
.place-row-name { text-transform: lowercase; overflow-wrap: anywhere; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.place-row-number { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.place-map-link { padding: 0 .125rem; white-space: nowrap; }
.place-group-empty { padding: .25rem; }

/* Links */
.link-collection { padding: 0 var(--space) var(--space); }
.map-link-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.map-link-form input { grid-column: 1 / -1; border-right: 0 !important; border-bottom: var(--line) !important; }
.map-link-form input, .map-link-form select { min-width: 0; min-height: var(--control-height); font: var(--text-paragraph); border: 0; border-right: var(--line); border-radius: 0; background: transparent; padding: .625rem var(--space); }
.select-shell { display: flex; position: relative; min-width: 0; }
.select-shell select { appearance: none; width: 100%; padding-right: 2.5rem; }
.select-shell::after { content: '↓'; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; font: var(--text-paragraph); }
.form-note { padding: .5rem; }
.form-note:empty { display: none; }
.map-add { width: 100%; background: var(--paper); border: var(--line); }
.map-add .form-note { grid-column: 1 / -1; }
.map-add .map-link-form { border-bottom: 0; }
#map-zoom { display: flex; border: var(--line); background: var(--paper); }
#map-zoom .leaflet-control-zoom { display: flex; float: none; margin: 0; height: 100%; }

.empty-links { padding: 2rem 0; }
.saved-link { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: var(--line); }
.saved-link > a { min-width: 0; padding-inline: .125rem; }
.saved-link strong { font-weight: inherit; }
.saved-link strong, .saved-link small { display: block; overflow-wrap: anywhere; }
#form-error:empty { display: none; }
.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 3000; width: max-content; max-width: 90%; padding: 1rem; background: var(--ink); color: var(--paper); }

/* Responsive layout; type roles stay the same. */
@media (max-width: 680px) {
  .masthead { row-gap: .5rem; }
  .masthead > .brand, .masthead > nav { grid-column: 1 / -1; }
  .masthead > nav { justify-self: start; }
  /* Hero on phones: title stacked in reading order, cards fanned along the bottom. */
  .hero { min-height: calc(100dvh - 48px); } /* below the fixed mobile nav */
  .hero-board {
    --u: calc(100vw / 1000);
    --hero-type: 700 calc(150 * var(--u)) / 1 var(--hero-font);
    width: 100%; height: auto; display: flex; flex-direction: column; gap: calc(30 * var(--u));
    padding: calc(51 * var(--u)) var(--space) 0;
  }
  .hero-line { position: relative; left: auto; right: auto; top: auto; flex-wrap: wrap; row-gap: calc(20 * var(--u)); column-gap: calc(28 * var(--u)); width: auto; justify-content: flex-start; }
  .hero-line--1 > span { min-width: 0 !important; }
  .hero-cards { --cu: calc(100vw / 870); position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; height: calc(960 * var(--cu)); margin: auto calc(-1 * var(--space)) 0; }
  /* Two rows of two, so the cards stay big enough to tap. */
  .hero-card--food, .hero-card--culture { --ox: 30; --oy: -470; }
  .hero-card--walk, .hero-card--shop { --ox: -790; --oy: -300; }
  .hero-cards .hero-card { --rise: calc(28 * var(--cu)); } /* phones: keep a small lift */

  .leaflet-top.leaflet-right { top: .75rem; right: .75rem; }
  .section-bar { flex-wrap: wrap; }
  .actions { gap: .5rem; }
  .map-link-form { grid-template-columns: 1fr auto; }
  .map-link-form input { grid-column: 1 / -1; border-right: 0; border-bottom: var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Map controls share type, height and text glyphs. */
.ui-symbol {
  font-family: var(--font-family); font-weight: 700; line-height: 1;
}
.button--control { min-height: var(--control-height); padding: .625rem var(--space); gap: .5rem; white-space: nowrap; }
.map-add .select-shell:is(:hover, :focus-within) { background: var(--category-color); color: var(--category-ink); }
.map-add option { background: var(--paper); color: var(--ink); }
.map-add input::placeholder { color: var(--ink); opacity: .5; }
.map-add input:focus-visible, .map-add select:focus-visible { outline-offset: -3px; }
.map-add .button--control, #reset-map { gap: .5rem; }
.visit-toggle[aria-pressed=true] { text-decoration: underline; text-underline-offset: .2em; }
.map-station.is-visited .map-station-badge { outline: 2px solid var(--ink); outline-offset: 2px; }
.place-row.is-visited .place-row-name { text-decoration: line-through; text-decoration-thickness: 1px; }

@media (max-width: 680px) {
  .map-sidebar, .map-viewport { grid-column: 1 / -1; }
  .map-sidebar { display: contents; }
  .map-viewport { height: 65svh; min-height: 20rem; order: 2; }
  .map-heading { grid-column: 1 / -1; order: 0; }
  .map-legend { grid-column: 1 / -1; order: 1; }
  .station-panel { grid-column: 1 / -1; order: 3; }
  .map-sidebar-footer { grid-column: 1 / -1; order: 4; }
}

#toggle-subway { justify-content: space-between; border: var(--line); }

.map-add > summary { min-height: calc(var(--control-height) - 2px); display: flex; width: 100%; justify-content: space-between; list-style: none; }
.map-add > summary::-webkit-details-marker { display: none; }
.map-add > summary .ui-symbol::before { content: '+'; }
.map-add[open] > summary .ui-symbol::before { content: '−'; }
.map-add[open] > summary { border-bottom: var(--line); }
@media (max-width: 680px) {
  .layer-buttons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: var(--line); border-left: var(--line); }
  .layer { justify-content: flex-start; gap: .375rem; padding: .625rem var(--space); border-top: 0; border-left: 0; }
  .layer + .layer { margin-top: 0; }
  .layer-count { flex-basis: auto; width: auto; }

}

.layer:is(:hover, :focus-visible):not(:disabled) {
  z-index: 1;
  background: var(--category-color);
  color: var(--category-ink);
  border-color: transparent;
}
.layer:is(:hover, :focus-visible):not(:disabled) .line-symbol {
  background: var(--ink);
  color: var(--paper);
  border-color: transparent;
}

.map-popup .leaflet-popup-content-wrapper { border: var(--line); border-top: .625rem solid var(--ink); border-radius: 0; box-shadow: none; background: var(--paper); color: var(--ink); }
.map-popup .leaflet-popup-content { margin: 0; font: var(--text-paragraph); }
.map-card { padding: var(--space); --text-subtitle: 700 clamp(2rem, 2.6vw, 2.75rem) / 1 var(--font-family); }
.map-card-heading { display: flex; align-items: flex-start; gap: .5rem; }
.map-card h3 { margin: 0; min-width: 0; overflow-wrap: anywhere; font: var(--text-subtitle); letter-spacing: -.045em; }
.map-card-heading .map-card-badges { flex-shrink: 0; margin: .15rem 0 0; }
.map-card-badges { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .5rem; }
.map-card p { margin: .75rem 0 0; }
.place-card-note { white-space: pre-wrap; overflow-wrap: anywhere; }
.place-card-note::before { content: 'Nota · '; }
.map-card a { margin-top: .75rem; color: var(--ink); }
.map-popup a.leaflet-popup-close-button { top: .625rem; right: .25rem; font: var(--text-paragraph); color: var(--ink); }
.map-popup a.leaflet-popup-close-button:hover { background: var(--ink); color: var(--paper); }
.map-popup .leaflet-popup-tip { background: var(--paper); box-shadow: none; }

.map-navigation #reset-map .ui-symbol { -webkit-text-stroke: .65px currentColor; }

.map-heading { margin: 0 0 .5rem; font: var(--text-subtitle); font-size: 2em; line-height: 1; letter-spacing: -.045em; }

#map-zoom .button { display: grid; place-items: center; width: var(--control-height); height: var(--control-height); padding: 0; font: var(--text-subtitle); font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; line-height: 1; }
#map-zoom .button + .button { border-left: var(--line); }
.map-popup--place .leaflet-popup-content-wrapper, .map-popup--place .leaflet-popup-tip { background: var(--place-color); color: var(--place-ink); }

.map-fallback-tiles { filter: grayscale(1) contrast(.4) brightness(1.4); }

.map-bottom { position: absolute; bottom: var(--space); left: 50%; transform: translateX(-50%); z-index: 500; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .75rem; width: max-content; max-width: calc(100% - 32px); }
.map-overlays { display: flex; border: var(--line); background: var(--paper); }
.map-overlays .button + .button { border-left: var(--line); }
.map-overlays #toggle-subway { border: 0; border-left: var(--line); }
.map-overlays .button[aria-pressed=true] { background: var(--category-color,var(--subway-purple)); color: var(--category-ink,var(--paper)); }
.map-loader { position: absolute; inset: 0; z-index: 700; display: flex; align-items: center; justify-content: center; gap: .5rem; background: #e9e9e9; font: var(--text-detail); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease,visibility .25s; }
.is-loading .map-loader { opacity: 1; visibility: visible; pointer-events: auto; }
.loader-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ink); animation: map-loading .8s ease-in-out infinite alternate; }
@keyframes map-loading { to { opacity: .2; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .loader-dot { animation: none; } .map-loader { transition: none; } }

/* The tooltip itself owns its background; text never paints a smaller inner box. */
#toggle-neighborhoods { --category-color: #555555; --category-ink: var(--paper); }

.map-tooltip.leaflet-tooltip { width: max-content; max-width: min(18rem,70vw); margin: 0; padding: .25rem .375rem; border: 0; border-radius: 0; box-shadow: none; background: var(--ink); color: var(--paper); font: var(--text-detail); line-height: 1.15; white-space: normal; }
.map-tooltip.leaflet-tooltip::before { display: none; }
.map-tooltip.leaflet-tooltip > span { display: block; margin: 0; padding: 0; background: none; color: inherit; }
.map-tooltip--neighborhood.leaflet-tooltip { font: var(--text-paragraph); line-height: 1; letter-spacing: -.025em; padding: .2rem .3rem; }
.map-popup--neighborhood .leaflet-popup-content-wrapper, .map-popup--neighborhood .leaflet-popup-tip { background: #e9e9e9; }

.sidebar-card { border: var(--line); border-top: .625rem solid var(--ink); padding: 0; }

.sidebar-card .map-card p { margin-top: 1rem; }
.place-note-form { display: grid; gap: .5rem; margin: 1rem calc(-1 * var(--space)) 0; padding: 1rem var(--space) 0; border-top: var(--line); }
.place-note-form textarea { width: 100%; min-height: 6rem; resize: vertical; padding: .625rem; border: var(--line); border-radius: 0; background: var(--paper); color: var(--ink); font: var(--text-detail); }
.place-note-form .button { justify-content: space-between; width: 100%; }
.place-note-form .form-note { padding: 0; }
.place-note-form + .map-card-actions { margin-top: 1rem; }

/* Card actions share the same variant in popup and expanded sidebar. */
.map-popup--place a.leaflet-popup-close-button { color: var(--place-ink); }
.map-navigation #reset-map .ui-symbol { font: var(--text-subtitle); font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; line-height: 1; }

/* Solid action variant shared by form, zoom, overlays and card CTAs. */
#mapa .button--solid { background: var(--ink); color: var(--paper); }
#mapa .button--solid:is(:hover,:focus-visible):not(:disabled) { background: var(--category-color,var(--subway-purple)); color: var(--category-ink,var(--paper)); border-color: transparent; }
#mapa .map-overlays .button--solid[aria-pressed=true] { background: var(--category-color,var(--subway-purple)); color: var(--category-ink,var(--paper)); }

/* Map selection is communicated by its own highlights and cards. */
#map, #map .leaflet-interactive, #map .leaflet-marker-icon, #map a, .map-bottom .button {
  -webkit-tap-highlight-color: transparent;
}
#map:focus, #map:focus-visible,
#map .leaflet-interactive:focus, #map .leaflet-interactive:focus-visible,
#map .leaflet-marker-icon:focus, #map .leaflet-marker-icon:focus-visible,
#map a:focus, #map a:focus-visible {
  outline: none;
}

.ui-arrow { display: inline-block; font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; font-weight: 900; font-size: 1.25em; -webkit-text-stroke: 1.25px currentColor; line-height: 1; transform: scale(.8); transform-origin: center; }

.neighborhood-places { margin-top: .75rem; }
.neighborhood-places .neighborhood-place { display: flex; justify-content: space-between; gap: .5rem; width: 100%; margin-top: .375rem; padding: .125rem 0; text-align: left; }
.map-overlay-pane { opacity: 1; visibility: visible; transition: opacity .22s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.map-overlay-pane.is-zoom-hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s cubic-bezier(.2,.8,.2,1), visibility 0s .22s; }
.map-overlay-pane path { transition: stroke-width .22s cubic-bezier(.2,.8,.2,1), stroke-opacity .22s ease, fill-opacity .22s ease, fill .22s ease; }
.map-tooltip { animation: overlay-label-in .16s ease-out; }
@keyframes overlay-label-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map-overlay-pane, .map-overlay-pane.is-zoom-hidden, .map-overlay-pane path { transition: none; } .map-tooltip { animation: none; } }

.map-card--small:is(.map-card--place, .map-card--subway) { --text-subtitle: 700 clamp(1.5rem, 1.8vw, 1.75rem) / 1.05 var(--font-family); }
.map-card--small h3 { flex: 1; text-wrap: balance; overflow-wrap: break-word; }
.close-map-hint { position: absolute; z-index: 650; pointer-events: none; background: var(--ink); color: var(--paper); padding: .25rem .375rem; font: var(--text-detail); line-height: 1; }

/* Shared edge-to-edge action footer for both card sizes. */
.map-card-actions { width: calc(100% + 2 * var(--space)); margin: 4rem calc(-1 * var(--space)) calc(-1 * var(--space)); }
.map-card-actions .card-action { display: flex; justify-content: space-between; gap: .5rem; width: 100%; min-height: var(--control-height); margin: 0; padding: .625rem var(--space); border: 0; text-align: left; text-decoration: none; }
#mapa .map-card-actions .card-action--secondary { background: var(--paper); color: var(--ink); }
#mapa .map-card-actions .card-action:is(:hover,:focus-visible):not(:disabled) { background: var(--category-color); color: var(--category-ink); }

/* Shared trailing column keeps counts and action glyphs on one axis. */
.layer-count, .map-add > summary > .ui-symbol, .map-card-actions .ui-symbol {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 var(--bullet-size); width: var(--bullet-size);
}

.map-sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: .75rem; }
.map-sidebar-footer .map-note { justify-content: flex-start; }

/* One local password unlocks every write action for the browser session. */
.admin-dialog { width: min(30rem, calc(100% - 2rem)); padding: 0; border: var(--line); border-radius: 0; background: var(--paper); color: var(--ink); }
.admin-dialog::backdrop { background: rgb(0 0 0 / .55); }
.admin-dialog-panel { padding: var(--space); }
.admin-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: var(--space); border-bottom: var(--line); }
.admin-login-form { display: grid; gap: .75rem; padding-top: var(--space); }
.admin-login-form input { width: 100%; min-height: var(--control-height); padding: .625rem var(--space); border: var(--line); border-radius: 0; background: var(--paper); font: var(--text-paragraph); }
.admin-login-form .button { justify-content: space-between; }

.map-minimap { position: absolute; top: var(--space); right: var(--space); width: 144px; height: 112px; z-index: 450; border: var(--line); background: #e9e9e9; pointer-events: none; }
.map-minimap[hidden] { display: none; }
@media (max-width: 600px) { .map-minimap { width: 112px; height: 88px; } }

/* Phone layout keeps the map close to its filters and actions within reach. */
@media (max-width: 680px) {
  .map-bottom { width: calc(100% - 32px); max-width: none; gap: .5rem; }
  .map-navigation, .map-overlays { flex-shrink: 0; }
  .map-overlays .button { padding-inline: .75rem; }
  .map-popup .leaflet-popup-content { max-height: max(10rem,calc(65svh - 9rem)); overflow-y: auto; overscroll-behavior: contain; }
  .map-card--large { --text-subtitle: 700 clamp(2rem,8vw,2.75rem) / 1 var(--font-family); }
  .map-link-form { grid-template-columns: minmax(0,1fr) auto; }
  .map-link-form input { width: 100%; }
  .map-note { overflow-wrap: anywhere; }
  .place-group > .place-group-side { grid-column: span 4; }
  .place-group > .place-rows { grid-column: span 8; }
  .place-group-side { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto 1fr; gap: .5rem; }
  .place-category-label { grid-column: 1; grid-row: 2; text-align: left; }
  .place-photo { grid-column: 1; grid-row: 3; width: 100%; }
  .place-row-button { min-height: 44px; align-items: baseline; padding-block: .125rem; }
  .place-photo figcaption { justify-content: flex-start; }
  .place-photo-upload { display: none; }
  .saved-link { min-width: 0; }
}
@media (hover: none) {
  .place-row-button[aria-pressed=true] .place-row-name { background: var(--category-color); color: var(--category-ink); }
  .close-map-hint { display: none !important; }
}

/* Shared control geometry; mobile uses one fixed-size toolbar. */
.mobile-section-nav, .overlay-glyph, .map-filter-toolbar { display: none; }
.map-return { position: absolute; top: var(--space); left: var(--space); z-index: 550; --category-color: var(--paper); --category-ink: var(--ink); }
@media (max-width: 680px) {
  html { scroll-snap-type: y proximity; scroll-padding-top: 48px; }
  body { padding-top: 48px; }
  .mobile-section-nav { position: fixed; inset: 0 0 auto; height: 48px; z-index: 2000; display: flex; justify-content: space-around; align-items: center; background: var(--paper); border-bottom: var(--line); font: var(--text-detail); }
  .mobile-section-nav a { display: grid; place-items: center; height: 100%; flex: 1; }
  .mobile-section-nav a + a::before { content: none; }
  .mobile-section-nav a:is(:hover,:focus-visible) { background: var(--ink); color: var(--paper); }
  .map-frame { --control-height: 40px; --bullet-size: 24px; margin: 16px 0; gap: 0; }
  .map-viewport { order: 0; height: calc(100svh - 48px); min-height: 0; scroll-snap-align: start; }
  #map { border-inline: 0; }
  .map-viewport > .map-heading { position: absolute; top: 12px; left: 12px; z-index: 500; margin: 0; padding: 4px 8px; background: var(--paper); font: var(--text-paragraph); }
  .map-filter-toolbar { position: absolute; top: 52px; left: 12px; right: 12px; z-index: 550; display: flex; gap: 8px; }
  .map-filter-toolbar .map-legend { width: auto; }
  .map-filter-toolbar .layer-buttons { display: flex; border: 0; gap: 0; }
  .map-filter-toolbar .layer { width: 40px; height: 40px; min-height: 40px; padding: 0; margin: 0; display: grid; place-items: center; border: var(--line); background: var(--paper); }
  .map-filter-toolbar .layer + .layer { border-left: 0; }
  .map-filter-toolbar .layer-label, .map-filter-toolbar .layer-count { display: none; }
  .map-filter-toolbar .layer[aria-pressed=false] { opacity: .5; }
  .map-filter-toolbar .map-overlays { display: flex; border: 0; }
  .map-filter-toolbar .map-overlays .button { width: 40px; height: 40px; min-height: 40px; padding: 0; border: var(--line); display: grid; place-items: center; }
  .map-filter-toolbar .map-overlays .button + .button { border-left: 0; }
  .map-filter-toolbar .overlay-label, .map-filter-toolbar .ui-symbol { display: none; }
  .map-filter-toolbar .overlay-glyph { display: block; font: var(--text-paragraph); line-height: 1; }
  .map-bottom { bottom: 42px; width: calc(100% - 24px); max-width: none; gap: 8px; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
  .map-navigation { gap: 8px; }
  #map-zoom .button, .map-navigation #reset-map { width: 40px; height: 40px; min-height: 40px; padding: 0; display: grid; place-items: center; border: var(--line); font-size: 24px; line-height: 1; }
  #map-zoom .button + .button { border-left: 0; }
  .map-navigation #reset-map .ui-symbol { font-size: 24px; line-height: 1; }
  .map-return { position: static; width: 40px; height: 40px; min-height: 40px; padding: 0; display: grid; place-items: center; }
  .map-return > span:not(.ui-symbol) { display: none; }
  .map-return .ui-symbol { font-size: 24px; line-height: 1; }
  .map-sidebar-footer { position: relative; width: 100%; margin: 0; display: block; }
  .map-add > summary { height: 40px; min-height: 40px; padding: 0 12px; font: var(--text-paragraph); }
  .map-add > summary .ui-symbol { display: grid; place-items: center; width: 24px; height: 24px; font-size: 24px; line-height: 1; }
  .map-add[open] .map-link-form { position: absolute; bottom: 100%; left: 0; right: 0; padding: 0; background: var(--paper); border: var(--line); }
  .map-add[open] .form-note:not(:empty) { padding: 8px 12px; background: var(--paper); }
  .map-note-mobile { position: absolute; bottom: 4px; left: 8px; right: 8px; z-index: 500; background: rgb(255 255 255 / .9); text-align: right; }
  .map-minimap { top: 104px; right: 12px; width: 88px; height: 68px; }
  .map-card--small { --space: 12px; }
  .map-card--small:is(.map-card--place,.map-card--subway,.map-card--neighborhood) { --text-subtitle: 700 1.375rem / 1.05 var(--font-family); }
  .map-card--small .map-card-actions { margin-top: 1.25rem; }
  .map-card--small .card-action { min-height: 40px; font: var(--text-detail); }
  .map-popup .leaflet-popup-content { max-height: 45svh; }
  .station-panel { order: 1; margin: 16px; width: calc(100% - 32px); }
  .place-row-button { min-height: 0; padding: 0; line-height: 1; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-snap-type: none; } }