/* ══════════════════════════════════════════════════════════════════
   Triply design system
   Loaded after each page's own <style>, so these tokens win and every page
   shares one palette. Three palettes: Hội An (default), Biển, Sen —
   chosen with the palette button (triply-theme.js → <html data-palette>).
   Each palette has a dark (default when the device is dark) and a light set.
   ══════════════════════════════════════════════════════════════════ */

/* ── Hội An: lantern red, turmeric, jade; hero is open sky (day / night) ── */
:root, [data-theme="dark"] {
  --bg: #1A1511;
  --bg2: #231C16;
  --bg3: #2E251D;
  --bg4: #3A2F25;
  --bg5: #463A2E;
  --tx: #F3E9DA;
  --tx2: #CDBFAC;
  --tx3: #AFA08C;
  --tx4: #A09280;
  --bd: #33291F;
  --bd2: #42362A;
  --bd3: #574836;
  --brand: #F07A55;
  --brand-h: #F49172;
  --on-brand: #1A0D08;
  --brand-tint: rgba(240,122,85,.16);
  --brand-ink: #F59576;
  --hero-bg: #182136;
  --hero-tx: #FFF1DE;
  --hero-tx2: rgba(255,241,222,.86);
  --hero-label: #FFD98A;
  --hero-acc: #F2B33D;
  --hero-acc-tx: #2B1D12;
  --hero-sky: linear-gradient(180deg, #10172A 0%, #1A2440 48%, #2D2A40 80%, #3B2D33 100%);
  --hero-glow: radial-gradient(42% 38% at 84% 12%, rgba(255,226,170,.14), rgba(255,226,170,0) 70%);
  --sea-a: #26324F;
  --sea-b: #1D2842;
  --cloud-o: .05;
  --route: rgba(255,241,222,.42);
  --sail: #F3E9DA;
  --hull: #0E1424;
  --star: rgba(255,246,225,.9);
  --red: #F07A55;
  --gold: #EDB44D;
  --green: #74C08F;
  --blue: #7DB0E8;
  --teal: #5FB8BE;
  --indigo: #A9ACE6;
  --violet: #C3A6EE;
  --orange: #F2955E;
  --on-status: #1A1208;
  --c-cal: #6CC79E;
  --c-money: #EDB44D;
  --c-place: #F07A55;
  --c-map: #74C08F;
  --c-world: #7DB0E8;
  --c-concert: #F07AA8;
  --c-pass: #B9A1E8;
  --c-book: #F2955E;
}
[data-theme="light"] {
  --bg: #FBF5E8;
  --bg2: #FFFDF7;
  --bg3: #F6ECD8;
  --bg4: #EEDFC2;
  --bg5: #E3D0AC;
  --tx: #2B1D12;
  --tx2: #5C4630;
  --tx3: #6B5640;
  --tx4: #735E47;
  --bd: #EBDDC2;
  --bd2: #DFCCA8;
  --bd3: #CDB58A;
  --brand: #C23B22;
  --brand-h: #A93219;
  --on-brand: #FFFFFF;
  --brand-tint: #FBE1D2;
  --brand-ink: #A3301A;
  --hero-bg: #D4E5EB;
  --hero-tx: #2B1D12;
  --hero-tx2: #4C3A28;
  --hero-label: #A3301A;
  --hero-acc: #C23B22;
  --hero-acc-tx: #FFFFFF;
  --hero-sky: linear-gradient(180deg, #C9DFE8 0%, #DDEAEB 42%, #F1ECDF 78%, #F7E5CC 100%);
  --hero-glow: radial-gradient(40% 48% at 84% 8%, rgba(255,214,150,.62), rgba(255,214,150,0) 70%);
  --sea-a: #BCD6DE;
  --sea-b: #9FC3CE;
  --cloud-o: .92;
  --route: rgba(43,29,18,.4);
  --sail: #FFFDF7;
  --hull: #2B1D12;
  --star: transparent;
  --red: #A3301A;
  --gold: #7A4F0A;
  --green: #2A6542;
  --blue: #2C62A0;
  --teal: #2E6E58;
  --indigo: #44497F;
  --violet: #6B4FA0;
  --orange: #A4501C;
  --on-status: #FFFFFF;
  --c-cal: #2E7D5B;
  --c-money: #C98A1B;
  --c-place: #C23B22;
  --c-map: #2F7048;
  --c-world: #2C62A0;
  --c-concert: #B8336A;
  --c-pass: #6B4FA0;
  --c-book: #D0622A;
}

/* ── Biển: sea teal + coral ── */
html[data-palette="bien"] {
  --bg: #0F1718;
  --bg2: #142022;
  --bg3: #1A2A2C;
  --bg4: #223538;
  --bg5: #2B4144;
  --tx: #E6F2EF;
  --tx2: #B5CBC6;
  --tx3: #93ABA6;
  --tx4: #87A09A;
  --bd: #1F2F31;
  --bd2: #2A3D40;
  --bd3: #3A5054;
  --brand: #3CC2B2;
  --brand-h: #5DD0C2;
  --on-brand: #062320;
  --brand-tint: rgba(60,194,178,.15);
  --brand-ink: #5DD0C2;
  --hero-bg: #0C2230;
  --hero-tx: #F0FAF8;
  --hero-tx2: rgba(240,250,248,.86);
  --hero-label: #FFC2B0;
  --hero-acc: #FF8E6E;
  --hero-acc-tx: #3A1408;
  --hero-sky: linear-gradient(180deg, #0A1824 0%, #0F2836 50%, #163640 82%, #1C3D42 100%);
  --hero-glow: radial-gradient(42% 38% at 84% 12%, rgba(200,240,235,.12), rgba(200,240,235,0) 70%);
  --sea-a: #164451;
  --sea-b: #103540;
  --cloud-o: .05;
  --route: rgba(240,250,248,.42);
  --sail: #E6F2EF;
  --hull: #06141A;
  --star: rgba(235,255,250,.9);
  --red: #FF8E6E;
  --gold: #F2C14E;
  --green: #5ED39A;
  --blue: #74B4F2;
  --teal: #3CC2B2;
  --indigo: #A9ACE6;
  --violet: #A99BF0;
  --orange: #FFA466;
  --on-status: #06201C;
  --c-cal: #3CC2B2;
  --c-money: #F2C14E;
  --c-place: #FF8E6E;
  --c-map: #5ED39A;
  --c-world: #74B4F2;
  --c-concert: #F27AA3;
  --c-pass: #A99BF0;
  --c-book: #FFA466;
}
html[data-palette="bien"][data-theme="light"] {
  --bg: #F3F8F6;
  --bg2: #FFFFFF;
  --bg3: #E7F1EE;
  --bg4: #D6E7E2;
  --bg5: #C3DAD4;
  --tx: #10302C;
  --tx2: #3B5955;
  --tx3: #4E6A66;
  --tx4: #56716C;
  --bd: #DCE9E5;
  --bd2: #C8DCD7;
  --bd3: #AFCAC3;
  --brand: #0B7268;
  --brand-h: #095E56;
  --on-brand: #FFFFFF;
  --brand-tint: #D3EEE9;
  --brand-ink: #0B6A61;
  --hero-bg: #CDEBEC;
  --hero-tx: #10302C;
  --hero-tx2: #2F4D49;
  --hero-label: #0B6A61;
  --hero-acc: #0B7268;
  --hero-acc-tx: #FFFFFF;
  --hero-sky: linear-gradient(180deg, #BFE6EA 0%, #D9F0EE 45%, #EEF6F1 80%, #F8F0E2 100%);
  --hero-glow: radial-gradient(40% 48% at 84% 8%, rgba(255,205,170,.58), rgba(255,205,170,0) 70%);
  --sea-a: #A9DCDD;
  --sea-b: #84C8CB;
  --cloud-o: .94;
  --route: rgba(16,48,44,.4);
  --sail: #FFFFFF;
  --hull: #10302C;
  --star: transparent;
  --red: #B9442A;
  --gold: #735300;
  --green: #176840;
  --blue: #1F64B0;
  --teal: #0B7268;
  --indigo: #44497F;
  --violet: #6A55C2;
  --orange: #A4501C;
  --on-status: #FFFFFF;
  --c-cal: #0B7268;
  --c-money: #E0A21E;
  --c-place: #E2603F;
  --c-map: #1F8A55;
  --c-world: #1F64B0;
  --c-concert: #D6457A;
  --c-pass: #6A55C2;
  --c-book: #F07A3A;
}

/* ── Sen: lotus pink + leaf green ── */
html[data-palette="sen"] {
  --bg: #1A1216;
  --bg2: #22181D;
  --bg3: #2C1F26;
  --bg4: #372730;
  --bg5: #43303A;
  --tx: #F6E8EC;
  --tx2: #D3BCC3;
  --tx3: #B39BA3;
  --tx4: #A58E96;
  --bd: #33242B;
  --bd2: #422F38;
  --bd3: #573E4A;
  --brand: #F27AA3;
  --brand-h: #F595B6;
  --on-brand: #2A0614;
  --brand-tint: rgba(242,122,163,.15);
  --brand-ink: #F595B6;
  --hero-bg: #1E1628;
  --hero-tx: #F6EEE8;
  --hero-tx2: rgba(246,238,232,.86);
  --hero-label: #FFC6D9;
  --hero-acc: #F59BB9;
  --hero-acc-tx: #3D0A1E;
  --hero-sky: linear-gradient(180deg, #160F22 0%, #22183A 48%, #36223C 80%, #432838 100%);
  --hero-glow: radial-gradient(42% 38% at 84% 12%, rgba(255,205,225,.13), rgba(255,205,225,0) 70%);
  --sea-a: #2C2244;
  --sea-b: #231B38;
  --cloud-o: .05;
  --route: rgba(246,238,232,.42);
  --sail: #F6E8EC;
  --hull: #120A18;
  --star: rgba(255,240,246,.9);
  --red: #F27AA3;
  --gold: #EDB44D;
  --green: #6CCB97;
  --blue: #7DB0E8;
  --teal: #6CCB97;
  --indigo: #A9ACE6;
  --violet: #B9A1E8;
  --orange: #F2955E;
  --on-status: #1A0A10;
  --c-cal: #6CCB97;
  --c-money: #EDB44D;
  --c-place: #F27AA3;
  --c-map: #6CCB97;
  --c-world: #7DB0E8;
  --c-concert: #F27AA3;
  --c-pass: #B9A1E8;
  --c-book: #F2955E;
}
html[data-palette="sen"][data-theme="light"] {
  --bg: #FFF7F3;
  --bg2: #FFFFFF;
  --bg3: #FBEDE7;
  --bg4: #F4DDD3;
  --bg5: #EBCBBE;
  --tx: #2D1A20;
  --tx2: #5E4048;
  --tx3: #6E525A;
  --tx4: #765A61;
  --bd: #F2E1DA;
  --bd2: #E8CFC5;
  --bd3: #D9B5A8;
  --brand: #BF2D63;
  --brand-h: #A5244F;
  --on-brand: #FFFFFF;
  --brand-tint: #FBDDE7;
  --brand-ink: #AD2759;
  --hero-bg: #F3DCE3;
  --hero-tx: #2D1A20;
  --hero-tx2: #553841;
  --hero-label: #AD2759;
  --hero-acc: #BF2D63;
  --hero-acc-tx: #FFFFFF;
  --hero-sky: linear-gradient(180deg, #F1D6E0 0%, #F5E3E5 42%, #F8EDE6 80%, #F9E6D6 100%);
  --hero-glow: radial-gradient(40% 48% at 84% 8%, rgba(255,210,170,.6), rgba(255,210,170,0) 70%);
  --sea-a: #E8D0DA;
  --sea-b: #D8B6C6;
  --cloud-o: .92;
  --route: rgba(45,26,32,.38);
  --sail: #FFFFFF;
  --hull: #2D1A20;
  --star: transparent;
  --red: #AD2759;
  --gold: #7A4F0A;
  --green: #246B4C;
  --blue: #2C62A0;
  --teal: #246B4C;
  --indigo: #44497F;
  --violet: #7A4FB0;
  --orange: #A4501C;
  --on-status: #FFFFFF;
  --c-cal: #246B4C;
  --c-money: #D08A1E;
  --c-place: #BF2D63;
  --c-map: #2E8B57;
  --c-world: #2C62A0;
  --c-concert: #D2386C;
  --c-pass: #7A4FB0;
  --c-book: #E06A3A;
}

/* ── Shared tokens derived from the palette ── */
:root {
  --fd: 'Newsreader', Georgia, 'Times New Roman', serif;
  --fb: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tx1: var(--tx);
  --red2: var(--brand-h); --rust2: var(--brand-h);
  --red-bg: color-mix(in srgb, var(--red) 9%, transparent); --red-bd: color-mix(in srgb, var(--red) 28%, transparent);
  --red-pale: var(--red-bg); --rust-pale: var(--red-bg);
  --gold2: var(--gold); --amber: var(--gold); --amber2: var(--gold);
  --gold-bg: color-mix(in srgb, var(--gold) 7%, transparent); --gold-bd: color-mix(in srgb, var(--gold) 28%, transparent); --amber-pale: var(--gold-bg);
  --green2: var(--green); --teal2: var(--teal);
  --green-bg: color-mix(in srgb, var(--green) 7%, transparent); --green-bd: color-mix(in srgb, var(--green) 28%, transparent);
  --green-pale: var(--green-bg); --teal-pale: color-mix(in srgb, var(--teal) 10%, transparent);
  --blue2: var(--blue); --blue-bg: color-mix(in srgb, var(--blue) 10%, transparent);
  --indigo2: var(--indigo); --indigo-pale: color-mix(in srgb, var(--indigo) 10%, transparent);
  --on-red: var(--on-status); --on-gold: var(--on-status); --on-green: var(--on-status);
  --fill-pri: var(--brand); --fill-pri-h: var(--brand-h); --on-pri: var(--on-brand);
  --rg: color-mix(in srgb, var(--red) 25%, transparent); --gg: color-mix(in srgb, var(--gold) 25%, transparent); --grg: color-mix(in srgb, var(--green) 30%, transparent);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.25); --shadow: 0 1px 3px rgba(0,0,0,.25); --shadow-lg: 0 12px 32px rgba(0,0,0,.35);
  --r: 10px; --r2: 12px; --r3: 14px;
  color-scheme: dark;
}
[data-theme="light"] {
  --shadow-sm: 0 1px 2px rgba(60,40,20,.06); --shadow: 0 1px 3px rgba(60,40,20,.07); --shadow-lg: 0 12px 32px rgba(60,40,20,.12);
  color-scheme: light;
}

/* ── Base ── */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fb);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
}
input, select, textarea, button { font-family: inherit; }
/* The hidden attribute always hides, even on elements styled display:flex/grid. */
[hidden] { display: none !important; }
::selection { background: var(--brand-tint); }

/* Headlines: one serif, upright. No coloured italic "accent words". */
h1, h2, h3 { font-optical-sizing: auto; text-wrap: balance; }
h1 em, h2 em, h3 em, h1 i, h2 i,
[class*="title"] em, [class*="heading"] em, [class*="hero"] h1 em, [class*="hero"] h2 em, .at-name em {
  font-style: normal !important; color: inherit !important; -webkit-text-fill-color: currentColor;
}

/* Numbers line up in tables, stats and timelines. */
time, .num, [class*="amount"], [class*="price"], [class*="-num"], [class*="cost"] { font-variant-numeric: tabular-nums; }

/* Calm focus ring in ink rather than a glowing gold halo. */
:focus-visible { outline: 2px solid var(--tx); outline-offset: 2px; }

/* Line icons (triply-icons.js) sit on the text baseline at the current font size. */
svg.ti { width: 1.05em; height: 1.05em; vertical-align: -0.17em; flex-shrink: 0; stroke-width: 1.75; }
.ti-lg svg.ti, svg.ti.ti-lg { stroke-width: 1.5; }

/* Toasts: ink chips, not glowing pills. */
#triply-toast, #tt, #undoToast {
  background: var(--fill-pri) !important; color: var(--on-pri) !important;
  border-radius: 10px !important; box-shadow: var(--shadow-lg) !important;
  font-family: var(--fb) !important;
}

/* Leaflet controls follow the palette. */
.leaflet-container { font-family: var(--fb) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Wordmark: "Triply" in ink with a small lacquer-red full stop. */
span.logo-dot { display:inline-block; width:.2em; height:.2em; border-radius:50%; background:var(--brand); margin-left:.05em; vertical-align:baseline; font-size:inherit; padding:0; }
.logo em, .nav-logo em { font-style:normal; }

/* Theme switch: a quiet square icon button on every page. */
.theme-toggle { border-radius: 8px !important; background: transparent !important; border: 1px solid var(--bd2) !important; color: var(--tx2) !important; }
.theme-toggle:hover { transform: none !important; color: var(--tx) !important; border-color: var(--bd3) !important; }

/* ── Phones: toolbars scroll sideways, wide tables scroll inside their card ── */
@media (max-width: 768px) {
  .topbar { flex-wrap: wrap; row-gap: 10px; }
  .topbar > .top-actions { order: 3; width: 100%; }
  .top-actions { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .top-actions::-webkit-scrollbar { display: none; }
  .top-actions > * { flex-shrink: 0; white-space: nowrap; }
  table.exp-table, table.file-table { display: block; overflow-x: auto; white-space: nowrap; position: relative; }
  .sc-head { flex-wrap: wrap; gap: 8px; }
  .bc-amount { font-size: clamp(17px, 5.2vw, 22px) !important; white-space: nowrap; }
  .steps { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .steps > * { flex-shrink: 0; }
}

/* ══ Colour layer: where the palette shows ══════════════════════════ */

/* Each part of the app keeps its own colour wherever it is linked from. */
html a[href*="triply-timeline"] svg.ti, html a[href*="triply-create-trip"] svg.ti { color: var(--c-cal); }
html a[href*="triply-budget"] svg.ti, html a[href*="triply-import"] svg.ti { color: var(--c-money); }
html a[href*="triply-places"] svg.ti { color: var(--c-place); }
html a[href*="triply-map"] svg.ti { color: var(--c-map); }
html a[href*="triply-world"] svg.ti { color: var(--c-world); }
html a[href*="triply-concerts"] svg.ti { color: var(--c-concert); }
html a[href*="triply-passport"] svg.ti { color: var(--c-pass); }
html a[href*="triply-booking"] svg.ti, html a[href*="triply-affiliate"] svg.ti { color: var(--c-book); }
/* …except on filled buttons, where the icon follows the button text. */
html .btn.pri svg.ti, html .btn-primary svg.ti, html .tbtn.primary svg.ti, html .top-btn.primary svg.ti { color: inherit !important; }

/* Dashboard */
html .sb-item.active { background: var(--brand-tint); color: var(--brand-ink); }
html .sb-item.active svg.ti { color: var(--brand-ink) !important; }
html .stat-card:nth-child(1) .sc-val { color: var(--c-place); }
html .stat-card:nth-child(2) .sc-val { color: var(--c-cal); }
html .stat-card:nth-child(3) .sc-val { color: var(--c-book); }
html .stat-card:nth-child(4) .sc-val { color: var(--gold); }
html .active-trip { border-color: transparent; color: var(--hero-tx); }
html .active-trip .at-name, html .active-trip .cd-num, html .active-trip .at-meta-val { color: var(--hero-tx); }
html .active-trip .at-label, html .active-trip .at-label.live { color: var(--hero-label); }
html .active-trip .at-meta-item, html .active-trip .cd-unit, html .active-trip .ap-label { color: var(--hero-tx2); }
html .active-trip .at-meta-item svg.ti { color: var(--hero-tx2); }
html .active-trip .countdown { border-color: color-mix(in srgb, var(--hero-tx) 22%, transparent); }
html .active-trip .ap-bar { background: color-mix(in srgb, var(--hero-tx) 16%, transparent); overflow: visible; }
html .active-trip .ap-fill { background: var(--hero-acc); position: relative; min-width: 2px; }
/* A small plane rides the tip of the progress line. */
html .active-trip .ap-fill::after { content: ""; position: absolute; right: -12px; top: 50%; width: 24px; height: 20px; margin-top: -10px; background: var(--hero-acc); -webkit-mask: var(--plane-img) center / contain no-repeat; mask: var(--plane-img) center / contain no-repeat; }
html .active-trip .at-nav-btn { background: color-mix(in srgb, var(--bg2) 55%, transparent); border-color: color-mix(in srgb, var(--hero-tx) 14%, transparent); }
html .active-trip .at-nav-btn:hover { background: color-mix(in srgb, var(--bg2) 80%, transparent); }
html .active-trip .at-nav-btn .nb-label, html .active-trip .at-nav-btn svg.ti { color: var(--hero-tx) !important; }
html .active-trip .at-nav-btn .nb-sub { color: var(--hero-tx2); }
html .active-trip .at-nav-btn.highlight { background: var(--hero-acc); border-color: var(--hero-acc); }
html .active-trip .at-nav-btn.highlight .nb-label, html .active-trip .at-nav-btn.highlight .nb-sub,
html .active-trip .at-nav-btn.highlight svg.ti { color: var(--hero-acc-tx) !important; opacity: 1; }
html #dashShareBtn { background: color-mix(in srgb, var(--bg2) 45%, transparent) !important; border-color: color-mix(in srgb, var(--hero-tx) 28%, transparent) !important; color: var(--hero-tx) !important; }

/* Landing */
html .feat:nth-child(1) .ic { color: var(--c-cal); }
html .feat:nth-child(2) .ic { color: var(--c-money); }
html .feat:nth-child(3) .ic { color: var(--c-place); }
html .feat:nth-child(4) .ic { color: var(--c-map); }
html .feat:nth-child(5) .ic { color: var(--c-world); }
html .feat:nth-child(6) .ic { color: var(--c-concert); }
html .li:nth-child(1) .ic { color: var(--c-map); }
html .li:nth-child(2) .ic { color: var(--c-pass); }
html .sheet-h { background: var(--bg3); }
html .cta .box { color: var(--hero-tx); }
html .cta .box h2 { color: var(--hero-tx); }
html .cta .btn { background: var(--hero-acc); color: var(--hero-acc-tx); border-color: var(--hero-acc); }
html .cta .btn.ghost { background: transparent; color: var(--hero-tx); border-color: color-mix(in srgb, var(--hero-tx) 35%, transparent); }
html .stamp { color: var(--brand); border-color: var(--brand); }
html .stamp::before { border-color: var(--brand); }
html .vnmap path.v { fill: var(--c-map); }
html .vnmap path.s { fill: var(--brand); }
html .steps li { border-top-color: var(--brand); }
html .steps li::before { color: var(--brand); }
html .kicker, html .eyebrow { color: var(--brand-ink); font-weight: 600; }

/* Login: the story panel is the same open sky as the landing page. */
html .left { background-color: var(--hero-bg) !important; background-image: var(--hero-glow), var(--hero-sky) !important; }

/* Palette picker (added next to the theme switch by triply-theme.js). */
.palette-wrap { position: relative; display: inline-flex; }
.palette-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--bd2); background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; }
.palette-btn:hover { border-color: var(--bd3); }
.palette-btn .sw3 { display: flex; width: 18px; height: 18px; border-radius: 50%; overflow: hidden; transform: rotate(-30deg); }
.palette-btn .sw3 i { flex: 1; }
.palette-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 3000; min-width: 196px; background: var(--bg2); border: 1px solid var(--bd2); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: none; }
.palette-menu.open { display: block; }
.palette-menu p { font-size: 12px; color: var(--tx3); padding: 6px 10px 4px; margin: 0; }
.palette-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--tx); font: 500 14px var(--fb); cursor: pointer; text-align: left; }
.palette-opt:hover, .palette-opt:focus-visible { background: var(--bg3); }
.palette-opt .sw { display: flex; gap: 2px; }
.palette-opt .sw i { width: 12px; height: 18px; border-radius: 3px; }
.palette-opt .ck { margin-left: auto; color: var(--brand-ink); visibility: hidden; }
.palette-opt[aria-checked="true"] .ck { visibility: visible; }

/* Figures take the colour of what they count. */
html .stats .stat:nth-child(1) .n { color: var(--c-concert); }
html .stats .stat:nth-child(2) .n { color: var(--brand-ink); }
html .stats .stat:nth-child(3) .n { color: var(--c-cal); }
html .stats .stat:nth-child(4) .n { color: var(--c-world); }
html .stats .stat:nth-child(5) .n { color: var(--gold); }
html .bcard:nth-child(1) .bc-amount { color: var(--gold); }
html .bcard:nth-child(2) .bc-amount { color: var(--brand-ink); }
html .bcard:nth-child(3) .bc-amount { color: var(--c-map); }
html .bcard:nth-child(4) .bc-amount { color: var(--c-world); }
html .hs-item:nth-child(1) .hs-num { color: var(--c-pass); }
html .hs-item:nth-child(2) .hs-num { color: var(--c-map); }
html .hs-item:nth-child(3) .hs-num { color: var(--c-cal); }
html .st:nth-child(1) .stn { color: var(--c-world); }
html .st:nth-child(3) .stn { color: var(--c-map); }
html .st:nth-child(4) .stn { color: var(--gold); }
html .empty .big svg.ti { color: var(--brand); }
html .next { border-color: transparent; color: var(--hero-tx); }
html .next .cd b, html .next .info .a { color: var(--hero-tx); }
html .next .cd span, html .next .info .m { color: var(--hero-tx2); }
html .next .info .t { color: var(--hero-label); }
html .next .btn-gold { background: var(--hero-acc); color: var(--hero-acc-tx); }

html .left .left-sub { color: var(--hero-tx2); }
html .left .left-list { color: var(--hero-tx); }
html .left .left-tag { color: var(--hero-label); font-weight: 600; }
html .left .left-title { color: var(--hero-tx); }
html .left .left-list li::before { background: color-mix(in srgb, var(--hero-tx) 45%, transparent); }
html .left .st { color: var(--hero-tx2); border-color: color-mix(in srgb, var(--hero-tx) 38%, transparent); }
html .left .st::before { border-color: color-mix(in srgb, var(--hero-tx) 24%, transparent); }
html .left .st b { color: var(--hero-tx); }
html .left .st:first-child { color: var(--hero-label); border-color: var(--hero-acc); }
html .left .st:first-child::before { border-color: var(--hero-acc); }
html .left .st:first-child b { color: var(--hero-label); }
@media (max-width: 768px) {
  .tbr, .tb-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
}


/* ══ Open-sky artwork ═══════════════════════════════════════════════
   Hero surfaces are a day sky (light) or a night sky (dark). On the landing
   page, login panel and closing call-to-action, triply-sky.js adds drifting
   clouds, a plane flying its dashed route, and a small boat on the sea. */
:root {
  --plane-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-24 -19 48 38'%3E%3Cpath d='M22 0C22-1.8 20-2.6 17-2.6H5L-5-17h-4.5l6 14.4H-15l-4.5-5.4h-3L-20-2l-1 2 1 2-2.5 6h3l4.5-5.4h11.5l-6 14.4H-5L5 2.6h12c3 0 5-.8 5-2.6z'/%3E%3C/svg%3E");
  --wave-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 40' preserveAspectRatio='none'%3E%3Cpath d='M0 12Q32.5 0 65 12T130 12T195 12T260 12V40H0Z'/%3E%3C/svg%3E");
  --cloud-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 44'%3E%3Cg fill='%23fff' opacity='.05'%3E%3Ccircle cx='30' cy='28' r='12'/%3E%3Ccircle cx='52' cy='20' r='18'/%3E%3Ccircle cx='77' cy='27' r='12'/%3E%3Crect x='18' y='27' width='72' height='13' rx='6.5'/%3E%3C/g%3E%3C/svg%3E");
}
[data-theme="light"] {
  --cloud-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 44'%3E%3Cg fill='%23fff' opacity='.85'%3E%3Ccircle cx='30' cy='28' r='12'/%3E%3Ccircle cx='52' cy='20' r='18'/%3E%3Ccircle cx='77' cy='27' r='12'/%3E%3Crect x='18' y='27' width='72' height='13' rx='6.5'/%3E%3C/g%3E%3C/svg%3E");
}
html .hero-band, html .cta .box { background-color: var(--hero-bg); background-image: var(--hero-glow), var(--hero-sky); }
html .active-trip, html .next {
  background-color: var(--hero-bg);
  background-image: var(--cloud-img), var(--cloud-img), var(--hero-glow), var(--hero-sky);
  background-repeat: no-repeat;
  background-size: 150px auto, 92px auto, 100% 100%, 100% 100%;
  background-position: right -26px top -8px, left 46% bottom -20px, 0 0, 0 0;
}

.sky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sky-stars {
  position: absolute; inset: 72px 0 25% 0;
  background-image:
    radial-gradient(circle at 18px 26px, var(--star) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 112px 74px, var(--star) 0 .9px, transparent 1.5px),
    radial-gradient(circle at 196px 18px, var(--star) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 62px 138px, var(--star) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 168px 156px, var(--star) 0 1px, transparent 1.6px);
  background-size: 240px 190px;
  -webkit-mask: linear-gradient(#000 0 13%, transparent 20%), linear-gradient(90deg, transparent 50%, #000 58%);
  mask: linear-gradient(#000 0 13%, transparent 20%), linear-gradient(90deg, transparent 50%, #000 58%);
  animation: sky-twinkle 6s ease-in-out infinite alternate;
}
.cloud-track { position: absolute; left: 0; width: 100%; animation: sky-drift 90s linear infinite; }
.cloud-track svg { display: block; height: auto; fill: #fff; opacity: var(--cloud-o); }
.sky-route { position: absolute; left: 0; top: 0; overflow: visible; }
.sky-route .trail { fill: none; stroke: var(--route); stroke-width: 1.6; stroke-dasharray: 1.5 7; stroke-linecap: round; }
.sky-route .reveal { fill: none; stroke: #fff; stroke-width: 10; stroke-dasharray: 100 100; stroke-dashoffset: 100; animation: sky-reveal var(--fly, 22s) cubic-bezier(.45,.05,.55,.95) infinite; }
.sky-route g { animation: sky-fade var(--fly, 22s) linear infinite; }
.sky .plane {
  position: absolute; left: 0; top: 0; width: 54px; height: 43px; z-index: 2;
  fill: var(--hero-acc); offset-rotate: auto; offset-distance: 0%;
  filter: drop-shadow(0 8px 6px rgba(0,0,0,.14));
  animation: sky-fly var(--fly, 22s) cubic-bezier(.45,.05,.55,.95) infinite;
}
.sea { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; }
.sea > i { position: absolute; left: 0; right: 0; bottom: 0; -webkit-mask: var(--wave-img) repeat-x 0 0 / 260px 100%; mask: var(--wave-img) repeat-x 0 0 / 260px 100%; animation: sky-sea 24s linear infinite; }
.sea .s1 { height: 72px; background: var(--sea-a); }
.sea .s2 { height: 50px; background: var(--sea-b); animation-duration: 16s; animation-direction: reverse; }
.sea .s3 { height: 24px; background: var(--bg); animation-duration: 11s; }
.boat-track { position: absolute; left: 0; width: 100%; bottom: 12px; animation: sky-drift 75s linear infinite; animation-delay: -22s; }
.boat { display: block; width: 56px; height: 52px; transform-origin: 50% 85%; animation: sky-bob 4.6s ease-in-out infinite; }
.boat .sail { fill: var(--sail); stroke: var(--hull); stroke-opacity: .35; stroke-width: 1; }
.boat .hull { fill: var(--hull); }
.boat .mast { stroke: var(--hull); stroke-width: 1.6; }
.boat .flag { fill: var(--hero-acc); }

@keyframes sky-drift { from { transform: translateX(-240px); } to { transform: translateX(calc(100% + 40px)); } }
@keyframes sky-fly { 0% { offset-distance: 0%; opacity: 0; } 4% { opacity: 1; } 70% { offset-distance: 100%; opacity: 1; } 71%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes sky-reveal { 0% { stroke-dashoffset: 100; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes sky-fade { 0%, 80% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes sky-sea { to { -webkit-mask-position: -260px 0; mask-position: -260px 0; } }
@keyframes sky-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
@keyframes sky-twinkle { from { opacity: .55; } to { opacity: 1; } }

@media (max-width: 700px) {
  .sky .plane { width: 42px; height: 34px; }
  .sea { height: 56px; } .sea .s1 { height: 56px; } .sea .s2 { height: 40px; } .sea .s3 { height: 20px; }
  .boat { width: 44px; height: 41px; }
  .boat-track { bottom: 9px; }
}
/* Still sky for people who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  .sky, .sky * { animation: none !important; }
  .sky .plane { offset-distance: 58%; opacity: 1; }
  .sky-route .reveal { stroke-dashoffset: 0; }
  .cloud-track { transform: translateX(var(--x0, 30%)); }
  .boat-track { transform: translateX(62%); }
}