/* ============================================================================
   COMPONENTS  —  @layer components
   BEM (.block, .block__element, .block--modifier). One component per concern,
   each mirrored by a render fn in js/components/ and shown in styleguide.html.
   No hardcoded visual values — semantic tokens only.
   ============================================================================ */
@layer components {

  /* ---- Layout scaffolding ------------------------------------------------ */
  /* body is the page column (base layer); main grows so the footer hugs the bottom. */
  .app { display: flex; flex-direction: column; flex: 1 0 auto; }

  .container {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--space-4);
  }
  /* Airport view: a touch more air between the big blocks (plate/summary/phases). */
  .airport-view { --stack-gap: var(--space-5); }

  .skip-link {
    position: absolute;
    left: var(--space-3);
    top: calc(-1 * var(--space-10));
    z-index: 100;
    background: var(--color-accent);
    color: var(--color-on-accent);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    transition: top var(--dur-fast) var(--ease-out);
  }
  .skip-link:focus { top: var(--space-3); }

  /* ---- Site header (app bar) -------------------------------------------- */
  .site-header {
    position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: var(--border-1) solid var(--color-border);
  }
  .site-header__bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--tap-min);
    padding-block: var(--space-2);
  }
  .site-header__brand {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-display);
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-strong);
    text-decoration: none;
    font-size: var(--text-lg);
    white-space: nowrap;   /* never wrap the wordmark to two lines */
  }
  .site-header__brand .icon { flex: none; }
  /* Tight phones: shrink the wordmark a step so brand + toggle + language fit one line. */
  @media (max-width: 460px) {
    .site-header__brand { font-size: var(--text-base); }
    .site-header__bar { gap: var(--space-2); }
  }
  .site-header__brand .icon { color: var(--color-accent); }
  .site-header__actions { display: flex; align-items: center; gap: var(--space-2); }
  .site-header__lead { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }

  /* Back to home — lives in the top bar, shown only on an airport/sub view. On those
     views the wordmark collapses to the logo so the bar stays one line on mobile. */
  .site-header__back {
    display: none; align-items: center; gap: var(--space-1);
    min-height: var(--tap-min); padding-inline: var(--space-2);
    border-radius: var(--radius-pill);
    color: var(--color-accent); font-weight: var(--weight-medium);
    text-decoration: none; white-space: nowrap; flex: none;
  }
  .site-header__back:hover { background: var(--color-surface-sunken); }
  .site-header__back .icon { flex: none; }
  [data-view="airport"] .site-header__back { display: inline-flex; }
  [data-view="airport"] .site-header__brand span { display: none; }

  /* ---- Theme toggle (dark / light) -------------------------------------- */
  .theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--tap-min); height: var(--tap-min); flex: none;
    border-radius: var(--radius-pill);
    border: var(--border-1) solid var(--color-border-strong);
    background: var(--color-surface); color: var(--color-text);
  }
  .theme-toggle:hover { background: var(--color-surface-sunken); color: var(--color-accent); }
  /* Scoped under .theme-toggle so these outrank the generic `.icon { display }` rule. */
  .theme-toggle .theme-toggle__i { display: none; }
  /* Default (light or OS-light): offer the moon → "go dark". */
  .theme-toggle .theme-toggle__i--moon { display: block; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle__i--moon { display: none; }
    :root:not([data-theme="light"]) .theme-toggle__i--sun  { display: block; }
  }
  :root[data-theme="dark"]  .theme-toggle__i--moon { display: none; }
  :root[data-theme="dark"]  .theme-toggle__i--sun  { display: block; }
  :root[data-theme="light"] .theme-toggle__i--moon { display: block; }
  :root[data-theme="light"] .theme-toggle__i--sun  { display: none; }

  /* ---- Site footer (contentinfo) ---------------------------------------- */
  .site-footer {
    margin-top: var(--space-8);
    border-top: var(--border-1) solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }
  .site-footer__inner {
    display: flex; flex-direction: column; gap: var(--space-3);
    padding-block: var(--space-6);
  }
  .site-footer__disclaimer { max-width: 60ch; }
  .site-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .site-footer__links a {
    display: inline-flex; align-items: center; min-height: var(--tap-min);
    color: var(--color-accent); text-decoration: none;
  }
  .site-footer__links a:hover { color: var(--color-accent-strong); text-decoration: underline; }
  .site-footer__note { color: var(--color-text-muted); }

  /* ---- Suggest a correction --------------------------------------------- */
  .suggest { margin-top: var(--space-3); }
  .suggest__btn {
    display: inline-flex; align-items: center; gap: var(--space-1);
    min-height: var(--tap-min);
    padding-inline: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
  }
  .suggest__btn:hover { color: var(--color-accent); }
  .suggest__btn .icon { color: currentColor; }

  .suggest-dialog {
    /* margin:auto restores the native modal centering that the global `* { margin: 0 }`
       reset strips (with inset:0 it would otherwise pin to the top-left corner). */
    margin: auto;
    width: min(34rem, calc(100vw - 2 * var(--space-4)));
    max-height: calc(100dvh - 2 * var(--space-4));
    overflow: auto;
    padding: 0;
    border: var(--border-1) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-2);
  }
  .suggest-dialog::backdrop {
    background: rgba(8, 11, 16, 0.6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .suggest-form { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
  .suggest-form__title { font-size: var(--text-lg); }
  .suggest-form__context { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: calc(-1 * var(--space-2)); }
  .suggest-form__field { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
  .suggest-form__field textarea,
  .suggest-form__field input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: var(--border-1) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--text-base);
  }
  .suggest-form__field textarea { resize: vertical; min-height: 5rem; }
  .suggest-form__status { min-height: 1.25em; font-size: var(--text-sm); }
  .suggest-form__status.is-error { color: var(--color-danger); }
  .suggest-form__status.is-ok { color: var(--color-success); }
  .suggest-form__actions { display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; }
  .suggest-form__cancel,
  .suggest-form__submit {
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-weight: var(--weight-bold);
  }
  .suggest-form__cancel { color: var(--color-text); border: var(--border-1) solid var(--color-border-strong); }
  .suggest-form__cancel:hover { background: var(--color-surface-sunken); }
  .suggest-form__submit { color: var(--color-on-accent); background: var(--color-accent); }
  .suggest-form__submit:hover { background: var(--color-accent-strong); }

  /* ---- Language switcher ------------------------------------------------- */
  .lang-switch {
    display: inline-flex; align-items: center; gap: var(--space-1);
    min-height: var(--tap-min); min-width: var(--tap-min);
    padding-inline: var(--space-2);
    border-radius: var(--radius-pill);
    border: var(--border-1) solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm); font-weight: var(--weight-medium);
  }
  .lang-switch:hover { background: var(--color-surface-sunken); }
  .lang-switch:focus-within { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
  .lang-switch__select {
    border: none; background: none; font: inherit; color: inherit;
    font-weight: var(--weight-medium); padding: var(--space-1) 0; cursor: pointer;
  }
  .lang-switch__select:focus-visible { outline: none; }

  /* ---- Search ------------------------------------------------------------ */
  .search { display: flex; flex-direction: column; gap: var(--space-2); }
  .search__label {
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }
  .search__field {
    display: flex; align-items: center; gap: var(--space-2);
    background: var(--color-surface);
    border: var(--border-2) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding-inline: var(--space-3);
  }
  .search__field:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 var(--focus-ring-offset) var(--color-accent-tint);
  }
  .search__field .icon { color: var(--color-text-muted); flex: none; }
  .search__input {
    flex: 1 1 auto;
    min-height: var(--tap-min);
    border: none; background: none; outline: none;
    font-size: var(--text-lg);
    color: var(--color-text);
  }
  .search__input::placeholder { color: var(--color-text-muted); }

  /* ---- Departures board (home airport picker) --------------------------- */
  .departures {
    background: linear-gradient(180deg, var(--color-plate-raised), var(--color-plate));
    border: var(--border-1) solid var(--color-plate-line);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-1);
  }
  .departures__head {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-1) solid var(--color-plate-line);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-plate-muted);
  }
  .departures__led {
    width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none;
    background: var(--color-signal);
    box-shadow: 0 0 8px var(--color-signal);
  }
  .departures__list { display: flex; flex-direction: column; }
  .departures__row {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    min-height: var(--tap-min);
    border-top: var(--border-1) solid var(--color-plate-line);
    color: var(--color-plate-ink);
    text-decoration: none;
  }
  .departures__list li:first-child .departures__row { border-top: 0; }
  .departures__row:hover { background: color-mix(in srgb, var(--color-plate-ink) 7%, transparent); }
  .departures__code {
    font-family: var(--font-display);
    font-weight: var(--weight-black);
    font-size: var(--text-lg);
    letter-spacing: 0.02em;
    color: var(--color-plate-ink);
    font-variant-numeric: tabular-nums;
  }
  .departures__body { min-width: 0; display: flex; flex-direction: column; }
  .departures__name { font-weight: var(--weight-bold); color: var(--color-plate-ink); }
  .departures__sub {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-plate-muted);
  }
  .departures__go {
    flex: none;
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-signal);
    font-variant-numeric: tabular-nums;
  }
  .departures__go .icon { width: var(--icon-sm); height: var(--icon-sm); }

  /* ---- Airport header (lit departures sign-plate) ----------------------- */
  .airport-header { display: flex; flex-direction: column; gap: var(--space-3); }
  .airport-header__plate {
    background: linear-gradient(180deg, var(--color-plate-raised), var(--color-plate));
    border: var(--border-1) solid var(--color-plate-line);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-5) var(--space-4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-1);
  }
  .airport-header__code {
    display: block;
    font-family: var(--font-display);
    font-weight: var(--weight-black);
    font-size: 3.25rem;
    line-height: 0.9;
    letter-spacing: -0.01em;
    color: var(--color-plate-ink);
    font-variant-numeric: tabular-nums;
  }
  .airport-header__name { font-size: var(--text-xl); margin-top: var(--space-2); }
  .airport-header__place {
    font-family: var(--font-mono);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    margin-top: var(--space-2);
  }
  /* Plate ink applies only inside the dark plate; bare .airport-header (e.g. the
     privacy page title) keeps default on-page colors so it stays AA on light. */
  .airport-header__plate .airport-header__name { color: var(--color-plate-ink); }
  .airport-header__plate .airport-header__place { color: var(--color-plate-muted); }
  .airport-header__top { display: flex; align-items: flex-start; gap: var(--space-3); }
  .airport-header__id { flex: 1 1 auto; min-width: 0; }
  .airport-header__arrow { flex: none; color: var(--color-signal); margin-top: var(--space-2); line-height: 0; }
  .airport-header__arrow .icon {
    width: var(--icon-lg); height: var(--icon-lg);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--color-signal) 55%, transparent));
  }
  /* Departures-style status rail on the dark plate. */
  .airport-header__meta {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: var(--border-1) solid var(--color-plate-line);
  }
  .airport-header__stat {
    display: flex; flex-direction: column; gap: var(--space-1);
    padding-right: var(--space-4);
    margin-right: var(--space-4);
    border-right: var(--border-1) solid var(--color-plate-line);
  }
  .airport-header__stat:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
  .airport-header__stat-k {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-plate-muted);
  }
  .airport-header__stat-v {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--color-plate-ink);
  }
  .led { width: 8px; height: 8px; border-radius: var(--radius-pill); flex: none; }
  .led--good  { background: var(--color-signal-led); box-shadow: 0 0 7px var(--color-signal-led); }
  .led--amber { background: var(--color-signal);     box-shadow: 0 0 7px var(--color-signal); }
  .summary {
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-sunken);
    border: var(--border-1) solid var(--color-border);
    border-inline-start: var(--border-bar) solid var(--color-signal);
    border-radius: var(--radius-sm);
    color: var(--color-text);
  }

  /* ---- Badge ------------------------------------------------------------- */
  .badge {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--text-xs); font-weight: var(--weight-medium);
    line-height: 1.3;
    border: var(--border-1) solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
  }
  .badge .icon { width: 1em; height: 1em; }
  .badge--verified { color: var(--color-success); border-color: var(--color-success); background: var(--color-success-tint); }
  .badge--warning  { color: var(--color-warning); border-color: var(--color-warning); background: var(--color-warning-tint); }
  .badge--offline  { color: var(--color-text-muted); border-color: var(--color-border-strong); }
  .badge--severity-high { color: var(--color-danger); border-color: var(--color-danger); background: var(--color-danger-tint); font-weight: var(--weight-bold); }

  /* ---- Progress ---------------------------------------------------------- */
  .progress { display: flex; flex-direction: column; gap: var(--space-1); }
  .progress__label {
    display: flex; justify-content: space-between;
    font-size: var(--text-xs); color: var(--color-text-muted);
    font-weight: var(--weight-medium);
  }
  .progress__track {
    height: 8px; border-radius: var(--radius-pill);
    background: var(--color-surface-sunken);
    overflow: hidden;
  }
  .progress__fill {
    height: 100%; border-radius: inherit;
    background: var(--color-accent);
    transition: width var(--dur-base) var(--ease-out);
  }

  /* ---- Phase (a fixed chronological step; header = directional sign plate) */
  .phase {
    background: var(--color-surface);
    border: var(--border-1) solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    overflow: hidden;
  }
  .phase__h { margin: 0; font: inherit; }
  .phase__plate {
    display: flex; align-items: center; gap: var(--space-3);
    width: 100%;
    padding: var(--space-4);
    min-height: var(--tap-min);
    background: linear-gradient(180deg, var(--color-plate-raised), var(--color-plate));
    color: var(--color-plate-ink);
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  .phase__plate:hover { background: var(--color-plate-raised); }
  .phase__chevron { flex: none; color: var(--color-plate-muted); transition: transform var(--dur-base) var(--ease-out); }
  .phase__plate[aria-expanded="true"] .phase__chevron { transform: rotate(90deg); }
  .phase__icon {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--icon-lg); height: var(--icon-lg);
    color: var(--color-plate-ink);
  }
  .phase__heading { flex: 1 1 auto; }
  .phase__index {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-signal);
  }
  .phase__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
  .phase__count {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--text-sm); font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
    color: var(--color-plate-muted);
  }
  .phase__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }

  /* ---- Step card (information plate) ------------------------------------ */
  .step-card {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    background: var(--color-surface);
    border: var(--border-1) solid var(--color-border);
    border-radius: var(--radius-sm);
  }
  /* Gate-marker spine — a full-height signal edge carrying the type pictogram.
     The signage evolution of the old colored left-rail (audit tell K4). */
  .step-card__spine {
    flex: none;
    display: flex; align-items: center; justify-content: center;
    width: var(--space-8);
    align-self: stretch;
    background: var(--color-accent);
    color: var(--color-on-accent);
  }
  .step-card__spine .icon { width: var(--icon-sm); height: var(--icon-sm); }
  .step-card--action  .step-card__spine { background: var(--color-accent); color: var(--color-on-accent); }
  .step-card--warning .step-card__spine { background: var(--color-warning-signal); color: #3a2a06; }
  .step-card--tip     .step-card__spine { background: var(--color-success); color: var(--color-on-status); }
  .step-card--warning { background: color-mix(in srgb, var(--color-warning-tint) 55%, var(--color-surface)); }
  .step-card--tip     { background: color-mix(in srgb, var(--color-success-tint) 50%, var(--color-surface)); }
  .step-card > .check { margin: var(--space-3) 0 0 var(--space-3); }
  .step-card__body {
    min-width: 0; display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-2);
  }
  .step-card__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-bold); }
  .step-card.is-done .step-card__title > span { text-decoration: line-through; color: var(--color-text-muted); }
  .step-card__instruction { color: var(--color-text); }
  .step-card__note {
    display: flex; gap: var(--space-2); align-items: flex-start;
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-surface) 70%, transparent);
    border: var(--border-1) solid var(--color-border);
  }
  .step-card__note--scam { color: var(--color-warning); font-weight: var(--weight-medium); border-color: var(--color-warning); }
  .step-card__note .icon { flex: none; margin-top: 0.1em; }
  .step-card__meta {
    display: flex; flex-wrap: wrap; gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs); color: var(--color-text-muted);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
  }
  .step-card__meta > span { display: inline-flex; align-items: center; gap: var(--space-1); }

  /* ---- Check control (tap-to-complete) ---------------------------------- */
  .check {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--tap-min); height: var(--tap-min);
    flex: none;
    border-radius: var(--radius-sm);
    border: var(--border-2) solid var(--color-border-strong);
    background: var(--color-surface);
    color: transparent;
  }
  .check:hover { border-color: var(--color-accent); }
  .check[aria-pressed="true"], .check[aria-checked="true"] {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-on-status);
  }

  /* ---- Link chip --------------------------------------------------------- */
  .link-chip {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    border: var(--border-1) solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm); font-weight: var(--weight-medium);
    text-decoration: none;
  }
  .link-chip:hover { background: var(--color-surface-sunken); color: var(--color-text); }
  .link-chip .icon { flex: none; color: var(--color-accent); }
  .link-chip--phone .icon { color: var(--color-success); }
  .link-chip--web .icon { color: var(--color-text-muted); }
  .link-chip__offline {
    font-size: var(--text-xs); color: var(--color-text-muted);
    display: inline-flex; align-items: center; gap: var(--space-1);
  }
  .link-chip__links { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  /* ---- Section block (sections[]; generic fallback for unknown type) ---- */
  .section {
    background: var(--color-surface);
    border: var(--border-1) solid var(--color-border);
    border-left: var(--border-bar) solid var(--color-accent);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-3);
  }
  .section--severity-high { border-left-color: var(--color-danger); }
  .section__head { display: flex; align-items: center; gap: var(--space-2); }
  .section__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-bold); }
  .section__icon { color: var(--color-accent); flex: none; }
  .section--severity-high .section__icon { color: var(--color-danger); }
  .section__items { display: flex; flex-direction: column; gap: var(--space-4); }
  .section__item { display: flex; flex-direction: column; gap: var(--space-1); }
  .section__item-label { font-weight: var(--weight-bold); }

  /* ---- Emergency panel (always-accessible reference; NOT a checklist) --- */
  .emergency {
    background: var(--color-danger-tint);
    border: var(--border-1) solid var(--color-danger);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .emergency__summary {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4);
    min-height: var(--tap-min);
    font-weight: var(--weight-bold);
    color: var(--color-danger);
    cursor: pointer;
    list-style: none;
  }
  .emergency__summary::-webkit-details-marker { display: none; }
  .emergency__summary .icon { flex: none; }
  .emergency__body { padding: 0 var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
  .emergency__item {
    background: var(--color-surface);
    border: var(--border-1) solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    display: flex; flex-direction: column; gap: var(--space-1);
  }
  .emergency__item-title { font-weight: var(--weight-bold); display: flex; align-items: center; gap: var(--space-2); }

  /* ---- Diagram (collapsible inline SVG wayfinding schematic) ------------ */
  .diagram { border: var(--border-1) solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
  .diagram__summary {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3); min-height: var(--tap-min);
    font-size: var(--text-sm); font-weight: var(--weight-medium);
    color: var(--color-accent); cursor: pointer; list-style: none;
  }
  .diagram__summary::-webkit-details-marker { display: none; }
  .diagram__canvas { padding: var(--space-3); background: var(--color-surface-sunken); }
  .diagram__canvas svg { width: 100%; height: auto; color: var(--color-text); }

  /* ---- Icon (AIGA/Aicher wayfinding pictogram, inline SVG, currentColor) */
  .icon {
    display: inline-block;
    width: var(--icon-md); height: var(--icon-md);
    fill: currentColor;
    flex: none;
    vertical-align: middle;
  }
  .icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
  .icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
  .icon--flip { transform: scaleX(-1); }

  /* ---- Notice / empty / error states ------------------------------------ */
  .notice {
    padding: var(--space-4);
    border: var(--border-1) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    text-align: center;
    color: var(--color-text-muted);
  }

  /* ---- Overall progress row + reset -------------------------------------- */
  .airport-progress {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: var(--border-1) solid var(--color-border);
    border-radius: var(--radius-md);
    position: sticky; top: calc(var(--tap-min) + var(--space-2)); z-index: 10;
  }
  .airport-progress .progress { flex: 1 1 auto; }
  .btn-reset {
    flex: none;
    min-height: var(--tap-min); padding-inline: var(--space-3);
    border: var(--border-1) solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface); color: var(--color-text);
    font-size: var(--text-sm); font-weight: var(--weight-medium);
  }
  .btn-reset:hover { background: var(--color-surface-sunken); }

  /* ---- Content-fallback banner ("showing English") ---------------------- */
  .content-fallback {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-accent-tint);
    border: var(--border-1) solid var(--color-accent);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--text-sm);
  }
  .content-fallback .icon { color: var(--color-accent); flex: none; }
}