/* ============================================================================
   redesign:web-WS4a-route-places — Plan › Route (Nav Log), the blueprint map frame
   (public/chart-map.js), the Airports & Charts hub (public/places.js: Airport / Plates /
   Divert / Radio awareness / Printable charts), and the DC SFRA/FRZ page.
   Loaded after kit.css. Tokens only (no hex, no rgb): every colour is a --c-* token so a
   Day / Dusk / Night switch recolours live. Radius 0, nothing animates beyond 180 ms.
   CONTENTS  1 map frame (.map-frame / .mf-*) · 2 Route page (.nl-*) · 3 leg table + advisor
             4 Airports & Charts hub (.hub-*, .ap-*) · 5 plates / divert / radio / panels
             6 DC SFRA/FRZ (.dc-*)
   ============================================================================ */

/* ---- 1. Map frame ---------------------------------------------------------------------------- */
.rc-bp { max-width: none; }
.rc-bp:not(.rc-full) { max-width: 880px; }
.map-frame { position: relative; background: var(--c-map); }
/* the grid sits UNDER the tiles: it shows only where there is no chart tile */
.map-frame .mf-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--c-line-2) 1px, transparent 1px), linear-gradient(90deg, var(--c-line-2) 1px, transparent 1px);
  background-size: 40px 40px;
}
.map-frame .mf-viewport { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: pan-y; outline-offset: -2px; transition: opacity var(--dur-1) var(--ease-out); }
.map-frame.mf-zoomed .mf-viewport { touch-action: none; }
.map-frame.mf-dragging .mf-viewport { cursor: grabbing; }
.map-frame.mf-loading .mf-viewport { opacity: .55; }
.map-frame .mf-tiles { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; }
.map-frame .mf-overlay { position: absolute; left: 0; top: 0; pointer-events: none; }
.map-frame .mf-caption {
  position: absolute; left: 12px; top: 10px; max-width: calc(100% - 24px); padding: 4px 7px; pointer-events: none;
  font: 600 11px/1.1 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2);
  background: var(--c-map-scrim);
}
.map-frame .mf-top { position: absolute; right: 12px; top: 10px; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 24px); }
.map-frame .mf-top .btn { background: var(--c-bg); }
.map-frame .mf-top .btn.primary { background: var(--c-accent-solid); }
.map-frame .mf-ctl { position: absolute; right: 12px; bottom: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.map-frame .mf-ctl .btn, .map-frame .mf-zoom .btn { background: var(--c-bg); min-width: 62px; font-size: 13px; }
.map-frame .mf-ctl .btn[aria-pressed="true"] { background: var(--c-accent-solid); color: var(--c-on-accent); border-color: var(--c-accent-solid); }
.map-frame .mf-zoom { position: absolute; left: 12px; bottom: 12px; display: grid; gap: 4px; }
.map-frame .mf-zoom .btn { min-width: 0; width: var(--btn-h-sm); padding: 0; font-size: 18px; line-height: 1; }
.map-frame .mf-pop {
  position: absolute; right: 12px; bottom: 90px; z-index: 3; min-width: 190px; padding: 9px 10px;
  background: var(--c-bg); border: 1px solid var(--c-line-control); box-shadow: 0 6px 18px color-mix(in srgb, var(--c-ink) 22%, transparent);
}
.map-frame .mf-pop[hidden] { display: none; }
.map-frame .mf-pop-title { font: 600 11px/1.2 var(--font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-2); margin-bottom: 6px; }
.map-frame .mf-pop-list { display: flex; flex-direction: column; gap: 4px; }
.map-frame .mf-pop-list .btn { justify-content: flex-start; }
.map-frame .mf-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--c-ink-2); font-size: 14px; }
.map-frame .mf-empty strong { display: block; font: 600 20px/1.15 var(--font-heading); color: var(--c-ink); margin-bottom: 6px; }
.map-frame .mf-empty div { max-width: 420px; }
.rc-bp .rc-warn { margin-top: 12px; }
.rc-bp .rc-warn:empty { display: none; }
.rc-bp .rc-currency { margin-top: 10px; line-height: 1.5; font-size: 13px; }
.rc-bp .rc-fine, .rc-bp .rc-foot { font-size: 12px; }
.rc-bp .rc-foot { margin: 6px 0 0; }
.rc-bp .rc-tfr { margin-top: 10px; font-size: 13px; }
.rc-bp .rc-tfr .sev-banner { margin: 0; }
.rc-bp .rc-tfr-row { display: block; font-size: 13px; }
.rc-bp .rc-tfr-when { color: var(--c-ink-2); }
.rc-bp .rc-tfr-note { color: var(--c-ink-2); font-size: 12px; margin-top: 2px; }
.rc-bp .rc-tfr-none svg { vertical-align: -3px; }
@media (max-width: 599.98px) {
  .map-frame .mf-ctl .btn { min-width: 54px; }
  .map-frame .mf-caption { font-size: 11px; }
}

/* ---- 2. Route page --------------------------------------------------------------------------- */
.nl-page { container: nlpage / inline-size; max-width: var(--content-max); }
.nl-page .board-head { margin-bottom: 16px; }
.nl-page .hl .hl-sum { font-size: 18px; }
.nl-page .sub-line.is-stale { color: var(--c-caution); }
.nl-actions { max-width: 100%; }
.nl-export { display: flex; gap: 6px; flex-wrap: wrap; }
.nl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.nl-col { min-width: 0; } /* layout (contents / column) is set at the end of this file, per container width */
@container nlpage (min-width: 880px) { .nl-grid { grid-template-columns: minmax(0, 1fr) 300px; } }
.nl-page .bp-pad .sec-label { margin-bottom: 8px; }
/* redesign:web-integrator — .clab (a labelled control) is ONE shared rule set now (wb-perf.css, which also styles textarea); the
   .nl-page copy of it was identical and is gone. */
.nl-route {
  width: 100%; resize: vertical; min-height: 56px; text-transform: uppercase; letter-spacing: .04em;
  font: 600 16px/1.35 var(--font-heading);
}
.nl-hint { font-size: 12px; color: var(--c-ink-2); margin: 8px 0 0; line-height: 1.45; }
.nl-hint a { color: var(--c-accent-ink); }
.nl-pref { min-height: 0; }
.nl-pref .nl-hint { color: var(--c-ink-2); }
.nl-pref-link { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .03em; padding-inline: 4px; min-height: 24px; height: auto; white-space: normal; text-align: left; }
.nl-pref-meta { color: var(--c-ink-3); }
.nl-pref-more { margin-top: 6px; font-size: 12px; }
.nl-pref-more summary { cursor: pointer; color: var(--c-accent-ink); }
.nl-pref-row { display: flex; flex-direction: column; gap: 0; padding: 4px 0; border-top: 1px solid var(--c-line-2); }
.nl-fields { margin-top: 10px; font-size: 13px; }
.nl-fields summary { cursor: pointer; color: var(--c-accent-ink); font-weight: 600; padding: 4px 0; }
.nl-fields .pgrid { margin: 8px 0; }
.nl-fields textarea { width: 100%; font-family: var(--font-heading); font-size: 14px; }
.nl-go { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.nl-inputs { margin-top: 18px; }
.nl-plane { display: flex; align-items: center; gap: 8px; min-height: 36px; font-weight: 500; }
.nl-auto { margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.nl-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.nl-check input { width: auto; flex: none; margin: 0; }
.nl-autonm { width: 64px; }
#nl_stale { margin-top: 18px; }
#nl_stale:empty { display: none; }
#nl_out { margin-top: 4px; }
#nl_out .sev-banner { margin-top: 14px; }
#nl_out .state-band { margin-top: 18px; }
.nl-notes { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.nl-fpl { white-space: pre-wrap; font-family: ui-monospace, Menlo, monospace; font-size: 13px; margin: 8px 0; color: var(--c-ink); }
.nl-fpl-ctl { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.nl-page .sec-head { margin-top: 22px; margin-bottom: 8px; }

/* ---- 3. Leg table + altitude advisor --------------------------------------------------------- */
.nl-tableframe table.navlog { min-width: 1180px; width: 100%; font-size: 13px; white-space: nowrap; }
.nl-tableframe table.navlog th, .nl-tableframe table.navlog td { padding: 6px 8px; text-align: center; }
/* (no sticky header: the table sits in its own horizontal scroller, where `top` would be measured from the scroller, not the page) */
.nl-tableframe table.navlog td.nl-cp, .nl-tableframe table.navlog th:nth-child(2) { text-align: left; }
.nl-tableframe table.navlog td.nl-cp { font: 600 15px/1.2 var(--font-heading); }
.nl-tableframe table.navlog td:nth-child(2), .nl-tableframe table.navlog th:nth-child(2) { position: sticky; left: 0; z-index: 1; background: var(--c-bg); }
.nl-tableframe table.navlog thead th:nth-child(2) { z-index: 3; }
.nl-tableframe table.navlog td.nl-why { text-align: right; padding-right: 4px; }
.nl-tableframe table.navlog tr.tot td { font-weight: 700; border-top: 1px solid var(--c-line); background: var(--c-surface); }
.nl-tableframe table.navlog tr.tot td:nth-child(2) { background: var(--c-surface); }
.ph { display: inline-block; padding: 1px 5px; font: 600 11px/1.3 var(--font-heading); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-2); border: 1px solid var(--c-line-control); }
.nl-foot { padding: 10px 14px; font-size: 12px; color: var(--c-ink-2); border-top: 1px solid var(--c-line-2); line-height: 1.5; }
.alt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.alt-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--c-line-2); font-size: 13px; }
.alt-row:first-of-type { border-top: 0; }
.alt-v { font: 600 16px/1 var(--font-heading); color: var(--c-ink); }
.alt-bar { height: 6px; background: var(--c-line-2); position: relative; }
.alt-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c-ink-3); }
.alt-row.is-best .alt-bar i { background: var(--c-accent); }
.alt-row.is-best .alt-v { color: var(--c-accent-ink); }
.alt-note { grid-column: 2; color: var(--c-ink-2); font-size: 12px; }

/* ---- 4. Airports & Charts hub ---------------------------------------------------------------- */
.hub-page { container: hubpage / inline-size; max-width: var(--content-max); }
.hub-page .board-head { margin-bottom: 16px; }
.hub-page .hl .hl-sum { font-size: 18px; }
.hub-tabs { max-width: 100%; }
.hub-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 18px; }
.hub-tool { display: block; padding: 14px 16px; color: var(--c-ink); }
.hub-tool:hover { text-decoration: none; background: var(--c-hover-row); }
.hub-tool b { display: block; font: 600 20px/1.15 var(--font-heading); }
.hub-tool span { display: block; margin-top: 4px; font-size: 13px; color: var(--c-ink-2); }
.hub-lookup { margin-top: 14px; }
.hub-lookup .row { align-items: flex-end; }
.hub-lookup .hub-id { width: 260px; max-width: 100%; text-transform: uppercase; font: 600 16px/1.2 var(--font-heading); letter-spacing: .04em; }
.hub-result { margin-top: 16px; }
.hub-page .sec-head { margin-top: 22px; margin-bottom: 8px; }
.hub-page .state-band, .hub-page .notice { margin-top: 14px; }
.hub-page .hub-result .state-band, .hub-page .hub-result .notice { margin-top: 0; margin-bottom: 14px; }
.ap-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@container hubpage (min-width: 880px) { .ap-grid { grid-template-columns: minmax(0, 1fr) 320px; } }
.ap-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ap-col .bp-pad .sec-label { margin-bottom: 8px; }
.ap-row { display: grid; grid-template-columns: 76px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--c-line-2); font-size: 13px; align-items: baseline; }
.ap-row:last-child { border-bottom: 0; }
.ap-row b { font: 600 17px/1.1 var(--font-heading); }
.ap-row span { color: var(--c-ink-2); }
.ap-freq { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--c-line-2); font-size: 13px; }
.ap-freq:last-child { border-bottom: 0; }
.ap-freq span { color: var(--c-ink-2); }
.ap-freq b { font: 600 17px/1.1 var(--font-heading); }
.ap-note { font-size: 12px; color: var(--c-ink-2); margin: 8px 0 0; line-height: 1.45; }
.ap-svc { font-size: 13px; line-height: 1.6; }
.ap-svc .k { color: var(--c-ink-2); }
.ap-cur { display: grid; gap: 8px; }
.ap-cur-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 5px 0; border-bottom: 1px solid var(--c-line-2); font-size: 13px; }
.ap-cur-row:last-child { border-bottom: 0; }
.ed-warn { margin: 4px 0 0; font-size: 12px; color: var(--c-caution); }
.ed-line { margin: 0; font-size: 12px; }
.ed-note { margin: 4px 0 0; font-size: 12px; color: var(--c-ink-2); }

/* ---- 5. Plates / Divert / Radio / Printable charts ------------------------------------------- */
.pl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 16px; flex-wrap: wrap; }
.pl-head h2 { margin: 0 0 4px; font: 600 24px/1.1 var(--font-heading); }
.pl-head .sub { margin: 0; }
.pl-cycle { text-align: right; font-size: 13px; }
.pl-cycle .sub { font-size: 12px; }
.dv-table-note { font-size: 12px; color: var(--c-ink-2); margin: 10px 0 0; line-height: 1.5; }
.hub-page .datatable-wrap { margin-top: 0; }
.hub-page .row .btn { align-self: flex-end; }
.hub-page .pgrid .field { margin: 0; }

/* ---- 6. DC SFRA / FRZ ------------------------------------------------------------------------ */
.dc-pin { text-align: center; padding: 16px 14px; }
.dc-pin .meta { letter-spacing: .08em; text-transform: uppercase; font: 600 12px/1.2 var(--font-heading); color: var(--c-ink-2); }
.dc-pin .code-display { margin: 8px 0; }
.dc-pin input { font-size: 32px; letter-spacing: .35em; text-align: center; width: 220px; max-width: 100%; text-transform: uppercase; }
.dc-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.dc-list .cl-item.is-cursor { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.nl-tableframe table.navlog tr.nl-dep td { background: var(--c-surface); color: var(--c-ink-2); text-align: left; font-size: 12px; }
.nl-tableframe table.navlog tr.nl-dep td.nl-cp { color: var(--c-ink); }
.nl-tableframe table.navlog tr.nl-dep td:nth-child(2) { background: var(--c-surface); }
.nl-sub { font: 400 12px/1.2 var(--font-body); color: var(--c-ink-2); margin: 1px 0 0; }

/* narrow: Route card first (it holds Generate), then the map, then the advisor; wide: map left, card + advisor right */
.nl-col { display: contents; }
.nl-col > :first-child { order: 1; }
.nl-map { order: 2; }
.nl-col > :last-child { order: 3; }
@container nlpage (min-width: 880px) {
  .nl-col { display: flex; flex-direction: column; gap: 14px; }
  .nl-col > :first-child, .nl-col > :last-child, .nl-map { order: 0; }
}

/* The FAA chart tiles are never recoloured (invariant I-41). At Night the V4 rule (I-37) allows one thing: a deliberately selected FAA raster may be
   dimmed by a SCRIM laid over it and must be labelled NIGHT-DIMMED. The scrim is the page ground at 25 % (the cap the luminance scrim obeys), sits
   between the tiles and the route overlay, and the caption says so. Day and Dusk show the chart exactly as published. */
.map-frame .mf-scrim { position: absolute; inset: 0; pointer-events: none; background: var(--c-bg); opacity: 0; }
:root[data-theme="night"] .map-frame .mf-scrim, :root[data-theme="dark"] .map-frame .mf-scrim { opacity: .25; }
:root[data-theme="night"] .map-frame .mf-caption::after, :root[data-theme="dark"] .map-frame .mf-caption::after { content: " · NIGHT-DIMMED"; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .map-frame .mf-scrim { opacity: .25; }
  :root:not([data-theme]) .map-frame .mf-caption::after { content: " · NIGHT-DIMMED"; }
}
.hub-lookup .pgrid { align-items: end; }
.nl-tableframe .bp-scroll, .hub-page .bp-scroll { position: relative; } /* anything absolutely positioned inside a scroller stays in (and is clipped by) it */
@media (prefers-reduced-motion: reduce) { .map-frame .mf-viewport { transition: none; } }
.nl-page .sec-head, .nl-page .board-head { scroll-margin-top: calc(var(--shell-stick, 0px) + 12px); }
/* phone: the six exports are one swipeable row instead of three rows above the route form */
@container nlpage (max-width: 599.98px) {
  .nl-actions { width: 100%; }
  .nl-export { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; max-width: 100%; }
  .nl-export .btn { flex: 0 0 auto; }
}