chrome.css

/* Map screen chrome. Sizes here are load-bearing, not decorative -
   WIREFRAMES.md's "Load-bearing values" lists them explicitly:
   42px map controls, 38px header buttons, >=44px effective touch targets.

   The 38px/44px pair is not a contradiction. 38px is what is DRAWN, so the
   header stays visually quiet; 44px is what can be HIT, which is the minimum
   that stays usable for a cold, gloved, one-handed tap on a moving trail.
   The gap is made up with an invisible expanded hit area rather than by
   inflating the visible button. */

:root {
  --map-control-size: 42px;
  --header-button-size: 38px;
  --min-touch-target: 44px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Status strip ---------- */

.status-strip {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: 4px var(--space-4, 16px);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--fg-3);
  background: var(--bg-page);
}

.status-strip__conditions {
  display: flex;
  gap: var(--space-2, 8px);
  flex: 1;
}

.status-strip__flag {
  color: var(--danger);
  font-weight: 600;
}

.status-strip__sync {
  margin-left: auto;
}

/* ---------- Header (read-only zone) ---------- */

.map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 16px);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-1);
}

.map-header__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.map-header__eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.map-header__trail-logo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.map-header__position {
  margin: 2px 0 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 17px;
  font-weight: 600;
  color: var(--fg-1);
}

.map-header__actions {
  display: flex;
  /* WIREFRAMES.md: two 38px icon buttons, gap 7px. */
  gap: 7px;
}

.map-header__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--header-button-size);
  height: var(--header-button-size);
  padding: 0;
  color: var(--fg-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  cursor: pointer;
  /* Design-system rule: fades and colour transitions only, 120-200ms. */
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

/* Expands the hit area from the drawn 38px to the required 44px without
   changing what is drawn. */
.map-header__button::after {
  content: '';
  position: absolute;
  inset: calc((var(--header-button-size) - var(--min-touch-target)) / 2);
}

.map-header__button:hover {
  background: var(--bg-sunken);
  color: var(--fg-1);
}

.map-header__button:active {
  transform: scale(0.97);
}

/* ---------- Map canvas ---------- */

.map-view {
  flex: 1;
  min-height: 0;
  position: relative;
  /* The last line of defence against a black map, covering the window the
     style's own background layer cannot: before WebGL has painted a first
     frame, and if the context is lost or never obtained at all. Same paper as
     MAP_BACKGROUND_COLOR - a literal rather than --bg-page since the field
     sheet moved the map onto white paper while the chrome kept its cream, so
     the token and the map parted ways. The dark pair below keeps the handover
     invisible under the dark theme too (MAP_BACKDROP.dark). A hiker who picks
     night_hike under a light theme gets one white pre-WebGL frame at boot;
     CSS knows the theme and not the style preference, and matching the common
     case per theme is the best a stylesheet can do. */
  background: #ffffff;
}

:root[data-theme='dark'] .map-view {
  /* MAP_BACKDROP.dark - night_hike's own ink, the sheet the default dark
     path lands on now that every style carries its own backdrop. */
  background: #0c1410;
}

/* MapLibre's own controls, sized to the 42px the wireframe specifies. */
.map-view .maplibregl-ctrl button {
  width: var(--map-control-size);
  height: var(--map-control-size);
}

/* The same controls under the dark theme.
 *
 * maplibre-gl.css hardcodes a white group with dark glyphs, and nothing in it
 * asks about the theme - so on an ink map the locate and zoom buttons are the
 * brightest thing on the screen by a wide margin, which at night is the one
 * place brightness costs something real. Overridden here rather than forked
 * out of the library stylesheet, which is imported wholesale by MapView.tsx
 * for reasons that have nothing to do with colour.
 *
 * The glyphs are background-image data URIs, so they are inverted rather than
 * recoloured: there is no property to reach into them with. `hue-rotate(180)`
 * undoes the hue flip `invert` brings with it, which matters for the one
 * control that is not monochrome - the geolocate button turns blue when it has
 * a fix, and without this it would turn orange.
 *
 * THE EDGE IS THE PART THAT MATTERS, AND IT IS NOT THE PART THAT LOOKS WRONG
 *
 * These were reported as hard to read (#336), and the glyph was innocent: at
 * `#ccc` it sits about 10.7:1 against the button. What had gone missing was the
 * BUTTON. Two things, and the second is the one worth remembering.
 *
 * The chip was `--bg-surface`, which is a SCREEN surface - a token picked to
 * sit on `--bg-page` in a settings list, not on a map. Against the canvas's own
 * backdrop (`MAP_BACKDROP.dark`, #15140f) that is 1.06:1, so the control was
 * very nearly the same colour as the map behind it.
 *
 * And maplibre-gl.css's only boundary for the group is
 * `box-shadow: 0 0 0 2px rgba(0,0,0,.1)`. On paper that faint dark ring is what
 * separates a white chip from the map. On ink it is DARKER than both surfaces
 * and draws nothing at all - so overriding the background silently took the
 * edge away too, and left grey glyphs floating with no affordance around them.
 *
 * Hence a light hairline rather than a darker one. Any dark chip on a dark map
 * has low surface contrast; the edge has to carry the separation, and an edge
 * made of translucent black cannot carry anything here. The lift stops at
 * `--ink-700` (1.38:1) deliberately: the whole argument for this theme is a
 * phone that does not cost night vision on a trail after dark
 * (features/UX_CUSTOMIZATION.md), and a control bright enough to solve this by
 * luminance alone would undo that. */
:root[data-theme='dark'] .map-view .maplibregl-ctrl-group {
  background: var(--surface-over-map);
  box-shadow:
    0 0 0 1px var(--edge-over-map),
    0 2px 12px rgb(0 0 0 / 60%);
}
:root[data-theme='dark'] .map-view .maplibregl-ctrl-group button + button {
  border-top-color: var(--edge-over-map);
}
:root[data-theme='dark'] .map-view .maplibregl-ctrl-group button:hover {
  background: var(--surface-over-map-hover);
}
:root[data-theme='dark'] .map-view .maplibregl-ctrl-icon {
  filter: invert(1) hue-rotate(180deg);
}
/* A disabled control still has to say it is there. maplibre takes the icon to
   25%, which on white leaves a legible pale grey and on this chip leaves very
   nearly nothing - the zoom-in button at maximum zoom simply vanished. Raised
   until it reads as present-and-off rather than absent, and no further: it must
   still be obviously weaker than the button beside it. */
:root[data-theme='dark']
  .map-view
  .maplibregl-ctrl
  button:disabled
  .maplibregl-ctrl-icon {
  opacity: 0.4;
}
/* The scale bar is drawn as a bordered box over the canvas, so it needs the
   canvas's own colours rather than an inversion - and the same edge treatment,
   for the same reason: its `border: 2px solid #333` is another boundary that
   assumes something light behind it. */
:root[data-theme='dark'] .map-view .maplibregl-ctrl-scale {
  color: var(--fg-1);
  background: color-mix(in srgb, var(--surface-over-map) 82%, transparent);
  border-color: var(--edge-over-map);
  box-shadow: 0 2px 12px rgb(0 0 0 / 60%);
}

/* ---------- Tab bar ---------- */

.tab-bar {
  display: flex;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-1);
  /* Keeps the bar clear of the home indicator on notched phones. */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* The tabs' own box, which exists so that `role="tablist"` can own tabs and
   nothing else - the brand mark below is a sibling of it, not a member of the
   set (see TabBar.tsx). Filling the bar is what keeps this inert on a phone:
   the tabs still spread across the full width exactly as they did when they
   were direct children of .tab-bar. */
.tab-bar__tabs {
  display: flex;
  flex: 1;
}

/* On a phone: the icon alone, at the left end of the bar - which is the
 * bottom-left corner of the page, and the only corner here that is not either
 * map or a thumb target.
 *
 * It costs the tabs about 32px of shared width. At 375px that leaves the two
 * of them ~171px each against a 44px floor, so the targets are nowhere near
 * pressed; it is still map-free real estate spent on branding, and worth
 * knowing that is the trade. How much chrome this screen should carry at all
 * is the larger question, tracked as its own spike.
 *
 * `order` rather than DOM order: the mark is last in the markup because on a
 * desktop it is the foot of a column, and only here does it need to come
 * first. */
.tab-bar__brand {
  display: flex;
  align-items: center;
  order: -1;
  padding-left: var(--space-2, 8px);
}

.tab-bar__brand-icon {
  display: block;
  width: 24px;
  height: 24px;
  /* The artwork's own corner radius at this size (20/96), so the element's box
     matches the rounded square drawn inside it. */
  border-radius: 5px;
}

/* Mirrors the wordmark half of the design system's Logo.jsx exactly - same
   family, weight, tracking and colour - because the sidebar composes the
   lockup from the icon plus this rather than rendering <Logo /> whole (see
   TabBar.tsx for why). Anything that changes there changes here, or the app
   grows two wordmarks that are almost the same, which looks like a mistake
   rather than a choice.

   `--font-display` resolves to Bitter. That is what Logo.jsx asks for and so
   what the onboarding lockup already renders, whatever the design system's
   prose says about Public Sans - matching the shipped component is the point
   of this block, and a font change belongs upstream in the design system
   rather than in a divergence started here. */
.tab-bar__brand-wordmark {
  /* Desktop-only, revealed in desktop.css. A phone's bar is a 44px row with
     three thumb targets in it; type beside them comes straight out of their
     width, and the icon alone already says whose app this is. */
  display: none;
  font-family: var(--font-display, 'Public Sans', sans-serif);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--fg-1);
}

.tab-bar__tab {
  flex: 1;
  min-height: var(--min-touch-target);
  padding: var(--space-2, 8px) 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-3);
  background: none;
  border: 0;
  border-top: 2px solid transparent;
  cursor: pointer;
  transition:
    color 160ms ease,
    border-color 160ms ease;
}

.tab-bar__tab[aria-selected='true'] {
  color: var(--brand-primary);
  border-top-color: var(--brand-primary);
}

/* ---------- Screen shell ---------- */

.map-screen {
  display: flex;
  flex-direction: column;
  height: 100svh;
  background: var(--bg-page);
}

/* First run: this screen is the backdrop to the onboarding steps, showing its
   canvas and nothing else (#721, MapScreenProps.entering).
 *
 * HIDING IS BY EXCLUSION, NOT BY LIST, and that is the load-bearing choice
 * here. Each rule hides every child of a wrapper except the one on the path
 * down to the canvas, so a control added to this screen next year is hidden
 * during first run by default. A list of class names would have gone stale the
 * first time somebody added a button, and the failure mode is a stray control
 * sitting behind a modal - which is the trap App.tsx's own reasoning rules out.
 *
 * `display: none` and not `visibility`/opacity: a hidden-but-laid-out header
 * would still take its share of the column and leave the canvas short.
 *
 * None of this is what makes the screen safe to have behind a modal - `inert`
 * on the root does that, in MapScreen.tsx. This is what makes it look like the
 * plain canvas the steps are drawn over. */
.map-screen--entering > :not(.map-screen__main),
.map-screen--entering .map-screen__main > :not(.map-screen__body),
.map-screen--entering .map-screen__body > :not(.map-screen__canvas) {
  display: none;
}

/* Inside the canvas the exception is the attribution, which is a licence
   condition rather than chrome: the live sheet's OSM data is ODbL, so a map
   that is drawn has to be credited whether or not anyone may touch it. The
   canvas overlays that are not the map or that credit - the dropped-waypoint
   count, the waypoint card, search - go with the rest. */
.map-screen--entering .map-screen__canvas > :not(.map-view):not(.map-attribution) {
  display: none;
}

/* MapLibre's own controls - compass, locate, scale bar - are attached to every
   map this app builds (map/mapChrome.ts) and are drawn in the bottom corners,
   which is exactly where the entry card is. A picture of a button that cannot
   be pressed is a worse thing to show someone than no button at all. They come
   back, in the thumb zone, the moment the steps finish. */
.map-screen--entering .maplibregl-ctrl {
  display: none;
}

/* Two wrappers that exist for the desktop layout (src/desktop.css) and are
   deliberately inert here: each is a plain flex column that fills, which is
   exactly what these children did as direct children of .map-screen.
   __main is everything but the tab bar; __body is the map and the legend. */
.map-screen__main,
.map-screen__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* A flex item floors at its content size, and a map that cannot shrink puts
     the overflow back on the page - the same trap .app__screen's own comment
     describes. */
  min-height: 0;
}

/* The map, with the credit line in a strip beneath it. Still a positioning
   context: the search sheet covers the whole canvas (see desktop.css). */
.map-screen__canvas {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* A row of its own rather than an overlay in the corner, which is where it
   used to sit.

   MapLibre puts the scale bar at the bottom-left of the map, which is where
   WIREFRAMES.md wants it - "scale bar above USGS US Topo · © OSM". Floating
   the credit in that same corner put the two on top of each other, and no
   offset fixes that honestly: the list is assembled per screen
   (map/credits.ts), it grows and shrinks with the background and the download,
   and it wraps to one line on a laptop and three on a phone. Any reserved gap
   is right at exactly one width.

   So the strip is given its own space instead. It costs the map that much
   height, which is a real cost on a phone and is worth paying here: ODbL
   attribution is a licence condition, and a condition met only where the text
   happens not to land under a control is not met.

   How MUCH height it costs is chrome/MapAttribution.tsx's problem, and the
   answer there is one line: collapsed, this is the OSM credit and a count. */
.map-attribution {
  margin: 0;
  padding: 2px var(--space-2, 8px);
  font-size: 10px;
  color: var(--fg-2);
  background: var(--bg-page);
  border-top: 1px solid var(--border-1);
}

/* The one line that is always on screen. `list-item` display keeps the native
   disclosure triangle, which is what says this opens - Safari and Chrome both
   drop the marker the moment a summary is given any other display value, and a
   credit line that expands with nothing to suggest it does is a control nobody
   finds. */
.map-attribution__summary {
  display: list-item;
  cursor: pointer;
}

/* The count is a promise that something is behind the summary. Once it is
   open, the list below is that something, said properly. */
.map-attribution[open] .map-attribution__more {
  display: none;
}

/* Indented to start under the summary's TEXT rather than under its disclosure
   triangle, so the credits read as one list with the line above them instead
   of as a second block that happens to sit below it. In em, because the marker
   it is clearing is sized by the same font as the text. */
.map-attribution__list {
  margin: 0;
  padding: 0 0 0 1.4em;
  list-style: none;
}

/* ---------- Elevation ribbon ---------- */

/* WIREFRAMES.md: 54px tall, 36px left inset for the lane labels below, which
   is what keeps a pin at 60% sitting under the right part of the climb. */
.elevation-ribbon {
  position: relative;
  height: 54px;
  padding-left: 36px;
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-1);
}

.elevation-ribbon__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.elevation-ribbon__area {
  fill: color-mix(in srgb, var(--brand-primary) 22%, transparent);
}

.elevation-ribbon__line {
  stroke: var(--brand-primary);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.elevation-ribbon__climb {
  fill: color-mix(in srgb, var(--accent-blaze-orange) 16%, transparent);
}

.elevation-ribbon__here {
  stroke: var(--fg-1);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.elevation-ribbon__labels {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2px 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 7.5px;
  color: var(--fg-3);
}

.elevation-ribbon__callout {
  position: absolute;
  right: var(--space-2, 8px);
  top: 4px;
  margin: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  color: var(--fg-1);
  background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ---------- Waypoint lanes ---------- */

.waypoint-lanes {
  background: var(--bg-page);
}

/* WIREFRAMES.md: 19px per lane, dashed top rule, mono 7.5px gutter label. */
.waypoint-lane {
  position: relative;
  height: 19px;
  padding-left: 36px;
  border-top: 1px dashed var(--border-2);
}

.waypoint-lane__label {
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 7.5px;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}

.waypoint-lane__track {
  position: relative;
  height: 100%;
}

.waypoint-pin {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  font-size: 9px;
  line-height: 1;
  color: var(--fg-1);
  background: var(--bg-surface);
  border: 1px solid var(--border-2);
  border-radius: 9px;
  cursor: pointer;
}

.waypoint-pin__count {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 8px;
  font-weight: 700;
}

/* ---------- Legend sheet ---------- */

/* THE CAP STAYS AT 60% (#723). The grid below it is now every hideable category
   rather than the two or three in the viewport, which on a phone is taller than
   the sheet - and the sheet is the answer rather than the problem, because this
   thing covers the map. features/MAP_OPTIONS.md §4 documents the cap and the
   cost it accepts ("a picker at the foot of a busy viewport is now a scroll away
   rather than the first thing under the title"); a longer list does not change
   that trade, it just makes the scrolling routine instead of occasional.

   What being routine changes is the affordance, and the fix for that is the list
   itself. Two rows in a sheet with room for eight gave a hiker nothing to
   suggest anything was under them. Eight rows cut off mid-grid do. */
.legend {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  max-height: 60%;
  overflow-y: auto;
  /* The scroll stops here. Without it a flick that runs off the end of the list
     chains to the nearest scrollable ancestor and then to the document, which on
     Chrome for Android is where pull-to-refresh lives - so a hiker reaching for
     the row below the fold could reload the app instead. Reasoned from the
     documented chaining behaviour, not measured on a handset: nothing in this
     repository can drive a real Android touch stack. */
  overscroll-behavior: contain;
  padding: var(--space-4, 16px);
  /* The sheet's bottom edge IS the viewport's - it is positioned against the
     initial containing block, not the map - so on a gesture-navigation phone the
     last thing in it sits under the system's own bar. That last thing is the
     downloads link, and before it the row a hiker scrolled down to reach. */
  padding-bottom: calc(var(--space-4, 16px) + env(safe-area-inset-bottom, 0px));
  background: var(--bg-surface);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  box-shadow: 0 -6px 24px rgb(0 0 0 / 12%);
}

.legend__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.legend__title {
  margin: 0;
  font-size: 15px;
}

.legend__close {
  min-width: var(--min-touch-target);
  min-height: var(--min-touch-target);
  font-size: 20px;
  color: var(--fg-2);
  background: none;
  border: 0;
  cursor: pointer;
}

.legend__empty {
  margin: var(--space-3, 12px) 0 0;
  color: var(--fg-3);
  font-size: 13px;
}

.legend__blazes,
.legend__pins {
  margin: var(--space-3, 12px) 0 0;
  padding: 0;
  list-style: none;
}

/* Pin types read as a 2-column grid; blaze rows stay full width so a blaze
   name has room to sit on one line beside its swatch. The swatch is a solid
   bar, which is now literally how the map draws the line (map/style.ts) - it
   used to be a solid bar standing in for a dashed one. */
/* Two columns where two fit, ONE WHERE THEY DO NOT, and a 16px gutter either
   way (#528).

   Both halves are the drawn counts' doing. A row now ends in a block of mono
   digits and the next begins with a filled 24px pin, and 8px of white between
   `0/1223` and the parking icon reads as the two columns touching - which is
   how it was reported. Rows keep the tighter 8px: a 44px touch target already
   separates them vertically.

   The widened gutter has to come out of the labels, and on a 320px phone there
   is not enough slack to give: measured, a hard two-column grid there truncates
   `Campsite`, `Resupply` and `Viewpoint` to `Cam…`, `Resu…` and `Vie…`. That is
   worse than the crowding it fixes. A category name is what the row IS, and
   `Vie…` beside a 24px glyph asks a hiker to identify a category from an icon
   they are looking at the legend to decode.

   So the count decides itself. `auto-fit` with a 150px floor gives two columns
   at 360px and up, one at 320px - taller, and it scrolls in a panel that
   already scrolls, which is the cheaper of the two costs. Measured across
   320/360/390/430: two columns and no truncation above the fold, one column and
   no truncation below it. */
.legend__pins {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2, 8px) var(--space-4, 16px);
}

.legend__row {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  min-height: var(--min-touch-target);
  font-size: 13px;
}

.legend__swatch {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  border: 1px solid var(--border-2);
}

/* The label is the only part of a row that may give up width, and `min-width: 0`
   is what lets it (#528).

   A flex item defaults to `min-width: auto` and will not shrink below its own
   min-content, so without this the row cannot fit itself into its grid track -
   it overflows and eats the gutter instead, which is what put `0/1223` against
   the parking pin. The whole chain has to allow it: `.legend__pins` sets
   `minmax(0, 1fr)` tracks, `.legend__toggle` clears its own floor below, and
   this clears the label's. One link left at `auto` re-breaks it.

   Measured at 320px, an iPhone SE and the narrowest phone worth drawing for,
   because that is where it bites and 390px hides it: with the chain open the
   ink between the two columns is the full gutter, and with any link closed it
   collapses to under 5px.

   Truncation is the release valve rather than the intent - nothing in this
   corridor's seven categories actually truncates at 320px. The ellipsis is what
   a longer category name from a later import gets instead of clipping
   mid-glyph. */
.legend__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Carries the drawn figure too, as `13/14`, where fewer are drawn than are here
   (#528). One slot rather than two, and that is the whole of the fix: a second
   `13 shown` badge beside this one does not fit a two-column row at 390 px, so
   it wrapped and left the column ragged.

   There is deliberately no styling to go with the fraction. It inherits this
   rule, so the emphasis is the same whether the row is short or not - a row
   missing one pin should not shout, and the row missing all six is legible
   because `0/6` says so, not because it is bolder.

   A `.legend__drawn` rule used to sit here for that second badge. It is gone
   with the badge, and worth a line because of how it failed rather than for
   its own sake: it was called `legend__shown` until #530's type picker landed
   on `main` using that name for its own row, two different things under one
   class, and the later 44px bordered flex row won - rendering a 12px inline
   badge as a full-width band inside a pin row. Git merged the two branches
   without a marker; src/test/legendControlLayout.test.ts is what caught it.
   One fewer class in this file is one fewer chance of that. */
.legend__count {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--fg-2);
  /* Never the part that gives way. The label can lose a letter to an ellipsis
     and stay readable beside its own pin; a count that shed a digit would be a
     different number, silently. */
  flex: none;
}
/* The count over the canvas (#528). Bottom-left, clear of the zoom buttons and
   the attribution, so it is legible without covering the trail line the hiker is
   reading. Small and unemphatic: it is a standing fact about the zoom, not an
   alert - the panel is where the per-category detail lives. */
.map-screen__dropped {
  position: absolute;
  bottom: var(--space-3, 12px);
  left: var(--space-3, 12px);
  z-index: 2;
  margin: 0;
  padding: 2px var(--space-2, 8px);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg-raised) 82%, transparent);
  color: var(--fg-2);
  font-size: 11px;
  pointer-events: none;
}

/* The header summary. Deliberately quieter than the rows it summarises. */
.legend__dropped {
  margin: var(--space-3, 12px) 0 0;
  color: var(--fg-2);
  font-size: 13px;
}

/* The icon the map draws for this row (map/MapIcon.tsx). A fixed square slot
   whatever is in it: the pins fill it, and the closure band - which is 2:1,
   because it is a line and not a pin - is scaled to the width and centred by
   the SVG's own `preserveAspectRatio`. So the labels line up down the column
   without the band being squashed into a square it never had. */
.legend__icon {
  flex: none;
  width: 24px;
  height: 24px;
}

/* The whole row is the control, per WIREFRAMES.md §2's "rows are tappable to
   hide". It used to be a 20px dot at the end of the row, which is a small
   target for a gloved thumb and an invisible one for anybody who assumed the
   row they were looking at was the button. */
.legend__toggle {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-2, 8px);
  min-height: var(--min-touch-target);
  /* The middle link in the shrink chain `.legend__label` describes. This is the
     element that was measured overflowing its grid track, so leaving it at the
     default `auto` keeps the gutter shut however flexible the label is. */
  min-width: 0;
  /* Pulled back out again so the icon still lines up with the blaze swatches
     above it: the padding is there to give the hover and focus states room to
     sit off the text, not to indent the row. */
  padding: 0 var(--space-1, 4px);
  margin: 0 calc(var(--space-1, 4px) * -1);
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.legend__toggle:hover {
  background: var(--bg-sunken);
}

.legend__toggle:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* A category that is off. Three channels, none of them hue: the pin loses its
   colour, the name is struck through, and both drop toward the background.
   Hue alone is what this app refuses to rely on anywhere the answer matters
   (map/poiIcons.ts, lib/closureStyle.ts), and a legend read at arm's length in
   direct sun is exactly that kind of place. */
.legend__row--hidden .legend__icon {
  opacity: 0.4;
  filter: grayscale(100%);
}

.legend__row--hidden .legend__label {
  color: var(--fg-3);
  text-decoration: line-through;
}

/* The "Verified?" filter, under the grid. Deliberately a different shape from
   the rows above it - those are categories, this cuts across all of them - and
   the same shape as a Settings row, which is the app's existing way of drawing
   "one switch, one sentence". The label wraps the input, so the whole strip is
   the target exactly as the category rows are. */
/* The drought toggle (#720). Same row shape as the verified filter above it -
   both are single switches under the category list rather than categories -
   with one addition: a second line carrying the week and the mileage, because
   a switch labelled only "Drought" would leave a hiker guessing how current
   the tint is. */
.legend__drought {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  min-height: var(--min-touch-target);
  margin-top: var(--space-2, 8px);
  padding-top: var(--space-2, 8px);
  border-top: 1px solid var(--border-1);
  font-size: 13px;
  cursor: pointer;
}

.legend__drought-name {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.legend__drought-detail {
  font-size: 11px;
  color: var(--text-2);
}

.legend__verified {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  min-height: var(--min-touch-target);
  margin-top: var(--space-2, 8px);
  padding-top: var(--space-2, 8px);
  border-top: 1px solid var(--border-1);
  font-size: 13px;
  cursor: pointer;
}

.legend__verified-name {
  flex: 1;
}

/* A safety row spans the grid rather than sitting in one column of it.
   It carries everything an ordinary row does plus the "Always shown" tag, and
   in a ~116px column beside a desktop map that tag was clipped mid-word - the
   one row on the panel that must not look like a rendering accident. Spanning
   also reads correctly: these are not two of the categories, they are the two
   that are different. There are rarely more than a couple in view. */
.legend__row--always {
  grid-column: 1 / -1;
}

/* The way to every ATC notice (#687, Legend.tsx). Same footer-link treatment
   as .downloads-link just below and for the same reasoning - a hiker reads
   the rows above constantly and browses every trail update rarely, now that
   what is actually new has its own bottom banner on the map screen - but its
   own class rather than sharing that one, because the two rows answer
   different questions for different reasons and a shared class would read as
   a claim that they are the same errand. */
.legend__atc-link {
  display: block;
  width: 100%;
  min-height: var(--min-touch-target, 44px);
  margin-top: var(--space-4, 16px);
  padding: var(--space-3, 12px) 0 0;
  border: 0;
  border-top: 1px solid var(--border-1);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: var(--brand-primary);
  background: none;
  cursor: pointer;
}

/* Everything about the downloaded map, in one block at the foot of the panel:
   the background choice and the way to the download (Legend.tsx says why they
   belong together). It exists to be moved as one thing - on a desktop the whole
   block takes the `margin-top: auto` that used to be on the link alone, so the
   two cannot be separated by a screen of empty paper. See desktop.css.

   The gap above it is the block's, not the picker's: .bg-picker is shared with
   Settings, where it sits under a heading and needs no top margin of its own.
   Inside, the picker's 16px bottom margin and the link's 16px top margin
   collapse to the one gap the link has always had above it. */
.legend__downloads {
  margin-top: var(--space-4, 16px);
}

/* Deliberately a plain label, not a disabled button. There is no off switch
   for a safety layer, so there is no control here to disable. */
/* Which categories are drawn (#530), and what is filtered, in one control.
   Deliberately the same shape as the verified row below - a name, then its
   control, on one touch-target line - because it is the same kind of thing: one
   switch that cuts across every row above it.

   THE SHAPE IS THE FIX. This was an inline `<select>` in a paragraph of prose,
   between a sentence and a "Show all" button joined by middots. Two things went
   wrong with that and both were visible in a screenshot at the widths the panel
   actually has:

   - Inline, a control with `min-height: var(--min-touch-target)` makes a 13px
     line box 47px tall and aligns on its own baseline, so the words beside it
     sat where nothing else on the panel sits. As a flex ITEM it sets the row
     height instead, exactly as the verified checkbox does, and nothing is
     realigned.
   - `border: 0; background: none` on a select in the middle of a sentence
     leaves its text indistinguishable from the sentence - the same size, the
     same line, a colour apart. It reads as prose that happens to be a link.
     Bounded below, so it reads as the control it is. */
.legend__shown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  min-height: var(--min-touch-target);
  margin-top: var(--space-2, 8px);
  padding-top: var(--space-2, 8px);
  border-top: 1px solid var(--border-1);
  color: var(--fg-2);
  font-size: 13px;
  cursor: pointer;
}

.legend__shown-name {
  flex: 1;
}

.legend__shown-select {
  /* Capped, so a long category name crushes itself rather than the label. A
     select sizes to its widest option and will not wrap or ellipsise, so
     without this the one thing saying what the control IS goes first. */
  max-width: 60%;
  min-height: var(--min-touch-target);
  padding: 0 var(--space-1, 4px);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-s, 4px);
  background: var(--bg-surface);
  color: var(--fg-1);
  font: inherit;
  cursor: pointer;
}

.legend__always {
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Search ---------- */

.search {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
}

.search__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  border-bottom: 1px solid var(--border-1);
}

.search__input {
  flex: 1;
  min-height: var(--min-touch-target);
  padding: 0 var(--space-3, 12px);
  font-size: 15px;
  color: var(--fg-1);
  background: var(--bg-surface);
  border: 1px solid var(--border-2);
  border-radius: 10px;
}

.search__close {
  min-height: var(--min-touch-target);
  padding: 0 var(--space-2, 8px);
  font-size: 14px;
  color: var(--fg-2);
  background: none;
  border: 0;
  cursor: pointer;
}

.search__empty {
  margin: var(--space-4, 16px);
  font-size: 14px;
  color: var(--fg-3);
}

.search__results {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}

.search__result-button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: var(--min-touch-target);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-1);
  cursor: pointer;
}

.search__result-name {
  font-size: 15px;
  color: var(--fg-1);
}

.search__result-meta {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--fg-3);
}

/* ---------- Closure sheet ---------- */

.closure-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  max-height: 70%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-4, 16px);
  background: var(--bg-surface);
  border-top: 3px solid var(--danger-strong);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  box-shadow: 0 -6px 24px rgb(0 0 0 / 12%);
}

.closure-sheet__status {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--danger-strong);
}

.closure-sheet__range {
  margin: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  color: var(--fg-2);
}

.closure-sheet__note {
  margin: 0;
  font-size: 14px;
  color: var(--fg-1);
}

.closure-sheet__meta {
  margin: 0;
  font-size: 13px;
  color: var(--fg-2);
}

.closure-sheet__link {
  font-size: 14px;
  color: var(--link);
}

.closure-sheet__limit {
  margin: 0;
  padding: var(--space-3, 12px);
  font-size: 13px;
  color: var(--fg-2);
  background: var(--bg-sunken);
  border-radius: 10px;
}

.closure-sheet__age {
  margin: 0;
  font-size: 12px;
  color: var(--fg-3);
}

/* ---------- Every ATC notice (AtcNoticeList.tsx) ---------- */

/* The single-notice sheet's frame, with one difference that is the whole
   reason it is not just `.closure-sheet`: this one is a LIST, so it is taller
   and it scrolls. 70% of a phone is under three entries, and a safety list
   whose first act is to hide most of itself has the same defect as the surface
   it was written to replace.

   The red top rule is kept. It is the closure and warning sheets' marker for
   "this changes what you do next", and a list of live trail closures is that
   whether or not any single one of them is drawn on the map. */
.atc-notices {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  max-height: 85%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-4, 16px);
  background: var(--bg-surface);
  border-top: 3px solid var(--danger-strong);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  box-shadow: 0 -6px 24px rgb(0 0 0 / 12%);
}

.atc-notices__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

/* A rule between entries rather than a card each. Nine notices as nine cards
   is nine boxes to parse before reading a word; a hairline is enough to say
   where one claim ends and the next begins. */
.atc-notices__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--border-1);
}

.atc-notices__item:first-child {
  padding-top: 0;
  border-top: none;
}

/* ATC's own category, and the only place in the entry where their word for the
   thing appears on its own line. Uppercased in CSS rather than in the string,
   so what a screen reader announces is still "Detour" and not "D-E-T-O-U-R". */
.atc-notices__category {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--danger-strong);
}

.atc-notices__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-1);
}

.atc-notices__passability {
  margin: 0;
  font-size: 13px;
  color: var(--fg-1);
}

/* Weight, not hue. This line is read at arm's length in direct sun like every
   other line in this strip, and dimming it to say "aside" would spend contrast
   to make a point about hierarchy - the same trade .map-screen__alert--advisory
   refuses, and src/test/mapChromeContrast.test.ts is what keeps it refused. */
.atc-notices__offmap {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-2);
}

.atc-notices__empty {
  margin: 0;
  font-size: 14px;
  color: var(--fg-2);
}

/* ---------- Waypoint card (tapped pin) ---------- */

/* Floats beside the pin it describes rather than docking at the bottom edge -
   PoiCard.tsx positions it with an inline transform in canvas pixels, so the
   base position is the canvas origin and nothing here may fight the
   transform. No coloured top rule: those belong to the closure and warning
   sheets, where the colour is the point. A shelter is not an alert. */
.poi-card {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* Narrow enough that a phone can hold the card plus both edge margins
     (poiCardPlacement.ts clamps against them), wide enough for a name and a
     photo worth having. The fallback keeps it inside a viewport smaller than
     any phone this app is designed for. */
  width: min(264px, calc(100% - 16px));
  overflow: hidden; /* rounds the photo's corners with the card's */
  background: var(--bg-surface);
  border-radius: 14px;
  /* Deeper than the sheets' shadow: this element floats mid-map over live
     cartography, and the shadow is what says "over", not "part of". */
  box-shadow:
    0 10px 28px rgb(0 0 0 / 18%),
    0 2px 8px rgb(0 0 0 / 10%);
  /* Re-transformed every frame of a pan while it rides its pin. */
  will-change: transform;
}

.poi-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bg-sunken);
}

.poi-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The photo's credit line - author, licence, month, from the pipeline's
   Wikimedia Commons match (PoiCard.tsx). Like the map's ODbL line
   (map/style.ts), this is load-bearing attribution, not decoration: CC BY /
   BY-SA photos are only OurHike's to show while the credit shows with them.
   Which is why it never hides or truncates: it wraps when an institutional
   attribution string runs long, and the text-shadow is what keeps white
   text legible where the scrim is still thin - a photo's bottom edge is
   snow or pale rock often enough that the gradient alone cannot promise
   contrast. The tall top padding gives the gradient room to reach real
   opacity before the first line of text starts. */
.poi-card__credit {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 16px 8px 6px;
  font-size: 10px;
  line-height: 1.3;
  color: rgb(255 255 255 / 95%);
  text-align: left;
  text-decoration: none;
  text-shadow: 0 1px 2px rgb(0 0 0 / 75%);
  background: linear-gradient(transparent, rgb(0 0 0 / 70%));
}

a.poi-card__credit:hover {
  text-decoration: underline;
}

/* Same drawn/hit split as the close button above the photo: the visible
   strip stays one small line, the hit area grows upward to the 44px
   minimum. Nothing else is tappable in the bottom half of the media box,
   so the expanded area collides with nothing. */
a.poi-card__credit::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: var(--min-touch-target);
}

/* The empty photo slot: the category's own silhouette on a wash of its accent.
   Honest iconography rather than a stock photo pretending to be the shelter -
   most waypoints have no eligible photo even now that the pipeline can carry
   imagery (see PoiCard.tsx), so this stays the everyday state of the slot.
   The wash keeps the fallback background for engines without color-mix. */
.poi-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--bg-sunken);
  background: color-mix(in srgb, var(--poi-accent) 14%, var(--bg-sunken));
}

/* Same silhouette the pin carries (map/poiIcons.ts), so the empty slot still
   answers "what kind of thing is this" in the pins' own shape language. */
.poi-card__glyph {
  width: 56px;
  height: 56px;
  fill: var(--poi-accent);
  opacity: 0.55;
}

/* On ink, an accent chosen to carry a white glyph on a pin - pine-700 for a
   shelter - is barely lighter than the wash it is sitting on, and the
   silhouette disappears. Lifted toward the foreground here rather than by
   re-picking the five accents, which are correct where they actually have to
   be: on the pins, over the map (map/poiIcons.ts). */
:root[data-theme='dark'] .poi-card__glyph {
  fill: color-mix(in srgb, var(--poi-accent) 45%, var(--fg-1));
  opacity: 0.7;
}

/* Drawn at 32px over the photo's corner, hit at 44px - the same drawn/hit
   split the header buttons use, made up with an invisible expanded area
   rather than by inflating the visible circle. */
/* Top-left, which is the one corner of the media box that is free: the close
   button owns top-right, and the credit is a full-width strip along the
   bottom whose hit area already reaches 44px upward. Putting the gallery
   anywhere else would overlap something already tappable. */
.poi-card__gallery {
  position: absolute;
  top: var(--space-2, 8px);
  left: var(--space-2, 8px);
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
}

.poi-card__gallery-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--fg-2);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

/* Vertically only. The two buttons sit side by side, so growing the hit area
   horizontally would have each one swallow the other's edge - the count
   between them is the spacer that keeps the two targets distinct. */
.poi-card__gallery-step::after {
  content: '';
  position: absolute;
  top: calc((32px - var(--min-touch-target)) / 2);
  bottom: calc((32px - var(--min-touch-target)) / 2);
  width: 32px;
}

.poi-card__gallery-count {
  padding: 0 2px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
  white-space: nowrap;
}

.poi-card__close {
  position: absolute;
  top: var(--space-2, 8px);
  right: var(--space-2, 8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 18px;
  color: var(--fg-2);
  background: var(--bg-surface);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
  cursor: pointer;
  /* Design-system rule: fades and colour transitions only, 120-200ms. */
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.poi-card__close::after {
  content: '';
  position: absolute;
  inset: calc((32px - var(--min-touch-target)) / 2);
}

.poi-card__close:hover {
  background: var(--bg-sunken);
  color: var(--fg-1);
}

.poi-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  padding: var(--space-3, 12px);
}

.poi-card__name {
  margin: 0;
  font-size: 15px;
  color: var(--fg-1);
}

/* Every part of the site, one chip each (PoiCard.tsx, #526).

   SCROLLS SIDEWAYS RATHER THAN WRAPPING, and here that is forced rather than
   chosen. The card is 264px wide and this strip sits inside 12px of body padding
   each side, so it has 240px. Wrapping instead would change the card's HEIGHT
   with the number of parts, and the card is positioned by its measured height
   whenever it hangs below its pin, so a strip that grew a row would push itself
   over the thing it describes. Same argument tabs.css makes for the same
   declaration, and the opposite of the one .poi-card__meta makes below - that
   line wraps, because what makes it long is one part's own facts rather than how
   many parts there are.

   WHAT ACTUALLY SCROLLS IS NOW SIX PARTS AND UP. A chip was a 24px pin plus
   "Campsite" plus a distance - most of 110px, so two fit - until #711 took the
   words off the unselected chips and this issue took them off the selected one
   too. Every chip is the touch target and no wider, so five chips and four gaps
   is 236px of the 240 and the largest site on the trail fits (PoiCard.tsx
   carries the measurements). The declaration stays because the strip must still
   have an answer at six.

   Not sized to today's sites, either. features/POI_SITES.md counts 94% of them
   at two or three members and five as three places on the whole trail, but that
   shape is partly #529's water gap - 97% of shelters have no mapped water
   source, so only 11 water points are members of anything - and it moves as that
   closes. A strip that scrolls does not care. */
.poi-card__chips {
  display: flex;
  gap: var(--space-1, 4px);
  margin: var(--space-1, 4px) 0;
  overflow-x: auto;
  /* No visible scrollbar: it would eat a chip's worth of the 240px and this is a
     thumb-dragged strip, not a mouse-dragged one. */
  scrollbar-width: none;
}
.poi-card__chips::-webkit-scrollbar {
  display: none;
}

/* `flex: 0 0 auto`, and NOT tabs.css's `flex: 1 0 auto`: a tab strip stretches
   its tabs to fill the row, which for two chips in a 240px card would make each
   one 120px of mostly nothing and for five would squeeze them all instead of
   letting the strip scroll. A chip is as wide as what it says. */
.poi-card__chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-1, 4px);
  /* The whole chip is the target, and it is tapped with a gloved thumb. The
     token narrows to 32px under `pointer: fine` (desktop.css), which is the
     intended trade and the reason this is never the literal 44px.

     BOTH DIMENSIONS SINCE #711, which is the change that made the width worth
     stating: a chip used to be its words and so was never under 97px wide, and
     min-height alone was the whole of the guarantee. A chip is now its pin -
     24px of icon inside 8px of padding either side, so 40px - and 4px under the
     token in the one direction nobody was watching.

     It is also the whole of the strip's width now that EVERY chip is a pin, so
     this line is what makes five parts fit in 240px and six not: 5x44 + 4x4 is
     236, 6x44 + 5x4 is 284. Lowering it to fit a sixth chip is the one change
     here that would trade a gloved thumb's hit rate for a scroll, which is the
     wrong way round - a missed target is a tap that does nothing, and a scroll
     is a tap that works after a drag. */
  min-width: var(--min-touch-target);
  min-height: var(--min-touch-target);
  padding: 0 var(--space-2, 8px);
  font: inherit;
  font-size: 13px;
  color: var(--fg-2);
  background: var(--bg-sunken);
  border: 0;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
}

/* The part you are reading. Three channels and none of them hue - a ring, more
   weight, and more contrast - which is the rule .legend__row--hidden states
   outright and tabs.css follows for its selected tab: a strip read at arm's
   length in direct sun cannot rest the answer on a colour. An INSET ring rather
   than a border, so marking a chip does not change its width and shuffle the
   row sideways.

   THE RING FLOATS INSIDE THE CHIP RATHER THAN FILLING ITS EDGE, and the 3px gap
   is that same rule applied to itself. The focus ring below is drawn in the 2px
   band at the chip's edge, and the anchor chip is BOTH first in the tab order
   and the current one when the card opens - so it is exactly where a keyboard
   user lands first. A marker ring in those pixels left "focused" signalled by
   hue alone: resolved, --brand-primary against --fg-2 is 1.01:1 in the light
   theme (forest-600 on stone-700) and 1.65:1 in the dark one, both far under
   3:1. Two stacked inset shadows rather than one, because a single one can only
   start at the edge: the first repaints the chip's own background over the band
   nearest the edge, leaving the second showing as a ring from 3px to 5px in.
   Still no width of its own, so the row does not shuffle. */
.poi-card__chip[aria-current='true'] {
  font-weight: 600;
  color: var(--fg-1);
  box-shadow:
    inset 0 0 0 3px var(--bg-sunken),
    inset 0 0 0 5px var(--fg-2);
}

/* Inward, because .poi-card sets `overflow: hidden` to round the photo's
   corners with the card's - an outward ring on the first or last chip would be
   clipped by exactly the rule that makes the card a card. The band it lands in
   is kept clear by the rule above; see the reasoning there. */
.poi-card__chip:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
}

/* The same pin the map draws, in the same fixed square slot the legend gives it
   (.legend__icon): MapIcon has no intrinsic size, so a caller that sets none
   gets whatever the flex context feels like. */
.poi-card__chip-icon {
  flex: none;
  width: 24px;
  height: 24px;
}

/* The chip's words - category, separator, distance - as one thing, so that one
   thing can be taken off screen for every chip (#711 for all but the one being
   read, and PoiCard.tsx's own note for that last one; it carries the
   measurements). They are hidden rather than deleted: the accessible name is
   still "Privy 131 ft", and this rule is what that name's spacing depends on.

   A flex container rather than a plain inline, and it matters: the separator's
   spacing is `gap` doing the work while the whitespace text nodes either side
   of it are dropped as whitespace-only runs. Those nodes exist so the
   accessible name concatenates as "Privy 131 ft" instead of "Privy131 ft", and
   they were real spaces before this span existed only because their parent was
   also a flex container. Make this `display: inline` and they start rendering,
   doubling every gap in the chip. */
.poi-card__chip-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
}

/* WRAPS, WHERE THE STRIP ABOVE MUST NOT. The two look like the same decision
   and are opposite ones: a strip that gains a row changes the card's height with
   the number of PARTS, which is a permanent extra row on a five-part site, while
   this line gains one only when a single part happens to carry four facts.

   Which one part can: a shelter is the only type with a capacity, and it prints
   a distance only when it is not the pin - reachable since #607/#609, where
   hiding shelters in the legend redraws the site on a member. `Shelter · mi
   2189.4 · Sleeps 8 · 131 ft away` measures 240 px against the body's 240
   (Chromium 1194, 2026-08-16). Without this it does not overflow, which would at
   least be visible - `display: flex` with no wrap shrinks the items instead, and
   a shrunk item wraps INSIDE itself, breaking `mi 2189.4` across two lines at
   the space. So the choice is between wrapping between the facts and wrapping
   through the middle of one.

   The card's height moving is handled rather than avoided: `usePinAnchor`
   re-measures on the shown part for exactly this reason, and does so already
   because a privy's card is several lines shorter than its shelter's. */
.poi-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  margin: 0;
  font-size: 13px;
  color: var(--fg-2);
}

/* Mono, like every other mile on this screen - the header's, the ribbon's and
   the closure sheet's - so a hiker reads them as the same kind of number. The
   parts' metres join them: it is the same kind of claim, read the same way.
   `.poi-card__chip-distance` is still in this list although the chips no longer
   show their words: they are `visually-hidden` rather than removed, and a
   font-family on an element clipped to 1px costs nothing while dropping it would
   make the rule disagree with the markup for no gain. */
.poi-card__mile,
.poi-card__chip-distance,
.poi-card__part-distance,
.poi-card__coords {
  font-family: var(--font-mono, ui-monospace, monospace);
}

.poi-card__coords {
  margin: 0;
  font-size: 12px;
  color: var(--fg-3);
}

/* Body text. Sits between the meta line and the unverified block at a size
   between the two: it is worth reading, and it is not the headline. Leading is
   looser than the rest because these are the elements here that can run to
   three lines.

   The nearby sentence is the same paragraph in every respect that shows, and
   deliberately so - it was spliced onto the end of the description until #625
   moved the composing to the phone, and a hiker should not be able to tell
   that a sentence changed which machine wrote it. Two selectors rather than
   one class on both elements, because they are two different facts about the
   place and the card's markup says which is which. */
.poi-card__description,
.poi-card__nearby {
  margin: var(--space-1, 4px) 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-2);
}

/* Called out rather than set in fine print. This is the line that says the app
   cannot vouch for the pin someone just tapped, and it earns the same weight as
   the sunken block the closure sheet uses to say what it will not do. */
.poi-card__unverified {
  margin: var(--space-1, 4px) 0;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  font-size: 12px;
  color: var(--fg-2);
  background: var(--bg-sunken);
  border-radius: 10px;
}

.poi-card__source {
  margin: 0;
  font-size: 11px;
  color: var(--fg-3);
}

/* ---------- Serious warning sheet ---------- */

.warning-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  max-height: 70%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-4, 16px);
  background: var(--bg-surface);
  border-top: 3px solid var(--danger-strong);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  box-shadow: 0 -6px 24px rgb(0 0 0 / 12%);
}

.warning-sheet__badge {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--danger-strong);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.warning-sheet__note {
  margin: 0;
  font-size: 15px;
  color: var(--fg-1);
}

/* ---------- Wrong-way cue ---------- */

.wrong-way-cue {
  position: absolute;
  left: var(--space-2, 8px);
  right: var(--space-2, 8px);
  bottom: calc(var(--space-2, 8px) + 56px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-4, 16px);
  background: var(--bg-surface);
  border: 2px solid var(--accent-blaze-orange);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgb(0 0 0 / 18%);
}

.wrong-way-cue__text {
  margin: 0;
  font-size: 15px;
  color: var(--fg-1);
}

.wrong-way-cue__actions {
  display: flex;
  gap: var(--space-2, 8px);
}

.wrong-way-cue__primary,
.wrong-way-cue__secondary {
  flex: 1;
  min-height: var(--min-touch-target);
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
}

.wrong-way-cue__primary {
  color: var(--fg-on-brand);
  background: var(--brand-secondary);
  border: 0;
}

.wrong-way-cue__secondary {
  color: var(--fg-1);
  background: var(--bg-surface);
  border: 1px solid var(--border-2);
}

/* The fallback a broken screen leaves behind (chrome/ErrorBoundary.tsx).
   Sized and coloured like the rest of the app rather than like an error page:
   what happened is worth saying plainly, not worth alarming someone about
   while they are standing on a mountain. */
.screen-failed {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-5, 1.5rem);
  min-height: 12rem;
}

.screen-failed__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.screen-failed__body {
  margin: 0;
  line-height: 1.5;
}

.screen-failed__body--quiet {
  opacity: 0.75;
  font-size: 0.9375rem;
}

/* ---------- Background picker ---------- */

/* A fieldset, reset to nothing. The element is here for the grouping it gives
   a screen reader - two radios that belong to one question - not for the
   border browsers put around it by default. */
.bg-picker {
  margin: 0 0 var(--space-4, 16px);
  padding: 0;
  border: 0;
}

.bg-picker__legend {
  padding: 0;
  margin-bottom: var(--space-2, 8px);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-3);
}

/* Segmented: one row, equal halves, sharing a border so the pair reads as one
   control with two states rather than as two separate buttons. */
.bg-picker__options {
  display: flex;
  gap: var(--space-2, 8px);
}

.bg-picker__option {
  /* The containing block for the hidden radio below, so its 1px box stays
     pinned to this segment instead of resolving against the document and
     stretching the page - settings.css's options carry the whole of why
     (#631). The legend being absolute used to contain it by accident on a
     phone; the desktop panel is not, and Settings never was. */
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: var(--min-touch-target, 44px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: 10px;
  cursor: pointer;
}

/* Selection is carried by the border and the label weight, not by a fill.
   A filled segment over the map competes with the trail line for attention,
   and this control sits directly above a legend whose whole job is colour. */
.bg-picker__option[data-selected='true'] {
  border-color: var(--brand-primary);
  box-shadow: inset 0 0 0 1px var(--brand-primary);
}

/* Visually hidden, not display:none - a removed radio is unfocusable, which
   would take the arrow-key behaviour the real input was chosen for. The
   label is the hit target, and it is the full segment. */
.bg-picker__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The focus ring has to come from the label, since the input it belongs to is
   the hidden element. Without this the control is keyboard-reachable and
   gives no sign of where the focus is. */
.bg-picker__input:focus-visible + .bg-picker__label {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 3px;
}

.bg-picker__label {
  font-size: 14px;
  color: var(--fg-1);
}

.bg-picker__option[data-selected='true'] .bg-picker__label {
  font-weight: 700;
}

.bg-picker__hint {
  font-size: 11px;
  color: var(--fg-3);
}

.bg-picker__description {
  margin: var(--space-2, 8px) 0 0;
  font-size: 12px;
  color: var(--fg-3);
}

.bg-picker__note {
  margin: var(--space-2, 8px) 0 0;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--bg-page);
  border: 1px solid var(--border-1);
  border-radius: 8px;
  font-size: 12px;
  color: var(--fg-2);
}

/* ---------- The way to the download (DownloadsLink.tsx) ---------- */

/* At the foot of the legend and at the foot of Settings, from one component.
   It is the only route to the download window now that the Downloads tab has
   gone, and it is still something a hiker does once a season - so it is drawn
   as a footer link rather than as a button competing with the rows above it.

   Full width with a rule over it, which is what separates "the end of this
   panel" from "one more legend row". 44px tall despite reading as text,
   because a cold thumb still has to hit it. */
.downloads-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  width: 100%;
  min-height: var(--min-touch-target, 44px);
  margin-top: var(--space-4, 16px);
  padding: var(--space-3, 12px) 0 0;
  border: 0;
  border-top: 1px solid var(--border-1);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: var(--brand-primary);
  background: none;
  cursor: pointer;
}

/* The label, and - only while something is moving - what it is doing, pushed
   to the far end so the label keeps the place the eye already looks for it.
   The two never swap sides and the label never shifts, because a footer that
   rearranged itself when a download started would be read as a new control
   rather than as the same one with news. */
.downloads-link__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  width: 100%;
}

/* Quieter than the label it sits beside: this is a reminder that something is
   happening, not the thing the footer is for. Mono and right-aligned for the
   reason the download window's counter is - the percent grows a digit as it
   climbs, and a figure anchored to its right edge does not shuffle the line
   sideways on the way past 10%. */
.downloads-link__status {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 400;
  color: var(--fg-2);
  white-space: nowrap;
}

/* The same bar the download window draws (screens/downloads.css), at half its
   height. One visual language for progress across the app, at the weight a
   footer earns - 8px in a legend footer would read as a control. */
.downloads-link__bar {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-sunken);
  overflow: hidden;
}
.downloads-link__bar-fill {
  display: block;
  height: 100%;
  background: var(--brand-primary);
}

/* The safety alert strip (#232), between the status strip and the header.
 *
 * This sits above the map on a phone, so every pixel it takes is map a hiker
 * cannot see. One STATEMENT per row, which is not the same as one line: at 390px
 * a full closure sentence already wraps to two, and it did before #485 too. The
 * comment here used to claim one line each, which was never true at phone width.
 *
 * THREE ROWS AT MOST, WHICH THIS USED TO SAY WAS TWO. The rule was "a closure and
 * a warning count are worth that; a third thing would not be", and #485 is the
 * case that overturned it - not because a third row got cheaper, but because the
 * alternative turned out to cost more than a row.
 *
 * Measured in Chromium at 390px rather than argued: two rows 64px, the reported
 * case (closure + advisory) 79px, the worst case of all three 96px. So the third
 * row costs about 32px of map, and only when three separate things are true at
 * once.
 *
 * A broad advisory (lib/closureSpan.ts's MAX_BAND_MILES) and a specific closure
 * were ranked against each other for one line, and standing inside scores 0. So a
 * hiker inside ATC's 398-mile Helene advisory read it for 398 miles of walking
 * while the nine-mile closure three miles ahead never appeared. The saving was
 * one row; the price was the warning that changes what they do next. #462 had
 * already taken the advisory's BAND away as too broad to draw, which leaves this
 * strip as the only place it appears at all.
 *
 * So the third row exists, and it costs a row only when three separate things are
 * true at once - a closure ahead, warnings on route, AND a region-wide advisory.
 * In the case #485 reports it is two rows, the same as before, with the right one
 * on top.
 *
 * Same --danger treatment as .settings__locked and .more__stuck, for the same
 * reason - a second visual language for "this changes what you do next" is a
 * second thing to learn. */
.map-screen__alerts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}
.map-screen__alert {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--danger);
}

/* The advisory row, subordinate to the two above it (#485).
 *
 * Weight rather than colour or size. It is the one row in this strip that is not
 * about the next few miles - a region-wide advisory does not change for hundreds
 * of miles, so whatever is three miles ahead has to be read first - but it is
 * still a safety statement on a screen read at arm's length in direct sun, and
 * dimming the hue or shrinking the type would spend contrast to say so. Regular
 * against semibold is legible as a hierarchy at the same contrast ratio, which is
 * what src/test/mapChromeContrast.test.ts is there to keep. */
.map-screen__alert--advisory {
  font-weight: 400;
}

/* The bottom "something changed" banner (#687), replacing what used to be a
 * permanent row under the alert strip above. That row rendered whenever the
 * app held any ATC notice at all - which given ATC almost always has
 * something live was almost always, so a hiker paid map height for it on
 * every visit rather than the times it actually had news. Browsing
 * everything regardless of age moved to a quiet, permanent link in the
 * legend instead (.legend__atc-link) - this is only for a notice ATC has
 * touched in the last 72 hours that the hiker has not already silenced
 * (lib/atcAlertsBanner.ts), so most visits to this screen render nothing
 * here at all.
 *
 * At the FOOT of the main column rather than under the header, which is the
 * whole point: it costs map height only while it has something to say,
 * instead of on every visit. And in flow rather than floated over the
 * canvas - a floating card would have to dodge the locate/compass stack and
 * the credit strip sharing that corner, by hand-tuned offsets that drift the
 * moment either changes size, where a row in flow needs none of that on a
 * phone or the desktop sidebar layout alike.
 *
 * Same --danger tint as the alert strip - this is still ATC saying something
 * about the trail, not a generic app notification - but `aria-live="polite"`
 * rather than `role="alert"` (assertive) or `role="status"` in the markup:
 * StatusStrip.tsx already owns `role="status"` for connectivity and sync
 * age, and "something is new" does not need `role="alert"`'s interrupt
 * either. */
.map-screen__new-alerts {
  display: flex;
  align-items: stretch;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}

.map-screen__new-alerts-button {
  flex: 1;
  min-height: var(--min-touch-target, 44px);
  padding: 0 var(--space-2, 8px);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: var(--danger);
  background: none;
  border: none;
  cursor: pointer;
}

/* The quick "not now" beside it - silences without opening the list, for a
 * hiker who saw enough in the one line the button itself carries. Its own
 * touch target rather than a corner glyph shrunk to fit, for the reason
 * every other icon-only control in this stylesheet already gives
 * (.legend__close and friends): a cold thumb still has to land on it. */
.map-screen__new-alerts-silence {
  min-width: var(--min-touch-target, 44px);
  min-height: var(--min-touch-target, 44px);
  font-size: 18px;
  color: var(--danger);
  background: none;
  border: none;
  cursor: pointer;
}