@import url('/brand/tokens.css');
/* Awaysy design tokens. The palette, type and radii live in public/brand/tokens.css (docs/brand/style-sheet.md); this block
   only aliases the names the rest of the CSS uses onto them, so no colour is defined here. See docs/UI_DESIGN.md. */
:root{
 --bg:var(--surface);--surface-2:var(--cream);--surface-3:var(--cream);
 --ink-2:var(--ink-muted);--muted:var(--ink-muted);--line:var(--hairline);--line-strong:var(--hairline);
 /* Navy carries state and emphasis: icons, selected controls, day pills. --fill is the flat fill behind white text. */
 --accent:var(--navy);--accent-2:var(--navy-soft);--accent-ink:var(--navy);--accent-soft:var(--cream);--accent-line:var(--navy-soft);
 --fill:var(--navy);--on-accent:var(--ink-on-navy); /* --on-accent is also the white text over photos */
 --accent-text:var(--rust-text); /* 5:1 on white, 4.2:1 on cream: on cream use --accent-ink */
 --ok-bg:var(--cream);--ok-ink:var(--ink);--ok-line:var(--hairline);--warn-bg:var(--surface);--warn-ink:var(--rust-text);--warn-line:var(--rust);
 --scrim:rgba(32,47,73,.5);--scrim-hero:linear-gradient(0deg,rgba(32,47,73,.82) 0%,rgba(32,47,73,.35) 45%,rgba(32,47,73,0) 75%);
 --hero-fallback:var(--navy-deep);
 --skeleton:var(--cream);--skeleton-hi:var(--surface);
 --radius-card:var(--radius-lg);--radius-sm:12px;
 /* Borders over shadows: a card's "shadow" is a hairline ring. Only floating layers (sheets, menus) keep a real one. */
 --shadow-card:0 0 0 1px var(--hairline);--shadow-pop:0 12px 32px rgba(32,47,73,.18);--shadow-accent:0 0 0 0 transparent;
 --map-home:var(--navy);--map-pin:var(--navy-deep);
 --on-green:var(--ink-on-navy);
 --budget-box:var(--green);--budget-box-2:var(--green-text);--budget-box-ink:var(--on-green);--budget-box-eyebrow:var(--green-tint);--budget-box-pill:var(--surface);--budget-box-pill-ink:var(--green-text);
 --food:var(--sun);
 /* The logo's own colours (public/brand/logo/), so budget mode and the dark tokens never recolour it. Reversed in dark and on the footer. */
 --logo-tag:#344775;--logo-hole:#F9E9C9;--logo-bird:#F9E9C9;--logo-text:#344775;
 --tap:44px;--tabbar-h:64px;--topbar-h:56px;--gutter:var(--space-5);
 --font-head:var(--font-sans);--font-body:var(--font-sans);
 --ease:cubic-bezier(.2,.7,.3,1);--dur:180ms;
}
/* Dark: navy is too close to the page to read as text or an icon, so those step up; fills stay navy under white text. */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--logo-tag:#F9E9C9;--logo-hole:#202F49;--logo-bird:#344775;--logo-text:#F9E9C9;--accent:var(--navy-soft);--accent-ink:var(--cream-text);--on-green:var(--navy-deep)}}
:root[data-theme="dark"]{color-scheme:dark;--logo-tag:#F9E9C9;--logo-hole:#202F49;--logo-bird:#344775;--logo-text:#F9E9C9;--accent:var(--navy-soft);--accent-ink:var(--cream-text);--on-green:var(--navy-deep)}
/* Budget mode (WF-079, <html data-mode="budget">, set before first paint by index.html) is an accent swap, done in
   brand/tokens.css: --rust becomes green on the screens the mode changes (<html data-budget-screen>: the budget entry and
   options screens, a destination, a route). The Explore home and the other tabs keep rust with the mode on (user, 2026-10-28).
   Green is light in dark mode, so text on it goes dark there too. */
@media(prefers-color-scheme:dark){:root[data-mode="budget"][data-budget-screen]:not([data-theme="light"]){--ink-on-rust:var(--navy-deep)}}
:root[data-theme="dark"][data-mode="budget"][data-budget-screen]{--ink-on-rust:var(--navy-deep)}
/* ---- Base ---- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar-h) + 12px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15px;font-weight:600;line-height:22px;-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
html.has-sheet{overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{background-color:var(--surface)}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{opacity:.45;cursor:not-allowed}
a{color:var(--rust-text);text-underline-offset:2px}
b,strong{font-weight:800}
img{display:block;width:100%;height:100%;object-fit:cover}
h1,h2,h3{font-family:var(--font-head);font-weight:900;margin:0 0 .4em;color:var(--ink)}
h1{font-size:clamp(40px,31px + 2.3vw,64px);line-height:1.05;letter-spacing:var(--tracking-display)}h2{font-size:clamp(22px,18px + .7vw,28px);line-height:1.25}h3{font-size:18px;line-height:24px}
p{margin:0 0 .8em}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
button:focus-visible,summary:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}
.icon-sm{width:16px;height:16px}.icon-lg{width:28px;height:28px}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.accent-text{color:var(--accent-ink)}
.muted,.null-state{color:var(--muted)}
.small-note{font-size:12px;color:var(--muted);line-height:1.5}
/* ---- App shell ---- */
.shell{min-height:100vh;min-height:100dvh}
.topbar{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:var(--tap) minmax(0,1fr) var(--tap);align-items:center;gap:8px;min-height:var(--topbar-h);padding:calc(4px + env(safe-area-inset-top)) 8px 4px;background:var(--bg);border-bottom:1px solid var(--line)}
@media(max-width:699px){.topbar.is-hidden-mobile{display:none}.topbar.is-hidden-mobile+#app{padding-top:env(safe-area-inset-top)}}
.topbar-start{grid-column:1;grid-row:1;display:flex}.topbar-end{grid-column:3;grid-row:1;display:flex;justify-content:flex-end;gap:2px}
.brand{grid-column:2;grid-row:1;justify-self:center;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);font-family:var(--font-head);font-weight:900;font-size:22px;letter-spacing:-.035em;text-decoration:none;color:var(--accent-ink)}
.brand-logo{display:block;height:45px;width:auto;aspect-ratio:2146/510;flex-shrink:0}
.brand-mark{width:auto;height:28px;aspect-ratio:432/556;flex-shrink:0}
.topbar-title{grid-column:2;grid-row:1;justify-self:center;display:none;margin:0;min-width:0;max-width:100%;text-align:center;font-family:var(--font-head);font-weight:900;font-size:16px;line-height:1.2}
.topbar-title strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-title small{display:block;font-family:var(--font-body);font-weight:600;font-size:12px;color:var(--muted)}
.topbar.has-title .brand{display:none}.topbar.has-title .topbar-title{display:block}
.top-nav,.topbar-search{display:none}
.bar-btn{width:var(--tap);height:var(--tap);display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--ink);padding:0;position:relative}
.bar-btn:hover{background:var(--surface-2)}
.bar-btn.is-on{color:var(--accent)}.bar-btn.is-on .icon{fill:currentColor}
.bar-count{position:absolute;top:4px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--fill);color:var(--on-accent);font-size:10px;font-weight:800;line-height:17px}
main{max-width:1240px;margin:0 auto;padding:0 var(--gutter) 32px}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom);background:var(--surface);border-top:1px solid var(--line)}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:var(--tap);border:0;background:none;color:var(--muted);font-size:11px;font-weight:700;padding:0}
.tab.active{color:var(--accent-ink)}.tab.active .icon{stroke:var(--accent)}
.tab-count{position:absolute;top:7px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--fill);color:var(--on-accent);font-size:10px;font-weight:800;line-height:18px}
.tab-count[hidden],.saved-counter[hidden]{display:none}
.nav-link{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);border:0;background:none;padding:0 14px;border-radius:var(--radius-pill);color:var(--muted);font-weight:800;font-size:14px}
.nav-link:hover{color:var(--ink);background:var(--surface-2)}
.nav-link.active{color:var(--accent-ink);background:var(--accent-soft)}
.saved-counter{font-size:11px;font-weight:800;background:var(--surface-3);color:var(--ink-2);padding:1px 7px;border-radius:var(--radius-pill)}
.nav-link.active .saved-counter{background:var(--surface);color:var(--accent-ink)}
/* WF-119 compact top bar: icon buttons, the budget link, the avatar menu and the search pill. */
.nav-link .icon{width:18px;height:18px}
.nav-icon{position:relative;width:var(--tap);padding:0;justify-content:center}
.nav-badge{position:absolute;top:5px;right:5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--fill);color:var(--on-accent);font-size:11px;font-weight:800;line-height:18px;text-align:center}
.nav-budget{margin-left:6px;min-height:40px;padding:0 14px 0 8px;border:1.5px solid var(--budget-box-eyebrow);background:var(--surface);color:var(--budget-box)}
.nav-budget:hover{background:var(--green-tint);color:var(--budget-box-2)}
.nav-budget-mark{width:22px;height:22px;border-radius:50%;background:var(--budget-box);color:var(--budget-box-ink);font-size:12px;font-weight:800;display:grid;place-items:center}
.nav-budget.active,.nav-budget.is-on,.nav-budget.is-on:hover{background:var(--budget-box);border-color:var(--budget-box);color:var(--budget-box-ink)}
.nav-budget.active .nav-budget-mark,.nav-budget.is-on .nav-budget-mark{background:var(--budget-box-ink);color:var(--budget-box)}
.account-menu{margin-left:8px}
.account-menu>summary{border:2px solid var(--accent-line);background:var(--accent-soft);color:var(--accent-ink)}
.account-menu>summary:hover,.account-menu[open]>summary{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.account-menu .menu-pop{min-width:264px;top:calc(100% + 8px)}
.topbar-search{flex:0 1 620px;min-width:0;height:48px;padding:0 6px 0 16px;border:1.5px solid var(--accent-line);border-radius:var(--radius-pill);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-card);font:inherit;font-weight:700;font-size:15px;text-align:left;align-items:center;gap:10px;cursor:pointer;transition:opacity var(--dur) var(--ease),visibility var(--dur) var(--ease)}
.topbar-search:hover{border-color:var(--accent)}
.topbar-search>.icon{width:18px;height:18px;color:var(--accent);flex-shrink:0}
.topbar-search-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-search-text.is-empty{color:var(--muted);font-weight:600}
.topbar-search-sep{width:1px;height:24px;background:var(--accent-line);flex-shrink:0}
.topbar-search-chip{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 10px;border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent-ink);font-size:13px;font-weight:800;white-space:nowrap;flex-shrink:0}
.topbar-search-chip .icon{width:12px;height:12px}
.topbar-search-chip.is-budget{background:var(--green-tint);color:var(--budget-box-2)}
.topbar-search-go{width:36px;height:36px;border-radius:50%;background:var(--fill);color:var(--on-accent);display:grid;place-items:center;flex-shrink:0}
.topbar-search-go .icon{width:16px;height:16px}
.site-footer{padding:24px max(var(--gutter),calc((100% - 1240px)/2)) 28px;background:var(--navy-deep);color:var(--cream-text);font-size:13px;line-height:18px}
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
.site-footer{--logo-tag:#F9E9C9;--logo-hole:#202F49;--logo-bird:#344775;--logo-text:#F9E9C9}
.site-footer p{margin:0}
.footer-mark{display:inline-flex;align-items:center;gap:6px}
@media(min-width:700px){
 body{padding-bottom:0;font-size:16px}
 .tabbar{display:none}
 :root{--topbar-h:72px}
 /* z-index: one above the photo-credit buttons (30, discovery.css), which otherwise paint over the avatar menu. */
 .topbar{z-index:31;display:flex;gap:16px;min-height:var(--topbar-h);padding:8px max(32px,calc((100vw - 1240px)/2 + 32px))}
 /* WF-119: no hamburger here — its entries live in the avatar menu; the pill sits between the wordmark and the actions. */
 .topbar-start:has(>#menuButton:only-child){display:none}
 .topbar-search:not([hidden]){display:flex;order:1;margin-left:auto}
 .topbar.is-explore-top .topbar-search{opacity:0;visibility:hidden;pointer-events:none}
 .topbar-start:empty{display:none}
 .brand{order:1}.topbar-start{order:0}.topbar-title{display:none!important}.topbar.has-title .brand{display:inline-flex}
 .top-nav{order:2;display:flex;flex:none;align-items:center;gap:4px;margin-left:auto;justify-content:flex-end}
 /* The prototype tools stay out of the top bar (user, 2026-11-03: too crowded); Profile → Prototype tools clicks them. */
 #activityReviewNav,#feedbackNav{display:none}
 .topbar-end{order:3}
 main{padding:0 32px 56px}
 .site-footer{padding:28px 32px 40px}
}
/* WF-119: under 900 px the bar has no room for every link: Trips and Saved stay in the avatar menu, Budget keeps its £ mark. */
@media(min-width:700px) and (max-width:899px){
 #navTrips,#navSaved{display:none}
 .nav-budget{width:40px;margin-left:0;padding:0;justify-content:center}
 #navBudgetLabel{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* ---- Buttons ---- */
.primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:12px 22px;border:0;border-radius:var(--radius-md);background:var(--fill);color:var(--on-accent);font-weight:800;font-size:15px;line-height:20px;white-space:nowrap;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.primary:hover{transform:translateY(-1px)}.primary:active{transform:translateY(0)}
.primary .icon{stroke:var(--on-accent)}
/* The one rust tap on a screen: its lead action. Every other .primary stays navy (docs/brand/style-sheet.md). */
.sticky-cta .primary,.search-row .primary,.topbar-search-go,.fab{background:var(--rust);color:var(--ink-on-rust)}
.sticky-cta .primary .icon,.search-row .primary .icon,.topbar-search-go .icon,.fab .icon{stroke:var(--ink-on-rust)}
.outline{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap);padding:10px 16px;border:1px solid var(--accent-line);border-radius:var(--radius-md);background:var(--surface);color:var(--ink);font-weight:800;font-size:15px;line-height:20px;transition:background var(--dur) var(--ease)}
.outline:hover{background:var(--surface-2)}
.ghost{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 10px;border:0;background:none;color:var(--accent-ink);font-weight:800;font-size:15px;line-height:20px;border-radius:var(--radius-md)}
.ghost:hover{background:var(--accent-soft)}
.icon-button{width:var(--tap);height:var(--tap);display:inline-grid;place-items:center;flex-shrink:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink-2);padding:0}
.icon-button:hover{background:var(--surface-2)}
.danger{color:var(--error)}
/* ---- Chips, tiles, segmented controls ---- */
.chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--tap);padding:0 16px;border:1px solid transparent;border-radius:var(--radius-pill);background:var(--cream);color:var(--ink-2);font-size:14px;font-weight:700;line-height:1.2;white-space:nowrap;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.chip:hover{border-color:var(--accent-line)}
.chip.active,.chip[aria-pressed="true"],.chip[aria-checked="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-accent)}
.chip-row{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 calc(var(--gutter) * -1);padding:2px var(--gutter) 4px;scroll-padding:0 var(--gutter)}
.chip-row::-webkit-scrollbar,.tile-row::-webkit-scrollbar{display:none}
.chip-wrap{display:flex;flex-wrap:wrap;gap:8px}
.tile-row{display:grid;grid-auto-flow:column;grid-auto-columns:78px;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 calc(var(--gutter) * -1);padding:2px var(--gutter) 4px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:78px;padding:10px 4px;border:1px solid transparent;border-radius:var(--radius-lg);background:var(--cream);color:var(--ink-2);font-size:12px;font-weight:700;line-height:1.2;text-align:center;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.tile .icon{width:24px;height:24px;color:var(--muted)}
.tile:hover{border-color:var(--accent-line)}
.tile[aria-pressed="true"],.tile.active{background:var(--fill);border-color:var(--fill);color:var(--on-accent)}
.tile[aria-pressed="true"] .icon,.tile.active .icon{color:var(--on-accent)}
.segmented{display:flex;gap:4px;padding:4px;background:var(--surface-2);border-radius:var(--radius-pill)}
.segmented>button{flex:1;min-height:var(--tap);min-width:0;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--muted);font-weight:800;font-size:14px;padding:0 10px;white-space:nowrap;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.segmented>button.active,.segmented>button[aria-pressed="true"],.segmented>button[aria-checked="true"]{background:var(--fill);color:var(--on-accent)}
/* ---- Badges, tags, notices ---- */
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;font-size:12px;padding:3px 10px;border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent-ink);font-weight:700;line-height:1.5}
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:var(--radius-pill);font-size:11px;font-weight:800;line-height:1.6;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.badge-warn{background:var(--warn-bg);color:var(--warn-ink)}.badge-ok{background:var(--ok-bg);color:var(--ok-ink)}.badge-accent{background:var(--accent-soft);color:var(--accent-ink)}
.notice{margin-top:16px;border:1px solid var(--warn-line);background:var(--warn-bg);color:var(--warn-ink);padding:12px 14px;border-radius:var(--radius-sm);font-size:13px;line-height:1.55}
.panel{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:18px;box-shadow:var(--shadow-card)}
.panel h2{font-size:18px;margin:0 0 10px}
.panel p{color:var(--ink-2)}
.empty{padding:40px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);text-align:center;color:var(--muted)}
.empty h2,.empty h3{color:var(--ink)}
.empty-art{width:120px;height:96px;margin:0 auto 12px;display:block}
.loading-state{padding:80px 0;text-align:center;color:var(--muted)}
/* ---- Screen header and lists (Trips, Saved, Inbox, Profile) ---- */
.screen-head{padding:20px 0 14px}
.screen-head h1{font-size:28px;margin:0 0 4px}
.screen-head p{color:var(--muted);margin:0}
.list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.list-row{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-card);text-align:left;color:var(--ink)}
.list-row:hover{background:var(--surface-2)}
.list-row-body{flex:1;min-width:0}
.list-row-body strong{display:block;font-size:15px;overflow-wrap:anywhere}
.list-row-body span{display:block;font-size:13px;color:var(--muted)}
.list-row>.icon{color:var(--muted)}
/* Your trips: the row and its Delete button side by side; Delete asks in place before anything is removed. */
.trip-item{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.trip-item>.list-row{flex:1;min-width:0;width:auto}
.trip-item>.travel-mode-btn{order:3;flex-basis:100%}
.trip-delete{display:grid;place-items:center;width:var(--tap);height:var(--tap);padding:0;border-radius:50%;color:var(--muted)}
.trip-delete:hover{color:var(--accent-ink);background:var(--surface-2)}
.trip-confirm{flex-basis:100%;order:2;padding:12px 14px;border:1px solid var(--accent-line);border-radius:16px;background:var(--surface)}
.trip-confirm p{margin:0;font-size:14px;line-height:1.45;color:var(--ink-2)}
.trip-confirm-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.trips-delete-all{margin:14px 0 0}
p.trips-delete-all{display:flex;justify-content:flex-end}
.list-thumb{width:56px;height:56px;flex-shrink:0;display:grid;place-items:center;border-radius:12px;background:var(--accent-soft);color:var(--accent)}
.unread-dot{width:10px;height:10px;border-radius:50%;background:var(--fill);flex-shrink:0}
.settings{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.settings>*{min-width:0}
.settings .panel h2{display:flex;align-items:center;gap:8px}
.settings .panel h2 .icon{color:var(--accent)}
.field-label{display:block;font-size:13px;font-weight:800;color:var(--ink-2);margin:0 0 6px}
.field{width:100%;min-height:var(--tap);padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:16px}
.field[aria-invalid="true"]{border-color:var(--accent)}
.field-select{width:100%;min-height:var(--tap);padding:8px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font-size:14px}
.field-error{color:var(--error);font-size:13px;margin:6px 0 0}
.stat-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 12px}
.stat-pair div{background:var(--surface-2);border-radius:var(--radius-sm);padding:12px}
.stat-pair strong{display:block;font-family:var(--font-head);font-weight:900;font-size:22px}
.stat-pair span{font-size:12px;color:var(--muted)}
@media(min-width:700px){.settings{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}
/* ---- Sticky CTA ---- */
.sticky-cta{position:sticky;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);z-index:20;display:flex;justify-content:center;margin:16px 0 0;pointer-events:none}
.sticky-cta>*{pointer-events:auto;width:100%;max-width:440px}
@media(min-width:700px){.sticky-cta{bottom:16px}}
/* ---- Sheets (bottom sheet on mobile, side panel on desktop) ---- */
.sheet-layer{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet-backdrop{position:absolute;inset:0;width:100%;border:0;padding:0;background:var(--scrim);cursor:default}
.sheet{position:relative;display:flex;flex-direction:column;width:100%;max-height:92vh;max-height:92dvh;background:var(--surface);border-radius:22px 22px 0 0;box-shadow:var(--shadow-pop);padding-bottom:env(safe-area-inset-bottom);animation:sheet-up var(--dur) var(--ease)}
.sheet.is-full{height:100vh;height:100dvh;max-height:none;border-radius:0;padding-top:env(safe-area-inset-top)}
.sheet-head{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 20px;border-bottom:1px solid var(--line)}
.sheet-head h2{flex:1;margin:0;font-size:18px}
.sheet-body{flex:1;overflow:auto;overscroll-behavior:contain;padding:16px 20px 24px}
.sheet-foot{display:flex;gap:8px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.sheet-foot>*{flex:1}
@keyframes sheet-up{from{transform:translateY(28px);opacity:0}}
@keyframes sheet-side{from{transform:translateX(28px);opacity:0}}
@media(min-width:700px){
 .sheet-layer{justify-content:flex-end;align-items:stretch}
 .sheet,.sheet.is-full{width:min(520px,100%);height:100%;max-height:none;border-radius:22px 0 0 22px;padding-top:0;animation-name:sheet-side}
 .sheet.side-menu{width:320px;border-radius:0 22px 22px 0;animation-name:sheet-left}
}
/* Left-edge variant: the side menu (all widths, 200 ms slide; none under reduced motion). */
.sheet-layer.is-left{justify-content:flex-start;align-items:stretch}
.sheet.side-menu{width:min(320px,86vw);height:100%;max-height:none;border-radius:0 22px 22px 0;padding-top:env(safe-area-inset-top);animation:sheet-left 200ms var(--ease)}
@keyframes sheet-left{from{transform:translateX(-100%)}}
.side-menu .sheet-head h2{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--accent-ink)}
.side-menu .sheet-body{padding:8px 10px 24px}
.menu-group{padding:8px 0;border-bottom:1px solid var(--line)}
.menu-group:last-child{border-bottom:0}
.menu-group h3{margin:4px 10px 4px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.menu-item{display:flex;align-items:center;gap:12px;width:100%;min-height:var(--tap);padding:0 10px;border:0;border-radius:12px;background:none;color:var(--ink);font-size:15px;font-weight:700;text-align:left;text-decoration:none}
.menu-item:hover{background:var(--surface-2)}
.menu-item .icon{color:var(--muted)}
.menu-item[aria-current="page"]{background:var(--accent-soft);color:var(--accent-ink)}
.menu-item[aria-current="page"] .icon{color:var(--accent)}
.menu-item span:first-of-type{flex:1;min-width:0;overflow-wrap:anywhere}
.menu-count{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--fill);color:var(--on-accent);font-size:11px;font-weight:800;line-height:20px;text-align:center}
.how-steps{margin:0;padding-left:22px;display:grid;gap:12px;line-height:1.55;color:var(--ink-2)}
/* ---- Overflow menus ---- */
.menu{position:relative}
.menu>summary{list-style:none;width:var(--tap);height:var(--tap);display:grid;place-items:center;border-radius:50%;cursor:pointer;color:var(--muted)}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary:hover,.menu[open]>summary{background:var(--surface-2);color:var(--ink)}
.menu-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:25;min-width:228px;max-width:calc(100vw - 32px);display:flex;flex-direction:column;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-pop)}
.menu-pop button{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--tap);padding:0 12px;border:0;border-radius:10px;background:none;text-align:left;font-weight:700;font-size:14px;color:var(--ink)}
.menu-pop button:hover{background:var(--surface-2)}
.menu-pop button .icon{width:18px;height:18px;color:var(--muted)}
.menu-pop hr{border:0;border-top:1px solid var(--line);margin:4px 6px}
/* ---- Toast ---- */
.toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);z-index:80;max-width:calc(100vw - 32px);transform:translate(-50%,16px);opacity:0;pointer-events:none;background:var(--ink);color:var(--on-accent);padding:12px 18px;border-radius:var(--radius-pill);box-shadow:var(--shadow-pop);font-size:14px;text-align:center;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast button{margin-left:10px;border:0;background:none;color:var(--accent-line);font-weight:800;min-height:32px}
@media(min-width:700px){.toast{bottom:24px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* The World weather map lives in the footer (user, 2026-10-28), not on the results bar. */
.site-footer{flex-wrap:wrap}
.footer-weather{flex-basis:100%;display:grid;gap:6px;padding:4px 0 18px;margin-bottom:6px;border-bottom:1px solid var(--navy-soft);font-size:15px;line-height:22px;color:var(--cream-text)}
.footer-weather h2{margin:0;font:var(--text-card-title);color:var(--cream-text)}
.footer-weather .outline{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);padding:0 16px;background:transparent;border-color:var(--cream-text);color:var(--cream-text)}
.footer-weather .outline:hover{background:var(--navy)}