/* Components: one block each, BEM-ish (.c-name, .c-name--modifier, .c-name__part). Tokens only, no raw colours or sizes.
   Every component is shown with its states in ui/styleguide.html. */
@layer components {

  /* Icon: an SVG from the Lucide sprite (icons.svg, scripts/make-icons.sh) */
  .c-icon { width: var(--icon-size); height: var(--icon-size); flex-shrink: 0; }
  .c-icon--s { width: var(--icon-size-s); height: var(--icon-size-s); }

  /* Wordmark: bold green name, spaced gold tagline */
  .c-wordmark { display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--color-action); }
  .c-wordmark__name { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); line-height: 1; letter-spacing: -0.02em; }

  /* Label: the small uppercase spaced style; only for short labels above values and section heads */
  .c-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; color: var(--color-text-muted); }

  /* Button: primary / secondary / ghost / icon-only; M (40) and S (32); loading */
  .c-button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    height: var(--control-height-m); padding: 0 var(--space-4);
    border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-control);
    background: var(--color-surface); color: var(--color-text);
    font-size: var(--font-size-md); font-weight: var(--font-weight-medium); white-space: nowrap; text-decoration: none;
    transition: background-color var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--easing), color var(--duration-fast) var(--easing);
  }
  .c-button:hover { background: var(--color-surface-hover); }
  .c-button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .c-button--primary { background: var(--color-action); border-color: var(--color-action); color: var(--color-action-text); }
  .c-button--primary:hover { background: var(--color-action-hover); border-color: var(--color-action-hover); }
  .c-button--ghost { border-color: transparent; background: transparent; }
  .c-button--ghost:hover { background: var(--color-surface-hover); }
  /* every close button is a red ✕ in a pale red box, so it reads as the way out (the user, 2026-10-06;
     2026-10-07: "not visible enough, make it more red"; later that day: no "Close" word, the ✕ in its red
     box is enough); hover: solid red, white cross */
  .c-button[aria-label^="Close"], .maplibregl-popup-close-button { color: var(--color-close-button); background: var(--color-close-button-fill); }
  .c-button[aria-label^="Close"]:hover, .maplibregl-popup-close-button:hover { background: var(--color-close-button); border-color: var(--color-close-button); color: var(--white); }
  .c-button[aria-label^="Close"] .c-icon { width: 18px; height: 18px; stroke-width: 2.5; }
  .c-button--danger { color: var(--color-danger); border-color: var(--color-danger); }
  .c-button--s { height: var(--control-height-s); padding: 0 var(--space-3); font-size: var(--font-size-sm); }
  .c-button--icon { width: var(--control-height-m); padding: 0; }
  .c-button--icon.c-button--s { width: var(--control-height-s); }
  .c-button--block { width: 100%; }
  .c-button:disabled, .c-button[aria-disabled="true"] { background: var(--color-surface-alt); border-color: var(--color-border); color: var(--color-text-disabled); }
  .c-button[aria-busy="true"] { pointer-events: none; }
  .c-button[aria-busy="true"] .c-icon { animation: c-spin 900ms linear infinite; }
  @keyframes c-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .c-button[aria-busy="true"] .c-icon { animation: none; } }

  /* Tabs: underlined, like the source's top navigation. Modes (Climbs | Route) and Draw | Suggest */
  .c-tabs { display: flex; gap: var(--space-6); border-bottom: var(--border-width) solid var(--color-border); }
  .c-tabs__tab {
    position: relative; display: inline-flex; align-items: center; gap: var(--space-2);
    height: var(--control-height-m); padding: 0; border: 0; background: none;
    font-size: var(--font-size-md); color: var(--color-text); white-space: nowrap;
  }
  .c-tabs__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; transition: background-color var(--duration-fast) var(--easing); }
  .c-tabs__tab:hover::after { background: var(--color-border); }
  .c-tabs__tab[aria-selected="true"] { font-weight: var(--font-weight-medium); }
  .c-tabs__tab[aria-selected="true"]::after { background: var(--color-border-strong); }
  .c-tabs__tab--debug { color: var(--color-text-muted); }
  /* debug only (admins): the open climb's road ids, rank and key, right under its title */
  .c-debug-line { margin: var(--space-1) 0 0; padding: 2px var(--space-2); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-control); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; color: var(--color-text-muted); width: fit-content; }
  .c-debug-line__key { user-select: all; }
  /* everything only debug shows (admins) wears the debug line's dashed edge (the user, 2026-10-04) */
  .u-debug { outline: 1px dashed var(--color-border-strong); outline-offset: 2px; border-radius: var(--radius-control); }
  .c-section.u-debug, div.u-debug { padding: var(--space-1) var(--space-2); outline-offset: 0; }

  /* Segmented control: picks one value (riding style, Loop | To the finish, terrain). A light grey
     track with the chosen option as a raised white chip in the action colour (the user, 2026-10-04:
     the black-bordered, dark-filled version was "all big buttons, not minimalistic") */
  .c-segmented { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-card); background: var(--color-surface-alt); }
  .c-segmented--block { display: flex; }
  .c-segmented__option {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
    height: 28px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-control); background: transparent;
    font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); white-space: nowrap;
    transition: background-color var(--duration-fast) var(--easing), color var(--duration-fast) var(--easing);
  }
  .c-segmented__option .c-icon { width: var(--icon-size-s); height: var(--icon-size-s); }
  .c-segmented__option:hover:not(:disabled) { color: var(--color-text); }
  .c-segmented__option[aria-checked="true"] { background: var(--color-surface); color: var(--color-action); box-shadow: var(--shadow-raised); }
  .c-segmented__option:disabled { color: var(--color-text-disabled); cursor: default; }
  .c-segmented__option:focus-visible { outline: none; box-shadow: var(--focus-ring); }

  /* Chip: active filters (removable) and fixed choices */
  .c-chip {
    display: inline-flex; align-items: center; gap: var(--space-1);
    height: 28px; padding: 0 var(--space-2) 0 var(--space-3);
    border: var(--border-width) solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface);
    font-size: var(--font-size-sm); white-space: nowrap;
  }
  .c-chip--static { padding: 0 var(--space-3); }
  .c-chip--selected { background: var(--color-surface-selected); border-color: var(--color-action); color: var(--color-action); font-weight: var(--font-weight-medium); }
  .c-chip__remove { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--radius-pill); background: none; color: var(--color-text-muted); }
  .c-chip__remove:hover { background: var(--color-surface-hover); color: var(--color-text); }

  /* Stat: label, big tabular number, unit */
  .c-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .c-stat__value { font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); line-height: var(--line-height-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .c-stat__unit { font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); color: var(--color-text-muted); margin-left: 0.15em; }
  .c-stat--l .c-stat__value { font-size: var(--font-size-2xl); }

  /* Field: label + control + hint */
  .c-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
  .c-field__label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
  .c-field__hint { font-size: var(--font-size-xs); color: var(--color-text-muted); }

  /* Input and select */
  .c-input, .c-select {
    height: var(--control-height-m); padding: 0 var(--space-3); min-width: 0;
    border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-surface);
    font-size: var(--font-size-md);
  }
  .c-input::placeholder { color: var(--color-text-muted); }
  .c-input:focus-visible, .c-select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .c-input--number { width: 6em; font-variant-numeric: tabular-nums; }
  .c-select { appearance: none; padding-right: var(--space-8); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 16px center, right 11px center; background-size: 5px 5px; background-repeat: no-repeat; }

  /* Slider (range) */
  .c-slider { width: 100%; height: var(--touch-target); margin: 0; background: transparent; accent-color: var(--color-action); }

  /* Switch: a checkbox with role="switch" */
  .c-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--touch-target); cursor: pointer; }
  .c-switch__input {
    appearance: none; flex-shrink: 0; position: relative; width: 40px; height: 24px; margin: 0;
    border-radius: var(--radius-pill); background: var(--color-text-disabled); cursor: pointer;
    transition: background-color var(--duration-base) var(--easing);
  }
  .c-switch__input::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: var(--radius-pill);
    background: var(--color-surface); box-shadow: var(--shadow-raised); transition: transform var(--duration-base) var(--easing);
  }
  .c-switch__input:checked { background: var(--color-action); }
  .c-switch__input:checked::after { transform: translateX(16px); }
  .c-switch__input:focus-visible { outline: none; box-shadow: var(--focus-ring); }

  /* Pin: a climb's difficulty as a staircase of five steps inside a disc in its category colour with a
     white ring (app.js pin(); the user's pick, 2026-10-04: the stairs replaced the number in the disc).
     Empty steps faint, a half step half-strong. */
  .c-pin {
    display: inline-grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-pill);
    background: var(--pin-color, var(--color-action)); color: var(--pin-text, var(--color-text-inverse));
    box-shadow: 0 0 0 2px var(--color-surface), var(--shadow-raised);
  }
  /* the stairs inside the disc, in the disc's text colour (white on the dark grades, ink on yellow) */
  .c-pin svg { display: block; width: 54%; height: 54%; margin: 4% 0 0 2%; }
  .c-pin__empty { fill: currentColor; opacity: 0.28; }
  .c-pin__fill { fill: currentColor; }
  .c-pin__half { fill: currentColor; opacity: 0.6; }
  .c-pin--grade-0 { --pin-color: var(--grade-0); --pin-text: var(--grade-0-text); }
  .c-pin--grade-1 { --pin-color: var(--grade-1); --pin-text: var(--grade-1-text); }
  .c-pin--grade-2 { --pin-color: var(--grade-2); --pin-text: var(--grade-2-text); }
  .c-pin--grade-3 { --pin-color: var(--grade-3); --pin-text: var(--grade-3-text); }
  .c-pin--grade-4 { --pin-color: var(--grade-4); --pin-text: var(--grade-4-text); }

  .c-pin--l { width: 40px; height: 40px; }

  /* Toggle chip: a chip that is a button (filter options); aria-pressed carries the state */
  button.c-chip { padding: 0 var(--space-3); height: 32px; cursor: pointer; transition: background-color var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--easing); }
  button.c-chip:hover { border-color: var(--color-border-strong); }
  button.c-chip[aria-pressed="true"] { background: var(--color-surface-selected); border-color: var(--color-action); color: var(--color-action); font-weight: var(--font-weight-medium); }
  button.c-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .c-chip__dot { width: 10px; height: 10px; border-radius: var(--radius-pill); flex-shrink: 0; }
  .c-chip__note { color: var(--color-text-muted); font-weight: var(--font-weight-regular); }

  /* Badge: a count on a button (active filters) */
  .c-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 var(--space-1); border-radius: var(--radius-pill); background: var(--color-action); color: var(--color-action-text); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }

  /* Link button: an action that reads as a link */
  .c-link { padding: 0; border: 0; background: none; color: var(--color-action); font-weight: var(--font-weight-medium); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
  .c-link:hover { text-decoration-thickness: 2px; }

  .c-select--s { height: var(--control-height-s); font-size: var(--font-size-sm); padding-left: var(--space-2); }

  /* Section: a small uppercase label over its content */
  .c-section { display: flex; flex-direction: column; gap: var(--space-2); }
  .c-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
  .c-section__value { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; }
  .c-hint { font-size: var(--font-size-sm); color: var(--color-text-muted); line-height: 1.4; }

  /* List row: a climb in the list (pin, name, meta, mini profile, numbers) */
  .c-list { list-style: none; margin: 0; padding: 0; }
  .c-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3);
    padding: var(--space-3) var(--space-5); border-bottom: var(--border-width) solid var(--color-border);
    cursor: pointer; transition: background-color var(--duration-fast) var(--easing);
  }
  .c-row:hover, .c-row.is-hover { background: var(--color-surface-alt); }
  .c-row[aria-current="true"] { background: var(--color-surface-selected); box-shadow: inset 3px 0 0 var(--color-action); }
  .c-row:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
  .c-row > .c-pin { grid-row: span 2; margin-top: 2px; }
  .c-row__title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); min-width: 0; }
  .c-row__name { font-weight: var(--font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .c-row__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }
  .c-row__numbers { flex-shrink: 0; font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .c-row__extra { grid-column: 2; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
  .c-row__mini { display: block; width: 100%; height: 36px; }
  .c-row__accent { color: var(--color-action); font-weight: var(--font-weight-medium); }

  /* Empty / note line in a list */
  .c-empty { padding: var(--space-8) var(--space-5); color: var(--color-text-muted); text-align: center; font-size: var(--font-size-sm); }

  /* Range: two thumbs on one track, over a histogram of the values */
  .c-histogram { display: flex; align-items: flex-end; gap: 1px; height: 28px; padding: 0 10px; }
  .c-histogram i { flex: 1; background: var(--color-border); }
  .c-histogram i.on { background: var(--color-action-hover); opacity: 0.55; }
  .c-range { position: relative; height: 28px; }
  .c-range input { position: absolute; inset: 0; width: 100%; height: 28px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
  .c-range input::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--color-surface); border: 2px solid var(--color-action); box-shadow: var(--shadow-raised); cursor: pointer; position: relative; z-index: 2; }
  .c-range input::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--color-surface); border: 2px solid var(--color-action); cursor: pointer; }
  .c-range input:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
  .c-range__track, .c-range__fill { position: absolute; top: 12px; height: 4px; border-radius: var(--radius-pill); }
  .c-range__track { left: 10px; right: 10px; background: var(--color-border); }
  .c-range__fill { background: var(--color-action); }

  /* Card: a bordered box (the profile chart) */
  .c-card { position: relative; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }

  /* Profile chart: the SVG from profileSVG(), its tooltip and the zoom strip under it (Climbfinder-style) */
  .c-profile { padding: var(--space-3) var(--space-2) var(--space-1) var(--space-1); }
  .c-profile__chart { display: block; width: 100%; height: 210px; touch-action: pan-y; }
  .c-tooltip { position: absolute; pointer-events: none; transform: translate(-50%, -110%); padding: var(--space-1) var(--space-2); border-radius: var(--radius-control); background: var(--color-text); color: var(--color-text-inverse); font-size: var(--font-size-xs); white-space: nowrap; font-variant-numeric: tabular-nums; z-index: 1; }
  /* zooming the profile on the chart itself (setupZoom): the stretch being picked, the part shown, one line */
  .c-profile { position: relative; }
  .c-profile__chart { cursor: crosshair; }
  #bigprofile-host { min-height: 210px; overflow: hidden; } /* the chart is drawn at its final width; the panel uncovers it as it grows */
  .c-profile__sel { position: absolute; pointer-events: none; background: var(--color-action); opacity: 0.12; border-left: 1.5px solid var(--color-action); border-right: 1.5px solid var(--color-action); }
  .c-profile__pos { position: relative; height: 6px; margin-top: var(--space-1); border-radius: 999px; background: var(--color-surface-alt); box-shadow: inset 0 0 0 1px var(--color-border); cursor: pointer; touch-action: none; }
  .c-profile__thumb { position: absolute; top: -2px; bottom: -2px; min-width: 10px; border-radius: 999px; background: var(--color-action); cursor: grab; touch-action: none; }
  .c-profile__thumb:active { cursor: grabbing; }
  .c-profile__thumb:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .c-profile__zoom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 32px; padding: var(--space-1) 2px 0 40px; font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
  .c-surface { display: flex; flex-wrap: wrap; gap: var(--space-3); color: var(--color-text-muted); }
  .c-surface:empty { display: none; }
  .c-surface > span { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
  .c-profile__zoom .c-profile__label { margin-left: auto; }
  .c-profile__zoom .c-profile__label:not(.c-hint) { color: var(--color-text); font-weight: var(--font-weight-medium); }

  /* Stats grid: Stat components in columns */
  .c-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: var(--space-4) var(--space-3); }

  /* Gradient mix: a bar of grade shares and its legend */
  .c-gradient-bar { display: flex; height: 8px; overflow: hidden; border-radius: var(--radius-control); }
  .c-gradient-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
  .c-gradient-legend i { display: inline-block; width: 10px; height: 10px; margin-right: var(--space-1); vertical-align: -1px; border-radius: var(--radius-control); }

  /* Facts: a definition list of label / value */
  .c-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--font-size-sm); }
  .c-facts dt { color: var(--color-text-muted); }
  .c-facts dd { margin: 0; font-weight: var(--font-weight-medium); }

  /* Variant carousel: a family's other ways up, as cards that scroll sideways, ~2.5 in view
     (app.js variantRows; the user, 2026-10-04: a carousel instead of a long list) */
  .c-carousel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .c-carousel__nav { display: flex; gap: var(--space-1); }
  .c-carousel__track {
    list-style: none; margin: 0; padding: 2px 2px var(--space-2);
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(168px, calc((100% - 2 * var(--space-2)) / 2.5)); gap: var(--space-2);
    overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin;
  }
  .c-variant {
    scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); cursor: pointer;
    transition: border-color var(--duration-fast) var(--easing);
  }
  .c-variant:hover { border-color: var(--color-border-strong); }
  .c-variant[aria-current="true"] { border-color: var(--color-action); background: var(--color-surface-selected); box-shadow: inset 0 0 0 1px var(--color-action); }
  .c-variant:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .c-variant.c-skeleton { min-height: 118px; border: 0; }
  .c-variant__top { display: flex; align-items: flex-start; gap: var(--space-2); min-height: 2.6em; }
  .c-variant__top .c-pin { width: 22px; height: 22px; box-shadow: none; }
  .c-variant__top b { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
  .c-variant__mini { display: block; width: 100%; height: 34px; }
  .c-variant__text { font-size: var(--font-size-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

  /* Panel foot: sticky actions at the bottom of a scrolling view */
  .c-panel-foot { position: sticky; bottom: 0; display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: var(--border-width) solid var(--color-border); background: var(--color-surface); }
  .c-panel-foot .c-button { flex: 1; }

  .c-tabs--s { gap: var(--space-5); }
  .c-tabs--s .c-tabs__tab { height: var(--control-height-s); font-size: var(--font-size-sm); }

  /* Menu: a menu button's popover list (js/ui/menu.js) */
  .c-menu { position: relative; }
  .c-menu__list {
    position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: var(--z-popover); min-width: 200px;
    display: flex; flex-direction: column; padding: var(--space-1) 0;
    background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay);
  }
  .c-menu__list[hidden] { display: none; }
  .c-menu__list [role="menuitem"] {
    display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height-m); padding: 0 var(--space-4);
    border: 0; background: none; font-size: var(--font-size-sm); text-align: left; white-space: nowrap;
  }
  .c-menu__list [role="menuitem"]:hover, .c-menu__list [role="menuitem"]:focus-visible { background: var(--color-surface-hover); outline: none; }
  .c-menu__list [role="menuitem"]:disabled { color: var(--color-text-disabled); background: none; }
  .c-menu__list hr { margin: var(--space-1) 0; }
  .c-menu__danger { color: var(--color-danger); }

  /* Search: climbs by name or street, a list of matches under the field (app.js, search) */
  .c-search { position: relative; flex: 1; min-width: 0; }
  .c-search__icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; }
  .c-search__input { width: 100%; padding-left: calc(var(--space-3) * 2 + 16px); }
  .c-search__results {
    position: absolute; left: 0; right: 0; top: calc(100% + var(--space-1)); z-index: var(--z-popover); margin: 0; padding: var(--space-1) 0; list-style: none;
    max-height: min(60vh, 420px); overflow-y: auto;
    background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay);
  }
  .c-search__results[hidden] { display: none; }
  .c-search__hit { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); cursor: pointer; }
  .c-search__hit[aria-selected="true"], .c-search__hit:hover { background: var(--color-surface-hover); }
  .c-search__hit b { display: flex; align-items: center; gap: var(--space-1); font-weight: var(--font-weight-medium); }
  .c-search__hit div > span { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); }
  .c-search__hit .c-pin { flex-shrink: 0; }
  .c-search__none { padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-muted); }

  /* Toast: one short message, bottom centre */
  .c-toast {
    position: fixed; left: 50%; bottom: var(--space-6); z-index: var(--z-toast); transform: translateX(-50%);
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-control); background: var(--color-text); color: var(--color-text-inverse);
    font-size: var(--font-size-sm); box-shadow: var(--shadow-overlay);
  }

  /* Toggletip: an info button that shows its text below (works on touch, unlike a hover tooltip) */
  .c-toggletip { display: inline-flex; vertical-align: middle; }
  .c-toggletip__text { margin-top: var(--space-1); padding: var(--space-2) var(--space-3); border-left: 2px solid var(--color-accent); background: var(--color-surface-alt); font-size: var(--font-size-sm); color: var(--color-text-muted); }

  /* Compass picker: 8 directions around "Any" (radio group, js/ui/tabs.js for arrows) */
  .c-compass { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); max-width: 320px; }
  .c-compass__option {
    height: var(--control-height-s); padding: 0 var(--space-1); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-control);
    background: var(--color-surface); font-size: var(--font-size-sm); white-space: nowrap;
  }
  .c-compass__option:hover { border-color: var(--color-border-strong); }
  .c-compass__option[aria-checked="true"] { background: var(--color-action); border-color: var(--color-action); color: var(--color-action-text); font-weight: var(--font-weight-medium); }
  .c-compass__option:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .c-compass__option:disabled { color: var(--color-text-disabled); background: var(--color-surface-alt); }

  /* Route card: a suggested route (mini profile, numbers, why, Ride this route) */
  .c-route-card {
    display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-3);
    border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); cursor: pointer;
    transition: border-color var(--duration-fast) var(--easing);
  }
  .c-route-card:hover { border-color: var(--color-border-strong); }
  .c-route-card[aria-selected="true"] { border-color: var(--color-action); box-shadow: inset 0 0 0 1px var(--color-action); }
  .c-route-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .c-route-card__mini { display: block; width: 100%; height: 40px; }
  .c-route-card__numbers { display: flex; gap: var(--space-4); }
  .c-route-card__numbers .c-stat__value { font-size: var(--font-size-lg); }
  .c-route-card__meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }
  .c-route-card .c-button { align-self: flex-start; }
  /* Verified routes: the gallery (planner's third tab) and the course line over a loaded route */
  .c-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
  .c-gallery .c-skeleton, #plan-verified > .c-skeleton, #plan-mine > .c-skeleton { min-height: 120px; }
  .c-route-card__title { display: flex; align-items: center; gap: var(--space-2); }
  .c-route-card__title .c-icon, .c-course .c-icon { flex: none; color: var(--color-action); }
  .c-course { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); }
  .c-course b { color: var(--color-text); font-weight: var(--font-weight-medium); }
  .c-routehead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .c-routehead .c-course { min-width: 0; }

  /* Skeleton: a placeholder block while something loads */
  .c-skeleton { border-radius: var(--radius-control); background: linear-gradient(90deg, var(--color-surface-alt), var(--color-surface-hover), var(--color-surface-alt)); background-size: 200% 100%; animation: c-shimmer 1.2s linear infinite; }
  @keyframes c-shimmer { to { background-position: -200% 0; } }
  @media (prefers-reduced-motion: reduce) { .c-skeleton { animation: none; } }

  /* Point list: Start, Via n, Finish */
  .c-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .c-points li { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height-m); border-bottom: var(--border-width) solid var(--color-border); font-size: var(--font-size-sm); }
  .c-points li > span:nth-child(2) { flex: 1; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

  /* Route markers on the map, lean (the user, 2026-10-04: small, no numbers): Via = a small white dot
     with a green ring, Start = a green dot, Finish = a climb top's chequered disc. They grow a little
     under the pointer; on touch screens an invisible ring keeps the target 40 px */
  .c-marker {
    display: grid; place-items: center; width: 12px; height: 12px; border-radius: var(--radius-pill); /* no `position`: MapLibre makes it absolute */
    background: var(--color-surface); border: 2.5px solid var(--color-action); box-shadow: var(--shadow-raised); cursor: grab;
    transition: box-shadow var(--duration-fast) var(--easing);
  }
  /* hover: a soft ring. Never transform or scale a marker: MapLibre places it with `transform`, and
     `scale` multiplies that offset too (the marker jumped across the map under the pointer) */
  .c-marker:hover, .c-marker:focus-visible { box-shadow: 0 0 0 5px rgb(20 61 30 / 0.22), var(--shadow-raised); outline: none; }
  .c-marker::after { content: ""; position: absolute; inset: -10px; border-radius: var(--radius-pill); }
  @media (pointer: coarse) { .c-marker::after { inset: -14px; } }
  .c-marker--start { width: 16px; height: 16px; background: var(--grade-0); border: 2.5px solid var(--color-surface); box-shadow: 0 0 0 1px var(--color-text), var(--shadow-raised); }
  .c-marker--finish { width: 20px; height: 20px; border: 0; background: none; box-shadow: var(--shadow-raised); }
  .c-marker--finish img { width: 100%; height: 100%; display: block; }
  .c-marker--inline { position: relative; display: inline-grid; flex-shrink: 0; cursor: default; box-shadow: none; }
  .c-marker--inline:hover { box-shadow: none; }

  .c-menu__list--static { position: static; min-width: 0; border: 0; box-shadow: none; }
  .c-popup .maplibregl-popup-content { padding: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-overlay); }
  .c-empty .c-icon { width: 32px; height: 32px; margin: 0 auto var(--space-3); color: var(--color-text-disabled); }
  .c-empty p + p { margin-top: var(--space-2); }
  details.c-section > summary { cursor: pointer; list-style: revert; }
  details.c-section[open] > summary { margin-bottom: var(--space-2); }

  /* Debug (All roads): road ID, verdict box, the table of rises */
  .c-road-id { font-size: var(--font-size-2xl); font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; }
  .c-verdict { padding: var(--space-3); border: var(--border-width) solid var(--color-border); border-left-width: 4px; border-radius: var(--radius-card); font-size: var(--font-size-sm); }
  .c-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
  .c-table th { padding: var(--space-1) var(--space-2) var(--space-1) 0; text-align: left; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; color: var(--color-text-muted); }
  .c-table td { padding: var(--space-1) var(--space-2) var(--space-1) 0; border-top: var(--border-width) solid var(--color-border); vertical-align: top; }
  .c-table td.ok { color: var(--color-success); font-weight: var(--font-weight-medium); }
  .c-table td.no { color: var(--color-danger); }

  /* Wordmark with the logo: the brand mark, also the link back to the home page */
  .c-wordmark__home { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0; border: 0; background: none; color: inherit; font: inherit; }
  .c-wordmark__home:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-control); }
  .c-wordmark__logo { width: 28px; height: 28px; }

  /* Mode switch: the app's two main parts, Climbs | Route. Compact, beside the wordmark (the user,
     2026-10-04: the full-width switch took too much room) */
  .c-modeswitch { display: inline-flex; gap: 2px; padding: 2px; background: var(--color-surface-alt); border-radius: var(--radius-card); }
  .c-modeswitch__option {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
    height: var(--control-height-s); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-control); background: transparent;
    font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-muted); white-space: nowrap;
    transition: background-color var(--duration-fast) var(--easing), color var(--duration-fast) var(--easing);
  }
  .c-modeswitch__option:hover { color: var(--color-text); background: var(--color-surface-hover); }
  .c-modeswitch__option[aria-selected="true"] { background: var(--color-action); color: var(--color-action-text); box-shadow: var(--shadow-raised); }
  .c-modeswitch__option:focus-visible { outline: none; box-shadow: var(--focus-ring); }

  /* Choice cards: Draw a route | Suggest a route, the two ways to make a route */
  .c-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--space-2); }
  .c-choice {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; padding: var(--space-3);
    border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface);
    text-align: left; transition: border-color var(--duration-fast) var(--easing), background-color var(--duration-fast) var(--easing);
  }
  .c-choice .c-icon { color: var(--color-action); }
  .c-choice span { display: flex; flex-direction: column; min-width: 0; }
  .c-choice b { font-weight: var(--font-weight-medium); white-space: nowrap; }
  .c-choice small { font-size: var(--font-size-xs); color: var(--color-text-muted); }
  .c-choice:hover { border-color: var(--color-border-strong); }
  .c-choice[aria-selected="true"] { border-color: var(--color-action); background: var(--color-surface-selected); box-shadow: inset 0 0 0 1px var(--color-action); }
  .c-choice:focus-visible { outline: none; box-shadow: var(--focus-ring); }

  /* What's new: a roomy dialog, not a slip (the user, 2026-10-07) */
  .c-dialog--news { width: min(720px, calc(100vw - var(--space-8))); }
  .c-dialog--news .c-dialog__body--pad { padding: var(--space-6) var(--space-8) var(--space-8); }
  .c-dialog--news .c-dialog__head { padding-left: var(--space-8); }
  .c-dialog--news .c-dialog__head h2 { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }

  /* Map tooltip: a climb's details on hover */
  .c-maptip .maplibregl-popup-content { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-card); box-shadow: var(--shadow-overlay); font: var(--font-size-sm) / 1.35 var(--font-sans); color: var(--color-text); }
  .c-maptip span { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
  .c-maptip .maplibregl-popup-tip { display: none; }

  /* Monument seal: the mark of a curated, named climb (data/monuments.csv), a green seal with a white check,
     wherever a monument shows (list, panel, map tooltip, hill labels, the "Monuments only" toggle) */
  .c-seal { display: inline-block; width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; margin-right: 0.3em; }
  .c-seal__body { fill: var(--color-action); stroke: var(--color-surface); stroke-width: 1.2; }
  .c-seal__check { fill: none; stroke: var(--color-text-inverse); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .c-mono-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: var(--space-1) 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
  .c-mono-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 4px; border-radius: var(--radius-pill); background: var(--color-action); color: var(--color-text-inverse); font-weight: var(--font-weight-bold); font-size: var(--font-size-xs); letter-spacing: 0.02em; }
  .c-mono-tag .c-seal { margin: 0; }
  /* a cobble section: stone grey, so it never reads as a climb */
  .c-sector-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--grey-700, #4a504c); color: var(--white, #fff); font-weight: var(--font-weight-bold); font-size: var(--font-size-xs); letter-spacing: 0.02em; }
  .c-stars { letter-spacing: 0.08em; }
  .c-chip__stars { font-size: 0.95em; line-height: 1; }
  .c-mono-tag .c-seal__body { fill: var(--color-text-inverse); stroke: var(--color-action); }
  .c-mono-tag .c-seal__check { stroke: var(--color-action); }
  .c-hill .c-seal { margin-right: -2px; }

  /* Hill region label: zoomed out, one small pill per region (hardest difficulty, name); a button that zooms in.
     Compact so many fit (the user, 2026-10-07): the count only in its tooltip; the name zooms in, the train opens Getting there.
     Shown only while the map container has .is-regions (below REGIONS_UNTIL) */
  .c-hill {
    display: none; align-items: center; gap: var(--space-2); padding: 2px var(--space-3) 2px 2px;
    border: 1px solid #8e2a1f; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    box-shadow: var(--shadow-raised); font: var(--font-weight-bold) var(--font-size-xs) / 1 var(--font-sans); color: var(--color-text);
    font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer;
  }
  .is-regions .c-hill { display: inline-flex; }
  .c-hill:hover { border-color: var(--color-text); }
  .c-hill button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  /* its parts (trains, 2026-10-07): the name zooms in; a magnifier (zoom in) and a train (Getting there) */
  .c-hill { padding: 1px 1px 1px 1px; gap: 0; cursor: default; font-size: 11px; }
  .c-hill__main { display: inline-flex; align-items: center; gap: 5px; padding: 0 2px 0 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; border-radius: var(--radius-pill); }
  .c-hill__icon { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-text); cursor: pointer; }
  .c-hill__icon:hover { background: var(--color-surface-hover); }
  .c-hill__icon .c-icon { width: 13px; height: 13px; }
  .c-hill .c-pin { width: 16px; height: 16px; box-shadow: none; }
  .c-hill:hover, .c-hill:focus-within { z-index: 2; }

  /* Quick filters: Filters (opens the dialog) and the common toggles in one row that scrolls sideways */
  /* desktop: the chips wrap; phones: one row that scrolls sideways (layout.css) */
  .c-quick { display: flex; flex-wrap: wrap; gap: var(--space-1); }
  .c-quick::-webkit-scrollbar { display: none; }
  .c-quick__chips { display: contents; }
  .c-quick .c-chip { flex-shrink: 0; height: 28px; padding: 0 var(--space-2); gap: 5px; font-size: var(--font-size-sm); }
  .c-quick:not(:has(.c-chip)) { display: none; }
  .c-quick .c-chip .c-seal { margin-right: 0; }
  .l-searchrow__filters { flex-shrink: 0; height: var(--control-height-m); gap: var(--space-1); }
  .l-searchrow__filters .c-badge { min-width: 18px; height: 18px; }
  .c-active { gap: var(--space-1); }
  .c-active[hidden] { display: none; }
  .c-active .c-chip { height: 26px; font-size: var(--font-size-xs); }
  .c-active__clear { font-size: var(--font-size-xs); }

  /* Dialog: a big modal for the full filters (native <dialog>; full screen on phones) */
  .c-dialog {
    width: min(900px, calc(100vw - var(--space-12))); max-height: min(880px, calc(100dvh - var(--space-12))); padding: 0;
    border: 0; border-radius: var(--radius-card); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-modal);
  }
  .c-dialog[open] { display: flex; flex-direction: column; animation: c-dialog-in var(--duration-base) var(--easing); }
  @keyframes c-dialog-in { from { opacity: 0; transform: translateY(12px); } }
  .c-dialog::backdrop { background: var(--color-scrim); }
  .c-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-6); border-bottom: var(--border-width) solid var(--color-border); }
  .c-dialog__head h2 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); }
  .c-dialog__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .c-dialog__foot { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-6); border-top: var(--border-width) solid var(--color-border); }
  .c-dialog__foot .c-button--primary { min-width: 180px; }

  /* Menu extras: a small heading and a switch inside a menu (the debug menu) */
  .c-menu__head { padding: var(--space-2) var(--space-4) var(--space-1); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; color: var(--color-text-muted); }
  .c-menu__switch { padding: 0 var(--space-4); font-size: var(--font-size-sm); white-space: normal; min-width: 260px; }

  /* Route mode: once Draw or Suggest is chosen, the two cards shrink to one compact row (planner.js setChosen) */
  .is-compact > .c-choices { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 2px; background: var(--color-surface-alt); border-radius: var(--radius-card); }
  .is-compact > .c-choices .c-choice { flex-direction: row; align-items: center; justify-content: center; gap: var(--space-1); height: 28px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--color-text-muted); box-shadow: none; }
  .is-compact > .c-choices .c-choice small { display: none; }
  /* equal thirds; in a narrow panel (phones) "Draw a route" / "Suggest a route" become "Draw" / "Suggest" */
  .is-compact > .c-choices .c-choice { min-width: 0; padding: 0 var(--space-2); }
  .is-compact > .c-choices .c-choice b { white-space: nowrap; }
  .c-choice .c-choice__long { display: inline; }
  @container panel (max-width: 420px) { .is-compact > .c-choices .c-choice__long { display: none; } }
  .is-compact > .c-choices .c-choice__more { display: none; } /* "Verified routes" -> "Verified": three fit a phone */
  .is-compact > .c-choices .c-choice b { font-size: var(--font-size-sm); }
  .is-compact > .c-choices .c-choice .c-icon { width: var(--icon-size-s); height: var(--icon-size-s); color: inherit; }
  .is-compact > .c-choices .c-choice[aria-selected="true"] { background: var(--color-surface); color: var(--color-action); box-shadow: var(--shadow-raised); }

  /* A climb clicked while drawing: ride it, or just a point there */
  .c-climbpick { min-width: 230px; }
  .c-climbpick [role="menuitem"] span { display: flex; flex-direction: column; line-height: 1.25; }
  .c-climbpick small { color: var(--color-text-muted); font-size: var(--font-size-xs); }

  /* small inline variants: a switch in a section head, a segmented control S, a wide dialog */
  .c-switch--inline { min-height: 0; gap: var(--space-2); font-size: var(--font-size-sm); }
  .c-switch--inline .c-switch__input { width: 32px; height: 18px; }
  .c-switch--inline .c-switch__input::after { top: 2px; left: 2px; width: 14px; height: 14px; }
  .c-switch--inline .c-switch__input:checked::after { transform: translateX(14px); }
  .c-segmented--s .c-segmented__option { height: 26px; padding: 0 var(--space-2); font-size: var(--font-size-xs); }
  .c-dialog--wide { width: min(1200px, calc(100vw - var(--space-8))); }
  .c-dialog__body--pad { padding: var(--space-4) var(--space-6) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
  /* a route's climbs: cards are links; list rows carry the difficulty disc */
  .c-variant__link { display: flex; flex-direction: column; gap: var(--space-1); color: inherit; text-decoration: none; }
  .c-points li > .c-pin { width: 22px; height: 22px; box-shadow: none; }
  .c-points li > a.c-link { flex-shrink: 0; }
  .c-profile__mark text, .c-profile__mark-bar { cursor: pointer; }


  /* viewing a route: via points off the map (start and finish stay) */
  .c-marker.is-quiet { display: none; }
  /* a route's actions: the main ones, then Reverse and Clear set apart */
  .c-routeactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .c-routeactions__more { display: inline-flex; gap: var(--space-1); margin-left: auto; }

  /* small buttons carry small icons (planner.js draws full-size ones) */
  .c-button--s .c-icon { width: var(--icon-size-s); height: var(--icon-size-s); }

  /* A settings stack (Suggest): a small label over one full-width control per row, every control the
     same light segmented track and height, so the form reads top to bottom in one rhythm (the user,
     2026-10-04: the mix of card, slider, rose and chips was "all over the place") */
  .c-stack { display: flex; flex-direction: column; gap: var(--space-4); }
  .c-stack__row { display: flex; flex-direction: column; gap: 6px; }
  .c-form__label { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; color: var(--color-text-muted); }
  .c-stack__start { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); }
  .c-stack__start .c-icon { width: var(--icon-size-s); height: var(--icon-size-s); color: var(--color-action); }
  .c-stack__sum { text-align: center; font-size: var(--font-size-xs); margin-top: calc(-1 * var(--space-2)); }
  .c-stack > .c-button--block + .c-stack__sum { margin-top: calc(-1 * var(--space-2)); }
  .c-segmented--block .c-segmented__option { min-width: 0; padding: 0 var(--space-1); }
  /* several on at once (Avoid): the same look, aria-pressed instead of aria-checked */
  .c-segmented__option[aria-pressed="true"] { background: var(--color-surface); color: var(--color-action); box-shadow: var(--shadow-raised); }

  /* a choice popup on the map (ride this climb / just a point) hides the hover tooltip under it */
  body:has(.c-popup) .c-maptip { display: none; }

  /* account (ui/auth.js): the button in the panel head (an icon, or the initial once signed in) and its dialog */
  .c-dialog--s { width: min(420px, calc(100vw - var(--space-6))); }
  .c-account { position: relative; flex: none; } /* never squeezed by a crowded header: stays round */
  .c-button.c-account--in { width: 28px; height: 28px; min-width: 28px; aspect-ratio: 1; padding: 0; margin: 1px; border-radius: 50%; background: var(--color-action); color: var(--color-action-text); }
  .c-account--in:hover { background: var(--color-action-hover); }
  .c-account__initial { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); line-height: 1; }
  .c-account__form { display: flex; flex-direction: column; gap: var(--space-3); }
  .c-account__form p { margin: 0; }
  .c-account__form .c-button { align-self: flex-start; }
  .c-account__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  #account > .c-button, #account > .c-link { align-self: flex-start; }
  .c-account__msg { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); background: var(--color-accent-tint); font-size: var(--font-size-sm); }
  .c-account__msg--error { background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface)); color: var(--color-danger); }
  .c-account__who { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
  .c-account__who b { display: block; overflow-wrap: anywhere; }
  .c-account__who .c-hint { display: block; overflow-wrap: anywhere; }
  .c-account__avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--color-action); color: var(--color-action-text); display: grid; place-items: center; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); }

  /* what's new (app.js initNews): the ✦ button in the panel head, a dot until the newest release is seen */
  .c-news { position: relative; }
  .c-news__dot { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-surface); }
  .c-news__dot[hidden] { display: none; }
  .c-news__release + .c-news__release { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
  .c-news__date { margin: 0 0 var(--space-3); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); }
  .c-news__items { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--font-size-md); line-height: 1.55; }
}

@layer components {
  /* Trains (trains.js): Getting there and a station's card */
  .c-train-eyebrow { color: var(--color-accent); margin: 0 0 2px; }
  .c-train-warn { color: var(--color-close); font-weight: var(--font-weight-bold); }
  .c-train-chip { gap: 6px; }
  .c-train-rows { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
  .c-train-row { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); padding: var(--space-3) var(--space-2); margin: 0 calc(-1 * var(--space-2)); border-bottom: 1px solid var(--color-border); border-radius: var(--radius-card); cursor: pointer; }
  .c-train-row:hover, .c-train-row:focus-visible { background: var(--color-surface-hover); outline: none; }
  .c-train-row > div:not(.c-train-freq) { grid-column: 1; }
  .c-train-days { font-size: var(--font-size-xs); }
  .c-train-days b { color: var(--color-text); font-weight: var(--font-weight-medium); }
  .c-train-freq { grid-column: 2; grid-row: 1 / span 3; align-self: center; text-align: right; font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
  .c-train-ticks { display: flex; gap: 3px; justify-content: flex-end; margin-bottom: 4px; }
  .c-train-ticks i { width: 6px; height: 14px; border-radius: 2px; background: var(--color-action); }
  .c-train-ticks i.is-off { background: var(--color-surface-hover); }
  .c-train-note { font-size: var(--font-size-xs); color: var(--color-text-muted); background: var(--color-surface-alt); border-radius: var(--radius-card); padding: var(--space-3); line-height: 1.45; }
  .c-train-card { font: var(--font-size-sm) / 1.4 var(--font-sans); color: var(--color-text); }
  .c-train-card b { font-size: var(--font-size-md, 15px); }
  .c-train-card table { width: 100%; border-collapse: collapse; margin: var(--space-2) 0; }
  .c-train-card td { padding: 2px 0; vertical-align: top; }
  .c-train-card td:last-child { text-align: right; color: var(--color-text-muted); padding-left: var(--space-3); }
}