/* ═══════════════════════════════════════════════════════════════════════════
   Lateral Plan — the browser planner.
   ───────────────────────────────────────────────────────────────────────────
   A working client, not a marketing page. It is laid out as a full-viewport
   app: a rail that holds the route, a map that holds the world, and a profile
   strip along the bottom that holds the thing a plan is actually for — what
   you will clear and what you won't.

   Scene colours are declared LOCALLY with the same values home.css uses, for
   the reason chrome.css gives: a page should not have to load 34 KB of
   homepage styling to get its own colours right.

   Nothing here hardcodes a brand colour that theme.css already owns.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
        "Inter", system-ui, sans-serif;
  --scene-ink:  #04060a;
  --scene-txt:  #f5f5f7;
  --scene-dim:  rgba(235, 235, 240, .62);
  --scene-line: rgba(235, 235, 240, .12);

  --rail-w: 372px;
  --profile-h: 208px;

  /* The alert ladder, shared with the app and the weather cross-section so a
     colour means the same thing in all three. */
  --hz-wire:   #ff5c5c;
  --hz-tall:   #ff8a3d;
  --hz-obst:   #F5A524;
  --route:     #6ee7a0;
}

html, body { height: 100%; }
body.planner {
  margin: 0; background: var(--scene-ink); color: var(--scene-txt);
  font-family: var(--sf); font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;                     /* the app scrolls its panes, not the page */
}
body.planner a { color: var(--amber, #F5A524); text-decoration: none; }
[hidden] { display: none !important; }  /* see soar-weather: [hidden] loses to any author rule */

/* ── Shell ───────────────────────────────────────────────────────────────── */
/* The splitters get their OWN grid tracks rather than floating over a pane —
   a handle sitting on top of the map would swallow clicks meant for it, and
   the gap between panes is where a handle belongs anyway. */
.plan-shell {
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: var(--rail-w) 10px 1fr;
  grid-template-rows: 1fr 10px var(--profile-h);
  grid-template-areas:
    "rail splitv map"
    "rail splitv splith"
    "rail splitv profile";
  gap: 0; padding: 10px;
}
.plan-shell > .pane { margin: 0; }
.plan-rail { margin-right: 0; }
/* Collapsed, NOT removed. Hiding it to zero left the only way back as a
   button buried in the Route tab, which is not a way back at all — so it
   collapses to its own title bar, which is always visible and is itself the
   control that reopens it. */
.plan-shell.no-profile { grid-template-rows: 1fr 10px 34px; }
.plan-shell.no-profile .split-h { pointer-events: none; }
.plan-shell.no-profile .split-h::after { opacity: 0; }
.plan-shell.no-profile .pf-body,
.plan-shell.no-profile .pf-note { display: none; }
.plan-shell.no-profile .plan-profile { cursor: pointer; }
.plan-shell.no-profile .plan-profile:hover { border-color: rgba(255,255,255,.24); }
.plan-shell.no-profile .pf-head { padding: 8px 14px; }
.plan-shell.no-profile .pf-hide { transform: rotate(45deg); }   /* × becomes + */

/* ── Splitters ───────────────────────────────────────────────────────────── */
.split { position: relative; }
.split::after {
  content: ''; position: absolute; border-radius: 999px;
  background: var(--scene-line); transition: background .15s var(--ease, ease);
}
.split-v {
  grid-area: splitv; cursor: col-resize;
}
.split-v::after { left: 50%; transform: translateX(-50%); top: 40%; bottom: 40%; width: 3px; }
.split-h {
  grid-area: splith; cursor: row-resize;
}
.split-h::after { top: 50%; transform: translateY(-50%); left: 45%; right: 45%; height: 3px; }
.split:hover::after, .split.dragging::after { background: var(--amber, #F5A524); }
.split:focus-visible { outline: 2px solid var(--amber, #F5A524); outline-offset: -3px; }
/* While dragging, nothing else may claim the cursor or select text. */
body.resizing { cursor: col-resize; user-select: none; }
body.resizing.row { cursor: row-resize; }
body.resizing .plan-map { pointer-events: none; }

.pane {
  border-radius: 18px; border: 1px solid var(--scene-line);
  background: rgba(13, 15, 18, .72); overflow: hidden; min-height: 0; min-width: 0;
}

/* ── Rail ────────────────────────────────────────────────────────────────── */
.plan-rail { grid-area: rail; display: flex; flex-direction: column; }
.rail-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 16px; flex: 1; }

/* The app's own chrome. The site's floating pill is centred on the VIEWPORT,
   so it cut straight through this rail — product pages carry their own. */
.rail-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 10px; border-bottom: 1px solid var(--scene-line);
}
.rail-head h1 {
  font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin: 0; flex: 1;
}
.rail-back {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 13px; font-weight: 650; color: var(--amber, #F5A524);
  padding: 4px 8px 4px 5px; border-radius: 8px; border: 1px solid var(--scene-line);
}
.rail-back:hover { background: rgba(245,165,36,.12); }
.rail-app { font-size: 12px; color: var(--scene-dim); }
.rail-app:hover { color: var(--amber, #F5A524); }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.rail-tabs { display: flex; gap: 2px; padding: 8px 12px 0; }
.rtab {
  flex: 1; border: 0; cursor: pointer; background: none; color: var(--scene-dim);
  font-family: var(--sf); font-size: 13px; font-weight: 600; padding: 7px 4px 8px;
  border-bottom: 2px solid transparent;
}
.rtab:hover { color: var(--scene-txt); }
.rtab.on { color: var(--scene-txt); border-bottom-color: var(--amber, #F5A524); }

.sect { margin-top: 18px; }
.sect:first-child { margin-top: 4px; }
.sect > h2 {
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--scene-dim); margin: 0 0 9px;
}

/* ── Waypoint entry ──────────────────────────────────────────────────────── */
.wp-entry { position: relative; }
.wp-entry input {
  width: 100%; box-sizing: border-box; border-radius: 11px;
  border: 1px solid var(--scene-line); background: rgba(255,255,255,.05);
  color: var(--scene-txt); font-family: var(--sf); font-size: 14.5px;
  padding: 10px 12px; outline: none;
}
.wp-entry input::placeholder { color: rgba(235,235,240,.38); }
.wp-entry input:focus {
  border-color: rgba(245,165,36,.55); background: rgba(255,255,255,.07);
}
.wp-sugg {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  border-radius: 12px; border: 1px solid var(--scene-line);
  background: rgba(16,18,23,.97);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 18px 40px rgba(0,0,0,.5); overflow: hidden;
}
.wp-sugg button {
  display: block; width: 100%; text-align: left; border: 0; cursor: pointer;
  background: none; color: var(--scene-txt); font-family: var(--sf);
  padding: 9px 12px; font-size: 13.5px; line-height: 1.3;
}
.wp-sugg button:hover, .wp-sugg button.on { background: rgba(245,165,36,.16); }
.wp-sugg b { font-weight: 650; letter-spacing: .01em; }
.wp-sugg span { display: block; color: var(--scene-dim); font-size: 11.5px; margin-top: 1px; }

.hint { font-size: 11.5px; color: rgba(235,235,240,.42); margin: 8px 2px 0; line-height: 1.45; }

/* ── Waypoint list ───────────────────────────────────────────────────────── */
.wp-list { list-style: none; margin: 0; padding: 0; }
.wp-list li {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 10px; border: 1px solid transparent;
}
.wp-list li + li { margin-top: 2px; }
.wp-list li:hover { background: rgba(255,255,255,.045); border-color: var(--scene-line); }
.wp-list li.on { background: rgba(245,165,36,.13); border-color: rgba(245,165,36,.4); }
.wp-num {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--route); color: #042016; font-size: 11.5px; font-weight: 700;
}
/* Both are block: as inline spans the ident ran straight into the field name
   ("KPDXPortland International Airport"). */
.wp-name { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.wp-meta {
  display: block; font-size: 11.5px; color: var(--scene-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wp-kill {
  border: 0; background: none; cursor: pointer; color: rgba(235,235,240,.4);
  font-size: 17px; line-height: 1; padding: 3px 5px; border-radius: 7px;
}
.wp-kill:hover { color: var(--hz-wire); background: rgba(255,92,92,.14); }
/* `display:block` is load-bearing: .wp-list li is a three-column grid, so
   without this the empty-state text lands in the 22px waypoint-number column
   and wraps one word per line. It has to be selected as `.wp-list .wp-empty`
   (0,2,0) — a bare `.wp-empty` (0,1,0) loses to `.wp-list li` (0,1,1). */
.wp-empty, .wp-list .wp-empty {
  display: block; font-size: 13px; color: var(--scene-dim);
  padding: 3px 2px; line-height: 1.5;
}
.wp-list .wp-empty:hover { background: none; border-color: transparent; }

/* Leg line between waypoints — distance and bearing live on the line, not the point. */
/* `display:block`, not flex — .wp-list li is a 22px-first-column grid and a
   flex leg row inherited enough of it to break "101.0 nm" across two lines. */
.wp-leg, .wp-list .wp-leg {
  display: block; margin: 1px 0 1px 19px; padding: 3px 0 3px 13px;
  border-left: 1.5px dashed rgba(110,231,160,.4);
  font-size: 11.5px; color: var(--scene-dim); white-space: nowrap;
}
.wp-list .wp-leg:hover { background: none; border-color: transparent;
  border-left-color: rgba(110,231,160,.4); }
.wp-leg b { color: rgba(235,235,240,.8); font-weight: 600; }

/* ── Numbers ─────────────────────────────────────────────────────────────── */
.figs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fig {
  border-radius: 12px; border: 1px solid var(--scene-line);
  background: rgba(255,255,255,.035); padding: 9px 11px;
}
.fig .k {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--scene-dim);
}
.fig .v {
  font-size: 19px; font-weight: 700; letter-spacing: -.02em; margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
.fig .v small { font-size: 12px; font-weight: 500; color: var(--scene-dim); margin-left: 2px; }
.fig.warn { border-color: rgba(255,138,61,.45); background: rgba(255,138,61,.1); }
.fig.warn .v { color: var(--hz-tall); }
.fig.bad  { border-color: rgba(255,92,92,.5); background: rgba(255,92,92,.11); }
.fig.bad .v { color: var(--hz-wire); }

/* ── Inputs row ──────────────────────────────────────────────────────────── */
.inrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.inrow label { display: block; }
.inrow .k {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--scene-dim); margin-bottom: 4px;
}
.inrow input {
  width: 100%; box-sizing: border-box; border-radius: 10px;
  border: 1px solid var(--scene-line); background: rgba(255,255,255,.05);
  color: var(--scene-txt); font-family: var(--sf); font-size: 14.5px;
  padding: 8px 10px; outline: none; font-variant-numeric: tabular-nums;
}
.inrow input:focus { border-color: rgba(245,165,36,.55); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-row { display: flex; gap: 7px; flex-wrap: wrap; }
.pbtn {
  border-radius: 10px; border: 1px solid var(--scene-line); cursor: pointer;
  background: rgba(255,255,255,.05); color: var(--scene-txt);
  font-family: var(--sf); font-size: 13px; font-weight: 550; padding: 8px 13px;
}
.pbtn:hover:not(:disabled) { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.24); }
.pbtn:disabled { opacity: .38; cursor: default; }
.pbtn.solid {
  background: var(--amber, #F5A524); color: #17130b; border-color: transparent; font-weight: 650;
}
.pbtn.solid:hover:not(:disabled) { filter: brightness(1.08); }
.pbtn.danger:hover:not(:disabled) { color: var(--hz-wire); border-color: rgba(255,92,92,.45); }

/* ── Layer toggles ───────────────────────────────────────────────────────── */
.layers { display: flex; flex-direction: column; gap: 2px; }
.lay {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 6px 8px; border-radius: 9px; font-size: 13.5px;
}
.lay:hover { background: rgba(255,255,255,.045); }
.lay input { accent-color: var(--amber, #F5A524); width: 15px; height: 15px; margin: 0; }
.lay i { width: 13px; height: 3px; border-radius: 2px; flex: none; }
.lay i.dot { width: 10px; height: 10px; border-radius: 50%; }
.lay .ct { margin-left: auto; font-size: 11px; color: rgba(235,235,240,.42); font-variant-numeric: tabular-nums; }

/* ── Saved routes ────────────────────────────────────────────────────────── */
.saved { list-style: none; margin: 0; padding: 0; }
.saved li {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px;
  font-size: 13.5px;
}
.saved li:hover { background: rgba(255,255,255,.045); }
.saved button.open {
  flex: 1; text-align: left; border: 0; background: none; cursor: pointer;
  color: var(--scene-txt); font-family: var(--sf); font-size: 13.5px; padding: 0;
}
.saved button.open span { display: block; font-size: 11px; color: var(--scene-dim); }

/* ── Map ─────────────────────────────────────────────────────────────────── */
.plan-map { grid-area: map; position: relative; }
#planMap { position: absolute; inset: 0; background: #04060a; }
#planMap .maplibregl-ctrl-group { background: rgba(18,20,26,.82); border: 1px solid var(--scene-line); }
#planMap .maplibregl-ctrl-group button + button { border-top-color: var(--scene-line); }
#planMap .maplibregl-ctrl-icon { filter: invert(1) brightness(.9); }
#planMap .maplibregl-ctrl-attrib { background: rgba(4,6,10,.7); }
#planMap .maplibregl-ctrl-attrib a { color: rgba(235,235,240,.7); }
#planMap .maplibregl-ctrl-scale {
  background: rgba(4,6,10,.6); border-color: var(--scene-line);
  color: var(--scene-dim); font-family: var(--sf);
}
#planMap .maplibregl-popup-content {
  background: rgba(12,14,19,.94); color: var(--scene-txt);
  border: 1px solid var(--scene-line); border-radius: 12px;
  font-family: var(--sf); font-size: 13.5px; line-height: 1.45;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
#planMap .maplibregl-popup-content .src {
  color: var(--scene-dim); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
}
#planMap .maplibregl-popup-tip { border-top-color: rgba(12,14,19,.94); }
#planMap canvas { outline: none; }

/* ── MapKit annotations & callouts ───────────────────────────────────────── */
/* The airport symbol: the app's own, rebuilt in SVG. Magenta non-towered,
   blue towered, ring + a runway bar at the real heading — see
   AirportAnnotationView.render in NativeMapView.swift. */
/* ⚠️ The element's box must BE the symbol, 34×34 and nothing else. The ident
   started life as a flex sibling, which made the box ~45px tall — and since
   MapKit positions the whole element against the coordinate, the symbol ended
   up drawn 23px from the place it represents. Clicks then missed it, because
   hit-testing measures to the real coordinate. Absolutely positioning the
   label takes it out of the box, so symbol and coordinate coincide. */
.mk-ap {
  position: relative; width: 34px; height: 34px;
  pointer-events: none;   /* hit-testing is done in JS against the raw rows */
}
.mk-ap svg { display: block; }
.mk-ap-id {
  position: absolute; top: 30px; left: 50%; transform: translateX(-50%);
  font: 700 10.5px/1 var(--sf);
  text-shadow: 0 0 3px rgba(4,6,10,.95), 0 0 2px rgba(4,6,10,.95);
  white-space: nowrap; pointer-events: none;
}

/* MapKit's own callouts belong to annotations, and most of what is clickable
   here is an overlay or bare ground — so this is a plain positioned div,
   which also keeps the callout identical whatever was clicked. */
/* No transition on left/top: the callout is repositioned every frame to track
   the ground beneath it, and easing that would make it lag the map. */
.mk-callout {
  position: fixed; z-index: 60; max-width: 290px;
  border-radius: 13px; padding: 11px 30px 11px 13px;
  font-size: 13.5px; line-height: 1.45; color: var(--scene-txt);
  transition: none; will-change: left, top;
}
.mk-callout b { font-weight: 650; }
.mk-callout .src {
  display: inline-block; color: var(--scene-dim);
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase; margin-top: 2px;
}
.mk-callout .src.inside { color: var(--hz-tall); font-weight: 700; }
.mk-x {
  position: absolute; top: 6px; right: 8px; border: 0; background: none; cursor: pointer;
  color: rgba(235,235,240,.45); font-size: 18px; line-height: 1; padding: 2px 4px;
}
.mk-x:hover { color: var(--scene-txt); }

/* MapKit paints its own light chrome; bring the controls into the dark scheme. */
.mk-map-ctrl, .mk-zoom-control { filter: invert(1) hue-rotate(180deg) brightness(.92); }

/* Draggable waypoint pins are real DOM, so they can be grabbed. */
.wp-pin {
  width: 26px; height: 26px; border-radius: 50%; cursor: grab;
  display: grid; place-items: center;
  background: var(--route); color: #042016;
  font: 700 12px/1 var(--sf);
  border: 2px solid rgba(4,6,10,.85); box-shadow: 0 3px 10px rgba(0,0,0,.5);
}
.wp-pin:active { cursor: grabbing; }
.wp-pin.on { background: var(--amber, #F5A524); color: #17130b; }

/* The provisional pin: hollow and dashed, so it can never be mistaken for a
   waypoint that is actually in the route. */
.wp-pin.ghost {
  background: rgba(4,6,10,.55); color: var(--amber, #F5A524);
  border: 2px dashed var(--amber, #F5A524);
  font-weight: 700; font-size: 15px; cursor: default;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

.map-badge {
  position: absolute; z-index: 4; left: 14px; top: 14px;
  border-radius: 12px; padding: 8px 12px; font-size: 12.5px; color: var(--scene-dim);
  pointer-events: none; max-width: 340px;
}
.map-badge b { color: var(--scene-txt); font-weight: 600; }
.map-badge.busy b { color: var(--amber, #F5A524); }

/* ── Profile strip ───────────────────────────────────────────────────────── */
.plan-profile { grid-area: profile; display: flex; flex-direction: column; }
.pf-head {
  display: flex; align-items: baseline; gap: 12px; padding: 9px 14px 5px; flex-wrap: wrap;
}
.pf-wx { display: flex; gap: 2px; margin-left: auto; align-self: flex-start; }
.pf-wx button {
  border: 1px solid transparent; background: none; cursor: pointer;
  color: var(--scene-dim); font-family: var(--sf); font-size: 11px; font-weight: 650;
  padding: 3px 9px; border-radius: 999px; letter-spacing: .02em;
}
.pf-wx button:hover { color: var(--scene-txt); }
.pf-wx button.on {
  color: var(--scene-txt); background: rgba(255,255,255,.09);
  border-color: var(--scene-line);
}
.plan-shell.no-profile .pf-wx { display: none; }

.pf-hide {
  margin-left: 6px; border: 0; background: none; cursor: pointer;
  color: rgba(235,235,240,.45); font-size: 19px; line-height: 1;
  padding: 0 3px; border-radius: 7px; align-self: flex-start;
}
.pf-hide:hover { color: var(--scene-txt); background: rgba(255,255,255,.08); }
.pf-head h2 {
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--scene-dim); margin: 0;
}
.pf-head .pf-note { font-size: 11.5px; color: rgba(235,235,240,.45); }
.pf-head .pf-note b { color: rgba(235,235,240,.75); font-weight: 600; }
.pf-head .pf-note.alert b { color: var(--hz-tall); }
.pf-body { flex: 1; min-height: 0; padding: 0 14px 10px; }
.pf-body svg { display: block; width: 100%; height: 100%; }
.pf-axis { font: 10.5px var(--sf); fill: rgba(235,235,240,.5); }
.pf-empty {
  height: 100%; display: grid; place-items: center;
  font-size: 13px; color: rgba(235,235,240,.4); text-align: center; padding: 0 20px;
}

/* ── Waypoint row extras ─────────────────────────────────────────────────── */
.wp-txt { min-width: 0; }
.wp-btns { display: flex; gap: 1px; }
.wp-ren {
  border: 0; background: none; cursor: pointer; color: rgba(235,235,240,.4);
  font-size: 12px; line-height: 1; padding: 4px 5px; border-radius: 7px;
}
.wp-ren:hover { color: var(--amber, #F5A524); background: rgba(245,165,36,.14); }
.wp-rename {
  width: 100%; box-sizing: border-box; border-radius: 8px;
  border: 1px solid rgba(245,165,36,.55); background: rgba(255,255,255,.07);
  color: var(--scene-txt); font-family: var(--sf); font-size: 13.5px;
  padding: 4px 7px; outline: none;
}
.fig .v .ok  { color: var(--route); font-size: 13px; font-weight: 600; }
.fig .v .bad { color: var(--hz-wire); }
.hint .ok  { color: var(--route); font-weight: 650; }
.hint .bad { color: var(--hz-wire); font-weight: 650; }

/* ── Selected feature panel ──────────────────────────────────────────────── */
.detail-host {
  border: 1px solid rgba(245,165,36,.32); background: rgba(245,165,36,.055);
  border-radius: 13px; padding: 11px 12px; margin-top: 12px;
}
.dt-head { display: flex; align-items: flex-start; gap: 8px; }
.dt-id { font-size: 17px; font-weight: 750; letter-spacing: -.01em; }
.dt-name { font-size: 12.5px; color: var(--scene-dim); line-height: 1.35; }
.dt-close {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  color: rgba(235,235,240,.45); font-size: 19px; line-height: 1; padding: 0 3px;
}
.dt-close:hover { color: var(--scene-txt); }
.dt-facts { font-size: 12px; color: var(--scene-dim); margin: 7px 0 0; }
.dt-sec { margin-top: 11px; }
.dt-sec h3 {
  font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  color: var(--scene-dim); margin: 0 0 5px;
}
.chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chip {
  font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
  background: rgba(110,231,160,.16); color: var(--route);
}
.rwy { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; padding: 2px 0; }
.rwy b { font-weight: 650; min-width: 62px; font-variant-numeric: tabular-nums; }
.rwy span { color: var(--scene-dim); }
.rwy.shut b { color: var(--hz-wire); }
.shut-tag {
  color: var(--hz-wire); font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
}
.shut-note { color: rgba(255,138,61,.85) !important; }
.fgrp { margin-bottom: 7px; }
.fgrp-h {
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(235,235,240,.4); margin-bottom: 2px;
}
/* On-map surface labels: runway designators and taxiway letters. */
.mk-surf {
  pointer-events: none; white-space: nowrap;
  font: 800 11px/1 var(--sf);
  text-shadow: 0 0 3px rgba(4,6,10,.95), 0 0 2px rgba(4,6,10,.95),
               0 0 5px rgba(4,6,10,.8);
}
.mk-surf.rwy { color: #f2f2f2; font-size: 12px; letter-spacing: .02em; }
.mk-surf.twy { color: rgba(242,204,64,.95); font-size: 10px; font-weight: 700; }

/* Flight-category chip. The palette is the one the app and the weather site
   both use, so a colour means the same thing across all three. */
.cat {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 999px; margin-bottom: 5px;
}
.cat-VFR  { background: rgba(52,211,153,.18); color: #34D399; }
.cat-MVFR { background: rgba(91,141,238,.20); color: #7FA9F5; }
.cat-IFR  { background: rgba(255,92,92,.18);  color: #ff7b7b; }
.cat-LIFR { background: rgba(219,75,157,.20); color: #DB4B9D; }

.raw { margin-top: 7px; }
.raw summary {
  cursor: pointer; font-size: 11px; color: var(--scene-dim);
  letter-spacing: .04em; text-transform: uppercase;
}
.raw code {
  display: block; margin-top: 5px; padding: 7px 9px; border-radius: 8px;
  background: rgba(0,0,0,.35); border: 1px solid var(--scene-line);
  font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--scene-dim); white-space: pre-wrap; word-break: break-word;
}
.fdiag {
  display: block; width: 100%; height: auto; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid var(--scene-line);
}
.fdiag-key {
  display: flex; flex-wrap: wrap; gap: 4px 11px; margin-top: 6px;
  font-size: 10.5px; color: var(--scene-dim);
}
.fdiag-key span { display: flex; align-items: center; gap: 5px; }
.fdiag-key i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.cs-link {
  display: block; border: 1px solid var(--scene-line); border-radius: 10px;
  padding: 8px 10px; background: rgba(255,255,255,.035); color: var(--scene-txt);
}
.cs-link:hover { border-color: rgba(245,165,36,.5); background: rgba(245,165,36,.1); }
.cs-link b { font-weight: 650; font-size: 13px; }
.cs-link span { display: block; color: var(--scene-dim); font-size: 11.5px; margin-top: 1px; }
.cs-stale { color: var(--hz-tall); }
.freq { display: flex; gap: 9px; align-items: baseline; font-size: 12.5px; padding: 1px 0; }
.freq b { font-weight: 650; min-width: 58px; font-variant-numeric: tabular-nums; }
.freq span { color: var(--scene-dim); }

/* ── Briefing ────────────────────────────────────────────────────────────── */
.brief-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 0 4px;
}
.brief-stamp { font-size: 11.5px; color: var(--scene-dim); }
.brief-stamp.stale { color: var(--hz-tall); }
.brief-lede {
  font-size: 11.5px; color: rgba(235,235,240,.5); line-height: 1.5;
  margin: -3px 0 9px;
}

/* ⚠️ THE TILES ANSWER, THE SECTIONS EXPLAIN. Each tile is the single worst
   number in its section, so the brief tells you whether to worry before you
   have read any of it. Clicking one scrolls to the section it came from —
   a way IN to the detail, not a replacement for it.
   ⚠️ A GREY TILE MEANS NOT KNOWN, never "fine". An unsampled route and a
   clear one must not look the same. */
.tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px; margin: 10px 0 4px;
}
.tile {
  text-align: left; border: 1px solid var(--scene-line); cursor: pointer;
  background: rgba(255,255,255,.035); border-radius: 12px; padding: 9px 10px;
  font-family: var(--sf); color: var(--scene-txt);
}
.tile:hover { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.06); }
.tile .tk {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.tile .tv {
  font-size: 18px; font-weight: 700; margin-top: 2px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.tile .ts {
  font-size: 10.5px; color: var(--scene-dim); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile.t-unknown .tk { color: rgba(235,235,240,.45); }
.tile.t-go       .tk { color: var(--route); }
.tile.t-caution  .tk { color: var(--hz-obst); }
.tile.t-warning  .tk { color: var(--hz-tall); }
.tile.t-critical .tk { color: var(--hz-wire); }
.tile.t-critical { border-color: rgba(255,92,92,.4); background: rgba(255,92,92,.08); }
.tile.t-warning  { border-color: rgba(255,138,61,.35); background: rgba(255,138,61,.07); }

.risk {
  border-left: 3px solid var(--scene-line); border-radius: 0 10px 10px 0;
  background: rgba(255,255,255,.035); padding: 8px 11px; margin-bottom: 7px;
}
.risk-h { font-size: 13.5px; font-weight: 650; display: flex; align-items: center; gap: 7px; }
.risk-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.risk-e { font-size: 12.5px; color: var(--scene-dim); margin-top: 3px; line-height: 1.45; }
.risk-a { font-size: 12px; color: rgba(235,235,240,.5); margin-top: 4px; font-style: italic; }
.risk.critical { border-left-color: var(--hz-wire); }
.risk.critical .risk-h { color: var(--hz-wire); }
.risk.warning  { border-left-color: var(--hz-tall); }
.risk.warning .risk-h { color: var(--hz-tall); }
.risk.caution  { border-left-color: var(--hz-obst); }
.risk.caution .risk-h { color: var(--hz-obst); }
.risk.info     { border-left-color: rgba(120,190,255,.7); }
.risk.info .risk-h { color: rgba(150,205,255,.95); }

.legrow {
  display: grid; grid-template-columns: 16px 1fr; gap: 3px 8px;
  padding: 6px 0; border-bottom: 1px solid var(--scene-line); font-size: 12.5px;
}
.legrow b { color: var(--route); font-weight: 700; grid-row: span 2; }
.leg-ab { font-weight: 600; }
.leg-n { color: var(--scene-dim); font-size: 11.5px; font-variant-numeric: tabular-nums; }

.asrow {
  border-left: 3px solid var(--scene-line); padding: 5px 0 5px 9px;
  margin-bottom: 4px; font-size: 12.5px;
}
.asrow b { font-weight: 650; }
.asrow span {
  display: block; color: var(--scene-dim); font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.fuelrow { margin-bottom: 3px; }
.fuelrow button {
  width: 100%; text-align: left; border: 1px solid var(--scene-line); cursor: pointer;
  background: rgba(255,255,255,.035); color: var(--scene-txt);
  font-family: var(--sf); font-size: 12.5px; padding: 7px 9px; border-radius: 9px;
}
.fuelrow button:hover { border-color: rgba(245,165,36,.5); background: rgba(245,165,36,.1); }
.fuelrow b { font-weight: 700; }
.fuelrow span { display: block; color: var(--scene-dim); font-size: 11.5px; margin-top: 1px; }

.askey { display: flex; flex-direction: column; gap: 5px; }
.askey-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--scene-dim); }
.askey-row i { width: 22px; border-radius: 2px; flex: none; }

/* Popup action button */
.po-act { margin-top: 8px; }
.po-act button {
  border: 0; cursor: pointer; border-radius: 8px; padding: 6px 11px;
  background: var(--amber, #F5A524); color: #17130b;
  font-family: var(--sf); font-size: 12.5px; font-weight: 650;
}
.po-act button:hover { filter: brightness(1.08); }

/* ── Advisory line ───────────────────────────────────────────────────────── */
.advisory {
  font-size: 11px; line-height: 1.5; color: rgba(235,235,240,.42);
  padding: 10px 2px 4px; border-top: 1px solid var(--scene-line); margin-top: 16px;
}
.advisory b { color: rgba(235,235,240,.68); }

/* ── Narrow ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  body.planner { overflow: auto; }
  .plan-shell {
    position: static; grid-template-columns: 1fr;
    grid-template-rows: 58svh auto auto;
    grid-template-areas: "map" "profile" "rail";
    height: auto; min-height: 100svh;
  }
  .plan-shell.no-profile { grid-template-rows: 58svh 0 auto; }
  .plan-rail { padding-top: 0; }
  .rail-scroll { overflow: visible; }
  .plan-map { min-height: 58svh; }
  .plan-profile { min-height: var(--profile-h); }
  .map-badge { top: auto; bottom: 14px; }
}

/* ── Weather layers ──────────────────────────────────────────────────────── */
/* A PIREP marker carries its flight level, because "moderate turbulence" is
   meaningless without the altitude it was met at. */
.mk-pirep {
  min-width: 20px; height: 18px; padding: 0 4px; border-radius: 5px;
  display: grid; place-items: center; pointer-events: none;
  background: rgba(4,6,10,.78); color: #f2cc40;
  border: 1px solid rgba(242,204,64,.75);
  font: 700 10px/1 var(--sf); white-space: nowrap;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.mk-pirep.urgent { color: #ff5c5c; border-color: rgba(255,92,92,.85); }
.pirep-raw {
  display: block; margin-top: 5px; padding: 6px 8px; border-radius: 7px;
  background: rgba(0,0,0,.4); border: 1px solid var(--scene-line);
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--scene-dim); white-space: pre-wrap; word-break: break-word;
}

/* ── Account ─────────────────────────────────────────────────────────────── */
.acct {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 12px; color: var(--scene-dim); margin-bottom: 8px;
}
.acct span { flex: 1; min-width: 140px; }
.acct.on span b { color: var(--route); font-weight: 650; }
.acct-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.acct-form input {
  width: 100%; box-sizing: border-box; border-radius: 10px;
  border: 1px solid var(--scene-line); background: rgba(255,255,255,.05);
  color: var(--scene-txt); font-family: var(--sf); font-size: 14px;
  padding: 8px 10px; outline: none;
}
.acct-form input:focus { border-color: rgba(245,165,36,.55); }
.saved li .rsync {
  font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--route); opacity: .8;
}