/* (u209) The Navy look, the redesigned Home pieces (every look) and the regrouped Settings.
   Navy: the splash's navy, the real SEQ map faint behind everything (#nv-bg, js/navybg.js), orange only for "time to leave". */

/* ===== the new Home parts, for every look: the day line, the countdown, the weather, the later trip, Get me home, the family line ===== */
:root { --hx-hot: var(--accent); --hx-text: var(--text); --hx-muted: var(--muted); --hx-line: var(--line); --hx-trk: var(--surface-2); --hx-on-hot: var(--on-accent); --hx-tile: color-mix(in srgb, var(--text) 8%, transparent); }
:root[data-look='clearway'] { --hx-hot: var(--accent); }
:root[data-look='night-route'] { --hx-hot: #FFB547; --hx-on-hot: #1A1000; }
:root[data-look='recess'] #h-hero { --hx-hot: #17140F; --hx-text: #17140F; --hx-muted: #17140F; --hx-line: rgba(23,20,15,.35); --hx-trk: rgba(23,20,15,.2); --hx-on-hot: #F7F2EA; --hx-tile: rgba(23,20,15,.1); }
:root[data-look='recess'] .hx-later { --hx-hot: #B9390A; }
:root[data-look='recess'][data-theme='dark'] .hx-later { --hx-hot: #FFAB80; --hx-on-hot: #17140F; }

.hx-day { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.hx-day[hidden] { display: none; }
.hx-dayi .i { width: 26px; height: 26px; color: var(--accent); }
.hx-day b { display: block; font-size: 15px; line-height: 1.25; font-weight: 700; }
.hx-day span { font-size: 13px; color: var(--muted); }
html.hx-hasday .h-wx { display: none; }

.hx-lab { display: block; font-size: 14px; font-weight: 600; color: var(--hx-muted); }
.hx-cd, .hx-at { margin: 8px 0 0; color: var(--hx-text); }
.hx-n { display: block; font-family: var(--nl-number); font-variant-numeric: tabular-nums; font-weight: 800; font-size: clamp(56px, 19vw, 76px); line-height: .98; letter-spacing: -.045em; color: var(--hx-text); }
.hx-n .colon { display: inline-block; margin: 0 .02em; color: var(--hx-hot); animation: hx-blink 1s steps(1) infinite; }
@keyframes hx-blink { 50% { opacity: .25; } }
.hx-later .hx-n { font-size: clamp(38px, 12vw, 46px); }
.hx-cd.hx-now .hx-n { font-size: 34px; color: var(--hx-hot); }
.hx-bar { height: 8px; border-radius: 99px; background: var(--hx-trk); margin-top: 14px; overflow: hidden; }
.hx-bar i { display: block; width: 100%; height: 100%; border-radius: 99px; background: var(--hx-hot); transform-origin: left center; will-change: transform; }
.hx-barl { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; font-size: 13px; font-weight: 600; color: var(--hx-muted); }
#h-hero:has(.hx-cd) :is(.tl-leave, .big) { display: none; }
.hx-wx { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 11px 12px; border-radius: 14px; background: var(--hx-tile); color: var(--hx-text); }
.hx-wx > .i { width: 28px; height: 28px; flex: none; }
.hx-wx > div { min-width: 0; }
.hx-wx b { display: block; font-size: 15px; font-weight: 650; line-height: 1.25; }
.hx-wx span { display: block; font-size: 13px; color: var(--hx-muted); }
.hx-wx em { display: inline-block; margin-top: 6px; font-style: normal; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 99px; background: var(--hx-hot); color: var(--hx-on-hot); white-space: nowrap; }
.hx-later { margin-top: 12px; }
.hx-later .h-kick .hx-k { color: var(--hx-hot); }
:root[data-look='recess'] .hx-later .h-kick .hx-k { color: var(--hx-hot); }
.hx-when { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; }
.hx-mini { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; color: var(--muted); }
.hx-mini b { color: var(--text); font-weight: 650; }
.hx-live { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 12px; font-weight: 650; color: var(--muted); }
.hx-live i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--muted); }
.hx-live.on i { background: var(--ok); border-color: var(--ok); }
.hx-done { display: flex; align-items: center; gap: 8px; margin: 12px 4px 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.hx-done .i { color: var(--ok); }
.hx-home, .hx-fam { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 14px; margin: 0 0 12px; text-align: left; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.hx-home b { display: block; font-size: 17px; font-weight: 700; }
.hx-home .grow > span { display: block; font-size: 13px; color: var(--muted); }
.hx-ib { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--accent); color: var(--on-accent); flex: none; }
.hx-ib .i { width: 22px; height: 22px; }
.hx-home .grow, .hx-fam p { flex: 1; min-width: 0; }
.hx-home > .i, .hx-fam > .i { color: var(--muted); flex: none; }
.hx-fam { margin-top: 4px; }
.hx-fam p { margin: 0; font-size: 14px; line-height: 1.3; }
.hx-faces { display: flex; flex: none; }
.hx-faces i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 13px; border: 2px solid var(--bg); margin-left: -8px; color: #06102B; background: #9DB5FF; }
.hx-faces i:first-child { margin-left: 0; }
.hx-faces i:nth-child(2) { background: #FFB88A; } .hx-faces i:nth-child(3) { background: #8FE0B5; }
html.hx-hasday .h-wx-credit { display: none; }
.hx-mini .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the Recess-style timeline: icon blocks on a dotted line (the card's own rows, same words and safety lines) */
#h-hero .h-drop { gap: 14px; margin-top: 14px; }
#h-hero .h-drop::before { left: 17px; top: 38px; height: 20px; }
#h-hero .h-drop-ico { width: 36px; height: 36px; border-radius: 11px; background: var(--hx-tile); color: var(--hx-text); }
#h-hero .h-drop-ico .i { width: 18px; height: 18px; }
#h-hero .h-drop-row:first-child .h-drop-ico { background: var(--hx-hot); color: var(--hx-on-hot); }
#h-hero .h-drop-row .badge { flex: none; min-width: 36px; }
@media (prefers-reduced-motion: reduce) { .hx-n .colon { animation: none; } }

/* ===== Navy ===== */
@font-face { font-family: 'Instrument Serif'; src: url('../fonts/instrument-serif.woff2') format('woff2'); font-weight: 400; font-display: swap; }
:root[data-look='navy'] {
  --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --head: 'Instrument Serif', 'GSQ Serif', Georgia, serif;
  --nl-number: 'Bricolage Grotesque', 'Inter Tight', system-ui, sans-serif;
  --bg: #060a16; --surface: #0f1a38; --surface-2: #18274d; --surface-3: #1f315c; --text: #F3F6FF; --muted: #B4BFDC; --text-3: #94A1C4; --line: rgba(214,224,255,.16);
  --accent: #7C9DFF; --accent-soft: rgba(124,157,255,.18); --on-accent: #06102B; --ok: #4BD58B; --ok-soft: rgba(75,213,139,.14); --warn: #F2B35C; --warn-soft: rgba(242,179,92,.14); --bad: #FF8A80; --bad-soft: rgba(255,138,128,.14);
  --hot: #FF8A55; --band-text: #F3F6FF; --band-muted: #B4BFDC; --tog-off: rgba(255,255,255,.26); --nl-route: #7C9DFF; --ring: rgba(243,246,255,.5);
  --hero-bg: #13214a; --hero-shadow: 5px 5px 0 #FF8A55;
  --hx-hot: #FF8A55; --hx-on-hot: #14100c; --hx-text: #fff; --hx-muted: #BAC5E3; --hx-line: rgba(214,224,255,.2); --hx-trk: rgba(255,255,255,.14); --hx-tile: rgba(255,255,255,.08);
  color-scheme: dark;
}
:root[data-look='navy'][data-theme='light'] {
  --bg: #EDF1FA; --surface: #FFFFFF; --surface-2: #E4EAF6; --surface-3: #D8E0F0; --text: #0B1430; --muted: #46526F; --text-3: #5C6784; --line: rgba(11,20,48,.14);
  --accent: #2A55D6; --accent-soft: #E3EAFD; --on-accent: #FFFFFF; --ok: #0E7A4A; --ok-soft: #DDF3E8; --warn: #8A4B00; --warn-soft: #FFF1DC; --bad: #B42318; --bad-soft: #FDE8E6;
  --hot: #B8400B; --tog-off: #8C97B3; --nl-route: #2A55D6; --ring: rgba(11,20,48,.5);
  --hero-bg: #0b1430; --hero-shadow: 5px 5px 0 #E8581F; color-scheme: light;
}
:root[data-look='navy'] { background-color: var(--bg); }
/* the backdrop: ONE fixed element behind every screen; the real SEQ map from js/geo.js, faint */
#nv-bg { --b: var(--nv-band, calc(var(--safe-top) + 232px)); position: fixed; inset: 0; z-index: 0; pointer-events: none; contain: strict; background: radial-gradient(120% 60% at 50% 0%, #0e1a3c 0%, #07102a 45%, transparent 100%); will-change: transform; }
#nv-bg svg { position: absolute; right: -12px; top: calc(var(--safe-top) + 4px); width: 250px; height: 395px; opacity: .85; -webkit-mask-image: linear-gradient(#000 55%, transparent 98%); mask-image: linear-gradient(#000 55%, transparent 98%); }
#nv-bg .nv-land { fill: #0f1a38; stroke: rgba(214,224,255,.42); stroke-width: .3; stroke-linejoin: round; }
#nv-bg .nv-riv { fill: none; stroke: rgba(124,157,255,.35); stroke-width: .25; }
#nv-bg .nv-rt { fill: none; stroke: #5b82ff; stroke-width: .4; stroke-linecap: round; opacity: .7; }
#nv-bg .nv-pin { fill: rgba(124,157,255,.35); stroke: #9DB5FF; stroke-width: 1.8; stroke-linejoin: round; }
#nv-bg .nv-pind { fill: #9DB5FF; }
:root[data-look='navy'][data-theme='light'] #nv-bg { bottom: auto; height: var(--b); border-radius: 0 0 30px 30px; overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, #12214a 0%, #08112b 100%); contain: layout paint; }
:root[data-look='navy'][data-theme='light'] #nv-bg svg { opacity: .8; top: calc(var(--safe-top) - 40px); -webkit-mask-image: none; mask-image: none; }
:root[data-look='navy']:has(#map:not([hidden])) #nv-bg { display: none; }
:root[data-look='navy'] #app { z-index: 1; }
:root[data-look='navy'] .screen { background: transparent; }
:root[data-look='navy'] .nav { background: rgba(8,14,32,.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
:root[data-look='navy'][data-theme='light'] .nav { background: rgba(255,255,255,.94); }
:root[data-look='navy'] .nav button[aria-current='page'] { color: var(--text); background: none; margin: 0; }
:root[data-look='navy'] .nav button[aria-current='page'] .i { color: var(--accent); }
:root[data-look='navy'] .nav .ind::before { background: transparent; }
/* header band: logo, greeting (serif), date, day line */
:root[data-look='navy'] .h-top { margin-bottom: 14px; }
:root[data-look='navy'] .h-top .greet { font-family: var(--head); font-weight: 400; font-size: 36px; line-height: 1.05; letter-spacing: -.01em; color: var(--band-text); }
:root[data-look='navy'] .h-top .grow { color: var(--band-text); }
:root[data-look='navy'] .h-date { color: var(--band-muted); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; font-weight: 700; }
:root[data-look='navy'] .h-top .h-wx { display: none; }
:root[data-look='navy'] .hx-day { background: rgba(255,255,255,.1); border-color: rgba(214,224,255,.22); color: #F3F6FF; }
:root[data-look='navy'] .hx-day span { color: #C7D1EC; }
:root[data-look='navy'] .hx-dayi .i { color: #F3F6FF; }
:root[data-look='navy'] .h-help { background: rgba(255,255,255,.12); color: #F3F6FF; }
/* the trip cards */
:root[data-look='navy'] #h-hero { background: var(--hero-bg); color: #fff; border: 2px solid #FF8A55; box-shadow: var(--hero-shadow); border-radius: var(--r); --text: #fff; --muted: #BAC5E3; --line: rgba(214,224,255,.2); --surface-2: rgba(255,255,255,.1); --accent: #FF8A55; --on-accent: #14100c; --text-3: #AEBADB; --ok: #4BD58B; --warn: #F2B35C; --bad: #FF8A80; margin-bottom: 18px; }
:root[data-look='navy'] .hx-later { background: var(--surface); border: 1.5px solid var(--line); box-shadow: none; }
:root[data-look='navy'][data-theme='light'] .hx-later { --hx-text: var(--text); --hx-muted: var(--muted); --hx-trk: var(--surface-2); --hx-hot: var(--hot); --hx-on-hot: #fff; --hx-tile: rgba(11,20,48,.06); }
:root[data-look='navy'] .section h2, :root[data-look='navy'] .h-sec h2 { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* the Look picker's Navy tile */
.lk-card[data-look='navy'] .lk-m-hero { background: #13214a; color: #fff; border: 1.5px solid #FF8A55; box-shadow: 3px 3px 0 #FF8A55; border-radius: 12px; }
.lk-card[data-look='navy'] .lk-m-big { color: #fff; font-family: 'Bricolage Grotesque', system-ui; font-size: 26px; }
.lk-card[data-look='navy'] .lk-m-kick { color: #BAC5E3; }
.lk-card[data-look='navy'] .lk-m-btn { background: #FF8A55; }
.lk-card[data-look='navy'] .lk-mini { background: #060A16; }
/* Classic's next-trip card gets the Recess outline and offset shadow, in Classic's own colours */
:root[data-look='classic'] #h-hero { border: 2px solid var(--text); box-shadow: 5px 5px 0 var(--accent); margin-bottom: 18px; }
:root[data-look='classic'][data-theme='dark'] #h-hero { border-color: #F2EEEA; }
:root[data-look='classic'] .hx-later { border: 1.5px solid var(--line); box-shadow: none; }

/* ===== Settings (Me): header, seven groups, 56 px rows, 52 px switches. Follows the rider's look; the navy header only in Navy. ===== */
.sg-head { margin: 2px 0 6px; }
.sg-top { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.sg-kick { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sg-logo svg { width: 34px; height: 34px; display: block; }
.sg-head h1 { margin: 4px 0 14px; }
.sgrp { margin: 0 0 4px; }
.sg-h { margin: 22px 6px 8px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sg-sub { margin: 16px 6px 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.sgrp .list + .list, .sgrp .card + .list, .sgrp .list + .card, .sgrp .card + .card { margin-top: 10px; }
.sgrp .item { min-height: 56px; }
.sgrp .item .ico, .sgrp .ico { width: 36px; height: 36px; border-radius: 11px; }
.sgrp .toggle { width: 52px; height: 32px; }
.sgrp .toggle::after { width: 26px; height: 26px; }
.sgrp .toggle[aria-checked='true']::after { transform: translateX(20px); }
:root[data-look='navy'] .sg-head h1 { font-family: var(--head); font-weight: 400; font-size: 42px; line-height: 1; letter-spacing: -.01em; color: var(--band-text); }
:root[data-look='navy'] .sg-kick { color: var(--band-muted); }
:root[data-look='navy'] .sg-head > :not(.sg-top):not(h1) { background: rgba(255,255,255,.1); border: 1px solid rgba(214,224,255,.22); color: #F3F6FF; --text: #F3F6FF; --muted: #C7D1EC; --line: rgba(214,224,255,.18); --surface: transparent; --surface-2: rgba(255,255,255,.12); box-shadow: none; border-radius: 18px; }
:root[data-look='navy'] .sgrp .ico.accent { background: var(--accent-soft); color: var(--accent); }
:root[data-look='navy'][data-theme='dark'] .sgrp .toggle[aria-checked='true'] { background: #5C84FF; }
:root[data-look='navy'][data-theme='dark'] .sgrp .toggle[aria-checked='true']::after { background: #fff; }
:root[data-look='navy'] .searchrow { margin-top: 8px; }
/* (u210, Isaac 25 Oct "map looks a bit off"): no clipped land block (the filled coast showed a hard straight edge where the map ends),
   no straight route line through the text, softer and only in the top corner, fading out in every direction before the cards. */
#nv-bg svg { width: 230px; height: 360px; right: -18px; opacity: .5;
  -webkit-mask-image: radial-gradient(120% 85% at 85% 18%, #000 35%, transparent 78%); mask-image: radial-gradient(120% 85% at 85% 18%, #000 35%, transparent 78%); }
#nv-bg .nv-land { fill: none; stroke: rgba(214,224,255,.38); stroke-width: .35; }
#nv-bg .nv-rt { display: none; }
#nv-bg .nv-riv { stroke: rgba(124,157,255,.28); }
:root[data-look='navy'][data-theme='light'] #nv-bg svg { opacity: .55; -webkit-mask-image: radial-gradient(120% 90% at 85% 25%, #000 40%, transparent 85%); mask-image: radial-gradient(120% 90% at 85% 25%, #000 40%, transparent 85%); }
:root[data-look='navy'] .hx-day, :root[data-look='navy'] .h-ask, :root[data-look='navy'] .h-search { background-color: var(--surface); }
:root[data-look='navy'] #h-search, :root[data-look='navy'] #h-dir, :root[data-look='navy'] .hx-day, :root[data-look='navy'] .h-wxcard, :root[data-look='navy'] [class*="weather"] { background-color: var(--surface) !important; }
/* (u214) Navy LIGHT: the day/weather card sits on the navy band with light text (#F3F6FF, #C7D1EC), but the u210 rule above forced a white
   --surface behind it, so the text was near-invisible (about 1.1:1). Back to the band's own glass; text is 12:1 / 9:1 on it (AA needs 4.5:1). */
:root[data-look='navy'][data-theme='light'] .hx-day { background-color: rgba(255,255,255,.12) !important; border-color: rgba(214,224,255,.28); }
/* (u214) Navy LIGHT: "Change for tomorrow" / "Full plan" in the navy trip card kept the light theme's grey (#46526F, about 2:1 on navy); same blue-white as the card's other small text (#BAC5E3, 9:1) */
:root[data-look='navy'][data-theme='light'] #h-hero :is(.link, .h-more) { color: #BAC5E3; }