/* Alternate looks, selectable in Settings. Each look re-skins the shared --hwy-*
   tokens (with a LIGHT and a DARK palette), swaps the font + shape language, gives
   the nav/dock its own layout + entrance animation, and restyles the icons. The
   map itself also changes per look (see mapView MAP_STYLES). Applied via
   <html data-theme="look" data-mode="light|dark">. All kept ≥ AA contrast. */

/* ── Self-hosted vector nav/dock icons (mask = currentColor silhouette) ──────
   Tree-shaken: only the eight glyphs the nav uses, inline, zero extra requests. */
.ficon {
   display: inline-block;
   width: 1.05em;
   height: 1.05em;
   vertical-align: -0.16em;
   margin-right: 0.35em;
   background-color: currentColor;
   -webkit-mask: var(--ico) no-repeat center / contain;
   mask: var(--ico) no-repeat center / contain;
   flex: 0 0 auto;
}
.ficon[data-ico="stops"]    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s6-5.2 6-10a6 6 0 1 0-12 0c0 4.8 6 10 6 10z'/%3E%3Ccircle cx='12' cy='11' r='2.2'/%3E%3C/svg%3E"); }
.ficon[data-ico="weather"]  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='9' r='2.5'/%3E%3Cpath d='M17 19H9a4 4 0 0 1-.5-8 5 5 0 0 1 9.5 1.5A3.5 3.5 0 0 1 17 19z'/%3E%3C/svg%3E"); }
.ficon[data-ico="driving"]  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2.4'/%3E%3Cpath d='M4.6 9.5h14.8M12 14.4v5M6.5 17.5l2.8-2.8M17.5 17.5l-2.8-2.8'/%3E%3C/svg%3E"); }
.ficon[data-ico="dontmiss"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.5 6.3 6.5.3-5 4.2L17.6 21 12 17.3 6.4 21 8 14.1 3 9.9l6.5-.3z'/%3E%3C/svg%3E"); }
.ficon[data-ico="gas"]      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v17M3 21h10M4 10h8'/%3E%3Cpath d='M12 7l3.5 3.5V17a1.75 1.75 0 0 0 3.5 0V9l-3-3'/%3E%3C/svg%3E"); }
.ficon[data-ico="ahead"]    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E"); }
.ficon[data-ico="radio"]    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='2.4'/%3E%3Cpath d='M8.5 9.5a5 5 0 0 1 7 0M6 7a8.5 8.5 0 0 1 12 0M12 15.4V20'/%3E%3C/svg%3E"); }
.ficon[data-ico="games"]    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Ccircle cx='9' cy='9' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='15' cy='15' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='15' cy='9' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='9' cy='15' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }

/* ══════════════════════════════ 1. KID ══════════════════════════════════════
   Playful arcade: rounded, oversized, bright, confetti, bouncy dock. */
:root[data-theme="kid"] {
   --hwy-green: #6d3bd6; --hwy-green-light: #8a5cf0; --hwy-accent: #5a2fb8;
   --hwy-sand: #fdf3e3; --hwy-ink: #22243b; --hwy-muted: #4a4a6a;
   --hwy-card: #ffffff; --hwy-line: #f0d9c0; --hwy-warn-bg: #fff3d6; --hwy-warn-ink: #8a5300;
   --hwy-error: #b3143c; --hwy-header-bg: #6d3bd6; --hwy-header-ink: #ffffff; --hwy-nav-bg: rgba(253, 243, 227, 0.97);
   --hwy-map-bg: #eaf7ff; --hwy-subtle: #f3e9ff; --hwy-loud-bg: #fff0f6;
}
:root[data-theme="kid"][data-mode="dark"] {
   --hwy-green: #7c3aed; --hwy-green-light: #9a6cff; --hwy-accent: #cdb4ff;
   --hwy-sand: #17122b; --hwy-ink: #f2ecff; --hwy-muted: #b9a9e0;
   --hwy-card: #241a44; --hwy-line: #3a2d63; --hwy-warn-bg: #3a2e15; --hwy-warn-ink: #ffd84d;
   --hwy-error: #ff8fb0; --hwy-header-bg: #3a1d6e; --hwy-header-ink: #ffffff; --hwy-nav-bg: rgba(23, 18, 43, 0.97);
   --hwy-map-bg: #1a1330; --hwy-subtle: #2c2154; --hwy-loud-bg: #33203f;
}
[data-theme="kid"] body, [data-theme="kid"] .cockpit,
[data-theme="kid"] input, [data-theme="kid"] button, [data-theme="kid"] select {
   font-family: "Comic Sans MS", "Chalkboard SE", "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
}
[data-theme="kid"] body {
   background-image:
      radial-gradient(circle at 12% 18%, color-mix(in srgb, #ffd43b 60%, transparent) 0 11px, transparent 12px),
      radial-gradient(circle at 84% 10%, color-mix(in srgb, #4dabf7 60%, transparent) 0 11px, transparent 12px),
      radial-gradient(circle at 70% 82%, color-mix(in srgb, #ff8787 60%, transparent) 0 10px, transparent 11px),
      radial-gradient(circle at 24% 90%, color-mix(in srgb, #69db7c 60%, transparent) 0 10px, transparent 11px);
   background-attachment: fixed;
}
[data-theme="kid"] h1, [data-theme="kid"] h2, [data-theme="kid"] .section-heading,
[data-theme="kid"] .rail-heading, [data-theme="kid"] .cockpit-title {
   letter-spacing: 0.3px; text-shadow: 1px 2px 0 color-mix(in srgb, var(--hwy-green) 22%, transparent);
}
[data-theme="kid"] button, [data-theme="kid"] .plan-button, [data-theme="kid"] .chip,
[data-theme="kid"] .nav-chip, [data-theme="kid"] .dock-tab, [data-theme="kid"] input,
[data-theme="kid"] select, [data-theme="kid"] .stat-tile, [data-theme="kid"] .weather-card,
[data-theme="kid"] .cockpit-rail, [data-theme="kid"] .gas-stop, [data-theme="kid"] .poi-event { border-radius: 22px !important; }
[data-theme="kid"] .plan-button, [data-theme="kid"] .cockpit-plan, [data-theme="kid"] .cockpit-hero-cta {
   border: 3px solid #ffffff; box-shadow: 0 5px 0 color-mix(in srgb, var(--hwy-green) 55%, #000); font-weight: 800;
}
[data-theme="kid"] .stat-icon, [data-theme="kid"] .wc-emoji, [data-theme="kid"] .game-emoji { font-size: 1.4em; }
/* Kid icons: big, in a bouncy accent badge. */
[data-theme="kid"] .ficon {
   width: 1.55em; height: 1.55em; margin: 0 auto 2px; vertical-align: middle;
   padding: 6px; border-radius: 50%; background-color: var(--hwy-green);
   -webkit-mask: none; mask: none;
}
[data-theme="kid"] .ficon::before {
   content: ""; display: block; width: 100%; height: 100%;
   background-color: #fff; -webkit-mask: var(--ico) no-repeat center / contain; mask: var(--ico) no-repeat center / contain;
}
/* Kid nav/dock: chunky column icons + label, bouncy. */
[data-theme="kid"] .nav-chip, [data-theme="kid"] .dock-tab {
   display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
   font-weight: 800; padding: 8px 14px;
}
[data-theme="kid"] .dock-tab.is-active, [data-theme="kid"] .nav-chip.is-active { transform: scale(1.08) rotate(-2deg); }
[data-theme="kid"] .cockpit-dock { animation: kidDockPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes kidDockPop { from { transform: translateY(100%) scale(0.9); } to { transform: none; } }

/* ══════════════════════════════ 2. SCI-FI ═══════════════════════════════════
   Neon HUD: monospace, uppercase glow, angular clipped panels, corner brackets. */
:root[data-theme="scifi"] {
   --hwy-green: #7c3aed; --hwy-green-light: #6d28d9; --hwy-accent: #0a5f6b;
   --hwy-sand: #e7f6fb; --hwy-ink: #062b33; --hwy-muted: #2b6773;
   --hwy-card: #f4fcff; --hwy-line: #9fd6e2; --hwy-warn-bg: #fff3d6; --hwy-warn-ink: #7a4e00;
   --hwy-error: #b3143c; --hwy-header-bg: #0a2530; --hwy-header-ink: #ffffff; --hwy-nav-bg: rgba(231, 246, 251, 0.94);
   --hwy-map-bg: #e6f7fb; --hwy-subtle: #d6eef4; --hwy-loud-bg: #dff3f8;
}
:root[data-theme="scifi"][data-mode="dark"] {
   --hwy-green: #7c3aed; --hwy-green-light: #a970ff; --hwy-accent: #34e7ff;
   --hwy-sand: #060a14; --hwy-ink: #d7f0ff; --hwy-muted: #8fb3d6;
   --hwy-card: #0c1526; --hwy-line: #1f3a5c; --hwy-warn-bg: #2a2410; --hwy-warn-ink: #ffd84d;
   --hwy-error: #ff6b8a; --hwy-header-bg: #08101f; --hwy-header-ink: #ffffff; --hwy-nav-bg: rgba(6, 10, 20, 0.94);
   --hwy-map-bg: #0a0f1a; --hwy-subtle: #10203a; --hwy-loud-bg: #17233f;
}
[data-theme="scifi"] body, [data-theme="scifi"] .cockpit,
[data-theme="scifi"] input, [data-theme="scifi"] button, [data-theme="scifi"] select {
   font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;
}
[data-theme="scifi"] input, [data-theme="scifi"] textarea, [data-theme="scifi"] select {
   background-color: var(--hwy-card); color: var(--hwy-ink);
}
[data-theme="scifi"] body {
   background-image:
      linear-gradient(color-mix(in srgb, var(--hwy-accent) 9%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--hwy-accent) 9%, transparent) 1px, transparent 1px);
   background-size: 40px 40px; background-attachment: fixed;
}
[data-theme="scifi"] h1, [data-theme="scifi"] h2, [data-theme="scifi"] .section-heading,
[data-theme="scifi"] .rail-heading, [data-theme="scifi"] .cockpit-title {
   text-transform: uppercase; letter-spacing: 2px;
}
/* Neon colour only on content headings (on card/rail bg) — headings on the dark
   header keep their own colour so they never go dark-on-dark. */
[data-theme="scifi"] .section-heading, [data-theme="scifi"] .rail-heading {
   color: var(--hwy-accent);
   text-shadow: 0 0 8px color-mix(in srgb, var(--hwy-accent) 45%, transparent);
}
[data-theme="scifi"] button, [data-theme="scifi"] .plan-button, [data-theme="scifi"] .chip,
[data-theme="scifi"] .nav-chip, [data-theme="scifi"] .dock-tab, [data-theme="scifi"] input,
[data-theme="scifi"] select, [data-theme="scifi"] .stat-tile, [data-theme="scifi"] .weather-card,
[data-theme="scifi"] .gas-stop, [data-theme="scifi"] .poi-event { border-radius: 2px !important; }
[data-theme="scifi"] .card, [data-theme="scifi"] .stat-tile, [data-theme="scifi"] .weather-card,
[data-theme="scifi"] .cockpit-rail, [data-theme="scifi"] .feature-nav, [data-theme="scifi"] .cockpit-dock {
   border: 1px solid color-mix(in srgb, var(--hwy-accent) 45%, var(--hwy-line));
   box-shadow: 0 0 14px color-mix(in srgb, var(--hwy-accent) 14%, transparent);
}
/* Angular clipped rails + corner-bracket dock. */
[data-theme="scifi"] .cockpit-rail { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
[data-theme="scifi"] .ficon { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--hwy-accent) 60%, transparent)); }
[data-theme="scifi"] .nav-chip, [data-theme="scifi"] .dock-tab { text-transform: uppercase; letter-spacing: 1px; }
[data-theme="scifi"] .cockpit-dock { animation: scifiDockSlide 0.4s ease both; }
@keyframes scifiDockSlide { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
[data-theme="scifi"] .plan-button, [data-theme="scifi"] .cockpit-plan,
[data-theme="scifi"] .nav-chip.is-active, [data-theme="scifi"] .dock-tab.is-active {
   box-shadow: 0 0 12px color-mix(in srgb, var(--hwy-green-light) 60%, transparent);
}

/* ══════════════════════════════ 3. MAC ══════════════════════════════════════
   Clean Apple: SF font, graphite/vibrancy chrome, blue accent, traffic lights. */
:root[data-theme="mac"] {
   --hwy-green: #0066cc; --hwy-green-light: #0a84ff; --hwy-accent: #0058b3;
   --hwy-sand: #f5f5f7; --hwy-ink: #1d1d1f; --hwy-muted: #515154;
   --hwy-card: #ffffff; --hwy-line: #d2d2d7; --hwy-warn-bg: #fff3d6; --hwy-warn-ink: #7a4e00;
   --hwy-error: #c1121f; --hwy-header-bg: #2b2b2e; --hwy-header-ink: #ffffff; --hwy-nav-bg: rgba(245, 245, 247, 0.8);
   --hwy-map-bg: #e6e6ea; --hwy-subtle: #ececf0; --hwy-loud-bg: #fff6ec;
}
:root[data-theme="mac"][data-mode="dark"] {
   --hwy-green: #0060c0; --hwy-green-light: #2e8fff; --hwy-accent: #6cb8ff;
   --hwy-sand: #1c1c1e; --hwy-ink: #f5f5f7; --hwy-muted: #b4b4b9;
   --hwy-card: #2c2c2e; --hwy-line: #3a3a3c; --hwy-warn-bg: #3a2e15; --hwy-warn-ink: #ffd84d;
   --hwy-error: #fd8983; --hwy-header-bg: #0f0f10; --hwy-header-ink: #ffffff; --hwy-nav-bg: rgba(28, 28, 30, 0.8);
   --hwy-map-bg: #2c2c2e; --hwy-subtle: #3a3a3c; --hwy-loud-bg: #3a2e1c;
}
[data-theme="mac"] body, [data-theme="mac"] .cockpit,
[data-theme="mac"] input, [data-theme="mac"] button, [data-theme="mac"] select {
   font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
}
[data-theme="mac"] button, [data-theme="mac"] .plan-button, [data-theme="mac"] .chip,
[data-theme="mac"] .nav-chip, [data-theme="mac"] .dock-tab, [data-theme="mac"] input,
[data-theme="mac"] select, [data-theme="mac"] .stat-tile, [data-theme="mac"] .weather-card,
[data-theme="mac"] .gas-stop, [data-theme="mac"] .poi-event { border-radius: 10px !important; }
[data-theme="mac"] .ficon { width: 0.95em; height: 0.95em; opacity: 0.9; }
[data-theme="mac"] .plan-button, [data-theme="mac"] .cockpit-plan, [data-theme="mac"] .cockpit-hero-cta {
   background: linear-gradient(180deg, color-mix(in srgb, var(--hwy-green-light) 40%, var(--hwy-green)), var(--hwy-green));
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); font-weight: 600;
}
[data-theme="mac"] .card, [data-theme="mac"] .stat-tile, [data-theme="mac"] .weather-card {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 6px 20px rgba(0, 0, 0, 0.05);
}
[data-theme="mac"] h1, [data-theme="mac"] h2, [data-theme="mac"] .section-heading, [data-theme="mac"] .cockpit-title {
   letter-spacing: -0.02em; font-weight: 700;
}
/* Mac window "traffic lights" on the desktop bar (brand shifts right to fit). */
[data-theme="mac"] .cockpit-bar { position: relative; }
[data-theme="mac"] .cockpit-bar::before {
   content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 44px; height: 12px;
   background:
      radial-gradient(circle at 6px 6px, #ff5f57 5px, transparent 6px),
      radial-gradient(circle at 22px 6px, #febc2e 5px, transparent 6px),
      radial-gradient(circle at 38px 6px, #28c840 5px, transparent 6px);
   pointer-events: none; z-index: 32;
}
[data-theme="mac"] .cockpit-brand { margin-left: 52px; }
[data-theme="mac"] .cockpit-dock { animation: macDockFade 0.3s ease both; }
@keyframes macDockFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Reduced-motion: drop the entrance animations + wiggle. */
@media (prefers-reduced-motion: reduce) {
   [data-theme] .cockpit-dock { animation: none; }
   [data-theme="kid"] .dock-tab.is-active, [data-theme="kid"] .nav-chip.is-active { transform: none; }
}

/* ── Default (Lucide) game + stat-tile icons ── */
.ficon[data-ico="game-bingo"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%209h18M3%2015h18M9%203v18m6-18v18%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.ficon[data-ico="game-scavenger"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M14.106%205.553a2%202%200%200%200%201.788%200l3.659-1.83A1%201%200%200%201%2021%204.619v12.764a1%201%200%200%201-.553.894l-4.553%202.277a2%202%200%200%201-1.788%200l-4.212-2.106a2%202%200%200%200-1.788%200l-3.659%201.83A1%201%200%200%201%203%2019.381V6.618a1%201%200%200%201%20.553-.894l4.553-2.277a2%202%200%200%201%201.788%200zm.894.211v15M9%203.236v15%22%2F%3E%3C%2Fsvg%3E"); }
.ficon[data-ico="game-ispy"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M2.062%2012.348a1%201%200%200%201%200-.696a10.75%2010.75%200%200%201%2019.876%200a1%201%200%200%201%200%20.696a10.75%2010.75%200%200%201-19.876%200%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.ficon[data-ico="game-cows"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M104%20192a8%208%200%200%201-8%208H80a8%208%200%200%201%200-16h16a8%208%200%200%201%208%208m72-8h-16a8%208%200%200%200%200%2016h16a8%208%200%200%200%200-16m-76-48a12%2012%200%201%200-12-12a12%2012%200%200%200%2012%2012m56%200a12%2012%200%201%200-12-12a12%2012%200%200%200%2012%2012m88.39-13.88A16%2016%200%200%201%20232%20128h-32v32a40%2040%200%200%201-24%2072H80a40%2040%200%200%201-24-72v-32H24a16%2016%200%200%201-15.69-19a56.13%2056.13%200%200%201%2054.91-45h1.64A55.83%2055.83%200%200%201%2048%2024a8%208%200%200%201%2016%200a40%2040%200%200%200%2040%2040h48a40%2040%200%200%200%2040-40a8%208%200%200%201%2016%200a55.83%2055.83%200%200%201-16.86%2040h1.64a56.13%2056.13%200%200%201%2054.91%2045a15.82%2015.82%200%200%201-3.3%2013.12M72%20152.8a40.6%2040.6%200%200%201%208-.8h96a40.6%2040.6%200%200%201%208%20.8V104a24%2024%200%200%200-24-24H96a24%2024%200%200%200-24%2024ZM56%20112v-8a39.8%2039.8%200%200%201%208-24h-.8A40.09%2040.09%200%200%200%2024%20112Zm144%2080a24%2024%200%200%200-24-24H80a24%2024%200%200%200%200%2048h96a24%2024%200%200%200%2024-24m32-80a40.08%2040.08%200%200%200-39.2-32h-.8a39.8%2039.8%200%200%201%208%2024v8Z%22%2F%3E%3C%2Fsvg%3E"); }
.ficon[data-ico="game-plates"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22m21%208l-2%202l-1.5-3.7A2%202%200%200%200%2015.646%205H8.4a2%202%200%200%200-1.903%201.257L5%2010L3%208m4%206h.01M17%2014h.01%22%2F%3E%3Crect%20width%3D%2218%22%20height%3D%228%22%20x%3D%223%22%20y%3D%2210%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M5%2018v2m14-2v2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.ficon[data-ico="game-alphabet"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M12%204v16M4%207V5a1%201%200%200%201%201-1h14a1%201%200%200%201%201%201v2M9%2020h6%22%2F%3E%3C%2Fsvg%3E"); }
.ficon[data-ico="game-buggy"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M12%2020v-9m2-4a4%204%200%200%201%204%204v3a6%206%200%200%201-12%200v-3a4%204%200%200%201%204-4zm.12-3.12L16%202%22%2F%3E%3Cpath%20d%3D%22M21%2021a4%204%200%200%200-3.81-4M21%205a4%204%200%200%201-3.55%203.97M22%2013h-4M3%2021a4%204%200%200%201%203.81-4M3%205a4%204%200%200%200%203.55%203.97M6%2013H2M8%202l1.88%201.88M9%207.13V6a3%203%200%201%201%206%200v1.13%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.ficon[data-ico="game-twentyq"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203m.08%204h.01%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.ficon[data-ico="game-wyr"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M16%203h5v5M8%203H3v5%22%2F%3E%3Cpath%20d%3D%22M12%2022v-8.3a4%204%200%200%200-1.172-2.872L3%203m12%206l6-6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.ficon[data-ico="game-quiet"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M11%204.702a.705.705%200%200%200-1.203-.498L6.413%207.587A1.4%201.4%200%200%201%205.416%208H3a1%201%200%200%200-1%201v6a1%201%200%200%200%201%201h2.416a1.4%201.4%200%200%201%20.997.413l3.383%203.384A.705.705%200%200%200%2011%2019.298zM22%209l-6%206m0-6l6%206%22%2F%3E%3C%2Fsvg%3E"); }
.ficon[data-ico="distance"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2219%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M9%2019h8.5a3.5%203.5%200%200%200%200-7h-11a3.5%203.5%200%200%201%200-7H15%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%225%22%20r%3D%223%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.ficon[data-ico="time"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M10%202h4m-2%2012l3-3%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2214%22%20r%3D%228%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.ficon[data-ico="arrive"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M4%2022V4a1%201%200%200%201%20.4-.8A6%206%200%200%201%208%202c3%200%205%202%207.333%202q2%200%203.067-.8A1%201%200%200%201%2020%204v10a1%201%200%200%201-.4.8A6%206%200%200%201%2016%2016c-3%200-5-2-8-2a6%206%200%200%200-4%201.528%22%2F%3E%3C%2Fsvg%3E"); }
.ficon[data-ico="temp"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M14%204v10.54a4%204%200%201%201-4%200V4a2%202%200%200%201%204%200%22%2F%3E%3C%2Fsvg%3E"); }
/* ══════════════════════════════ GAME BOY (DMG-01) ═══════════════════════════
   Retro 8-bit handheld. LIGHT = the classic 4-shade pea-green LCD; DARK = the
   "Play It Loud" black shell with a green-phosphor readout. Monospace, hard
   pixel edges, dot-matrix scanlines, offset shadows. Icons = pixel art. */
:root[data-theme="gameboy"] {
   --hwy-green: #306230; --hwy-green-light: #8bac0f; --hwy-accent: #0f380f;
   --hwy-sand: #8bac0f; --hwy-ink: #0f380f; --hwy-muted: #154015;
   --hwy-card: #9bbc0f; --hwy-line: #0f380f; --hwy-warn-bg: #8bac0f; --hwy-warn-ink: #0f380f;
   --hwy-error: #0f380f; --hwy-header-bg: #0f380f; --hwy-header-ink: #ffffff; --hwy-nav-bg: #8bac0f;
   --hwy-map-bg: #8bac0f; --hwy-subtle: #9bbc0f; --hwy-loud-bg: #9bbc0f;
}
:root[data-theme="gameboy"][data-mode="dark"] {
   --hwy-green: #5f750a; --hwy-green-light: #9bbc0f; --hwy-accent: #9bbc0f;
   --hwy-sand: #0b0f0b; --hwy-ink: #9bbc0f; --hwy-muted: #8bac0f;
   --hwy-card: #142014; --hwy-line: #306230; --hwy-warn-bg: #1a241a; --hwy-warn-ink: #9bbc0f;
   --hwy-error: #8bac0f; --hwy-header-bg: #0f380f; --hwy-header-ink: #ffffff; --hwy-nav-bg: #0b0f0b;
   --hwy-map-bg: #0f380f; --hwy-subtle: #142014; --hwy-loud-bg: #1a241a;
}
[data-theme="gameboy"] body, [data-theme="gameboy"] .cockpit,
[data-theme="gameboy"] input, [data-theme="gameboy"] button, [data-theme="gameboy"] select {
   font-family: ui-monospace, "Courier New", "Lucida Console", monospace;
   letter-spacing: 0.02em;
}
[data-theme="gameboy"] body {
   background-image:
      repeating-linear-gradient(0deg, transparent 0 2px, color-mix(in srgb, var(--hwy-ink) 6%, transparent) 2px 3px),
      repeating-linear-gradient(90deg, transparent 0 2px, color-mix(in srgb, var(--hwy-ink) 6%, transparent) 2px 3px);
   background-attachment: fixed;
}
[data-theme="gameboy"] h1, [data-theme="gameboy"] h2, [data-theme="gameboy"] .section-heading,
[data-theme="gameboy"] .rail-heading, [data-theme="gameboy"] .cockpit-title, [data-theme="gameboy"] .app-title {
   text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700;
}
/* Every surface becomes a hard-edged pixel box: square corners, 3px ink border. */
[data-theme="gameboy"] button, [data-theme="gameboy"] .plan-button, [data-theme="gameboy"] .chip,
[data-theme="gameboy"] .nav-chip, [data-theme="gameboy"] .dock-tab, [data-theme="gameboy"] input,
[data-theme="gameboy"] select, [data-theme="gameboy"] .stat-tile, [data-theme="gameboy"] .weather-card,
[data-theme="gameboy"] .cockpit-rail, [data-theme="gameboy"] .gas-stop, [data-theme="gameboy"] .poi-event {
   border-radius: 0 !important; border: 3px solid var(--hwy-ink) !important;
}
[data-theme="gameboy"] .plan-button, [data-theme="gameboy"] .cockpit-plan, [data-theme="gameboy"] .cockpit-hero-cta,
[data-theme="gameboy"] .nav-chip.is-active, [data-theme="gameboy"] .dock-tab.is-active {
   box-shadow: 4px 4px 0 var(--hwy-ink); font-weight: 700;
}
[data-theme="gameboy"] .feature-nav { border-bottom: 3px solid var(--hwy-ink); }
[data-theme="gameboy"] .ficon { border-radius: 0; }
/* Crisp, non-antialiased map to complete the dot-matrix look. */
[data-theme="gameboy"] #mapContainer canvas, [data-theme="gameboy"] #routeFallbackCanvas { image-rendering: pixelated; }

/* ══ nokia ══ */
:root[data-theme="nokia"] {
   --hwy-green: #33402a;
   --hwy-green-light: #4d5d3d;
   --hwy-accent: #4b593f;
   --hwy-sand: #c7d0b8;
   --hwy-ink: #20241a;
   --hwy-muted: #48533a;
   --hwy-card: #d2dac3;
   --hwy-line: #8a9576;
   --hwy-warn-bg: #b7c2a2;
   --hwy-warn-ink: #20241a;
   --hwy-error: #181c12;
   --hwy-header-bg: #20241a; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #b9c2a7;
   --hwy-map-bg: #ccd5bd;
   --hwy-subtle: #dbe1cd;
   --hwy-loud-bg: #8b927f;
}
:root[data-theme="nokia"][data-mode="dark"] {
   --hwy-green: #647852;
   --hwy-green-light: #b0c898;
   --hwy-accent: #c8d9b0;
   --hwy-sand: #050704;
   --hwy-ink: #a9ba95;
   --hwy-muted: #7c8d68;
   --hwy-card: #10140c;
   --hwy-line: #37412c;
   --hwy-warn-bg: #262c19;
   --hwy-warn-ink: #dbe6c4;
   --hwy-error: #e6efd4;
   --hwy-header-bg: #000000; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #0a0d07;
   --hwy-map-bg: #070a05;
   --hwy-subtle: #141910;
   --hwy-loud-bg: #1c2314;
}
[data-theme="nokia"] body, [data-theme="nokia"] .cockpit,
[data-theme="nokia"] input, [data-theme="nokia"] button, [data-theme="nokia"] select {
   font-family: "Arial Narrow", "Haettenschweiler", Impact, Arial, sans-serif;
   font-stretch: condensed; font-weight: 800; letter-spacing: 0.01em;
}
[data-theme="nokia"] body {
   background-image:
      repeating-linear-gradient(0deg, color-mix(in srgb, var(--hwy-ink) 9%, transparent) 0 1px, transparent 1px 5px),
      repeating-linear-gradient(90deg, color-mix(in srgb, var(--hwy-ink) 9%, transparent) 0 1px, transparent 1px 5px);
   background-attachment: fixed;
}
[data-theme="nokia"] h1, [data-theme="nokia"] h2, [data-theme="nokia"] .section-heading,
[data-theme="nokia"] .cockpit-title, [data-theme="nokia"] .app-title {
   text-transform: uppercase; font-weight: 900; letter-spacing: 0.07em; font-stretch: condensed;
}
[data-theme="nokia"] .plan-button, [data-theme="nokia"] .chip, [data-theme="nokia"] .nav-chip,
[data-theme="nokia"] .dock-tab, [data-theme="nokia"] input, [data-theme="nokia"] select,
[data-theme="nokia"] .stat-tile, [data-theme="nokia"] .weather-card, [data-theme="nokia"] .cockpit-rail,
[data-theme="nokia"] .gas-stop, [data-theme="nokia"] .poi-event {
   border-radius: 16px !important;
   border: 3px solid var(--hwy-ink) !important;
   box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--hwy-ink) 30%, transparent);
   font-weight: 800;
}
[data-theme="nokia"] .plan-button, [data-theme="nokia"] .cockpit-plan, [data-theme="nokia"] .cockpit-hero-cta,
[data-theme="nokia"] .nav-chip.is-active, [data-theme="nokia"] .dock-tab.is-active {
   background: var(--hwy-green) !important; color: #fff !important;
   box-shadow: 0 4px 0 var(--hwy-ink) !important;
}
/* Layout twist: the feature nav becomes a Nokia keypad grid of chunky keys. */
[data-theme="nokia"] .feature-nav {
   display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 5px;
   background: var(--hwy-nav-bg); padding: 8px;
   border-radius: 18px !important; border: 3px solid var(--hwy-ink) !important;
}
[data-theme="nokia"] .feature-nav .nav-chip {
   aspect-ratio: 1.3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
[data-theme="nokia"] .cockpit-dock { border-radius: 20px !important; border: 3px solid var(--hwy-ink) !important; }
[data-theme="nokia"] .ficon { border-radius: 999px; }
[data-theme="nokia"] #mapContainer { border: 3px solid var(--hwy-ink) !important; border-radius: 14px !important; }

/* ══ lowpoly ══ */
:root[data-theme="lowpoly"] {
   --hwy-green: #0F7A72;
   --hwy-green-light: #4FB8AE;
   --hwy-accent: #a24d3e;
   --hwy-sand: #F4F1EA;
   --hwy-ink: #16202C;
   --hwy-muted: #5A6472;
   --hwy-card: #FFFFFF;
   --hwy-line: #D8D3C7;
   --hwy-warn-bg: #FFE9B0;
   --hwy-warn-ink: #7A4B00;
   --hwy-error: #ab3b2f;
   --hwy-header-bg: #16202C; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #1B2740;
   --hwy-map-bg: #DCEDEA;
   --hwy-subtle: #E9E5DA;
   --hwy-loud-bg: #FFDCD0;
}
:root[data-theme="lowpoly"][data-mode="dark"] {
   --hwy-green: #1d7a6f;
   --hwy-green-light: #6FD6C7;
   --hwy-accent: #FF7A5C;
   --hwy-sand: #12192A;
   --hwy-ink: #F0EDE6;
   --hwy-muted: #9AA7B8;
   --hwy-card: #1B2440;
   --hwy-line: #2E3A55;
   --hwy-warn-bg: #4A3A12;
   --hwy-warn-ink: #FFD57A;
   --hwy-error: #FF6B5A;
   --hwy-header-bg: #0B111E; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #141C30;
   --hwy-map-bg: #16232E;
   --hwy-subtle: #202B45;
   --hwy-loud-bg: #20343A;
}
[data-theme="lowpoly"] body{
  background-color:var(--hwy-sand);
  background-image:
    linear-gradient(135deg,var(--hwy-subtle) 25%,transparent 25.5%),
    linear-gradient(225deg,var(--hwy-subtle) 25%,transparent 25.5%),
    linear-gradient(45deg,var(--hwy-green-light) 15%,transparent 15.5%),
    linear-gradient(315deg,var(--hwy-accent) 10%,transparent 10.5%);
  background-size:160px 160px,160px 160px,240px 240px,240px 240px;
  background-position:0 0,0 0,80px 40px,80px 40px;
  background-attachment:fixed;
  color:var(--hwy-ink);
  font-family:Futura,"Century Gothic","Avenir Next",Avenir,sans-serif;
  letter-spacing:.01em;
}
[data-theme="lowpoly"] h1,[data-theme="lowpoly"] h2,[data-theme="lowpoly"] .section-heading,[data-theme="lowpoly"] .app-title,[data-theme="lowpoly"] .cockpit-title{
  font-family:Futura,"Century Gothic","Avenir Next",Avenir,sans-serif;
  text-transform:uppercase;font-weight:800;letter-spacing:.07em;color:var(--hwy-accent);
}
[data-theme="lowpoly"] .section-heading{
  padding-left:16px;border-left:4px solid var(--hwy-accent)!important;border-radius:0!important;
}
[data-theme="lowpoly"] .stat-tile,[data-theme="lowpoly"] .weather-card,[data-theme="lowpoly"] .gas-stop,[data-theme="lowpoly"] .poi-event{
  background:var(--hwy-card);border:2px solid var(--hwy-line)!important;border-radius:0!important;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
[data-theme="lowpoly"] .plan-button{
  background:var(--hwy-green)!important;color:#fff!important;border:none!important;border-radius:0!important;
  text-transform:uppercase;font-weight:700;letter-spacing:.08em;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
[data-theme="lowpoly"] .chip:not(.is-active),[data-theme="lowpoly"] .nav-chip:not(.is-active),[data-theme="lowpoly"] .dock-tab:not(.is-active){
  background:var(--hwy-subtle);border:1px solid var(--hwy-line)!important;border-radius:0!important;
  clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px);
  text-transform:uppercase;letter-spacing:.04em;
}
[data-theme="lowpoly"] .chip.active,[data-theme="lowpoly"] .nav-chip.active,[data-theme="lowpoly"] .dock-tab.active{
  background:var(--hwy-accent)!important;color:#fff!important;
}
[data-theme="lowpoly"] input,[data-theme="lowpoly"] select{
  border:2px solid var(--hwy-line)!important;border-radius:0!important;background:var(--hwy-card);color:var(--hwy-ink);
}
[data-theme="lowpoly"] .cockpit-rail,[data-theme="lowpoly"] .cockpit-dock,[data-theme="lowpoly"] .feature-nav{
  background:var(--hwy-nav-bg);
  /* Dark navy bars even in light mode: dark island (tokens mirror the dark
     block above; color restarts inheritance from the island's ink). */
  --hwy-green:#1d7a6f;--hwy-green-light:#6FD6C7;--hwy-accent:#FF7A5C;
  --hwy-ink:#F0EDE6;--hwy-muted:#9AA7B8;--hwy-card:#1B2440;
  --hwy-line:#2E3A55;--hwy-warn-bg:#4A3A12;--hwy-warn-ink:#FFD57A;
  --hwy-error:#FF6B5A;--hwy-subtle:#202B45;--hwy-loud-bg:#20343A;
  color:var(--hwy-ink);
}
[data-theme="lowpoly"] .cockpit-rail::before,[data-theme="lowpoly"] .cockpit-dock::before,[data-theme="lowpoly"] .feature-nav::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--hwy-green) 0 33%,var(--hwy-accent) 33% 66%,var(--hwy-green-light) 66% 100%);
  clip-path:polygon(0 0,100% 0,98% 100%,2% 100%);
}
[data-theme="lowpoly"] #mapContainer{
  background:var(--hwy-map-bg);border:2px solid var(--hwy-line)!important;
}

/* ══ lineart ══ */
:root[data-theme="lineart"] {
   --hwy-green: #000000;
   --hwy-green-light: #333333;
   --hwy-accent: #111111;
   --hwy-sand: #ffffff;
   --hwy-ink: #000000;
   --hwy-muted: #4a4a4a;
   --hwy-card: #ffffff;
   --hwy-line: #000000;
   --hwy-warn-bg: #ededed;
   --hwy-warn-ink: #000000;
   --hwy-error: #b3261e;
   --hwy-header-bg: #000000; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #000000;
   --hwy-map-bg: #ffffff;
   --hwy-subtle: #f2f2f2;
   --hwy-loud-bg: #787878;
}
:root[data-theme="lineart"][data-mode="dark"] {
   --hwy-green: #767676;
   --hwy-green-light: #cccccc;
   --hwy-accent: #eeeeee;
   --hwy-sand: #000000;
   --hwy-ink: #ffffff;
   --hwy-muted: #b0b0b0;
   --hwy-card: #000000;
   --hwy-line: #ffffff;
   --hwy-warn-bg: #1a1a1a;
   --hwy-warn-ink: #ffffff;
   --hwy-error: #ff6b5e;
   --hwy-header-bg: #000000; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #000000;
   --hwy-map-bg: #000000;
   --hwy-subtle: #0d0d0d;
   --hwy-loud-bg: #767676;
}
[data-theme="lineart"] body {
  font-family: "Helvetica Neue", Arial, "Segoe UI", sans-serif;
  background: var(--hwy-sand);
  color: var(--hwy-ink);
  letter-spacing: 0.01em;
}
[data-theme="lineart"] .cockpit,
[data-theme="lineart"] .weather-card,
[data-theme="lineart"] .stat-tile,
[data-theme="lineart"] .gas-stop,
[data-theme="lineart"] .poi-event {
  background: var(--hwy-card) !important;
  border: 1px solid var(--hwy-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
[data-theme="lineart"] .cockpit-rail,
[data-theme="lineart"] .cockpit-dock,
[data-theme="lineart"] .feature-nav {
  background: var(--hwy-nav-bg) !important;
  border-top: 1px solid var(--hwy-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* Black bars even in light mode: dark island (tokens mirror the dark block
     above; color restarts inheritance from the island's ink). */
  --hwy-green: #767676; --hwy-green-light: #cccccc; --hwy-accent: #eeeeee;
  --hwy-ink: #ffffff; --hwy-muted: #b0b0b0; --hwy-card: #000000;
  --hwy-line: #ffffff; --hwy-warn-bg: #1a1a1a; --hwy-warn-ink: #ffffff;
  --hwy-error: #ff6b5e; --hwy-subtle: #0d0d0d; --hwy-loud-bg: #767676;
  color: var(--hwy-ink);
}
[data-theme="lineart"] .cockpit-title,
[data-theme="lineart"] .app-title {
  background: var(--hwy-header-bg) !important;
  color: #ffffff !important;
  border-bottom: 1px solid var(--hwy-line) !important;
  border-radius: 0 !important;
}
[data-theme="lineart"] h1,
[data-theme="lineart"] h2,
[data-theme="lineart"] .section-heading {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-bottom: 1px solid var(--hwy-line);
  padding-bottom: 0.35em;
}
[data-theme="lineart"] .plan-button {
  background: transparent !important;
  color: var(--hwy-ink) !important;
  border: 1px solid var(--hwy-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: background 0.15s, color 0.15s;
}
[data-theme="lineart"] .plan-button:hover {
  background: var(--hwy-ink) !important;
  color: var(--hwy-sand) !important;
}
[data-theme="lineart"] .chip,
[data-theme="lineart"] .nav-chip,
[data-theme="lineart"] .dock-tab {
  background: transparent !important;
  border: 1px solid var(--hwy-line) !important;
  border-radius: 0 !important;
  color: var(--hwy-ink) !important;
}
[data-theme="lineart"] .dock-tab[aria-selected="true"],
[data-theme="lineart"] .nav-chip.active {
  background: var(--hwy-ink) !important;
  color: var(--hwy-sand) !important;
}
[data-theme="lineart"] input,
[data-theme="lineart"] select {
  background: var(--hwy-card) !important;
  border: 1px solid var(--hwy-line) !important;
  border-radius: 0 !important;
  color: var(--hwy-ink) !important;
}
[data-theme="lineart"] #mapContainer {
  border: 1px solid var(--hwy-line) !important;
  border-radius: 0 !important;
  filter: grayscale(1) contrast(1.05);
}

/* ══ dashboard ══ */
:root[data-theme="dashboard"] {
   --hwy-green: #4f46e5;
   --hwy-green-light: #818cf8;
   --hwy-accent: #136f9e;
   --hwy-sand: #eef0f7;
   --hwy-ink: #1a1d2e;
   --hwy-muted: #5b6a80;
   --hwy-card: #ffffff;
   --hwy-line: #e2e5ee;
   --hwy-warn-bg: #fef3c7;
   --hwy-warn-ink: #92400e;
   --hwy-error: #c52527;
   --hwy-header-bg: #1e1b4b; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #21243a;
   --hwy-map-bg: #dfe3ee;
   --hwy-subtle: #f5f6fa;
   --hwy-loud-bg: #e0e7ff;
}
:root[data-theme="dashboard"][data-mode="dark"] {
   --hwy-green: #646cc0;
   --hwy-green-light: #a5b4fc;
   --hwy-accent: #38bdf8;
   --hwy-sand: #14151f;
   --hwy-ink: #e5e7f0;
   --hwy-muted: #9295b0;
   --hwy-card: #1e2036;
   --hwy-line: #2e3148;
   --hwy-warn-bg: #452a06;
   --hwy-warn-ink: #fcd34d;
   --hwy-error: #f87171;
   --hwy-header-bg: #0d0e18; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #12131f;
   --hwy-map-bg: #1a1c2c;
   --hwy-subtle: #1a1c2c;
   --hwy-loud-bg: #2a2d4a;
}
[data-theme="dashboard"] body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:linear-gradient(180deg,var(--hwy-sand) 0%,var(--hwy-subtle) 100%);color:var(--hwy-ink);}
[data-theme="dashboard"] h1,[data-theme="dashboard"] h2,[data-theme="dashboard"] .app-title,[data-theme="dashboard"] .cockpit-title{font-family:inherit;font-weight:700;letter-spacing:-0.02em;color:var(--hwy-ink);}
[data-theme="dashboard"] .section-heading{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--hwy-muted);border-left:3px solid var(--hwy-green) !important;padding-left:0.6em;}
[data-theme="dashboard"] .cockpit{background:var(--hwy-sand);}
[data-theme="dashboard"] .cockpit-rail,[data-theme="dashboard"] .stat-tile,[data-theme="dashboard"] .weather-card,[data-theme="dashboard"] .poi-event,[data-theme="dashboard"] .gas-stop{background:var(--hwy-card) !important;border:1px solid var(--hwy-line) !important;border-radius:14px !important;box-shadow:0 1px 2px rgba(15,23,42,0.05),0 10px 24px -14px rgba(30,27,75,0.35) !important;}
[data-theme="dashboard"] .stat-tile{border-top:3px solid var(--hwy-accent) !important;}
/* The dashboard look frames the map as a rounded card in the CENTER space
   between the rails — it used to hide bottom-right UNDER the weather rail
   while most of the screen sat empty. WIDE screens only: below 981px the
   rails stack and the rail-width math would crush the card to a sliver, so
   the default full-bleed responsive layout takes over. */
@media (min-width: 981px) {
[data-theme="dashboard"] #mapContainer{inset:84px calc(var(--rail-width-right,328px) + 34px) 118px calc(var(--rail-width-left,306px) + 78px) !important;width:auto !important;height:auto !important;max-height:none !important;border-radius:16px !important;overflow:hidden !important;border:1px solid var(--hwy-line) !important;box-shadow:0 10px 30px -12px rgba(30,27,75,0.45) !important;background:var(--hwy-map-bg);}
}
/* Fill the freed stage so the de-emphasised map reads as intentional, not empty:
   a soft dashboard canvas + a roomier, foregrounded left rail of stats/details. */
[data-theme="dashboard"] .cockpit-stage{
  background-color:var(--hwy-sand);
  background-image:
    linear-gradient(color-mix(in srgb,var(--hwy-line) 34%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--hwy-line) 34%,transparent) 1px,transparent 1px);
  background-size:34px 34px,34px 34px;
}
[data-theme="dashboard"] .cockpit-rail-left{--rail-width-left:360px;max-width:360px;}
[data-theme="dashboard"] .rail-stats{gap:14px;}
[data-theme="dashboard"] .stat-tile{padding:18px 16px;}
[data-theme="dashboard"] .cockpit-rail,[data-theme="dashboard"] .stat-tile,[data-theme="dashboard"] .weather-card{box-shadow:0 8px 24px -14px rgba(30,27,75,.35);}
/* Dark nav/dock bars even in light mode: dark island (tokens mirror the dark
   block above; color restarts inheritance from the island's ink). */
[data-theme="dashboard"] .cockpit-dock,[data-theme="dashboard"] .feature-nav{background:var(--hwy-nav-bg) !important;border-radius:18px !important;border:1px solid var(--hwy-line) !important;
  --hwy-green:#646cc0;--hwy-green-light:#a5b4fc;--hwy-accent:#38bdf8;
  --hwy-ink:#e5e7f0;--hwy-muted:#9295b0;--hwy-card:#1e2036;
  --hwy-line:#2e3148;--hwy-warn-bg:#452a06;--hwy-warn-ink:#fcd34d;
  --hwy-error:#f87171;--hwy-subtle:#1a1c2c;--hwy-loud-bg:#2a2d4a;
  color:var(--hwy-ink);}
[data-theme="dashboard"] .dock-tab,[data-theme="dashboard"] .nav-chip{border-radius:10px !important;color:var(--hwy-muted);}
[data-theme="dashboard"] .dock-tab[aria-selected="true"],[data-theme="dashboard"] .nav-chip.active{background:var(--hwy-green) !important;color:#fff !important;}
[data-theme="dashboard"] .chip{border-radius:999px !important;background:var(--hwy-subtle) !important;border:1px solid var(--hwy-line) !important;color:var(--hwy-ink);font-size:0.78rem;font-weight:600;}
/* Solid green: the old green→accent sweep ended on sky-blue, unreadable under
   the white label in both modes. The glow keeps the accent. */
[data-theme="dashboard"] .plan-button{background:var(--hwy-green) !important;border:none !important;border-radius:12px !important;color:#fff !important;font-weight:700;box-shadow:0 8px 18px -8px rgba(79,70,229,0.55);}
[data-theme="dashboard"] input,[data-theme="dashboard"] select{border-radius:10px !important;border:1px solid var(--hwy-line) !important;background:var(--hwy-card) !important;color:var(--hwy-ink);}

/* ══ comic ══ */
:root[data-theme="comic"] {
   --hwy-green: #18873c;
   --hwy-green-light: #8be89b;
   --hwy-accent: #ca324d;
   --hwy-sand: #fff6da;
   --hwy-ink: #14142b;
   --hwy-muted: #4a4a6a;
   --hwy-card: #ffffff;
   --hwy-line: #000000;
   --hwy-warn-bg: #ffe066;
   --hwy-warn-ink: #5c3d00;
   --hwy-error: #c8162b;
   --hwy-header-bg: #1c3fae; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #ffd400;
   --hwy-map-bg: #bfe6a0;
   --hwy-subtle: #fff1b8;
   --hwy-loud-bg: #ff3b57;
}
:root[data-theme="comic"][data-mode="dark"] {
   --hwy-green: #1f8749;
   --hwy-green-light: #8ef7b0;
   --hwy-accent: #ff4d79;
   --hwy-sand: #0b0f2e;
   --hwy-ink: #f5f3e7;
   --hwy-muted: #9aa3d9;
   --hwy-card: #141a4a;
   --hwy-line: #000000;
   --hwy-warn-bg: #f5c400;
   --hwy-warn-ink: #f5f3e7;
   --hwy-error: #fe4a67;
   --hwy-header-bg: #05071a; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #12163f;
   --hwy-map-bg: #0f2138;
   --hwy-subtle: #1c2150;
   --hwy-loud-bg: #c82757;
}
[data-theme="comic"] body {
  font-family: 'Arial Rounded MT Bold', 'Varela Round', 'Comic Sans MS', system-ui, sans-serif;
  background-color: var(--hwy-sand);
  background-image: radial-gradient(circle, rgba(20,20,43,0.15) 1.6px, transparent 1.7px);
  background-size: 16px 16px;
  color: var(--hwy-ink);
}
[data-theme="comic"] .app-title,
[data-theme="comic"] .cockpit-title,
[data-theme="comic"] h1,
[data-theme="comic"] h2,
[data-theme="comic"] .section-heading {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 1px var(--hwy-line);
  transform: rotate(-1deg);
  display: inline-block;
}
[data-theme="comic"] .plan-button,
[data-theme="comic"] .chip,
[data-theme="comic"] .nav-chip,
[data-theme="comic"] .dock-tab {
  border: 3px solid var(--hwy-line) !important;
  border-radius: 999px !important;
  box-shadow: 4px 4px 0 var(--hwy-line);
  font-weight: 800;
  text-transform: uppercase;
  transform: rotate(-1deg);
  transition: transform 0.15s ease;
}
[data-theme="comic"] .plan-button:hover,
[data-theme="comic"] .chip:hover,
[data-theme="comic"] .nav-chip:hover {
  transform: rotate(1deg) translate(-2px,-2px);
  box-shadow: 6px 6px 0 var(--hwy-line);
}
[data-theme="comic"] .stat-tile,
[data-theme="comic"] .weather-card,
[data-theme="comic"] .gas-stop,
[data-theme="comic"] .poi-event,
[data-theme="comic"] .cockpit-rail,
[data-theme="comic"] .feature-nav,
[data-theme="comic"] .cockpit-dock {
  border: 3px solid var(--hwy-line) !important;
  border-radius: 20px !important;
  background: var(--hwy-card);
  box-shadow: 5px 5px 0 var(--hwy-line);
}
[data-theme="comic"] .cockpit-rail:nth-child(even),
[data-theme="comic"] .poi-event:nth-child(even) {
  transform: rotate(0.6deg);
}
[data-theme="comic"] input,
[data-theme="comic"] select {
  border: 3px solid var(--hwy-line) !important;
  border-radius: 14px !important;
  background: var(--hwy-card);
  font-weight: 700;
}
[data-theme="comic"] #mapContainer {
  border: 4px solid var(--hwy-line) !important;
  border-radius: 26px !important;
  box-shadow: 6px 6px 0 var(--hwy-line);
  background: var(--hwy-map-bg);
}
[data-theme="comic"] .cockpit {
  background-image: radial-gradient(circle, rgba(20,20,43,0.1) 1.4px, transparent 1.5px);
  background-size: 14px 14px;
}

/* ══ anime ══ */
:root[data-theme="anime"] {
   --hwy-green: #ae4172;
   --hwy-green-light: #ffb8dd;
   --hwy-accent: #516e95;
   --hwy-sand: #fdf1f8;
   --hwy-ink: #3a2145;
   --hwy-muted: #785e84;
   --hwy-card: #fffbfe;
   --hwy-line: #f0d9ec;
   --hwy-warn-bg: #fff0c2;
   --hwy-warn-ink: #8a5a12;
   --hwy-error: #bb3f65;
   --hwy-header-bg: #6a3a94; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #fdeef9;
   --hwy-map-bg: #eaf5ff;
   --hwy-subtle: #f8ecf7;
   --hwy-loud-bg: #ffdcef;
}
:root[data-theme="anime"][data-mode="dark"] {
   --hwy-green: #c53da1;
   --hwy-green-light: #ff9fe8;
   --hwy-accent: #4ce4ff;
   --hwy-sand: #120e28;
   --hwy-ink: #f5eefc;
   --hwy-muted: #b6a8d6;
   --hwy-card: #1e1a3d;
   --hwy-line: #3d3468;
   --hwy-warn-bg: #4a3a12;
   --hwy-warn-ink: #ffd166;
   --hwy-error: #ff5577;
   --hwy-header-bg: #0d0a20; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #181433;
   --hwy-map-bg: #0b0920;
   --hwy-subtle: #241f4a;
   --hwy-loud-bg: #b43a9a;
}
[data-theme="anime"] body {
  font-family: "Segoe UI Rounded", ui-rounded, "SF Pro Rounded", Nunito, Quicksand, system-ui, sans-serif;
  background:
    radial-gradient(circle at 8% 12%, rgba(255,180,224,0.4), transparent 38%),
    radial-gradient(circle at 92% 18%, rgba(150,210,255,0.35), transparent 42%),
    repeating-radial-gradient(circle at 50% 50%, rgba(120,60,150,0.045) 0px, rgba(120,60,150,0.045) 1px, transparent 1.6px, transparent 9px),
    var(--hwy-sand);
  color: var(--hwy-ink);
  letter-spacing: 0.01em;
}
[data-theme="anime"] h1, [data-theme="anime"] h2, [data-theme="anime"] .section-heading,
[data-theme="anime"] .cockpit-title, [data-theme="anime"] .app-title {
  font-weight: 700;
  letter-spacing: 0.02em;
  background: linear-gradient(120deg, var(--hwy-green), var(--hwy-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="anime"] .cockpit, [data-theme="anime"] .cockpit-rail, [data-theme="anime"] .cockpit-dock {
  background: var(--hwy-card) !important;
  border: 1px solid var(--hwy-line) !important;
  border-radius: 26px !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.35) inset, 0 10px 30px -12px var(--hwy-accent);
}
[data-theme="anime"] .cockpit-rail {
  background-image: repeating-linear-gradient(100deg, transparent 0 18px, var(--hwy-line) 18px 19px);
  background-blend-mode: overlay;
}
[data-theme="anime"] .plan-button {
  border-radius: 999px !important;
  border: none !important;
  background: linear-gradient(120deg, var(--hwy-green), color-mix(in srgb, var(--hwy-green-light) 20%, var(--hwy-green)));
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 6px 18px -4px var(--hwy-green), 0 0 0 3px rgba(255,255,255,0.3) inset;
}
[data-theme="anime"] .chip, [data-theme="anime"] .nav-chip, [data-theme="anime"] .dock-tab {
  border-radius: 999px !important;
  background: var(--hwy-subtle) !important;
  border: 1px solid var(--hwy-line) !important;
  color: var(--hwy-ink);
}
[data-theme="anime"] input, [data-theme="anime"] select {
  border-radius: 16px !important;
  border: 1px solid var(--hwy-line) !important;
  background: var(--hwy-card) !important;
  color: var(--hwy-ink);
}
[data-theme="anime"] .stat-tile, [data-theme="anime"] .weather-card,
[data-theme="anime"] .gas-stop, [data-theme="anime"] .poi-event {
  border-radius: 22px !important;
  background: var(--hwy-card) !important;
  border: 1px solid var(--hwy-line) !important;
  box-shadow: 0 8px 22px -10px var(--hwy-accent);
}
[data-theme="anime"] .feature-nav {
  background: var(--hwy-nav-bg) !important;
  border-radius: 26px !important;
  border: 1px solid var(--hwy-line) !important;
}
[data-theme="anime"] #mapContainer {
  border-radius: 26px !important;
  border: 2px solid var(--hwy-line) !important;
  background: var(--hwy-map-bg) !important;
}

/* ══ explainer ══ */
:root[data-theme="explainer"] {
   --hwy-green: #0C6F5A;
   --hwy-green-light: #7EE8CF;
   --hwy-accent: #944c4f;
   --hwy-sand: #F5EDDC;
   --hwy-ink: #1B2A41;
   --hwy-muted: #536375;
   --hwy-card: #FFFFFF;
   --hwy-line: #E4D9C4;
   --hwy-warn-bg: #FFEEB0;
   --hwy-warn-ink: #7A4A00;
   --hwy-error: #aa3936;
   --hwy-header-bg: #16324A; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #FFFDF8;
   --hwy-map-bg: #DCF3EA;
   --hwy-subtle: #F0E6CE;
   --hwy-loud-bg: #FFDDD2;
}
:root[data-theme="explainer"][data-mode="dark"] {
   --hwy-green: #12806B;
   --hwy-green-light: #4FF0D2;
   --hwy-accent: #FF8066;
   --hwy-sand: #0E2A30;
   --hwy-ink: #F5F0E4;
   --hwy-muted: #A9C4C6;
   --hwy-card: #163840;
   --hwy-line: #2A4A50;
   --hwy-warn-bg: #4A3B12;
   --hwy-warn-ink: #FFD98A;
   --hwy-error: #fd897a;
   --hwy-header-bg: #091920; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #123138;
   --hwy-map-bg: #13383E;
   --hwy-subtle: #1A4048;
   --hwy-loud-bg: #3A2420;
}
[data-theme="explainer"] body { font-family: -apple-system, "Avenir Next", "Century Gothic", "Segoe UI", Roboto, sans-serif; color: var(--hwy-ink); background: radial-gradient(circle at 88% 6%, var(--hwy-green-light) 0%, transparent 20%), radial-gradient(circle at 6% 94%, var(--hwy-accent) 0%, transparent 16%), var(--hwy-sand) !important; }
[data-theme="explainer"] h1, [data-theme="explainer"] h2, [data-theme="explainer"] .section-heading, [data-theme="explainer"] .app-title, [data-theme="explainer"] .cockpit-title { font-weight: 800 !important; letter-spacing: -0.02em; color: var(--hwy-ink) !important; }
[data-theme="explainer"] .cockpit, [data-theme="explainer"] .weather-card, [data-theme="explainer"] .stat-tile, [data-theme="explainer"] .poi-event, [data-theme="explainer"] .cockpit-rail { background: var(--hwy-card) !important; border: 3px solid var(--hwy-ink) !important; border-radius: 28px !important; box-shadow: none !important; }
[data-theme="explainer"] .cockpit-rail { color: var(--hwy-muted); }
[data-theme="explainer"] .plan-button { background: var(--hwy-green) !important; color: #ffffff !important; border: 3px solid var(--hwy-ink) !important; border-radius: 999px !important; font-weight: 700 !important; box-shadow: none !important; padding: 0.9em 1.6em; }
[data-theme="explainer"] .chip, [data-theme="explainer"] .nav-chip, [data-theme="explainer"] .dock-tab { background: var(--hwy-subtle) !important; border: 2px solid var(--hwy-ink) !important; border-radius: 999px !important; color: var(--hwy-ink) !important; box-shadow: none !important; }
[data-theme="explainer"] .dock-tab.active, [data-theme="explainer"] .nav-chip.active, [data-theme="explainer"] .chip.active { background: var(--hwy-accent) !important; color: #ffffff !important; }
[data-theme="explainer"] input, [data-theme="explainer"] select { border: 2px solid var(--hwy-ink) !important; border-radius: 16px !important; background: var(--hwy-card) !important; color: var(--hwy-ink) !important; box-shadow: none !important; }
[data-theme="explainer"] .cockpit-dock, [data-theme="explainer"] .feature-nav { background: var(--hwy-nav-bg) !important; border-top: 3px solid var(--hwy-ink) !important; border-radius: 32px 32px 0 0 !important; box-shadow: none !important; }
[data-theme="explainer"] #mapContainer { border-radius: 28px !important; border: 3px solid var(--hwy-ink) !important; background: var(--hwy-map-bg) !important; }
[data-theme="explainer"] .gas-stop { border-radius: 20px !important; border: 2px dashed var(--hwy-green) !important; background: var(--hwy-loud-bg) !important; }

/* ══ d1940s ══ */
:root[data-theme="d1940s"] {
   --hwy-green: #1B3A5C;
   --hwy-green-light: #35577A;
   --hwy-accent: #745d1f;
   --hwy-sand: #EDE3CB;
   --hwy-ink: #2A2118;
   --hwy-muted: #6B5D48;
   --hwy-card: #FAF3E3;
   --hwy-line: #8C6D3F;
   --hwy-warn-bg: #F0D9A0;
   --hwy-warn-ink: #7A3B12;
   --hwy-error: #9E2B25;
   --hwy-header-bg: #16232E; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #1C2B38;
   --hwy-map-bg: #DCC9A3;
   --hwy-subtle: #E6D9BB;
   --hwy-loud-bg: #D4AF37;
}
:root[data-theme="d1940s"][data-mode="dark"] {
   --hwy-green: #4A7096;
   --hwy-green-light: #6B93B8;
   --hwy-accent: #D4AF37;
   --hwy-sand: #1C140D;
   --hwy-ink: #EDE1C6;
   --hwy-muted: #B8A47E;
   --hwy-card: #2A2016;
   --hwy-line: #7A5C33;
   --hwy-warn-bg: #4A3419;
   --hwy-warn-ink: #F0D9A0;
   --hwy-error: #d37e6d;
   --hwy-header-bg: #140F09; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #1A130B;
   --hwy-map-bg: #2B2015;
   --hwy-subtle: #332619;
   --hwy-loud-bg: #775721;
}
[data-theme="d1940s"] body {
  font-family: 'Trebuchet MS', 'Century Gothic', sans-serif;
  background:
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(201,162,39,0.06) 18px 19px, transparent 19px 36px),
    var(--hwy-sand);
  background-attachment: fixed;
}
[data-theme="d1940s"] h1,
[data-theme="d1940s"] h2,
[data-theme="d1940s"] .app-title,
[data-theme="d1940s"] .cockpit-title,
[data-theme="d1940s"] .section-heading {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hwy-ink);
}
[data-theme="d1940s"] .cockpit,
[data-theme="d1940s"] .weather-card,
[data-theme="d1940s"] .stat-tile,
[data-theme="d1940s"] .poi-event,
[data-theme="d1940s"] .gas-stop {
  border-radius: 0 !important;
  border: 2px solid var(--hwy-line) !important;
  outline: 1px solid var(--hwy-accent);
  outline-offset: -5px;
  background: var(--hwy-card);
}
[data-theme="d1940s"] .cockpit-rail,
[data-theme="d1940s"] .cockpit-dock,
[data-theme="d1940s"] .feature-nav {
  border-top: 3px double var(--hwy-accent) !important;
  border-bottom: 3px double var(--hwy-accent) !important;
  background: var(--hwy-nav-bg);
  /* These bars keep the poster's dark navy even in light mode, so everything
     inside reads with the theme's dark-mode tokens (a dark island — nested
     cards and muted text flip along; keep in sync with the dark block above).
     The color declaration restarts inheritance: descendants without their own
     color rule would otherwise inherit body's ink, resolved OUTSIDE the island. */
  --hwy-green: #4A7096; --hwy-green-light: #6B93B8; --hwy-accent: #D4AF37;
  --hwy-ink: #EDE1C6; --hwy-muted: #B8A47E; --hwy-card: #2A2016;
  --hwy-line: #7A5C33; --hwy-warn-bg: #4A3419; --hwy-warn-ink: #F0D9A0;
  --hwy-error: #d37e6d; --hwy-subtle: #332619; --hwy-loud-bg: #775721;
  color: var(--hwy-ink);
}
[data-theme="d1940s"] .plan-button {
  border-radius: 0 !important;
  border: 2px solid var(--hwy-accent) !important;
  background: var(--hwy-green);
  color: #fff;
  font-family: Georgia, serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
[data-theme="d1940s"] .chip,
[data-theme="d1940s"] .nav-chip,
[data-theme="d1940s"] .dock-tab {
  border-radius: 0 !important;
  border: 1px solid var(--hwy-line) !important;
  font-family: Georgia, serif;
  letter-spacing: 0.05em;
}
[data-theme="d1940s"] input,
[data-theme="d1940s"] select {
  border-radius: 0 !important;
  border: 1px solid var(--hwy-line) !important;
  background: var(--hwy-card);
  color: var(--hwy-ink);
}
[data-theme="d1940s"] #mapContainer {
  border: 4px double var(--hwy-accent) !important;
  background: var(--hwy-map-bg);
}

/* ══ d1950s ══ */
:root[data-theme="d1950s"] {
   --hwy-green: #2b7769;
   --hwy-green-light: #8fd9c4;
   --hwy-accent: #c12e3b;
   --hwy-sand: #f5ead3;
   --hwy-ink: #2b2320;
   --hwy-muted: #716156;
   --hwy-card: #fffdf7;
   --hwy-line: #c3c9c9;
   --hwy-warn-bg: #ffe9a8;
   --hwy-warn-ink: #6b4500;
   --hwy-error: #a4111f;
   --hwy-header-bg: #7a1128; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #eef7f2;
   --hwy-map-bg: #d7ede6;
   --hwy-subtle: #f0e9d8;
   --hwy-loud-bg: #e06b6e;
}
:root[data-theme="d1950s"][data-mode="dark"] {
   --hwy-green: #187961;
   --hwy-green-light: #7ff5da;
   --hwy-accent: #ff4d8d;
   --hwy-sand: #1c1b1e;
   --hwy-ink: #f5ecd9;
   --hwy-muted: #a89f93;
   --hwy-card: #2a2729;
   --hwy-line: #46484a;
   --hwy-warn-bg: #4a3a12;
   --hwy-warn-ink: #ffd873;
   --hwy-error: #fe5044;
   --hwy-header-bg: #121113; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #201d1f;
   --hwy-map-bg: #14231f;
   --hwy-subtle: #262325;
   --hwy-loud-bg: #b72f4b;
}
[data-theme="d1950s"] body {
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(180deg, var(--hwy-sand) 0%, var(--hwy-subtle) 100%);
  color: var(--hwy-ink);
}
[data-theme="d1950s"] .app-title,
[data-theme="d1950s"] .cockpit-title {
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: 1.6em;
  color: var(--hwy-accent);
  text-shadow: 1px 1px 0 var(--hwy-card), 2px 2px 0 var(--hwy-line);
}
[data-theme="d1950s"] h1,
[data-theme="d1950s"] h2,
[data-theme="d1950s"] .section-heading {
  font-family: "Arial Black", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 3px solid var(--hwy-accent);
  padding-bottom: 0.2em;
  background: radial-gradient(circle at left, var(--hwy-green-light) 0%, transparent 60%);
}
[data-theme="d1950s"] .cockpit {
  background: var(--hwy-card);
  border: 3px solid var(--hwy-line) !important;
  border-radius: 30px 6px 30px 6px !important;
}
[data-theme="d1950s"] .plan-button {
  color: #fff !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--hwy-green-light) 40%, var(--hwy-green)), var(--hwy-green)) !important;
  border: 3px solid var(--hwy-card) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 2px var(--hwy-ink), 0 4px 0 rgba(0,0,0,.25);
  font-weight: 900;
  text-transform: uppercase;
}
[data-theme="d1950s"] .chip:not(.is-active),
[data-theme="d1950s"] .nav-chip:not(.is-active),
[data-theme="d1950s"] .dock-tab:not(.is-active) {
  border-radius: 999px !important;
  border: 2px solid var(--hwy-ink) !important;
  background: var(--hwy-card);
  box-shadow: inset 0 0 0 2px var(--hwy-green-light);
  font-weight: 700;
}
[data-theme="d1950s"] input,
[data-theme="d1950s"] select {
  border-radius: 14px !important;
  border: 2px solid var(--hwy-line) !important;
  background: var(--hwy-card);
  color: var(--hwy-ink);
}
[data-theme="d1950s"] .stat-tile,
[data-theme="d1950s"] .weather-card,
[data-theme="d1950s"] .gas-stop,
[data-theme="d1950s"] .poi-event {
  border-radius: 26px 6px 26px 6px !important;
  border: 2px solid var(--hwy-line) !important;
  background: var(--hwy-card);
}
[data-theme="d1950s"] .cockpit-rail,
[data-theme="d1950s"] .cockpit-dock,
[data-theme="d1950s"] .feature-nav {
  background-color: var(--hwy-nav-bg);
  background-image: repeating-conic-gradient(var(--hwy-card) 0% 25%, var(--hwy-subtle) 0% 50%);
  background-size: 18px 18px;
  border-top: 4px solid var(--hwy-accent) !important;
}
[data-theme="d1950s"] #mapContainer {
  border-radius: 20px !important;
  border: 6px solid var(--hwy-card) !important;
  box-shadow: 0 0 0 3px var(--hwy-green);
  background: var(--hwy-map-bg);
}

/* ══ d1960s ══ */
:root[data-theme="d1960s"] {
   --hwy-green: #167a72;
   --hwy-green-light: #4fb3a3;
   --hwy-accent: #8e3f26;
   --hwy-sand: #f2e0b8;
   --hwy-ink: #2b1a1f;
   --hwy-muted: #6e4f3a;
   --hwy-card: #fdf3de;
   --hwy-line: #c9762f;
   --hwy-warn-bg: #f0c14b;
   --hwy-warn-ink: #4a2e10;
   --hwy-error: #9d3127;
   --hwy-header-bg: #24122b; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #1c3a35;
   --hwy-map-bg: #ecd6a0;
   --hwy-subtle: #ecd6a0;
   --hwy-loud-bg: #f4a637;
}
:root[data-theme="d1960s"][data-mode="dark"] {
   --hwy-green: #257c6e;
   --hwy-green-light: #7de0cc;
   --hwy-accent: #ff8a3d;
   --hwy-sand: #241528;
   --hwy-ink: #f5e6d3;
   --hwy-muted: #c9a68c;
   --hwy-card: #34213c;
   --hwy-line: #8a5a3a;
   --hwy-warn-bg: #5a441a;
   --hwy-warn-ink: #ffe08a;
   --hwy-error: #ff6a52;
   --hwy-header-bg: #180d1c; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #1c2e2c;
   --hwy-map-bg: #2a1830;
   --hwy-subtle: #3a2440;
   --hwy-loud-bg: #9a4c2a;
}
[data-theme="d1960s"] body {
  font-family: 'Arial Rounded MT Bold', 'Trebuchet MS', Verdana, sans-serif;
  background:
    repeating-radial-gradient(circle at 92% 6%, var(--hwy-loud-bg) 0px, var(--hwy-loud-bg) 5px, transparent 5px, transparent 42px),
    repeating-radial-gradient(circle at 4% 88%, var(--hwy-green-light) 0px, var(--hwy-green-light) 4px, transparent 4px, transparent 36px),
    var(--hwy-sand);
  color: var(--hwy-ink);
}
[data-theme="d1960s"] .app-title,
[data-theme="d1960s"] .cockpit-title {
  font-family: 'Trebuchet MS', 'Arial Rounded MT Bold', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 900;
  color: var(--hwy-accent);
  text-shadow: 2px 2px 0 var(--hwy-green);
}
[data-theme="d1960s"] h1,
[data-theme="d1960s"] h2,
[data-theme="d1960s"] .section-heading {
  font-family: 'Trebuchet MS', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hwy-accent);
  border-bottom: 3px dotted var(--hwy-accent);
  padding-bottom: 4px;
}
[data-theme="d1960s"] .weather-card,
[data-theme="d1960s"] .stat-tile,
[data-theme="d1960s"] .poi-event,
[data-theme="d1960s"] .gas-stop {
  background: radial-gradient(circle at 30% 20%, var(--hwy-card) 55%, var(--hwy-subtle) 100%);
  border: 3px solid var(--hwy-line) !important;
  border-radius: 22px 6px 22px 6px !important;
  box-shadow: 4px 4px 0 var(--hwy-accent);
}
[data-theme="d1960s"] .plan-button {
  background: repeating-conic-gradient(from 0deg, var(--hwy-accent) 0deg 15deg, var(--hwy-green) 15deg 30deg);
  border-radius: 50% !important;
  border: 3px solid var(--hwy-ink) !important;
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
}
/* Dark mode flips the accent to a light neon orange: keep every wedge light
   and switch the label to the deep plum sand so it clears both wedge colors. */
:root[data-mode="dark"][data-theme="d1960s"] .plan-button {
  background: repeating-conic-gradient(from 0deg, var(--hwy-accent) 0deg 15deg, color-mix(in srgb, var(--hwy-green) 30%, var(--hwy-accent)) 15deg 30deg);
  color: #241528;
  font-weight: 900;
  text-transform: uppercase;
}
[data-theme="d1960s"] .chip:not(.is-active),
[data-theme="d1960s"] .nav-chip:not(.is-active),
[data-theme="d1960s"] .dock-tab:not(.is-active) {
  border-radius: 999px !important;
  border: 2px solid var(--hwy-green) !important;
  background: var(--hwy-loud-bg);
  color: var(--hwy-ink);
  font-weight: 700;
}
[data-theme="d1960s"] input,
[data-theme="d1960s"] select {
  border-radius: 999px !important;
  border: 2px solid var(--hwy-accent) !important;
  background: var(--hwy-card);
  color: var(--hwy-ink);
}
[data-theme="d1960s"] .cockpit-rail,
[data-theme="d1960s"] .cockpit-dock,
[data-theme="d1960s"] .feature-nav {
  background: var(--hwy-nav-bg);
  border-top: 4px solid var(--hwy-accent);
  /* Dark teal bars even in light mode: read with the theme's dark-mode tokens
     inside (a dark island — keep in sync with the dark block above; the color
     declaration restarts inheritance from the island's ink). */
  --hwy-green: #257c6e; --hwy-green-light: #7de0cc; --hwy-accent: #ff8a3d;
  --hwy-ink: #f5e6d3; --hwy-muted: #c9a68c; --hwy-card: #34213c;
  --hwy-line: #8a5a3a; --hwy-warn-bg: #5a441a; --hwy-warn-ink: #ffe08a;
  /* Lighter than the dark block's coral: 12px error text must clear the teal. */
  --hwy-error: #ff9a83; --hwy-subtle: #3a2440; --hwy-loud-bg: #9a4c2a;
  color: var(--hwy-ink);
}
[data-theme="d1960s"] #mapContainer {
  border: 6px solid var(--hwy-line) !important;
  border-radius: 30px !important;
  background: var(--hwy-map-bg);
}

/* ══ d1970s ══ */
:root[data-theme="d1970s"] {
   --hwy-green: #5B7B3C;
   --hwy-green-light: #8FA85E;
   --hwy-accent: #92440a;
   --hwy-sand: #E8D9B5;
   --hwy-ink: #3B2A1A;
   --hwy-muted: #6B5842;
   --hwy-card: #FCF3DC;
   --hwy-line: #A67C52;
   --hwy-warn-bg: #F4C542;
   --hwy-warn-ink: #4A3524;
   --hwy-error: #a5381e;
   --hwy-header-bg: #4A3524; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #6B4226;
   --hwy-map-bg: #D9B88F;
   --hwy-subtle: #EFE2C0;
   --hwy-loud-bg: #E8A33D;
}
:root[data-theme="d1970s"][data-mode="dark"] {
   --hwy-green: #617240;
   --hwy-green-light: #A8C378;
   --hwy-accent: #E8833D;
   --hwy-sand: #2B1D14;
   --hwy-ink: #F0DCA8;
   --hwy-muted: #C9A876;
   --hwy-card: #3A2A1D;
   --hwy-line: #5C4530;
   --hwy-warn-bg: #C9932A;
   --hwy-warn-ink: #f0dca8;
   --hwy-error: #e47753;
   --hwy-header-bg: #1F140D; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #2A1B10;
   --hwy-map-bg: #3D2B1A;
   --hwy-subtle: #33241A;
   --hwy-loud-bg: #98481c;
}
[data-theme="d1970s"] body {
  font-family: Georgia, 'Bookman Old Style', 'Palatino Linotype', serif;
  background-color: var(--hwy-sand);
  background-image:
    repeating-linear-gradient(90deg, rgba(90,55,25,0.10) 0px, rgba(90,55,25,0.10) 4px, transparent 4px, transparent 26px),
    repeating-linear-gradient(0deg, rgba(60,35,15,0.06) 0px, rgba(60,35,15,0.06) 2px, transparent 2px, transparent 24px),
    radial-gradient(circle at 8% 15%, var(--hwy-loud-bg) 0%, transparent 11%),
    radial-gradient(circle at 85% 10%, var(--hwy-accent) 0%, transparent 9%),
    radial-gradient(circle at 90% 75%, var(--hwy-green-light) 0%, transparent 10%),
    radial-gradient(circle at 15% 85%, var(--hwy-warn-bg) 0%, transparent 8%);
  background-blend-mode: overlay, normal, overlay, overlay, overlay, overlay;
  color: var(--hwy-ink);
}
[data-theme="d1970s"] h1, [data-theme="d1970s"] h2, [data-theme="d1970s"] .app-title,
[data-theme="d1970s"] .cockpit-title, [data-theme="d1970s"] .section-heading {
  font-family: Georgia, 'Bookman Old Style', serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--hwy-accent);
  text-shadow: 2px 2px 0 var(--hwy-green-light);
}
[data-theme="d1970s"] .cockpit, [data-theme="d1970s" ] .weather-card, [data-theme="d1970s"] .stat-tile,
[data-theme="d1970s"] .gas-stop, [data-theme="d1970s"] .poi-event, [data-theme="d1970s"] .cockpit-rail {
  background: var(--hwy-card) !important;
  border: 3px solid var(--hwy-line) !important;
  border-radius: 22px !important;
  box-shadow: 5px 5px 0 var(--hwy-green);
}
[data-theme="d1970s"] .plan-button, [data-theme="d1970s"] .chip, [data-theme="d1970s"] .nav-chip,
[data-theme="d1970s"] .dock-tab {
  background: var(--hwy-green) !important;
  color: #fff !important;
  border: 2px solid var(--hwy-line) !important;
  border-radius: 999px !important;
  font-family: Georgia, serif;
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--hwy-accent);
}
[data-theme="d1970s"] input, [data-theme="d1970s"] select {
  background: var(--hwy-subtle) !important;
  border: 2px solid var(--hwy-line) !important;
  border-radius: 14px !important;
  color: var(--hwy-ink) !important;
  font-family: Georgia, serif;
}
[data-theme="d1970s"] .feature-nav, [data-theme="d1970s"] .cockpit-dock {
  background: var(--hwy-nav-bg) !important;
  border-top: 4px solid var(--hwy-line) !important;
  border-radius: 26px 26px 0 0 !important;
}
[data-theme="d1970s"] #mapContainer {
  border: 5px solid var(--hwy-line) !important;
  border-radius: 28px !important;
  background: var(--hwy-map-bg) !important;
}

/* ══ d1980s ══ */
:root[data-theme="d1980s"] {
   --hwy-green: #c5247a;
   --hwy-green-light: #ff8fc4;
   --hwy-accent: #1c6b80;
   --hwy-sand: #ffe8d6;
   --hwy-ink: #241442;
   --hwy-muted: #5c4b7a;
   --hwy-card: #fff5ec;
   --hwy-line: #ffb3d9;
   --hwy-warn-bg: #fff0c2;
   --hwy-warn-ink: #8a5a00;
   --hwy-error: #b62e58;
   --hwy-header-bg: #7a1250; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: rgba(255, 245, 236, 0.95);
   --hwy-map-bg: #d9f4f0;
   --hwy-subtle: #ffe0f0;
   --hwy-loud-bg: #ffd1a8;
}
:root[data-theme="d1980s"][data-mode="dark"] {
   --hwy-green: #c52498;
   --hwy-green-light: #ff6ec7;
   --hwy-accent: #00f0ff;
   --hwy-sand: #0d0221;
   --hwy-ink: #f5f0ff;
   --hwy-muted: #b19cd9;
   --hwy-card: #1a0b2e;
   --hwy-line: #4a2a6d;
   --hwy-warn-bg: #3a2410;
   --hwy-warn-ink: #ffb84d;
   --hwy-error: #ff3860;
   --hwy-header-bg: #0a0118; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: rgba(10, 1, 24, 0.94);
   --hwy-map-bg: #120a2e;
   --hwy-subtle: #241640;
   --hwy-loud-bg: #3a1030;
}
[data-theme="d1980s"] body, [data-theme="d1980s"] .cockpit,
[data-theme="d1980s"] input, [data-theme="d1980s"] button, [data-theme="d1980s"] select {
   font-family: "Arial Black", Impact, "Arial Bold", "Helvetica Neue", sans-serif;
   font-style: italic; font-weight: 900;
}
[data-theme="d1980s"] body {
   background-color: var(--hwy-sand);
   background-image:
      linear-gradient(180deg, #ff6ec7 0%, #b331a8 28%, #4a1770 55%, var(--hwy-sand) 78%),
      repeating-linear-gradient(90deg, color-mix(in srgb, var(--hwy-accent) 55%, transparent) 0 2px, transparent 2px 64px),
      repeating-linear-gradient(0deg, color-mix(in srgb, var(--hwy-green) 45%, transparent) 0 2px, transparent 2px 40px);
   background-size: 100% 60vh, 100% 42vh, 100% 42vh;
   background-position: top, bottom, bottom;
   background-repeat: no-repeat, repeat-x, repeat-x;
   background-attachment: fixed, fixed, fixed;
}
[data-theme="d1980s"] h1, [data-theme="d1980s"] h2, [data-theme="d1980s"] .section-heading,
[data-theme="d1980s"] .app-title, [data-theme="d1980s"] .cockpit-title {
   font-style: italic; text-transform: uppercase; letter-spacing: 1px;
   color: var(--hwy-accent);
   text-shadow: 0 0 6px var(--hwy-green), 2px 2px 0 rgba(0, 0, 0, 0.5);
}
[data-theme="d1980s"] button, [data-theme="d1980s"] .plan-button, [data-theme="d1980s"] .chip,
[data-theme="d1980s"] .nav-chip, [data-theme="d1980s"] .dock-tab, [data-theme="d1980s"] input,
[data-theme="d1980s"] select, [data-theme="d1980s"] .stat-tile, [data-theme="d1980s"] .weather-card,
[data-theme="d1980s"] .cockpit-rail, [data-theme="d1980s"] .gas-stop, [data-theme="d1980s"] .poi-event {
   border-radius: 3px !important;
   border: 2px solid var(--hwy-accent) !important;
   box-shadow: 0 0 8px color-mix(in srgb, var(--hwy-accent) 55%, transparent), inset 0 0 8px color-mix(in srgb, var(--hwy-green) 20%, transparent);
}
[data-theme="d1980s"] .plan-button, [data-theme="d1980s"] .cockpit-plan, [data-theme="d1980s"] .cockpit-hero-cta {
   /* Near-black ink: every stop must stay light, so skip the dark magenta
      middle and blend straight across the neons. */
   background: linear-gradient(180deg, var(--hwy-green-light), color-mix(in srgb, var(--hwy-green-light) 55%, var(--hwy-accent)));
   color: #0d0221; font-weight: 900; text-transform: uppercase; letter-spacing: 1px;
   box-shadow: 0 0 12px var(--hwy-green), 0 0 22px var(--hwy-accent);
}
[data-theme="d1980s"] .ficon {
   filter: drop-shadow(0 0 3px var(--hwy-accent)) drop-shadow(0 0 5px var(--hwy-green));
}
[data-theme="d1980s"] .feature-nav, [data-theme="d1980s"] .cockpit-dock {
   border-top: 2px solid var(--hwy-accent); box-shadow: 0 -2px 14px color-mix(in srgb, var(--hwy-green) 40%, transparent);
}
[data-theme="d1980s"] #mapContainer {
   border: 2px solid var(--hwy-accent) !important; box-shadow: 0 0 16px color-mix(in srgb, var(--hwy-accent) 50%, transparent);
}
[data-theme="d1980s"] .nav-chip.is-active, [data-theme="d1980s"] .dock-tab.is-active {
   color: var(--hwy-accent); text-shadow: 0 0 8px var(--hwy-accent);
}
[data-theme="d1980s"] .cockpit-dock { animation: d1980sNeonPulse 2.4s ease-in-out infinite; }
@keyframes d1980sNeonPulse {
   0%, 100% { box-shadow: 0 -2px 14px color-mix(in srgb, var(--hwy-green) 40%, transparent); }
   50% { box-shadow: 0 -2px 20px color-mix(in srgb, var(--hwy-accent) 55%, transparent); }
}

/* ══ d1990s ══ */
:root[data-theme="d1990s"] {
   --hwy-green: #008080;
   --hwy-green-light: #3fd0c9;
   --hwy-accent: #990c58;
   --hwy-sand: #c0c0c0;
   --hwy-ink: #000000;
   --hwy-muted: #4a4a52;
   --hwy-card: #f4f1e8;
   --hwy-line: #6e6e76;
   --hwy-warn-bg: #ffd400;
   --hwy-warn-ink: #1a1a1a;
   --hwy-error: #990b32;
   --hwy-header-bg: #4b0082; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #5b2c8d;
   --hwy-map-bg: #00b3b3;
   --hwy-subtle: #ded9c9;
   --hwy-loud-bg: #ff66cc;
}
:root[data-theme="d1990s"][data-mode="dark"] {
   --hwy-green: #00796c;
   --hwy-green-light: #7ffcf0;
   --hwy-accent: #fc5adc;
   --hwy-sand: #1c1a22;
   --hwy-ink: #f2eef8;
   --hwy-muted: #b5adc4;
   --hwy-card: #2a2732;
   --hwy-line: #6b5b80;
   --hwy-warn-bg: #ffe74d;
   --hwy-warn-ink: #f2eef8;
   --hwy-error: #fb7290;
   --hwy-header-bg: #2d1b4e; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #241c38;
   --hwy-map-bg: #142230;
   --hwy-subtle: #332e40;
   --hwy-loud-bg: #7a1f66;
}
[data-theme="d1990s"] body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--hwy-ink);
  background-color: var(--hwy-sand);
  background-image:
    radial-gradient(circle 6px at 8% 18%, var(--hwy-accent) 98%, transparent 100%),
    radial-gradient(circle 4px at 78% 12%, var(--hwy-green) 98%, transparent 100%),
    radial-gradient(circle 5px at 55% 68%, var(--hwy-warn-bg) 98%, transparent 100%),
    radial-gradient(circle 3px at 25% 82%, var(--hwy-green-light) 98%, transparent 100%),
    radial-gradient(circle 7px at 90% 55%, var(--hwy-accent) 98%, transparent 100%),
    radial-gradient(circle 4px at 40% 35%, var(--hwy-nav-bg) 98%, transparent 100%),
    linear-gradient(135deg, transparent 45%, var(--hwy-line) 45%, var(--hwy-line) 46%, transparent 46%);
}
[data-theme="d1990s"] h1, [data-theme="d1990s"] h2, [data-theme="d1990s"] .app-title,
[data-theme="d1990s"] .cockpit-title, [data-theme="d1990s"] .section-heading {
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  color: var(--hwy-accent) !important;
  text-shadow: 2px 2px 0 var(--hwy-green);
  letter-spacing: 0.5px;
}
[data-theme="d1990s"] .cockpit, [data-theme="d1990s"] .weather-card, [data-theme="d1990s"] .stat-tile,
[data-theme="d1990s"] .cockpit-rail, [data-theme="d1990s"] .poi-event, [data-theme="d1990s"] .gas-stop {
  background: var(--hwy-card) !important;
  border: 3px outset var(--hwy-line) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.4);
}
[data-theme="d1990s"] .plan-button, [data-theme="d1990s"] .dock-tab, [data-theme="d1990s"] .feature-nav {
  font-family: "Comic Sans MS", cursive;
  font-weight: bold;
  color: var(--hwy-ink) !important;
  /* Ink-colored text: pastel the teal toward the card so ink clears every stop
     (Win95 bevel look holds). */
  background: linear-gradient(180deg, color-mix(in srgb, var(--hwy-green-light) 35%, var(--hwy-card)), color-mix(in srgb, var(--hwy-green) 35%, var(--hwy-card))) !important;
  border: 3px outset var(--hwy-line) !important;
  border-radius: 0 !important;
}
[data-theme="d1990s"] .plan-button:active, [data-theme="d1990s"] .dock-tab:active {
  border-style: inset !important;
}
[data-theme="d1990s"] .chip:not(.is-active), [data-theme="d1990s"] .nav-chip:not(.is-active) {
  font-family: Arial, sans-serif;
  font-weight: bold;
  border-radius: 999px !important;
  border: 3px solid var(--hwy-ink) !important;
  background: var(--hwy-loud-bg) !important;
}
[data-theme="d1990s"] input, [data-theme="d1990s"] select {
  font-family: Arial, sans-serif;
  color: var(--hwy-ink);
  background: var(--hwy-card);
  border: 2px inset var(--hwy-line) !important;
  border-radius: 0 !important;
}
[data-theme="d1990s"] .cockpit-dock {
  background: var(--hwy-nav-bg) !important;
  border-top: 4px double var(--hwy-accent) !important;
}
[data-theme="d1990s"] #mapContainer {
  background: var(--hwy-map-bg) !important;
  border: 4px outset var(--hwy-line) !important;
}

/* ══ d2000s ══ */
:root[data-theme="d2000s"] {
   --hwy-green: #17709c;
   --hwy-green-light: #4fc3e0;
   --hwy-accent: #527726;
   --hwy-sand: #eaf6fb;
   --hwy-ink: #0a2540;
   --hwy-muted: #4a6b78;
   --hwy-card: #ffffff;
   --hwy-line: #b7e0ea;
   --hwy-warn-bg: #fff3cd;
   --hwy-warn-ink: #7a5900;
   --hwy-error: #c02c24;
   --hwy-header-bg: #073a52; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #cdeaf5;
   --hwy-map-bg: #bfe8f2;
   --hwy-subtle: #eef8fb;
   --hwy-loud-bg: #eaffb0;
}
:root[data-theme="d2000s"][data-mode="dark"] {
   --hwy-green: #1c7c9e;
   --hwy-green-light: #6fd8f5;
   --hwy-accent: #c6f24d;
   --hwy-sand: #06222e;
   --hwy-ink: #eaf7fb;
   --hwy-muted: #9fc4d1;
   --hwy-card: #0f3d50;
   --hwy-line: #1f5b72;
   --hwy-warn-bg: #4a3a12;
   --hwy-warn-ink: #ffd873;
   --hwy-error: #fa7f74;
   --hwy-header-bg: #041824; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #0a2f3f;
   --hwy-map-bg: #082430;
   --hwy-subtle: #123c4c;
   --hwy-loud-bg: #123f2e;
}
[data-theme="d2000s"] body { font-family: 'Trebuchet MS', 'Segoe UI', Verdana, sans-serif; background: linear-gradient(180deg, #cdeaf5 0%, #eaf6fb 40%, #ffffff 100%); background-attachment: fixed; }
[data-theme="d2000s"] .cockpit, [data-theme="d2000s"] .cockpit-rail { border-radius: 22px !important; border: 1px solid var(--hwy-line); background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(207,238,247,0.6)); box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 10px 24px rgba(10,60,80,0.18); backdrop-filter: blur(6px); }
/* Aqua bubble: bottom stop stays light enough for the dark navy ink to clear
   every stop of the gloss. */
[data-theme="d2000s"] .plan-button, [data-theme="d2000s"] .dock-tab { border-radius: 999px !important; border: 1px solid var(--hwy-green); background: linear-gradient(180deg, #ffffff 0%, var(--hwy-green-light) 60%, color-mix(in srgb, var(--hwy-green) 30%, var(--hwy-green-light)) 100%); color: var(--hwy-header-bg); font-weight: 700; box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 4px 10px rgba(10,60,80,0.35); text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
[data-theme="d2000s"] .chip, [data-theme="d2000s"] .nav-chip { border-radius: 999px !important; border: 1px solid var(--hwy-line); background: linear-gradient(180deg, #ffffff, var(--hwy-subtle)); box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset; }
[data-theme="d2000s"] input, [data-theme="d2000s"] select { border-radius: 999px !important; border: 1px solid var(--hwy-line); background: linear-gradient(180deg, #ffffff, #eef8fb); box-shadow: inset 0 2px 4px rgba(10,60,80,0.12); }
[data-theme="d2000s"] .stat-tile, [data-theme="d2000s"] .weather-card, [data-theme="d2000s"] .gas-stop, [data-theme="d2000s"] .poi-event { border-radius: 18px !important; border: 1px solid var(--hwy-line); background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(223,243,248,0.75)); box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 6px 14px rgba(10,60,80,0.12); }
[data-theme="d2000s"] .cockpit-dock, [data-theme="d2000s"] .feature-nav { border-radius: 24px !important; background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(79,195,224,0.35)); border: 1px solid var(--hwy-line); box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset; }
[data-theme="d2000s"] .section-heading, [data-theme="d2000s"] .app-title, [data-theme="d2000s"] .cockpit-title, [data-theme="d2000s"] h1, [data-theme="d2000s"] h2 { font-weight: 800; color: var(--hwy-accent); text-shadow: 0 1px 0 rgba(255,255,255,0.8); letter-spacing: 0.2px; }
[data-theme="d2000s"] #mapContainer { border-radius: 22px !important; border: 2px solid var(--hwy-green-light); box-shadow: 0 0 0 4px rgba(79,195,224,0.25), 0 10px 24px rgba(10,60,80,0.2); }

/* ══ d2010s ══ */
:root[data-theme="d2010s"] {
   --hwy-green: #3F51B5;
   --hwy-green-light: #7986CB;
   --hwy-accent: #886b15;
   --hwy-sand: #FAFAFA;
   --hwy-ink: #212121;
   --hwy-muted: #6b6b6b;
   --hwy-card: #FFFFFF;
   --hwy-line: #E0E0E0;
   --hwy-warn-bg: #FFF3E0;
   --hwy-warn-ink: #ba4607;
   --hwy-error: #c43b31;
   --hwy-header-bg: #3F51B5; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #FFFFFF;
   --hwy-map-bg: #E8EAF6;
   --hwy-subtle: #F5F5F5;
   --hwy-loud-bg: #FFF8E1;
}
:root[data-theme="d2010s"][data-mode="dark"] {
   --hwy-green: #5f6cae;
   --hwy-green-light: #C5CAE9;
   --hwy-accent: #FFD740;
   --hwy-sand: #121212;
   --hwy-ink: #EDEDED;
   --hwy-muted: #ABABAB;
   --hwy-card: #1E1E1E;
   --hwy-line: #333333;
   --hwy-warn-bg: #3E2723;
   --hwy-warn-ink: #FFCC80;
   --hwy-error: #ef6563;
   --hwy-header-bg: #1F1F1F; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #1E1E1E;
   --hwy-map-bg: #1A1A2E;
   --hwy-subtle: #242424;
   --hwy-loud-bg: #2A2410;
}
[data-theme="d2010s"] body {
  font-family: "Roboto", "Segoe UI", Arial, sans-serif;
  background: var(--hwy-sand);
  color: var(--hwy-ink);
  letter-spacing: .01em;
}
[data-theme="d2010s"] .cockpit,
[data-theme="d2010s"] .stat-tile,
[data-theme="d2010s"] .weather-card,
[data-theme="d2010s"] .gas-stop,
[data-theme="d2010s"] .poi-event {
  background: var(--hwy-card) !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
}
[data-theme="d2010s"] .cockpit-rail,
[data-theme="d2010s"] .cockpit-dock {
  background: var(--hwy-nav-bg) !important;
  border: none !important;
  box-shadow: 0 -1px 6px rgba(0,0,0,.16);
}
[data-theme="d2010s"] .plan-button {
  background: var(--hwy-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 24px !important;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: .05em;
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
}
[data-theme="d2010s"] .chip:not(.is-active),
[data-theme="d2010s"] .nav-chip:not(.is-active) {
  background: var(--hwy-subtle) !important;
  border: none !important;
  border-radius: 16px !important;
  text-transform: uppercase;
  font-size: .72em;
  letter-spacing: .04em;
}
[data-theme="d2010s"] .dock-tab { border-radius: 4px !important; color: var(--hwy-muted); }
[data-theme="d2010s"] .dock-tab.active { color: var(--hwy-accent); }
[data-theme="d2010s"] input,
[data-theme="d2010s"] select {
  background: var(--hwy-subtle) !important;
  border: none !important;
  border-bottom: 2px solid var(--hwy-green) !important;
  border-radius: 4px 4px 0 0 !important;
  color: var(--hwy-ink);
}
[data-theme="d2010s"] .section-heading,
[data-theme="d2010s"] .app-title,
[data-theme="d2010s"] .cockpit-title,
[data-theme="d2010s"] h1,
[data-theme="d2010s"] h2 {
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--hwy-ink);
}
[data-theme="d2010s"] #mapContainer {
  background: var(--hwy-map-bg);
  border-radius: 4px !important;
  box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14);
  overflow: hidden;
}
[data-theme="d2010s"] .feature-nav { background: var(--hwy-header-bg) !important; }

/* ══ d2020s ══ */
:root[data-theme="d2020s"] {
   --hwy-green: #41826f;
   --hwy-green-light: #BFE9DA;
   --hwy-accent: #6b5e99;
   --hwy-sand: #EEF0F5;
   --hwy-ink: #23252F;
   --hwy-muted: #5B6472;
   --hwy-card: #F7F8FC;
   --hwy-line: #DCE1EA;
   --hwy-warn-bg: #FDEBC8;
   --hwy-warn-ink: #7A5410;
   --hwy-error: #af4a52;
   --hwy-header-bg: #2B2D3A; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: #F2F3F8;
   --hwy-map-bg: #E6E9F0;
   --hwy-subtle: #E9ECF2;
   --hwy-loud-bg: #FBE7C6;
}
:root[data-theme="d2020s"][data-mode="dark"] {
   --hwy-green: #25845b;
   --hwy-green-light: #8AF0C4;
   --hwy-accent: #B26BFF;
   --hwy-sand: #0B0C12;
   --hwy-ink: #F1F3F8;
   --hwy-muted: #9CA3B5;
   --hwy-card: #1B1E29;
   --hwy-line: rgba(255,255,255,0.14);
   --hwy-warn-bg: #3A2C12;
   --hwy-warn-ink: #FFD479;
   --hwy-error: #FF6B6B;
   --hwy-header-bg: #14151D; --hwy-header-ink: #ffffff;
   --hwy-nav-bg: rgba(18,19,26,0.72);
   --hwy-map-bg: #101219;
   --hwy-subtle: rgba(255,255,255,0.05);
   --hwy-loud-bg: rgba(178,107,255,0.16);
}
[data-theme="d2020s"] body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 430;
  letter-spacing: 0.01em;
  background-color: var(--hwy-sand);
  background-image: radial-gradient(circle at 12% 0%, rgba(155,132,224,0.12), transparent 55%), radial-gradient(circle at 88% 100%, rgba(95,191,163,0.12), transparent 55%);
  color: var(--hwy-ink);
}
[data-theme="d2020s"] h1, [data-theme="d2020s"] h2, [data-theme="d2020s"] .app-title, [data-theme="d2020s"] .cockpit-title, [data-theme="d2020s"] .section-heading {
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--hwy-ink);
}
[data-theme="d2020s"] .cockpit, [data-theme="d2020s"] .stat-tile, [data-theme="d2020s"] .weather-card, [data-theme="d2020s"] .gas-stop, [data-theme="d2020s"] .poi-event, [data-theme="d2020s"] .cockpit-rail {
  background: var(--hwy-card) !important;
  border: 1px solid var(--hwy-line) !important;
  border-radius: 26px !important;
  box-shadow: 8px 8px 20px rgba(150,160,180,0.30), -8px -8px 20px rgba(255,255,255,0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
[data-theme="d2020s"] .plan-button, [data-theme="d2020s"] .chip, [data-theme="d2020s"] .nav-chip, [data-theme="d2020s"] .dock-tab {
  border-radius: 999px !important;
  border: 1px solid var(--hwy-line) !important;
  font-weight: 550;
}
[data-theme="d2020s"] .plan-button {
  background: linear-gradient(135deg, var(--hwy-green), color-mix(in srgb, var(--hwy-accent) 35%, var(--hwy-green))) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(155,132,224,0.35);
}
[data-theme="d2020s"] input, [data-theme="d2020s"] select {
  border-radius: 18px !important;
  border: 1px solid var(--hwy-line) !important;
  background: var(--hwy-subtle);
}
[data-theme="d2020s"] .cockpit-dock, [data-theme="d2020s"] .feature-nav {
  background: var(--hwy-nav-bg) !important;
  border-radius: 28px !important;
  border: 1px solid var(--hwy-line) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
[data-theme="d2020s"] #mapContainer {
  border-radius: 26px !important;
  overflow: hidden;
  border: 1px solid var(--hwy-line) !important;
}
/* Keyed on the resolved data-mode (themed pages always set it), NOT on
   prefers-color-scheme — the OS scheme can disagree with a forced mode. */
[data-mode="dark"][data-theme="d2020s"] .cockpit, [data-mode="dark"][data-theme="d2020s"] .stat-tile, [data-mode="dark"][data-theme="d2020s"] .weather-card, [data-mode="dark"][data-theme="d2020s"] .gas-stop, [data-mode="dark"][data-theme="d2020s"] .poi-event, [data-mode="dark"][data-theme="d2020s"] .cockpit-rail, [data-mode="dark"][data-theme="d2020s"] .cockpit-dock, [data-mode="dark"][data-theme="d2020s"] .feature-nav {
  background: rgba(27,30,41,0.55) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
}
[data-mode="dark"][data-theme="d2020s"] .plan-button {
  box-shadow: 0 0 24px rgba(178,107,255,0.5);
}

/* Robustness (lineart/lowpoly): keep the ground behind the map matching the
   theme so loading tiles never flash a mismatched (black) background, and make
   sure the near-white line-art map fits its route rather than the whole globe. */
[data-theme="lineart"] #mapContainer, [data-theme="lineart"] .cockpit-stage { background: var(--hwy-map-bg) !important; }
[data-theme="lowpoly"] #mapContainer, [data-theme="lowpoly"] .cockpit-stage { background: var(--hwy-map-bg) !important; }