/* HwyHero desktop cockpit. Layered on top of app.css: reuses every design token
   and every feature-section style, and only adds the cockpit chrome — full-bleed
   map, floating glass rails, the bottom dock and its slide-up drawer. Theme-aware
   for free because it reads the same --hwy-* variables (which flip in dark mode). */

:root {
   --glass-bg: color-mix(in srgb, var(--hwy-card) 80%, transparent);
   --glass-strong: color-mix(in srgb, var(--hwy-card) 92%, transparent);
   --glass-border: color-mix(in srgb, var(--hwy-ink) 14%, transparent);
   --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.16);
   --rail-width-left: 306px;
   --rail-width-right: 328px;
   --bar-height: 62px;
   --dock-height: 58px;
   --sev-calm: var(--hwy-green-light);
   --sev-advisory: #e67e22;
   --sev-severe: #c0392b;
}

/* ── Page frame ──────────────────────────────────────────────────────────── */

html { height: 100%; }

body.cockpit {
   margin: 0;
   height: 100vh;
   max-width: none;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   background: var(--hwy-sand);
   color: var(--hwy-ink);
}

/* Dev-only API meter: keep it clear of the brand, tucked into the empty bar
   space to the right of it. */
.cockpit .api-counter { top: 8px; left: 156px; z-index: 31; }

/* ── Command bar ─────────────────────────────────────────────────────────── */

.cockpit-bar {
   flex: 0 0 auto;
   min-height: var(--bar-height);
   display: flex;
   align-items: center;
   gap: 18px;
   padding: 6px 18px;
   z-index: 30;
   background: linear-gradient(180deg,
      color-mix(in srgb, var(--hwy-header-bg) 96%, black) 0%,
      var(--hwy-header-bg) 100%);
   border-bottom: 1px solid rgba(0, 0, 0, 0.35);
   box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}

.cockpit-brand {
   display: flex;
   align-items: center;
   gap: 10px;
   min-width: 150px;
}
.cockpit-mark { font-size: 26px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); }
.cockpit-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
/* Everything ON the bar reads with --hwy-header-ink: the bar keeps its themed
   header gradient in every look, and several themes stamp page ink onto
   headings/buttons with blanket `[data-theme] …` rules (hence !important on
   the title, which those rules target directly). */
body.cockpit .cockpit-bar .cockpit-title { color: var(--hwy-header-ink, #fff) !important; font-size: 20px; font-weight: 800; letter-spacing: 0.2px; }
body.cockpit .cockpit-bar .cockpit-sub { color: color-mix(in srgb, var(--hwy-header-ink, #fff) 78%, transparent) !important; font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; }

.cockpit-trip-form {
   flex: 1;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 9px;
   row-gap: 8px;
   justify-content: center;
}
.cockpit-field { display: flex; flex-direction: column; gap: 2px; }
.cockpit-field label {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: color-mix(in srgb, var(--hwy-header-ink, #fff) 80%, transparent);
   font-weight: 700;
}
.cockpit-field input {
   background: color-mix(in srgb, var(--hwy-header-ink, #fff) 12%, transparent);
   border: 1px solid color-mix(in srgb, var(--hwy-header-ink, #fff) 20%, transparent);
   color: var(--hwy-header-ink, #fff);
   border-radius: 9px;
   padding: 7px 11px;
   font-size: 14px;
   min-width: 0;
   width: 148px;
   transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.cockpit-field input::placeholder { color: rgba(255, 255, 255, 0.5); }
.cockpit-field input:focus {
   outline: none;
   background: rgba(255, 255, 255, 0.2);
   border-color: var(--hwy-green-light);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--hwy-green-light) 40%, transparent);
}
.cockpit-field-when input { min-width: 0; width: 172px; color-scheme: dark; }
.cockpit-field-preset select {
   background: rgba(255, 255, 255, 0.12);
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: #fff;
   border-radius: 9px;
   padding: 7px 10px;
   font-size: 14px;
   /* Fixed width so the bar doesn't shift when popular routes load in (CLS). */
   width: 150px;
   color-scheme: dark;
   cursor: pointer;
}
.cockpit-field-preset select:focus { outline: none; border-color: var(--hwy-green-light); }
.cockpit-field-when { position: relative; }
/* "Now" sits up on the label row, NOT over the input — otherwise it covers the
   native datetime-local calendar-picker indicator and swallows the click that
   should open the dropdown calendar. */
.cockpit-field-when .link-button {
   position: absolute;
   right: 0;
   top: -1px;
   background: none;
   border: none;
   /* Header ink, not --hwy-green-light: that's a surface token and vanishes
      against several themes' header gradients. */
   color: var(--hwy-header-ink, #fff);
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   font-weight: 700;
   cursor: pointer;
   padding: 0;
   line-height: 1;
   min-height: 0;
   min-width: 0;
}
.cockpit-field-when .link-button:hover { text-decoration: underline; }
.cockpit-arrow {
   color: rgba(255, 255, 255, 0.65);
   font-size: 18px;
   align-self: flex-end;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 8px;
   width: 34px;
   height: 38px;
   cursor: pointer;
   transition: background 0.15s, color 0.15s;
}
.cockpit-arrow:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.cockpit-arrow:focus-visible { outline: 2px solid var(--hwy-green-light); outline-offset: 1px; }

/* Avoid (route preferences) disclosure — tucked away so the bar stays clean. */
.cockpit-avoid, .cockpit-waypoints { position: relative; align-self: flex-end; flex: 0 0 auto; }
.cockpit-avoid > summary, .cockpit-waypoints > summary {
   list-style: none;
   cursor: pointer;
   color: color-mix(in srgb, var(--hwy-header-ink, #fff) 88%, transparent);
   font-size: 12px;
   font-weight: 700;
   background: color-mix(in srgb, var(--hwy-header-ink, #fff) 10%, transparent);
   border: 1px solid color-mix(in srgb, var(--hwy-header-ink, #fff) 18%, transparent);
   border-radius: 8px;
   padding: 10px 12px;
   white-space: nowrap;
}
.cockpit-avoid > summary::-webkit-details-marker, .cockpit-waypoints > summary::-webkit-details-marker { display: none; }
.cockpit-avoid > summary:hover, .cockpit-waypoints > summary:hover { background: color-mix(in srgb, var(--hwy-header-ink, #fff) 22%, transparent); color: var(--hwy-header-ink, #fff); }
/* The Stops dropdown gets the same solid popup panel as the Avoid menu — its
   editor otherwise renders transparent over the bar gradient. */
.cockpit-waypoints > .waypoints-editor {
   position: absolute;
   top: calc(100% + 6px);
   left: 0;
   z-index: 20;
   min-width: 340px;
   background: var(--hwy-card, #12233b);
   color: var(--hwy-ink, #eef4fb);
   border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 10px;
   padding: 10px 12px;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.cockpit-avoid-menu {
   position: absolute;
   top: calc(100% + 6px);
   left: 0;
   z-index: 20;
   background: var(--hwy-card, #12233b);
   color: var(--hwy-ink, #eef4fb);
   border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 10px;
   padding: 10px 12px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.cockpit-avoid-menu label { display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; cursor: pointer; }

.cockpit-plan {
   /* Top stop leans on the dark green: themes retune --hwy-green-light (mint
      in dark palettes) and white text must clear EVERY gradient stop. */
   background: linear-gradient(180deg, color-mix(in srgb, var(--hwy-green-light) 40%, var(--hwy-green)), var(--hwy-green));
   color: #fff;
   border: 1px solid rgba(255, 255, 255, 0.22);
   border-radius: 10px;
   padding: 9px 20px;
   font-size: 14px;
   font-weight: 800;
   white-space: nowrap;
   cursor: pointer;
   align-self: flex-end;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
   transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
}
.cockpit-plan:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cockpit-plan:active { transform: translateY(0); }
.cockpit-plan:disabled { opacity: 0.6; cursor: default; transform: none; }

.cockpit-bar-right { display: flex; align-items: center; gap: 10px; min-width: 130px; justify-content: flex-end; }
.cockpit-icon-btn {
   width: 38px;
   height: 38px;
   display: grid;
   place-items: center;
   border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, 0.18);
   background: rgba(255, 255, 255, 0.1);
   color: #fff;
   font-size: 18px;
   text-decoration: none;
   cursor: pointer;
   transition: background 0.15s, transform 0.12s;
}
.cockpit-icon-btn:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-1px); }

.online-dot { width: 10px; height: 10px; border-radius: 50%; background: #888; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
.online-dot.is-online { background: #34c98a; box-shadow: 0 0 8px 1px rgba(52, 201, 138, 0.7); }
.online-dot.is-offline { background: #e0a53a; box-shadow: 0 0 8px 1px rgba(224, 165, 58, 0.6); }
/* The app menu styles live in app.css (shared across every page). */

.cockpit-banner {
   position: absolute;
   top: calc(var(--bar-height) + 10px);
   left: 50%;
   transform: translateX(-50%);
   z-index: 28;
   max-width: 560px;
   border-radius: 10px;
   box-shadow: var(--glass-shadow);
}

/* ── Stage + full-bleed map ──────────────────────────────────────────────── */

.cockpit-stage { position: relative; flex: 1; overflow: hidden; }

.cockpit .map-section,
.cockpit .cockpit-map { position: absolute; inset: 0; margin: 0; padding: 0; }
.cockpit .map-container {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border-radius: 0;
   border: none;
   background: var(--hwy-map-bg);
}
.cockpit .google-map, .cockpit .route-fallback, .cockpit .holo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cockpit .holo-canvas { z-index: 2; background: #050818; }

/* Map <-> 3D toggle: only offered in the sci-fi theme (its whole aesthetic). */
.holo-toggle {
   position: absolute;
   top: 14px;
   left: 50%;
   transform: translateX(-50%);
   /* Top-CENTER, above the floating rails — the top-right corner sits under the
      weather rail, where this control was invisible and unclickable. */
   z-index: 30;
   display: none;
   align-items: center;
   gap: 6px;
   padding: 8px 16px;
   font-size: 13px;
   font-weight: 800;
   letter-spacing: 0.04em;
   color: #7df3ff;
   background: rgba(8, 14, 40, 0.88);
   border: 1px solid rgba(90, 220, 255, 0.55);
   border-radius: 999px;
   cursor: pointer;
   backdrop-filter: blur(4px);
   box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}
.holo-toggle:hover { border-color: rgba(90, 220, 255, 0.9); }
.holo-toggle.is-on { color: #050818; background: #5cf0ff; border-color: #5cf0ff; }
:root[data-theme="scifi"] .cockpit .holo-toggle { display: inline-flex; }
.holo-toggle:focus-visible { outline: 3px solid #5cf0ff; outline-offset: 2px; }
.cockpit .map-placeholder {
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
   font-size: 15px;
   color: var(--hwy-muted);
}
/* Soft vignette so the floating panels have something to sit against. */
.cockpit-stage::after {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 3;
   box-shadow: inset 0 0 160px rgba(0, 0, 0, 0.22);
}

/* ── Idle hero ───────────────────────────────────────────────────────────── */

/* ── Idle hero: read it like the overhead guide sign as you approach the ramp.
   The route reads up to a vanishing point (pure gradients + clip-path, never a
   url() — so it can't become the LCP image candidate the perfFloor watches). ── */
.cockpit-hero {
   position: absolute;
   inset: 0;
   z-index: 6;
   display: grid;
   place-items: center;
   text-align: center;
   overflow: hidden;
   background:
      radial-gradient(130% 74% at 50% 6%, color-mix(in srgb, var(--hwy-green) 20%, transparent), transparent 44%),
      color-mix(in srgb, var(--hwy-sand) 72%, transparent);
   backdrop-filter: blur(2px);
}
/* Behind the road: a faint US interstate map, so the pre-trip stage reads as
   "map app" at a glance instead of an empty wash (owner: the subtle road alone
   read as a broken/empty page). The road trapezoid sits on top and obscures
   it — except through the lane-divider cutout. */
.cockpit-hero::before {
   content: "";
   position: absolute;
   inset: 4% 6% 10%;
   background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1200 700%22%3E%3Cpolygon points=%2216,38 611,22 748,43 829,89 869,129 859,202 940,186 982,167 1023,129 1089,129 1135,65 1182,135 1119,164 1109,215 1039,248 1008,304 998,339 1002,393 940,433 897,479 889,514 918,619 910,662 881,627 863,587 857,536 811,541 756,525 724,555 639,541 573,643 530,630 486,538 452,560 415,517 383,485 292,498 218,460 169,466 99,409 22,256 26,172 16,38%22 fill=%22none%22 stroke=%22%234a5a56%22 stroke-width=%223%22 stroke-linejoin=%22round%22 opacity=%220.5%22/%3E%3Cpolyline points=%22914,646 883,525 920,458 968,331 978,293 1039,245 1097,199 1144,129%22 fill=%22none%22 stroke=%22%234a5a56%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%220.85%22/%3E%3Cpolyline points=%22147,425 270,442 383,485 545,549 607,538 714,533 883,525%22 fill=%22none%22 stroke=%22%234a5a56%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%220.85%22/%3E%3Cpolyline points=%2263,323 274,242 417,234 595,229 764,213 918,237 1035,240%22 fill=%22none%22 stroke=%22%234a5a56%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%220.85%22/%3E%3Cpolyline points=%2265,59 343,108 581,170 764,213 883,223 996,183 1097,199%22 fill=%22none%22 stroke=%22%234a5a56%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%220.85%22/%3E%3Cpolyline points=%22171,401 278,393 381,396 478,393 565,385 670,407 716,396 781,366 902,393 960,420%22 fill=%22none%22 stroke=%22%234a5a56%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%220.85%22/%3E%3Cpolyline points=%22910,646 867,587 829,433 839,372 827,288 857,202 829,89%22 fill=%22none%22 stroke=%22%234a5a56%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%220.85%22/%3E%3Cpolyline points=%22524,600 545,549 579,458 565,385 623,288 643,221 649,129 674,81%22 fill=%22none%22 stroke=%22%234a5a56%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%220.85%22/%3E%3Cpolyline points=%22167,460 147,425 81,302 56,116 65,59%22 fill=%22none%22 stroke=%22%234a5a56%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%220.85%22/%3E%3Cpolyline points=%22274,242 413,272 623,288 712,302 793,269 857,264 986,283%22 fill=%22none%22 stroke=%22%234a5a56%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%220.85%22/%3E%3Cpolyline points=%22474,468 579,458 674,466 712,471 781,439 829,433 897,425%22 fill=%22none%22 stroke=%22%234a5a56%22 stroke-width=%224%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 opacity=%220.85%22/%3E%3C/svg%3E") center / contain no-repeat;
   opacity: 0.16;
   pointer-events: none;
}
:root[data-mode="dark"] .cockpit-hero::before { opacity: 0.2; filter: invert(0.85); }
.cockpit-hero::after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: 0;
   width: 128%;
   height: 62%;
   transform: translateX(-50%);
   clip-path: polygon(48.6% 0, 51.4% 0, 100% 100%, 0 100%);
   background: linear-gradient(to top, color-mix(in srgb, var(--hwy-ink) 22%, transparent), color-mix(in srgb, var(--hwy-ink) 5%, transparent) 88%);
   /* The lane divider is a CUTOUT, not a painted line: both mask layers are
      transparent only over the dashed center stripe (default composite = add,
      i.e. union), so the highway map shows through the road there. */
   -webkit-mask-image:
      linear-gradient(to right, #000 calc(50% - 8px), transparent calc(50% - 8px) calc(50% + 8px), #000 calc(50% + 8px)),
      repeating-linear-gradient(to top, #000 0 30px, transparent 30px 68px);
   mask-image:
      linear-gradient(to right, #000 calc(50% - 8px), transparent calc(50% - 8px) calc(50% + 8px), #000 calc(50% + 8px)),
      repeating-linear-gradient(to top, #000 0 30px, transparent 30px 68px);
   opacity: 0.8;
   pointer-events: none;
}
.cockpit-hero-inner { position: relative; z-index: 1; max-width: 600px; padding: 24px; animation: heroRise 0.6s ease both; }
/* The guide-sign panel: MUTCD green field with the classic white hairline border. */
.cockpit-hero-sign {
   /* Fixed guide-sign green (not the theme token — that goes light-mint in dark
      mode and fails white-text contrast). A road sign is dark green in any mode. */
   background: linear-gradient(178deg, #12694f, #0b3d2e);
   border-radius: 16px;
   padding: 28px 34px 24px;
   box-shadow:
      inset 0 0 0 2px rgba(255, 255, 255, 0.9),
      inset 0 0 0 4px var(--hwy-green),
      0 26px 54px -20px color-mix(in srgb, var(--hwy-green) 82%, black),
      0 3px 0 color-mix(in srgb, var(--hwy-green) 45%, black);
}
.cockpit-hero-shield {
   display: inline-block;
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 2.5px;
   /* Fixed dark-on-amber (like a real sign) — the amber field is fixed, so a
      theme-variable text color would fail contrast in mid-tone themes. */
   color: #0b3d2e;
   background: #f4b740;
   padding: 3px 11px;
   border-radius: 5px;
   margin-bottom: 15px;
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
}
/* !important: the sign is pinned dark green in every look, and several themes
   stamp accent ink onto all h1s. */
.cockpit-hero .cockpit-hero-sign h1 { font-size: 39px; line-height: 1.05; margin: 0 0 12px; color: #fff !important; font-weight: 800; letter-spacing: -0.5px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22); }
.cockpit-hero-sign p { font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.87); margin: 0; }
.cockpit-hero-cta {
   margin-top: 22px;
   background: linear-gradient(180deg, #12694f, #0b3d2e);
   color: #fff;
   border: none;
   border-radius: 12px;
   padding: 14px 30px;
   font-size: 16px;
   font-weight: 800;
   letter-spacing: 0.2px;
   cursor: pointer;
   box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--hwy-green) 65%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
   transition: transform 0.12s, filter 0.12s;
}
.cockpit-hero-cta:hover { filter: brightness(1.08); transform: translateY(-2px); }
@keyframes heroRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ── Floating rails ──────────────────────────────────────────────────────── */

.cockpit-rail {
   position: absolute;
   top: 16px;
   bottom: calc(var(--dock-height) + 16px);
   z-index: 8;
   width: var(--rail-width-left);
   display: flex;
   flex-direction: column;
   border-radius: 16px;
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
   box-shadow: var(--glass-shadow);
   backdrop-filter: blur(16px) saturate(1.3);
   -webkit-backdrop-filter: blur(16px) saturate(1.3);
   overflow: hidden;
   animation: railIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cockpit-rail-left { left: 16px; }
.cockpit-rail-right { right: 16px; width: var(--rail-width-right); animation-delay: 0.06s; }
.rail-scroll { overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.rail-scroll::-webkit-scrollbar { width: 8px; }
.rail-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--hwy-ink) 22%, transparent); border-radius: 8px; }

@keyframes railIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }

.rail-heading { font-size: 14px; font-weight: 800; margin: 0 0 2px; color: var(--hwy-ink); letter-spacing: 0.2px; }
.rail-summary { background: none; border: none; box-shadow: none; padding: 0; margin: 0; }
.rail-summary .summary-route { font-size: 16px; font-weight: 800; }
.summary-soundtrack { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.summary-soundtrack-label { font-size: 12.5px; font-weight: 700; color: var(--hwy-ink); }
.summary-soundtrack-link {
   /* --hwy-accent, not --hwy-green: green is a background token that several
      looks keep too dark (or too loud) to read as small ink. */
   font-size: 11.5px; font-weight: 700; color: var(--hwy-accent);
   text-decoration: none; padding: 2px 8px; border-radius: 999px;
   border: 1px solid var(--glass-border); background: var(--glass-strong);
}
.summary-soundtrack-link:hover { border-color: var(--hwy-green); }
.summary-roadculture { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--hwy-subtle) 55%, transparent); }
.summary-roadculture-title { font-size: 12px; font-weight: 800; color: var(--hwy-ink); }
.summary-roadculture-blurb { font-size: 11.5px; color: var(--hwy-muted); margin: 2px 0 6px; line-height: 1.4; }
.summary-roadculture-item { display: block; font-size: 12px; color: var(--hwy-ink); text-decoration: none; padding: 1px 0; }
.summary-roadculture-item:hover .summary-roadculture-name { text-decoration: underline; }
.summary-roadculture-name { font-weight: 700; }
.summary-roadculture-by { color: var(--hwy-muted); font-weight: 500; }
.summary-highlights { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--hwy-subtle) 55%, transparent); }
.summary-highlights-title { font-size: 12px; font-weight: 800; color: var(--hwy-ink); margin-top: 6px; }
.summary-highlights-title:first-child { margin-top: 0; }
.summary-highlights-fact { font-size: 11.5px; color: var(--hwy-muted); margin: 3px 0; line-height: 1.4; }
.summary-highlights-stop { font-size: 12px; color: var(--hwy-ink); padding: 1px 0; line-height: 1.4; }
.summary-highlights-name { font-weight: 700; color: var(--hwy-ink); text-decoration: none; }
.summary-highlights-name:hover { text-decoration: underline; }
.summary-highlights-blurb { color: var(--hwy-muted); }
.rail-block { background: none; border: none; box-shadow: none; padding: 0; margin: 0; }

/* Stat tiles — interactive buttons that drive the map (hover previews, click
   commits), so they carry a full button reset. */
.rail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-tile {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 2px;
   width: 100%;
   margin: 0;
   padding: 12px;
   border-radius: 12px;
   background: color-mix(in srgb, var(--hwy-subtle) 70%, transparent);
   border: 1px solid var(--glass-border);
   color: inherit;
   font: inherit;
   text-align: left;
   cursor: pointer;
   -webkit-appearance: none;
   appearance: none;
   transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.stat-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14); border-color: color-mix(in srgb, var(--hwy-green) 40%, var(--glass-border)); }
.stat-tile:active { transform: translateY(0); }
.stat-tile:focus-visible {
   outline: 3px solid var(--hwy-green-light);
   outline-offset: 2px;
}
.stat-icon { font-size: 18px; }
.stat-value { font-size: 20px; font-weight: 800; color: var(--hwy-ink); line-height: 1.1; }
.stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--hwy-muted); }

/* Driving-view legs act as map spotlights on the cockpit — hint it. */
.cockpit .ld-leg { cursor: pointer; border-radius: 8px; transition: background 0.12s; }
.cockpit .ld-leg:hover { background: color-mix(in srgb, var(--hwy-green) 10%, transparent); }

/* LineDrive tuned to sit inside the rail */
.cockpit .linedrive-section .linedrive-hint { font-size: 11px; }

/* ── Weather-ahead cards ─────────────────────────────────────────────────── */

.weather-rail { display: flex; flex-direction: column; gap: 12px; }
.weather-card {
   text-align: left;
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 6px;
   padding: 12px 14px;
   border-radius: 14px;
   background: var(--glass-strong);
   border: 1px solid var(--glass-border);
   border-left: 4px solid var(--sev-calm);
   cursor: pointer;
   transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.weather-card:hover { transform: translateX(3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16); }
.weather-card:focus-visible { outline: 3px solid var(--hwy-green-light); outline-offset: 2px; }
.weather-card.sev-calm { border-left-color: var(--sev-calm); }
.weather-card.sev-advisory { border-left-color: var(--sev-advisory); }
.weather-card.sev-severe {
   border-left-color: var(--sev-severe);
   background: linear-gradient(90deg, color-mix(in srgb, var(--sev-severe) 12%, var(--glass-strong)), var(--glass-strong));
}
.wc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wc-place { font-size: 13px; font-weight: 800; color: var(--hwy-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-eta { font-size: 11px; font-weight: 700; color: var(--hwy-muted); flex: 0 0 auto; }
.wc-body { display: flex; align-items: center; gap: 10px; }
.wc-emoji { font-size: 30px; line-height: 1; }
.wc-temp { font-size: 30px; font-weight: 800; color: var(--hwy-ink); letter-spacing: -1px; }
.wc-cond { font-size: 12.5px; color: var(--hwy-muted); }
.wc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wc-chip {
   font-size: 11px;
   font-weight: 700;
   padding: 3px 8px;
   border-radius: 999px;
   background: color-mix(in srgb, var(--hwy-subtle) 80%, transparent);
   color: var(--hwy-muted);
}
.rail-empty { font-size: 13px; color: var(--hwy-muted); }

/* Per-city "What's here" expander below each weather card — places to eat,
   what's happening in town, and scenic photo spots. */
.wc-wrap { display: flex; flex-direction: column; }
.wc-explore {
   align-self: flex-start;
   display: flex;
   align-items: center;
   gap: 5px;
   margin: 5px 0 0 4px;
   padding: 3px 6px;
   background: none;
   border: none;
   cursor: pointer;
   font-size: 11px;
   font-weight: 800;
   color: var(--hwy-accent);
   border-radius: 7px;
}
.wc-explore:hover { background: color-mix(in srgb, var(--hwy-green) 12%, transparent); }
.wc-explore-caret { font-size: 9px; }
/* .wc-enrich* moved to app.css so the mobile timeline shares the What+s-here card. */

.weather-legend { display: flex; gap: 14px; font-size: 11px; color: var(--hwy-muted); padding: 2px 2px 0; }
.weather-legend span { display: inline-flex; align-items: center; gap: 5px; }
.weather-legend .sev { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.weather-legend .sev-calm { background: var(--sev-calm); }
.weather-legend .sev-advisory { background: var(--sev-advisory); }
.weather-legend .sev-severe { background: var(--sev-severe); }

/* ── Dock ────────────────────────────────────────────────────────────────── */

/* Config-driven dock layer: an overlay that holds one or more floating docks,
   each positioned by edge, themeable via --dock-* vars, optionally auto-hiding. */
.cockpit-docklayer { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.cockpit-dock {
   position: fixed;
   pointer-events: auto;
   /* The whole dock is a grab handle: drag it to any screen edge (tab presses
      stay clicks until they travel). No text selection mid-drag, and
      touch-action none so touch drags emit pointermove instead of scrolling. */
   cursor: grab;
   user-select: none;
   -webkit-user-select: none;
   touch-action: none;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 8px 14px;
   border-radius: 16px;
   --dock-bg: var(--glass-strong);
   --dock-text: var(--hwy-ink);
   --dock-highlight: var(--hwy-green);
   background: var(--dock-bg);
   color: var(--dock-text);
   border: 1px solid var(--glass-border);
   box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   max-width: calc(100vw - 24px);
   transition: bottom 0.22s, top 0.22s, left 0.22s, right 0.22s, opacity 0.22s;
}
.cockpit-dock-bottom { left: 50%; bottom: 14px; transform: translateX(-50%); flex-wrap: wrap; }
.cockpit-dock.is-dock-moving { transition: none; opacity: 0.85; cursor: grabbing; z-index: 4500; }
.cockpit-dock .dock-tab { cursor: pointer; touch-action: none; }
.cockpit-dock-top { left: 50%; top: calc(var(--bar-height) + 10px); transform: translateX(-50%); flex-wrap: wrap; }
.cockpit-dock-left { left: 14px; top: 50%; transform: translateY(-50%); flex-direction: column; max-height: calc(100vh - 120px); overflow: auto; }
.cockpit-dock-right { right: 14px; top: 50%; transform: translateY(-50%); flex-direction: column; max-height: calc(100vh - 120px); overflow: auto; }

/* Auto-hide: rest mostly off the edge (a sliver peeks), slide in on hover/focus. */
.cockpit-dock-bottom.is-autohide { bottom: -42px; opacity: 0.75; }
.cockpit-dock-bottom.is-autohide:hover, .cockpit-dock-bottom.is-autohide:focus-within { bottom: 14px; opacity: 1; }
.cockpit-dock-top.is-autohide { top: calc(var(--bar-height) - 40px); opacity: 0.75; }
.cockpit-dock-top.is-autohide:hover, .cockpit-dock-top.is-autohide:focus-within { top: calc(var(--bar-height) + 10px); opacity: 1; }
.cockpit-dock-left.is-autohide { left: -150px; opacity: 0.75; }
.cockpit-dock-left.is-autohide:hover, .cockpit-dock-left.is-autohide:focus-within { left: 14px; opacity: 1; }
.cockpit-dock-right.is-autohide { right: -150px; opacity: 0.75; }
.cockpit-dock-right.is-autohide:hover, .cockpit-dock-right.is-autohide:focus-within { right: 14px; opacity: 1; }

.dock-tab {
   background: transparent;
   border: 1px solid transparent;
   border-radius: 999px;
   padding: 9px 16px;
   font-size: 13.5px;
   font-weight: 700;
   color: var(--dock-text);
   cursor: pointer;
   white-space: nowrap;
   transition: background 0.14s, border-color 0.14s, transform 0.12s;
}
.dock-tab:hover { background: color-mix(in srgb, var(--dock-highlight) 14%, transparent); transform: translateY(-1px); }
.dock-tab.is-active {
   background: var(--dock-highlight);
   color: #fff;
   border-color: color-mix(in srgb, var(--dock-highlight) 60%, transparent);
   box-shadow: 0 3px 12px color-mix(in srgb, var(--dock-highlight) 45%, transparent);
}
.dock-customize {
   position: fixed; right: 14px; bottom: 16px; z-index: 21; pointer-events: auto;
   width: 34px; height: 34px; border-radius: 50%;
   border: 1px solid var(--glass-border); background: var(--glass-strong); color: var(--hwy-ink);
   font-size: 15px; cursor: pointer; backdrop-filter: blur(10px);
}
.dock-customize:hover { background: var(--hwy-card); }

/* ── Drawer ──────────────────────────────────────────────────────────────── */

.cockpit-drawer {
   position: fixed;
   left: 0;
   right: 0;
   bottom: var(--dock-height);
   height: min(48vh, 520px);
   z-index: 25;
   display: flex;
   flex-direction: column;
   background: var(--glass-strong);
   border-top: 1px solid var(--glass-border);
   box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.34);
   backdrop-filter: blur(20px) saturate(1.3);
   -webkit-backdrop-filter: blur(20px) saturate(1.3);
   animation: drawerUp 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes drawerUp { from { transform: translateY(100%); } to { transform: none; } }

/* Side panel: a left/right dock opens its panel as a tall vertical column on that
   edge instead of a bottom sheet (e.g. a radio station list down the side). */
.cockpit-drawer.drawer-edge-left, .cockpit-drawer.drawer-edge-right {
   top: calc(var(--bar-height) + 8px);
   bottom: 8px;
   height: auto;
   width: min(400px, 92vw);
   border-top: none;
   animation: drawerSlideLeft 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cockpit-drawer.drawer-edge-left { left: 0; right: auto; border-right: 1px solid var(--glass-border); border-radius: 0 16px 16px 0; box-shadow: 14px 0 44px rgba(0, 0, 0, 0.34); }
.cockpit-drawer.drawer-edge-right { right: 0; left: auto; border-left: 1px solid var(--glass-border); border-radius: 16px 0 0 16px; box-shadow: -14px 0 44px rgba(0, 0, 0, 0.34); animation-name: drawerSlideRight; }
@keyframes drawerSlideLeft { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes drawerSlideRight { from { transform: translateX(100%); } to { transform: none; } }
/* On phones, always use the bottom sheet — a side panel is too narrow. */
@media (max-width: 720px) {
   .cockpit-drawer.drawer-edge-left, .cockpit-drawer.drawer-edge-right {
      left: 0; right: 0; top: auto; bottom: 0; width: auto; height: min(52vh, 520px);
      border: none; border-top: 1px solid var(--glass-border); border-radius: 16px 16px 0 0;
      animation: drawerUp 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
   }
}
.drawer-topbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 22px;
   border-bottom: 1px solid var(--glass-border);
}
.drawer-title { margin: 0; font-size: 17px; font-weight: 800; color: var(--hwy-ink); }
.drawer-close {
   width: 34px; height: 34px;
   border-radius: 9px;
   border: 1px solid var(--glass-border);
   background: color-mix(in srgb, var(--hwy-subtle) 70%, transparent);
   color: var(--hwy-ink);
   font-size: 16px; cursor: pointer;
   transition: background 0.14s;
}
.drawer-close:hover { background: color-mix(in srgb, var(--hwy-ink) 12%, transparent); }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px 26px; }
/* Centre feature content on the wide surface without stretching it thin. */
.drawer-body .drawer-panel { max-width: 1080px; margin: 0 auto; }

/* Only the active panel shows — overrides each module's own hidden toggling. */
.cockpit .drawer-panel { display: none; }
.cockpit .drawer-panel.is-active { display: block; }

/* ── Reveal-on-plan choreography ─────────────────────────────────────────── */

body.cockpit:not(.has-trip) .cockpit-dock { display: none; }

/* ── Responsive: collapse rails as width drops ───────────────────────────── */

@media (max-width: 1180px) {
   :root { --rail-width-left: 264px; --rail-width-right: 280px; }
   .cockpit-field input { min-width: 128px; }
}

@media (max-width: 980px) {
   /* Narrow desktops / tablets: rails become a stacked overlay on the left, the
      map stays full-bleed behind. The mobile PWA remains the better fit below
      this — a hint is offered by the 📱 button in the bar. */
   .cockpit-rail-right { display: none; }
   .cockpit-rail-left { right: 16px; width: auto; }
   .rail-stats { grid-template-columns: repeat(4, 1fr); }
   .cockpit-trip-form { flex-wrap: wrap; justify-content: flex-start; }
   .cockpit-sub { display: none; }
}

@media (max-width: 720px) {
   /* Phones: the desktop cockpit is built from absolute/fixed overlays (map,
      rails, dock) that otherwise pile on top of each other. Reflow the whole
      thing into ONE scrollable column, and force the dock into a sticky bottom
      bar regardless of the chosen desktop layout (data-layout=*). */
   /* Reflow the column with flex + order so nothing relies on fixed/absolute
      positioning: form, then the dock as a tab strip, then map, then the rails. */
   /* body's flex children are: bar, <main.cockpit-stage>, #dockLayer, #drawer.
      Order them so the dock tab strip sits right under the form, above the map. */
   body.cockpit { height: auto; min-height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
   .cockpit-bar { order: 0; position: static; height: auto; flex: 0 0 auto; flex-wrap: wrap; padding: 10px 12px; gap: 10px; }
   .cockpit-docklayer { order: 1; position: static !important; flex: 0 0 auto; }
   .cockpit-stage { order: 2; display: flex !important; flex-direction: column !important; }
   /* Within the stage: map first (as a block), then the detail rails. */
   .cockpit .cockpit-map { order: 0; position: relative !important; inset: auto !important; height: 44vh; flex: 0 0 auto; }
   .cockpit-rail-left { order: 1; }
   .cockpit-rail-right { order: 2; display: block !important; }
   /* …but hidden always wins: the force-display above was overriding the
      [hidden] attribute, leaving an invisible pre-trip rail floating over the
      hero and eating its taps. */
   .cockpit-rail[hidden] { display: none !important; }
   #cockpitHero { order: 3; }

   /* Map + rails become in-flow blocks, not overlays. */
   .cockpit-rail { position: static !important; inset: auto !important; width: auto !important; max-height: none !important; flex: 0 0 auto; }
   .rail-scroll { overflow: visible; }

   /* Dock -> in-flow horizontal tab strip under the form. Neutralize every
      layout-specific placement (top/bottom/left/right/menu/tab-bar). */
   .cockpit-dock,
   .cockpit-dock-top, .cockpit-dock-bottom, .cockpit-dock-left, .cockpit-dock-right {
      position: static !important; transform: none !important; inset: auto !important; margin: 0 !important;
      width: 100% !important; max-width: 100% !important; max-height: none !important;
      flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important;
      overflow-x: auto !important; overflow-y: hidden !important; border-radius: 0 !important; opacity: 1 !important;
      /* The desktop dock is a drag handle (touch-action: none) — on a phone
         that same rule made this strip UNSCROLLABLE by touch, cutting off the
         right-hand tabs (feedback f_ca1b452641f7). Phones pan it instead. */
      touch-action: pan-x !important;
      -webkit-overflow-scrolling: touch;
   }
   .dock-tab { flex: 0 0 auto; touch-action: pan-x !important; }

   /* The command bar ate 43% of a phone screen (feedback f_926434c0b0dd:
      "should take no more than 25%"). Tight grid: From ⇄ To / Leave + Plan /
      the three option chips. The Popular picker is a desktop luxury — phones
      have the sample cards on the mobile shell. */
   .cockpit-bar { position: relative; padding: 6px 12px 8px; gap: 6px; }
   .cockpit-brand { flex: 1 1 100%; }
   .cockpit-brand .cockpit-sub { display: none; }
   .cockpit-brand .cockpit-title { font-size: 15px; }
   .cockpit-brand .cockpit-mark { font-size: 15px; }
   .cockpit-bar-right { position: absolute; top: 8px; right: 12px; }
   .cockpit-trip-form {
      display: grid !important;
      grid-template-columns: 1fr auto 1fr;
      align-items: end;
      gap: 6px 8px;
      flex: 1 1 100%;
      min-width: 0;
   }
   .cockpit-field-preset { display: none; }
   .cockpit-field { min-width: 0; }
   .cockpit-field label { font-size: 10px; }
   .cockpit-field input, .cockpit-field select { width: 100%; min-width: 0 !important; padding: 6px 8px; font-size: 14px; }
   .cockpit-avoid summary, .cockpit-waypoints summary { padding: 5px 8px; font-size: 12px; }
   .cockpit-plan { padding: 8px 12px; }
   .cockpit-arrow { margin-bottom: 3px; }
   .cockpit-field-when { grid-column: 1 / 3; }
   .cockpit-plan { grid-column: 3; margin: 0; }
   .cockpit-roundtrip { grid-column: 1; }
   .cockpit-trip-form > .cockpit-avoid:not(.cockpit-roundtrip) { grid-column: 2; }
   .cockpit-waypoints { grid-column: 3; }
   .cockpit-avoid summary, .cockpit-waypoints summary { white-space: nowrap; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
   .cockpit-rail, .cockpit-drawer, .cockpit-hero-inner { animation: none; }
   .weather-card, .stat-tile, .cockpit-plan, .dock-tab, .cockpit-hero-cta { transition: none; }
}

/* Always-visible weather hazard strip atop the weather rail (safety). */
.rail-hazards {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   align-items: center;
   padding: 8px 10px;
   margin-bottom: 10px;
   border-radius: 10px;
   background: color-mix(in srgb, #dc2626 16%, transparent);
   border: 1px solid color-mix(in srgb, #dc2626 55%, var(--hwy-line));
}
.rail-hazards-title { font-size: 12px; font-weight: 800; color: var(--hwy-error, #b91c1c); }
.rail-hazard-chip {
   font-size: 11px;
   font-weight: 700;
   color: var(--hwy-ink);
   background: color-mix(in srgb, #dc2626 10%, var(--hwy-card));
   border-radius: 999px;
   padding: 2px 8px;
}

/* ── Trip kit: expenses, packing, GPX/KML ─────────────────────────────── */
.tripkit-section .tk-card {
   background: var(--hwy-card, #12233b);
   border: 1px solid var(--hwy-line, rgba(255,255,255,0.12));
   border-radius: 12px;
   padding: 14px 16px;
   margin-bottom: 14px;
}
.tk-card h3 { margin: 0 0 10px; font-size: 15px; }
.tk-card h4 { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hwy-muted, #9fb3cc); }
.tk-empty { color: var(--hwy-muted, #9fb3cc); font-size: 13px; margin: 4px 0; }
.tk-people { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 10px; }
.tk-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--hwy-subtle, rgba(255,255,255,0.08)); border-radius: 999px; padding: 3px 9px; font-size: 12.5px; }
.tk-chip button, .tk-del, .tk-person-del { background: none; border: none; color: var(--hwy-muted, #9fb3cc); cursor: pointer; font-size: 12px; padding: 0 2px; }
.tk-add-person { display: inline-flex; gap: 4px; }
.tk-add-person input { width: 96px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--hwy-line, rgba(255,255,255,0.18)); background: var(--hwy-sand, rgba(0,0,0,0.2)); color: inherit; font-size: 12.5px; }
.tk-add-person button { padding: 4px 10px; border-radius: 8px; border: none; background: var(--hwy-green, #1f8a5b); color: #fff; cursor: pointer; }
.tk-expense-form { display: grid; grid-template-columns: 1fr 90px 120px auto; gap: 6px; margin-bottom: 10px; }
.tk-expense-form input, .tk-expense-form select { padding: 8px; border-radius: 8px; border: 1px solid var(--hwy-line, rgba(255,255,255,0.18)); background: var(--hwy-sand, rgba(0,0,0,0.2)); color: inherit; font-size: 13px; min-width: 0; }
.tk-expense-form button { padding: 8px 12px; border-radius: 8px; border: none; background: var(--hwy-green, #1f8a5b); color: #fff; font-weight: 700; cursor: pointer; }
@media (max-width: 560px) { .tk-expense-form { grid-template-columns: 1fr 1fr; } }
.tk-list { list-style: none; margin: 0; padding: 0; }
.tk-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--hwy-line, rgba(255,255,255,0.08)); font-size: 13.5px; }
.tk-amt { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk-total { margin-top: 10px; font-size: 14px; }
.tk-settle { margin-top: 12px; }
.tk-settle h4 { margin-top: 0; }
.tk-pos { color: #5bd6a0; }
.tk-neg { color: #ff9c9c; }
.tk-check { list-style: none; margin: 0; padding: 0; }
.tk-check li { padding: 4px 0; }
.tk-check label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.tk-buy { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hwy-line, rgba(255,255,255,0.1)); }
.tk-buy h4 { margin: 0 0 4px; }
.tk-buy-hint { font-size: 12px; color: var(--hwy-muted); margin: 0 0 8px; }
.tk-buy-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-buy-chip {
   padding: 5px 10px; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 700;
   border: 1px solid var(--glass-border); background: var(--glass-strong); color: var(--hwy-ink);
   transition: background 0.12s, border-color 0.12s;
}
.tk-buy-chip:hover { border-color: var(--hwy-green); }
.tk-buy-chip.is-active { background: var(--hwy-green, #1f8a5b); color: #fff; border-color: var(--hwy-green, #1f8a5b); }
.tk-buy-results { margin-top: 10px; }
.tk-buy-note { font-size: 12.5px; color: var(--hwy-muted); margin: 0 0 6px; }
.tk-buy-list li { align-items: flex-start; }
.tk-buy-place { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tk-buy-addr { font-size: 11.5px; color: var(--hwy-muted); }
.tk-file-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tk-file-row button, .tk-import { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--hwy-line, rgba(255,255,255,0.18)); background: var(--hwy-subtle, rgba(255,255,255,0.08)); color: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.tk-note { color: var(--hwy-muted, #9fb3cc); font-size: 12.5px; min-height: 14px; margin: 8px 0 0; }
.tk-share { background: var(--hwy-green, #1f8a5b) !important; color: #fff !important; border-color: var(--hwy-green, #1f8a5b) !important; }
.tk-journal-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.tk-journal-form textarea { width: 100%; box-sizing: border-box; padding: 8px; border-radius: 8px; border: 1px solid var(--hwy-line, rgba(255,255,255,0.18)); background: var(--hwy-sand, rgba(0,0,0,0.2)); color: inherit; font-size: 13px; font-family: inherit; resize: vertical; }
.tk-journal-form button { align-self: flex-start; padding: 7px 14px; border-radius: 8px; border: none; background: var(--hwy-green, #1f8a5b); color: #fff; font-weight: 700; cursor: pointer; }
.tk-jdate { color: var(--hwy-muted, #9fb3cc); font-size: 11.5px; white-space: nowrap; }
.tk-journal-list li span:first-child { display: block; }

/* ── Reservations: paste a confirmation, we pin it ───────────────────── */
.tk-hint { color: var(--hwy-muted, #9fb3cc); font-size: 12px; margin: 0 0 8px; line-height: 1.4; }
.tk-res-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.tk-res-form textarea { width: 100%; box-sizing: border-box; padding: 8px; border-radius: 8px; border: 1px solid var(--hwy-line, rgba(255,255,255,0.18)); background: var(--hwy-sand, rgba(0,0,0,0.2)); color: inherit; font-size: 13px; font-family: inherit; resize: vertical; }
.tk-res-actions { display: flex; align-items: center; gap: 10px; }
.tk-res-form button { padding: 7px 14px; border-radius: 8px; border: none; background: var(--hwy-green, #1f8a5b); color: #fff; font-weight: 700; cursor: pointer; }
.tk-res-note { color: var(--hwy-muted, #9fb3cc); font-size: 12px; }
.tk-res-item { align-items: flex-start; }
.tk-res-item strong { display: block; }
.tk-res-addr { display: block; color: var(--hwy-muted, #9fb3cc); font-size: 12px; }
.tk-res-meta { display: block; color: var(--hwy-muted, #9fb3cc); font-size: 11.5px; margin-top: 2px; }
.tk-res-side { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.tk-res-map { color: var(--hwy-green, #35c184); font-size: 12px; font-weight: 700; text-decoration: none; }
.tk-res-map:hover { text-decoration: underline; }

/* ── Drive mode: dim + motionless + low-power ─────────────────────────── */
#driveModeButton.is-on { background: #f0c674; color: #1b1b1b; box-shadow: 0 0 10px 1px rgba(240, 198, 116, 0.6); }
/* Kill animation + transition everywhere (battery + no motion). */
body.drive-mode *, body.drive-mode *::before, body.drive-mode *::after {
   animation-duration: 0s !important;
   animation-play-state: paused !important;
   transition: none !important;
   scroll-behavior: auto !important;
}
/* Dim the bright, GPU-heavy surfaces (map + 3D). */
body.drive-mode .cockpit-map, body.drive-mode .holo-canvas, body.drive-mode .map-container { filter: brightness(0.5) saturate(0.85); }
/* Hide dev + decorative chrome. */
body.drive-mode .api-counter { display: none !important; }
/* A gentle night scrim to cut glare, without blocking interaction. */
body.drive-mode::after {
   content: "";
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.28);
   pointer-events: none;
   z-index: 5;
}
/* Explicit ink, not inherit: several themes give .rail-heading an accent color
   that is heading-sized-readable but fails at this 11px. */
/* Solid card pill: the rail behind it is a themed gradient in several looks,
   and card/ink is the one pair every theme guarantees. */
.rail-print-btn { float: right; background: var(--hwy-card, #fff); border: 1px solid var(--hwy-line, rgba(255,255,255,0.22)); color: var(--hwy-ink, #1b1b1b); border-radius: 7px; padding: 3px 8px; font-size: 11px; font-weight: 700; cursor: pointer; }
.rail-print-btn:hover { border-color: var(--hwy-accent, #fff); }

/* ── Dock editor modal ────────────────────────────────────────────────── */
.de-overlay { position: fixed; inset: 0; z-index: 2500; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
.de-panel { background: var(--hwy-card); color: var(--hwy-ink); border-radius: 16px; width: min(640px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.de-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--hwy-line); flex-wrap: wrap; }
.de-head h2 { margin: 0; font-size: 17px; }
.de-presets { font-size: 12.5px; color: var(--hwy-muted); display: flex; align-items: center; gap: 6px; }
.de-preset { background: var(--hwy-subtle); border: 1px solid var(--hwy-line); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; color: inherit; }
.de-x { margin-left: auto; background: none; border: none; font-size: 18px; cursor: pointer; color: var(--hwy-muted); }
.de-body { padding: 14px 18px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.de-dock { border: 1px solid var(--hwy-line); border-radius: 12px; padding: 12px; }
.de-dock-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.de-rmdock, .de-cleartheme { background: none; border: 1px solid var(--hwy-line); border-radius: 7px; padding: 4px 9px; font-size: 12px; cursor: pointer; color: var(--hwy-muted); }
.de-dock-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 12.5px; margin-bottom: 10px; }
.de-dock-opts label { display: inline-flex; align-items: center; gap: 5px; }
.de-dock-opts select { padding: 5px 7px; border-radius: 7px; border: 1px solid var(--hwy-line); background: var(--hwy-sand); color: inherit; }
.de-dock-opts input[type="color"] { width: 30px; height: 26px; border: 1px solid var(--hwy-line); border-radius: 6px; background: none; padding: 0; cursor: pointer; }
.de-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.de-items li { display: flex; align-items: center; justify-content: space-between; background: var(--hwy-subtle); border-radius: 8px; padding: 7px 10px; font-size: 13.5px; }
.de-items em { color: var(--hwy-muted); font-style: normal; font-size: 11.5px; }
.de-item-btns button { background: var(--hwy-card); border: 1px solid var(--hwy-line); border-radius: 6px; width: 26px; height: 26px; cursor: pointer; margin-left: 4px; color: inherit; }
.de-item-btns button:disabled { opacity: 0.35; cursor: default; }
.de-rm { color: var(--hwy-error) !important; }
.de-hidden h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hwy-muted); margin: 0 0 8px; }
.de-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.de-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--hwy-subtle); border-radius: 999px; padding: 5px 10px; font-size: 13px; }
.de-chip select { border: none; background: none; font-size: 12px; color: var(--hwy-accent); cursor: pointer; }
.de-muted { color: var(--hwy-muted); font-size: 13px; }
.de-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--hwy-line); }
.de-spacer { flex: 1; }
.de-btn { background: var(--hwy-subtle); border: 1px solid var(--hwy-line); border-radius: 9px; padding: 9px 16px; font-weight: 700; cursor: pointer; color: inherit; }
.de-btn-go { background: var(--hwy-green); color: #fff; border-color: transparent; }

/* ── Real-time collaboration panel ───────────────────────────────────── */
.tk-collab { background: var(--hwy-green, #1f8a5b); color: #fff; border: none; }
.collab-panel {
   position: fixed; top: 0; right: 0; height: 100%; width: min(420px, 94vw);
   background: var(--hwy-card, #14202e); color: var(--hwy-ink, #eaf1f8);
   border-left: 1px solid var(--hwy-line, rgba(255,255,255,0.14));
   box-shadow: -12px 0 40px rgba(0,0,0,0.35);
   transform: translateX(102%); transition: transform 0.22s ease;
   z-index: 900; display: flex; flex-direction: column;
}
.collab-panel.is-open { transform: translateX(0); }
.collab-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--hwy-line, rgba(255,255,255,0.14)); }
.collab-title { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.collab-status { font-size: 11.5px; font-weight: 600; color: var(--hwy-muted, #9fb3cc); }
.collab-presence { display: flex; gap: 4px; margin-left: auto; }
.collab-avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 800; border: 2px solid var(--hwy-card, #14202e); }
.collab-close { background: none; border: none; color: inherit; font-size: 18px; cursor: pointer; padding: 2px 6px; }
.collab-invite { display: flex; align-items: center; gap: 10px; padding: 10px 14px; flex-wrap: wrap; background: color-mix(in srgb, var(--hwy-green, #1f8a5b) 12%, transparent); }
.collab-copy { background: var(--hwy-green, #1f8a5b); color: #fff; border: none; border-radius: 8px; padding: 7px 12px; font-weight: 700; cursor: pointer; }
.collab-hint { font-size: 12px; color: var(--hwy-muted, #9fb3cc); }
.collab-body { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 18px; }
.collab-section h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hwy-muted, #9fb3cc); }
.collab-field { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.collab-field span { width: 46px; font-size: 12px; color: var(--hwy-muted, #9fb3cc); flex: none; }
.collab-field input { flex: 1; box-sizing: border-box; padding: 8px; border-radius: 8px; border: 1px solid var(--hwy-line, rgba(255,255,255,0.18)); background: var(--hwy-sand, rgba(0,0,0,0.2)); color: inherit; font-size: 13px; font-family: inherit; }
.collab-plan { width: 100%; margin-top: 4px; background: var(--hwy-subtle, rgba(255,255,255,0.08)); color: inherit; border: 1px solid var(--hwy-line, rgba(255,255,255,0.18)); border-radius: 8px; padding: 8px; font-weight: 700; cursor: pointer; }
.collab-stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.collab-stop { display: flex; align-items: center; gap: 6px; }
.collab-stop-icon { flex: none; }
.collab-stop-label { flex: 1; box-sizing: border-box; padding: 7px 8px; border-radius: 8px; border: 1px solid var(--hwy-line, rgba(255,255,255,0.18)); background: var(--hwy-sand, rgba(0,0,0,0.2)); color: inherit; font-size: 13px; font-family: inherit; }
.collab-stop-actions { display: flex; gap: 2px; flex: none; }
.collab-stop-actions button { background: none; border: none; color: var(--hwy-muted, #9fb3cc); cursor: pointer; font-size: 12px; padding: 3px 5px; border-radius: 6px; }
.collab-stop-actions button:disabled { opacity: 0.3; cursor: default; }
.collab-stop-actions button:hover:not(:disabled) { background: var(--hwy-subtle, rgba(255,255,255,0.08)); color: inherit; }
.collab-empty { color: var(--hwy-muted, #9fb3cc); font-size: 13px; }
.collab-add, .collab-chatform { display: flex; gap: 6px; margin-top: 8px; }
.collab-add select, .collab-add input, .collab-chatform input { box-sizing: border-box; padding: 8px; border-radius: 8px; border: 1px solid var(--hwy-line, rgba(255,255,255,0.18)); background: var(--hwy-sand, rgba(0,0,0,0.2)); color: inherit; font-size: 13px; font-family: inherit; }
.collab-add input, .collab-chatform input { flex: 1; }
.collab-add button, .collab-chatform button { background: var(--hwy-green, #1f8a5b); color: #fff; border: none; border-radius: 8px; padding: 8px 12px; font-weight: 700; cursor: pointer; flex: none; }
.collab-chat { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.collab-msg { line-height: 1.35; }
.collab-msg strong { color: var(--hwy-green-light, #35c184); }

/* ── Fuel quick-edit popup (from the "fuel fills" overview tile) ──────── */
.fq-overlay { position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; background: rgba(4,10,20,0.55); padding: 16px; }
.fq-modal { width: min(440px, 96vw); max-height: 92vh; overflow-y: auto; background: var(--hwy-card, #14202e); color: var(--hwy-ink, #eaf1f8); border: 1px solid var(--hwy-line, rgba(255,255,255,0.16)); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.45); padding: 16px 18px; }
.fq-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fq-head h2 { margin: 0; font-size: 17px; }
.fq-close { background: none; border: none; color: inherit; font-size: 18px; cursor: pointer; padding: 2px 6px; }
.fq-field { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 12px; color: var(--hwy-muted, #9fb3cc); }
.fq-field.fq-wide { margin: 10px 0; }
.fq-field input, .fq-field select { box-sizing: border-box; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--hwy-line, rgba(255,255,255,0.18)); background: var(--hwy-sand, rgba(0,0,0,0.2)); color: var(--hwy-ink, #eaf1f8); font-size: 14px; font-family: inherit; }
.fq-hint { margin: 2px 0 6px; font-size: 11.5px; color: var(--hwy-muted, #9fb3cc); line-height: 1.4; }
.fq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fq-comfort { display: flex; gap: 8px; }
.fq-comfort input { flex: 1; }
.fq-comfort select { flex: 1; }
.fq-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; }
.fq-full { background: none; border: 1px solid var(--hwy-line, rgba(255,255,255,0.2)); color: inherit; border-radius: 9px; padding: 9px 14px; font-weight: 700; cursor: pointer; }
.fq-apply { background: var(--hwy-green, #1f8a5b); color: #fff; border: none; border-radius: 9px; padding: 9px 22px; font-weight: 800; cursor: pointer; }
.fq-apply:hover { filter: brightness(1.08); }
@media (max-width: 420px) { .fq-grid { grid-template-columns: 1fr 1fr; } }

/* ── Dock rearrange (wiggle) mode ─────────────────────────────────────────── */
@keyframes dockWiggle { 0% { transform: rotate(-1.3deg); } 50% { transform: rotate(1.3deg); } 100% { transform: rotate(-1.3deg); } }
body.dock-edit .dock-tab { animation: dockWiggle 0.28s ease-in-out infinite; cursor: grab; touch-action: none; }
body.dock-edit .cockpit-dock { outline: 2px dashed color-mix(in srgb, var(--dock-highlight) 55%, transparent); outline-offset: 5px; }
.cockpit-dock.dd-over { outline-style: solid; outline-color: var(--dock-highlight); background: color-mix(in srgb, var(--dock-highlight) 18%, var(--dock-bg)); }
.dock-tab.dd-source { opacity: 0.35; animation: none; }
.dock-drag-ghost {
   position: fixed; z-index: 3200; pointer-events: none; transform: translate(-50%, -50%);
   background: var(--dock-highlight); color: #fff; border-radius: 999px; padding: 9px 16px;
   box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); opacity: 0.96; white-space: nowrap;
}
.dd-edge {
   border: none; background: color-mix(in srgb, var(--dock-highlight) 82%, #000); color: #fff;
   width: 22px; height: 22px; border-radius: 6px; cursor: pointer; font-size: 12px; line-height: 1; flex: 0 0 auto;
}
.dd-bar {
   position: fixed; left: 50%; bottom: 82px; transform: translateX(-50%); z-index: 3300;
   display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 16px; border-radius: 999px;
   background: var(--glass-strong); color: var(--hwy-ink); border: 1px solid var(--glass-border);
   box-shadow: 0 10px 34px rgba(0, 0, 0, 0.34); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.dd-hint { font-size: 12.5px; color: var(--hwy-muted); max-width: 44vw; }
.dd-btn { border: 1px solid var(--glass-border); background: var(--hwy-card); color: var(--hwy-ink); border-radius: 999px; padding: 7px 16px; font-weight: 700; font-size: 13px; cursor: pointer; }
.dd-btn.dd-done { background: var(--hwy-green); color: #fff; border-color: transparent; }
@media (max-width: 720px) { .dd-hint { display: none; } .dd-bar { bottom: 12px; } }

/* Custom DOM map markers (google.maps.OverlayView, not the deprecated
   google.maps.Marker). OverlayView positions .hwy-map-marker's top-left at the
   map point; each shape's transform then plants the right spot on that point:
   badges/rings centre on it, the flag hangs from its pole base. The container
   passes pointer events through so only the visible badge/flag is clickable. */
/* Marker structure/visual base moved to app.css (shared with mobile — the
   positioning rules being desktop-only left mobile markers in static flow,
   stacked in a line). Desktop keeps only its transition flourish. */
.hwy-map-badge {
   transition: width 0.1s ease, height 0.1s ease, border-color 0.1s ease, font-size 0.1s ease;
}

/* Free (Leaflet/OSM) visitor map — same footprint as the Google map.
   isolation: Leaflet's internal panes carry z-index up to 1000; isolating the
   host keeps them from rising above the dock/rails (the dock's ⚙ became
   unclickable in keyless e2e without this). */
#freeMap { position: absolute; inset: 0; z-index: 0; isolation: isolate; }

/* Local first-paint map impression (see desktop.html). Sits under the real
   maps (earlier sibling, same stacking level) and fades out once one loads. */
/* A gradient (NOT a background-image url() and NOT an <img>) so the map area is
   not a Largest-Contentful-Paint candidate — the LCP stays the fast hero text,
   keeping the cockpit's Lighthouse score stable. The real map paints over this
   when a trip is planned. */
#mapPreview { position: absolute; inset: 0; width: 100%; height: 100%; background: linear-gradient(160deg, color-mix(in srgb, var(--hwy-accent) 12%, var(--hwy-surface, #eef2f6)) 0%, var(--hwy-subtle, #e6ebf0) 55%, color-mix(in srgb, var(--hwy-green, #2e8b57) 10%, var(--hwy-subtle, #e6ebf0)) 100%); pointer-events: none; transition: opacity 0.5s ease; }
#mapPreview.is-dismissed { opacity: 0; }
#freeMap.free-map-dark .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9) saturate(0.7); }
.free-map-emoji { font-size: 22px; line-height: 30px; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,0.5); background: none; border: none; }
.free-map-gas-stop { font: 800 13px/22px system-ui, -apple-system, sans-serif; text-align: center; color: #fff; background: #147a3c; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 5px rgba(0,0,0,0.45); }
.leaflet-container { background: var(--hwy-map-bg, #0e141d); font: inherit; }

/* Don't-miss filters + stop-priority ratings. */
.poi-filterbar { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 12px; padding: 10px 12px; border: 1px solid var(--hwy-line, rgba(255,255,255,0.14)); border-radius: 12px; background: var(--hwy-subtle, rgba(255,255,255,0.04)); }
.poi-filter-types { display: flex; flex-wrap: wrap; gap: 6px; }
.poi-filter-chip { border: 1px solid var(--hwy-line, rgba(255,255,255,0.2)); background: none; color: var(--hwy-muted, #9ab); border-radius: 999px; padding: 4px 10px; font-size: 12px; cursor: pointer; opacity: 0.55; }
.poi-filter-chip.is-on { opacity: 1; color: var(--hwy-ink, #eaf1f8); border-color: var(--hwy-accent, #7fd4a8); background: color-mix(in srgb, var(--hwy-accent, #7fd4a8) 14%, transparent); }
.poi-filter-selects { display: flex; flex-wrap: wrap; gap: 10px; }
.poi-filter-select { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--hwy-muted, #9ab); }
.poi-filter-select select { padding: 4px 6px; border-radius: 8px; border: 1px solid var(--hwy-line, rgba(255,255,255,0.2)); background: var(--hwy-sand, rgba(0,0,0,0.25)); color: var(--hwy-ink, #eaf1f8); font-size: 12px; }
.poi-attraction.is-in-plan { border-left: 3px solid var(--hwy-accent, #7fd4a8); }
.poi-attraction.is-must { border-left: 3px solid #e0563a; }
.poi-attraction .poi-interest { margin-top: 6px; }


/* The feedback fab was covering the dock's customize gear at laptop widths —
   on the cockpit it floats above the dock row instead. */
.cockpit .hh-fb-fab { bottom: 112px; }

/* Dock position menu: click the dock background (without dragging) for arrow
   buttons + reset; the dock is also focusable, so plain arrow keys move it. */
.dock-pos-menu {
   position: fixed; z-index: 4600; display: flex; gap: 6px; padding: 8px;
   background: var(--hwy-card, #fff); color: var(--hwy-ink, #1b1b1b);
   border: 1px solid var(--hwy-line, rgba(0,0,0,0.15)); border-radius: 10px;
   box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.dock-pos-btn {
   min-width: 36px; padding: 7px 10px; border-radius: 8px; cursor: pointer;
   border: 1px solid var(--hwy-line, #ccc); background: var(--hwy-subtle, #f2f2f2);
   color: var(--hwy-ink, #1b1b1b); font-size: 13px; font-weight: 700;
}
.dock-pos-btn:hover { border-color: var(--hwy-accent, #0b3d2e); }
.dock-pos-reset { white-space: nowrap; }
.cockpit-dock:focus-visible { outline: 3px solid #f4b740; outline-offset: 2px; }

/* Drawer frame controls: ◀ ▲ ▼ ▶ ↺ in the header — move + squish the panel. */
.drawer-frame-controls { display: inline-flex; gap: 4px; margin-left: 10px; vertical-align: middle; }
.drawer-frame-btn {
   min-width: 26px; padding: 3px 6px; border-radius: 7px; cursor: pointer;
   border: 1px solid var(--hwy-line, #ccc); background: var(--hwy-card, #fff);
   color: var(--hwy-ink, #1b1b1b); font-size: 11px; font-weight: 700;
}
.drawer-frame-btn:hover { border-color: var(--hwy-accent, #0b3d2e); }
.cockpit-drawer.drawer-framed { animation: none; border-radius: 14px; border: 1px solid var(--glass-border); }
.cockpit-drawer:focus-visible { outline: 3px solid #f4b740; outline-offset: -3px; }