/* ============================================================
   NYC trip · design system
   Tokens → base → layout → components → motion
   ============================================================ */
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

/* ---------- tokens: shared ---------- */
:root{
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,"Helvetica Neue",sans-serif;
  --font-serif:"Instrument Serif","New York",ui-serif,Georgia,serif;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--s-12:48px;
  --t-2xs:.6875rem;--t-xs:.75rem;--t-sm:.8125rem;--t-base:.9375rem;--t-md:1rem;--t-lg:1.125rem;--t-xl:1.375rem;--t-2xl:1.75rem;--t-3xl:2.25rem;--t-4xl:2.75rem;
  --lh-tight:1.08;--lh-snug:1.3;--lh-body:1.5;
  --r-xs:6px;--r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-pill:999px;
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-in:cubic-bezier(.4,0,1,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --spring:linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,.937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001 85.7%,1);
  --d-1:120ms;--d-2:220ms;--d-3:380ms;
  --gutter:16px;--max:40rem;--hdr-h:52px;--tabs-h:calc(54px + max(12px,env(safe-area-inset-bottom)));
  --z-hdr:20;--z-float:25;--z-tabs:30;--z-sheet:40;--z-toast:60;
}
/* ---------- tokens: light ---------- */
:root{
  color-scheme:light;
  --bg:#f6f3ee;--bg-elev:#fcfbf9;--surface:#ffffff;--surface-2:#f1ede6;--surface-3:#e7e1d7;
  --line:rgba(28,25,23,.09);--line-strong:rgba(28,25,23,.17);
  --ink:#1c1917;--ink-2:#4a4540;--ink-3:#77706a;--ink-inv:#faf8f5;
  --accent:#b4441a;--accent-ink:#ffffff;--accent-soft:#f8e3d8;--accent-line:rgba(180,68,26,.35);
  --ok:#2c6a3c;--ok-soft:#e2f0e5;--warn:#875800;--warn-soft:#fbeed2;--bad:#b42318;--bad-soft:#fce3df;
  --eat:#7a3e8f;--eat-soft:#f1e6f5;--see:#1f5f8b;--see-soft:#e1ebf5;--ride:#475467;--ride-soft:#eaecf0;
  --event:#9a4a00;--event-soft:#fcead4;--hotel:#0f6b6b;--hotel-soft:#dcefee;
  --gold:#c27f0e;--gold-soft:#fcefd2;
  --moon:#7f8aa3;--moon-hi:#b6bfd0;--moon-lo:#5d6780;--moon-dark:rgba(127,138,163,.16);
  --shadow-sm:0 1px 2px rgba(28,25,23,.06);
  --shadow-md:0 1px 2px rgba(28,25,23,.05),0 10px 28px -14px rgba(28,25,23,.22);
  --shadow-lg:0 -8px 40px -12px rgba(28,25,23,.28);
  --scrim:rgba(24,18,12,.42);--glass:rgba(246,243,238,.80);--glass-tabs:rgba(252,251,249,.86);
  --glass-fill:rgba(28,25,23,.06);--glass-thumb:rgba(255,255,255,.88);--glass-rim:rgba(255,255,255,.6);--glass-edge:rgba(28,25,23,.1);
  --glass-shadow:0 1px 2px rgba(28,25,23,.06),0 10px 28px -12px rgba(28,25,23,.28);
  --glass-dim:rgba(16,14,12,.58);--glass-accent:rgba(180,68,26,.92);--glass-ink:rgba(28,25,23,.84);--accent-inv:#ff8f5a;
  /* glass lighting, after liquid-glass-js: light from the top, a brighter rim where its shader refracts most, depth below. Shadows, no gradients */
  --glass-lit:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(255,255,255,.22),inset 0 10px 18px -14px rgba(255,255,255,.75),inset 0 -10px 16px -14px rgba(28,25,23,.08);
  --lens-lit:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.6),inset 0 -6px 12px -10px rgba(28,25,23,.12);
  --lens-drop:0 2px 6px -1px rgba(28,25,23,.16);
  --glass-depth:0 1px 2px rgba(28,25,23,.08),0 16px 36px -12px rgba(28,25,23,.3);
  --glass-depth-sm:0 1px 2px rgba(28,25,23,.1),0 8px 18px -8px rgba(28,25,23,.3);
}
/* ---------- tokens: dark (system unless forced light, or forced dark) ---------- */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#0f0f11;--bg-elev:#18181b;--surface:#18181b;--surface-2:#222226;--surface-3:#2d2d32;
  --line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.16);
  --ink:#f4f2ef;--ink-2:#c9c5bf;--ink-3:#959089;--ink-inv:#121214;
  --accent:#ff8f5a;--accent-ink:#1c0d05;--accent-soft:#3a2116;--accent-line:rgba(255,143,90,.4);
  --ok:#7fd193;--ok-soft:#163022;--warn:#f2c46b;--warn-soft:#382b12;--bad:#ff8a80;--bad-soft:#3d1a17;
  --eat:#d9aaeb;--eat-soft:#30223a;--see:#8fc3ee;--see-soft:#17293a;--ride:#b6bdcb;--ride-soft:#262a33;
  --event:#f5b66b;--event-soft:#3a2814;--hotel:#80d6d3;--hotel-soft:#14302f;
  --gold:#f2b84b;--gold-soft:#3a2c12;
  --moon:#e6e9f0;--moon-hi:#ffffff;--moon-lo:#aab2c3;--moon-dark:rgba(230,233,240,.12);
  --shadow-sm:none;--shadow-md:0 0 0 1px rgba(255,255,255,.035),0 14px 32px -18px rgba(0,0,0,.9);--shadow-lg:0 -10px 50px -10px rgba(0,0,0,.85);
  --scrim:rgba(0,0,0,.58);--glass:rgba(15,15,17,.80);--glass-tabs:rgba(24,24,27,.86);
  --glass-fill:rgba(255,255,255,.06);--glass-thumb:rgba(45,45,50,.9);--glass-rim:rgba(255,255,255,.1);--glass-edge:rgba(255,255,255,.1);
  --glass-shadow:0 0 0 1px rgba(255,255,255,.035),0 14px 32px -16px rgba(0,0,0,.85);
  --glass-accent:rgba(255,143,90,.9);--glass-ink:rgba(244,242,239,.88);--accent-inv:#b4441a;
  --glass-lit:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.05),inset 0 10px 18px -14px rgba(255,255,255,.16),inset 0 -10px 16px -14px rgba(0,0,0,.35);
  --lens-lit:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.07),inset 0 -6px 12px -10px rgba(0,0,0,.4);
  --lens-drop:0 2px 8px -1px rgba(0,0,0,.5);
  --glass-depth:0 0 0 1px rgba(255,255,255,.035),0 18px 40px -12px rgba(0,0,0,.8);
  --glass-depth-sm:0 0 0 1px rgba(255,255,255,.035),0 10px 22px -8px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0f0f11;--bg-elev:#18181b;--surface:#18181b;--surface-2:#222226;--surface-3:#2d2d32;
  --line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.16);
  --ink:#f4f2ef;--ink-2:#c9c5bf;--ink-3:#959089;--ink-inv:#121214;
  --accent:#ff8f5a;--accent-ink:#1c0d05;--accent-soft:#3a2116;--accent-line:rgba(255,143,90,.4);
  --ok:#7fd193;--ok-soft:#163022;--warn:#f2c46b;--warn-soft:#382b12;--bad:#ff8a80;--bad-soft:#3d1a17;
  --eat:#d9aaeb;--eat-soft:#30223a;--see:#8fc3ee;--see-soft:#17293a;--ride:#b6bdcb;--ride-soft:#262a33;
  --event:#f5b66b;--event-soft:#3a2814;--hotel:#80d6d3;--hotel-soft:#14302f;
  --gold:#f2b84b;--gold-soft:#3a2c12;
  --moon:#e6e9f0;--moon-hi:#ffffff;--moon-lo:#aab2c3;--moon-dark:rgba(230,233,240,.12);
  --shadow-sm:none;--shadow-md:0 0 0 1px rgba(255,255,255,.035),0 14px 32px -18px rgba(0,0,0,.9);--shadow-lg:0 -10px 50px -10px rgba(0,0,0,.85);
  --scrim:rgba(0,0,0,.58);--glass:rgba(15,15,17,.80);--glass-tabs:rgba(24,24,27,.86);
  --glass-fill:rgba(255,255,255,.06);--glass-thumb:rgba(45,45,50,.9);--glass-rim:rgba(255,255,255,.1);--glass-edge:rgba(255,255,255,.1);
  --glass-shadow:0 0 0 1px rgba(255,255,255,.035),0 14px 32px -16px rgba(0,0,0,.85);
  --glass-accent:rgba(255,143,90,.9);--glass-ink:rgba(244,242,239,.88);--accent-inv:#b4441a;
  --glass-lit:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.05),inset 0 10px 18px -14px rgba(255,255,255,.16),inset 0 -10px 16px -14px rgba(0,0,0,.35);
  --lens-lit:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.07),inset 0 -6px 12px -10px rgba(0,0,0,.4);
  --lens-drop:0 2px 8px -1px rgba(0,0,0,.5);
  --glass-depth:0 0 0 1px rgba(255,255,255,.035),0 18px 40px -12px rgba(0,0,0,.8);
  --glass-depth-sm:0 0 0 1px rgba(255,255,255,.035),0 10px 22px -8px rgba(0,0,0,.7);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);scroll-padding-top:calc(var(--hdr-h) + env(safe-area-inset-top) + 64px)}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--ink);font:400 var(--t-base)/var(--lh-body) var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;overflow-x:hidden;transition:background-color var(--d-2) var(--ease-out),color var(--d-2) var(--ease-out)}
body.locked{position:fixed;left:0;right:0;overflow:hidden}
img{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:inherit}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
.i{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}
.i.fill{fill:currentColor;stroke:none}
.serif{font-family:var(--font-serif);font-weight:400;letter-spacing:-.005em;line-height:var(--lh-tight)}
.eyebrow{font-size:var(--t-2xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.muted{color:var(--ink-3)}
.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:8px;top:-60px;z-index:100;background:var(--ink);color:var(--ink-inv);padding:10px 14px;border-radius:var(--r-sm);transition:top var(--d-2)}
.skip:focus{top:calc(8px + env(safe-area-inset-top))}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:var(--z-hdr);padding:env(safe-area-inset-top) var(--gutter) 0;background:var(--glass);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid transparent;transition:border-color var(--d-2),background-color var(--d-2);view-transition-name:hdr}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr-in{max-width:var(--max);margin:0 auto;height:var(--hdr-h);display:flex;align-items:center;gap:var(--s-3)}
.hdr-sun{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:600;color:var(--ink-2);padding:6px 10px;border-radius:var(--r-pill);background:var(--surface-2);white-space:nowrap}
.hdr-sun .i{color:var(--gold)}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-pill);color:var(--ink-2);background:var(--surface-2);transition:transform var(--d-1) var(--ease-out),background-color var(--d-2);position:relative;flex:none}
.icon-btn:active{transform:scale(.92)}
.icon-btn .i{width:20px;height:20px}
.theme-btn .i{position:absolute;transition:opacity var(--d-2),transform var(--d-3) var(--spring)}
.theme-btn .i:not(.on){opacity:0;transform:rotate(-60deg) scale(.6)}
.offline{position:sticky;top:calc(var(--hdr-h) + env(safe-area-inset-top));z-index:var(--z-hdr);display:flex;justify-content:center;pointer-events:none;margin-top:-28px;height:28px}
.offline span{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:600;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-md);padding:4px 10px;border-radius:var(--r-pill);animation:drop-in var(--d-3) var(--spring) both}

/* ---------- page ---------- */
.view{max-width:var(--max);margin:0 auto;padding:var(--s-2) var(--gutter) calc(var(--tabs-h) + var(--s-12));min-height:60vh}
.page-head{padding:var(--s-3) 0 var(--s-5);display:grid;gap:6px}
.page-head h1{font-family:var(--font-serif);font-size:var(--t-4xl);line-height:1;letter-spacing:-.01em}
.page-head p{color:var(--ink-2);font-size:var(--t-md)}
.section{margin-top:var(--s-8)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-3)}
.section-head h2{font-size:var(--t-lg);font-weight:700;letter-spacing:-.01em}
.stack{display:grid;gap:var(--s-3);min-width:0}
.row{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;min-width:0}

/* ---------- tabs ---------- */
/* iOS 27 colours an installed app's status bar from a fixed, solid element at the very top of the screen
   (at least 6px high, 80% wide, within 4px of the top). This strip is that element, in the theme's background. */
.sb-tint{position:fixed;top:0;left:0;right:0;z-index:calc(var(--z-hdr) + 1);height:env(safe-area-inset-top);background:var(--bg);pointer-events:none}
@media (display-mode:standalone){.sb-tint{height:max(6px,env(safe-area-inset-top))}}
/* ---------- tabs: one floating glass capsule, a sliding pill, the active tab names itself ---------- */
.tabs{position:fixed;left:0;right:0;bottom:max(12px,env(safe-area-inset-bottom));z-index:var(--z-tabs);width:fit-content;max-width:calc(100vw - 16px);margin:0 auto;display:flex;align-items:center;gap:2px;padding:4px;border-radius:var(--r-pill);border:1px solid var(--glass-edge);background:var(--glass);-webkit-backdrop-filter:saturate(1.8) blur(22px);backdrop-filter:saturate(1.8) blur(22px);box-shadow:var(--glass-lit),var(--glass-depth);view-transition-name:tabs;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.tabs a{position:relative;z-index:1;display:flex;align-items:center;height:44px;padding:0 12px;border-radius:var(--r-pill);color:var(--ink-2);font-size:var(--t-sm);font-weight:650;letter-spacing:-.01em;-webkit-touch-callout:none;transition:color var(--d-2)}
.tabs a[aria-current="page"]{color:var(--ink);font-weight:750}
.tabs a .i{transition:transform 300ms var(--spring)}
.tabs a[aria-current="page"] .i{transform:scale(1.03)}
.tabs a:active .i{transform:scale(.9)}
.tab-lab{display:grid;grid-template-columns:0fr;margin-left:0;opacity:0;transition:grid-template-columns 380ms var(--ease-out),margin-left 380ms var(--ease-out),opacity 160ms var(--ease-out)}
.tab-lab>span{min-width:0;overflow:hidden;white-space:nowrap}
.tabs a[aria-current="page"] .tab-lab{grid-template-columns:1fr;margin-left:8px;opacity:1;transition-delay:0s,0s,90ms}
.tabs a.pulse>*{animation:tab-blur 300ms var(--ease-out)}
@keyframes tab-blur{50%{filter:blur(4px)}}
.tabs-pill{position:absolute;z-index:0;top:4px;left:0;width:0;height:44px;border-radius:var(--r-pill);background:var(--glass-thumb);box-shadow:var(--lens-lit),0 0 0 .5px var(--glass-edge),var(--lens-drop);pointer-events:none}
@media (max-width:340px){.tabs a{padding:0 10px}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 18px;border-radius:var(--r-pill);font-size:var(--t-base);font-weight:650;line-height:1.2;text-align:center;background:var(--surface-2);color:var(--ink);border:1px solid transparent;transition:transform var(--d-1) var(--ease-out),background-color var(--d-2),color var(--d-2),box-shadow var(--d-2);min-width:0;-webkit-user-select:none;user-select:none}
.btn .i{width:18px;height:18px}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 16px -8px var(--accent-line)}
.btn.outline{background:transparent;border-color:var(--line-strong)}
.btn.ghost{background:transparent;padding-inline:10px;color:var(--accent)}
.btn.sm{min-height:36px;padding:6px 12px;font-size:var(--t-sm)}
.btn.block{width:100%}
.btn.ok{background:var(--ok-soft);color:var(--ok)}
.btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
.btns>.btn{width:100%}
.btns>.span{grid-column:1/-1}
.btns.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.link-btn{display:inline-flex;align-items:center;gap:4px;font-weight:650;font-size:var(--t-sm);color:var(--accent);min-height:36px}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-xs);font-weight:650;line-height:1.2;padding:5px 9px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.chip .i{width:13px;height:13px}
.chip.ok{background:var(--ok-soft);color:var(--ok)}.chip.warn{background:var(--warn-soft);color:var(--warn)}.chip.bad{background:var(--bad-soft);color:var(--bad)}
.chip.eat{background:var(--eat-soft);color:var(--eat)}.chip.see{background:var(--see-soft);color:var(--see)}.chip.ride{background:var(--ride-soft);color:var(--ride)}
.chip.event{background:var(--event-soft);color:var(--event)}.chip.hotel{background:var(--hotel-soft);color:var(--hotel)}.chip.gold{background:var(--gold-soft);color:var(--gold)}
.chip.accent{background:var(--accent-soft);color:var(--accent)}
.chip.plain{background:transparent;padding-inline:0}
.chip .star{color:var(--gold)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.dot.live{animation:pulse 2s var(--ease-io) infinite}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);overflow:hidden;min-width:0}
.card-pad{padding:var(--s-4)}
.tap{transition:transform var(--d-1) var(--ease-out),box-shadow var(--d-2),border-color var(--d-2)}
.tap:active{transform:scale(.985)}

/* ---------- hero (Now) ---------- */
.hero-media{position:relative;aspect-ratio:4/3;background:var(--surface-2);overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.2s var(--ease-out)}

.hero-media.plain{aspect-ratio:auto;min-height:0;background:var(--surface-2)}
.hero-media.plain::after{display:none}
.hero-media.plain .hero-over{color:var(--ink)}
.hero-media.plain .hero-big-ico{position:absolute;right:18px;top:18px;width:56px;height:56px;color:var(--accent);opacity:.9}
.hero-over{position:absolute;inset:auto 0 0 0;z-index:1;padding:var(--s-4);color:#fff;display:grid;gap:6px}
.hero-top{position:absolute;inset:var(--s-3) var(--s-3) auto var(--s-3);z-index:1;display:flex;justify-content:space-between;gap:var(--s-2)}
.glass-pill{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-xs);font-weight:700;letter-spacing:.04em;padding:6px 11px;border-radius:var(--r-pill);background:rgba(16,14,12,.5);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero-media.plain .glass-pill{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.glass-pill .dot{color:#ff9d6c}
.hero-title{font-family:var(--font-serif);font-size:var(--t-3xl);line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
.hero-time{font-size:var(--t-sm);font-weight:600;opacity:.92}
.hero-body{padding:var(--s-4);display:grid;gap:var(--s-3)}
.prog{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.prog i{display:block;height:100%;width:0;border-radius:inherit;background:var(--accent);transition:width .8s var(--ease-out)}
.notes{color:var(--ink-2);font-size:var(--t-base);line-height:1.55}
a.mention{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent-line);text-decoration-thickness:2px;text-underline-offset:3px;transition:text-decoration-color var(--d-2),background-color var(--d-2);border-radius:3px}
a.mention:active{background:var(--accent-soft);text-decoration-color:var(--accent)}
.next{border-top:1px solid var(--line);background:var(--surface-2);padding:var(--s-4);display:grid;gap:var(--s-3)}
.next-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3)}
.next-title{font-size:var(--t-lg);font-weight:700;line-height:1.25;letter-spacing:-.01em}
.leg-line{display:flex;align-items:flex-start;gap:8px;font-size:var(--t-sm);color:var(--ink-2);line-height:1.4}
.leg-line .i{margin-top:1px;color:var(--ink-3)}
.leg-line b{color:var(--ink);font-weight:700;white-space:nowrap}
.leave{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:12px 14px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);font-weight:700}
.leave small{font-weight:500;color:var(--ink-3);font-size:var(--t-xs)}
.leave .big{font-size:var(--t-lg);letter-spacing:-.01em}
.leave.soon{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.leave.now{background:var(--bad-soft);border-color:transparent;color:var(--bad)}
.leave.soon small,.leave.now small{color:inherit;opacity:.8}

/* ---------- coach / notice cards ---------- */
.coach{display:grid;grid-template-columns:44px 1fr;gap:var(--s-3);padding:var(--s-4);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-md);margin-bottom:var(--s-4);animation:rise var(--d-3) var(--ease-out) both}
.coach .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.coach .ico .i{width:22px;height:22px}
.coach h3{font-size:var(--t-md);font-weight:700;margin-bottom:2px}
.coach p{font-size:var(--t-sm);color:var(--ink-2)}
.coach ol{margin:var(--s-2) 0 0;padding-left:1.2em;font-size:var(--t-sm);color:var(--ink-2);display:grid;gap:4px}
.coach ol .i{color:var(--accent)}
.coach .row{margin-top:var(--s-3)}
.notice{display:flex;gap:10px;padding:12px 14px;border-radius:var(--r-md);font-size:var(--t-sm);line-height:1.45}
.notice .i{margin-top:2px}
.notice.warn{background:var(--warn-soft);color:var(--warn)}
.notice.info{background:var(--surface-2);color:var(--ink-2)}
.notice.ok{background:var(--ok-soft);color:var(--ok)}
.notice b{font-weight:700}

/* ---------- countdown / stats ---------- */
.count{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-2)}
.count div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 0;text-align:center}
.count b{display:block;font-family:var(--font-serif);font-size:var(--t-3xl);line-height:1;font-weight:400}
.count span{font-size:var(--t-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- sun arc ---------- */
.sun-card{padding:var(--s-4) var(--s-4) var(--s-3)}
.sun-card svg{display:block;width:100%;height:auto;overflow:visible}
.sun-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2);margin-bottom:var(--s-2)}
.sun-head b{font-size:var(--t-md);font-weight:700}
/* the sky card: one path over the date; the sun rides it above the horizon by day, the moon below it at night.
   Only the sun and moon have gradients; the path, fills and labels are flat. */
.sky-horizon{stroke:var(--line-strong);stroke-width:1}
.sky-hz{font:700 8px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;fill:var(--ink-3)}
.sky-line{fill:none;stroke:var(--ink-3);stroke-width:1.5;opacity:.75;stroke-linejoin:round}
.sky-gold{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linejoin:round}
.sky-fill.day{fill:var(--gold);opacity:.16}
.sky-fill.night{fill:var(--moon);opacity:.1}
.sky-guide{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:1.5 3;opacity:.7}
.sky-lab{font:600 10.5px var(--font-sans);fill:var(--ink-2)}
.sky-time{font:700 15px var(--font-sans);fill:var(--ink);font-variant-numeric:tabular-nums}
.sky-glow{fill:var(--sun);opacity:.6}
.sky-halo{fill:var(--sun);transform-box:fill-box;transform-origin:center;animation:sky-breathe 3.8s ease-in-out infinite alternate}
.sky-halo.h1{opacity:.2}
.sky-halo.h2{opacity:.09;animation-delay:-1.9s}
.sky-rim{fill:none;stroke:var(--sun-hi);stroke-width:1.5;opacity:.9}
.g-sun-hi{stop-color:var(--sun-hi)}.g-sun{stop-color:var(--sun)}.g-sun-lo{stop-color:var(--sun-lo)}
.g-moon-hi{stop-color:var(--moon-hi)}.g-moon{stop-color:var(--moon)}.g-moon-lo{stop-color:var(--moon-lo)}
.sky-moon-dark{fill:var(--moon-dark)}
.sky-moon-rim{fill:none;stroke:var(--moon);stroke-width:1;opacity:.55}
.sky-moon-halo{fill:var(--moon);opacity:.1;transform-box:fill-box;transform-origin:center;animation:sky-breathe 4.6s ease-in-out infinite alternate}
.sky-moon-glow{fill:var(--moon);opacity:.35}
@keyframes sky-breathe{from{transform:scale(.92)}to{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.sky-halo,.sky-moon-halo{animation:none}}

/* ---------- segmented control ---------- */
.seg-wrap{position:sticky;top:calc(var(--hdr-h) + env(safe-area-inset-top));z-index:5;padding:var(--s-2) 0;margin:0 calc(-1 * var(--gutter));padding-inline:var(--gutter);background:var(--bg)}
.seg{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;border-radius:var(--r-md);background:var(--surface-2)}
.seg-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/var(--n,4));border-radius:calc(var(--r-md) - 4px);background:var(--surface);box-shadow:var(--shadow-md);transform:translateX(calc(var(--i,0) * 100%));transition:transform var(--d-3) var(--spring)}
.seg button{position:relative;z-index:1;min-height:48px;display:grid;place-items:center;align-content:center;gap:0;border-radius:calc(var(--r-md) - 4px);color:var(--ink-3);transition:color var(--d-2)}
.seg button small{font-size:var(--t-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.seg button b{font-size:var(--t-lg);font-weight:700;line-height:1.1}
.seg button[aria-pressed="true"]{color:var(--ink)}
.seg button[aria-pressed="true"] small{color:var(--accent)}
.seg.compact button{min-height:40px;font-size:var(--t-sm);font-weight:650}

/* ---------- day header ---------- */
.day-head{display:grid;gap:var(--s-2);padding:var(--s-3) 0 var(--s-4)}
.day-head h1{font-family:var(--font-serif);font-size:var(--t-3xl);line-height:1.02;text-wrap:balance}
.day-head p{color:var(--ink-2)}

/* ---------- timeline ---------- */
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl>li{position:relative;padding-left:30px}
.tl>li::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;background:var(--line-strong)}
.tl>li:first-child::before{top:26px}
.tl>li:last-child::before{bottom:calc(100% - 26px)}
.tl>li.tl-leg.walk::before{background:none;width:0;border-left:2px dashed var(--line-strong)}
.tl-dot{position:absolute;left:4px;top:20px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--line-strong);display:grid;place-items:center;z-index:1;transition:background-color var(--d-2),border-color var(--d-2)}
.tl-dot .i{width:9px;height:9px;stroke-width:3.5;color:var(--ink-inv);opacity:0}
/* a past stop is only past; the check means someone tapped "We went" */
.tl-item.done .tl-dot{border-color:var(--ink-3)}
.tl-item.went .tl-dot{background:var(--ok);border-color:var(--ok)}
.tl-item.went .tl-dot .i{opacity:1}
.tl-item.now .tl-dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px var(--accent-soft);animation:ring 2.4s var(--ease-io) infinite}
.tl-item{padding-block:5px}
.stop{width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 10px 12px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);text-align:left;color:inherit;transition:transform var(--d-1) var(--ease-out),border-color var(--d-2),box-shadow var(--d-2),opacity var(--d-2)}
.stop:active{transform:scale(.985)}
.tl-item.done .stop{opacity:.62}
.tl-item.now .stop{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),var(--shadow-md)}
.kind{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.kind .i{width:20px;height:20px}
.kind.eat{background:var(--eat-soft);color:var(--eat)}.kind.see{background:var(--see-soft);color:var(--see)}.kind.ride{background:var(--ride-soft);color:var(--ride)}
.kind.event{background:var(--event-soft);color:var(--event)}.kind.hotel{background:var(--hotel-soft);color:var(--hotel)}
.stop-main{min-width:0;display:grid;gap:2px}
.stop-time{font-size:var(--t-xs);font-weight:650;color:var(--ink-3);font-variant-numeric:tabular-nums;display:flex;gap:6px;align-items:center}
.stop-time .now-tag{color:var(--accent);font-weight:800;letter-spacing:.06em}
.stop-title{font-size:var(--t-md);font-weight:650;line-height:var(--lh-snug);letter-spacing:-.005em}
.stop-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.stop .chev{color:var(--ink-3);width:18px;height:18px}
.tl-leg{min-height:34px;display:flex;align-items:center}
.tl-leg .leg-ico{position:absolute;left:1px;top:50%;margin-top:-10px;width:20px;height:20px;border-radius:50%;background:var(--bg);border:1px solid var(--line-strong);display:grid;place-items:center;z-index:1;color:var(--ink-3)}
.tl-leg .leg-ico .i{width:11px;height:11px}
.tl-leg .leg-txt{font-size:var(--t-xs);color:var(--ink-3);line-height:1.35;padding:6px 0 6px 2px;min-width:0}
.tl-leg .leg-txt b{color:var(--ink-2);font-weight:700}
.tl-sun{min-height:34px;display:flex;align-items:center;gap:8px;font-size:var(--t-xs);font-weight:700;color:var(--gold)}
.tl-sun .sun-ico{position:absolute;left:0;top:50%;margin-top:-11px;width:22px;height:22px;border-radius:50%;background:var(--gold-soft);display:grid;place-items:center;z-index:1}
.tl-sun .sun-ico .i{width:13px;height:13px}
.tl-sun::after{content:"";flex:1;height:1px;background:var(--gold);opacity:.35}
.now-fab{position:fixed;left:50%;bottom:calc(var(--tabs-h) + 14px);z-index:var(--z-float);transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:transform var(--d-3) var(--spring),opacity var(--d-2)}
.now-fab.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.now-fab .btn{box-shadow:var(--shadow-md)}

/* ---------- list rows (Eat, Info) ---------- */
.list{display:grid;gap:8px}
.lrow{width:100%;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 10px 10px 10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);text-align:left;color:inherit;transition:transform var(--d-1) var(--ease-out)}
.lrow:active{transform:scale(.985)}
.lrow .thumb{width:52px;height:52px;border-radius:12px;object-fit:cover;background:var(--surface-2)}
.lrow .thumb.kind{display:grid;place-items:center}
.lrow-main{min-width:0;display:grid;gap:3px}
.lrow-time{font-size:var(--t-xs);font-weight:650;color:var(--ink-3);font-variant-numeric:tabular-nums}
.lrow-title{font-weight:650;line-height:1.3}
.lrow .chev{color:var(--ink-3);width:18px;height:18px}
.priority{border-color:var(--accent-line);border-width:1.5px}
.day-label{font-size:var(--t-2xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:var(--s-6) 0 var(--s-2)}
.stat{display:flex;gap:var(--s-2);flex-wrap:wrap}

/* ---------- sheets ---------- */
.sheet-root{position:fixed;inset:0;z-index:var(--z-sheet)}
.sheet-scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity var(--d-2) var(--ease-out)}
.sheet{position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:var(--max);max-height:calc(100dvh - env(safe-area-inset-top) - 10px);display:flex;flex-direction:column;background:var(--bg-elev);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--shadow-lg);transform:translateY(105%);transition:transform var(--d-3) var(--spring);will-change:transform;outline:none}
.sheet.full{height:calc(100dvh - env(safe-area-inset-top) - 10px)}
.sheet-root.open .sheet-scrim{opacity:1}
.sheet-root.open .sheet{transform:translateY(0)}
.sheet-root.closing .sheet{transition:transform var(--d-2) var(--ease-in)}
.sheet-root.dragging .sheet{transition:none}
.sheet-grab{flex:none;position:relative;padding:10px 56px 4px;touch-action:none;cursor:grab}
.sheet-grab::before{content:"";display:block;width:38px;height:5px;border-radius:3px;background:var(--line-strong);margin:0 auto}
/* close: a glass button floating over the sheet. Over a leading photo it sits inside the photo's corner */
.sheet-close{position:absolute;z-index:3;top:10px;right:12px;width:36px;height:36px;color:var(--ink);background:var(--glass);-webkit-backdrop-filter:saturate(1.8) blur(16px);backdrop-filter:saturate(1.8) blur(16px);box-shadow:var(--glass-lit),0 0 0 .5px var(--glass-edge),var(--glass-depth-sm)}
.sheet-close::before{content:"";position:absolute;inset:-4px;border-radius:inherit}
.sheet.media-top .sheet-close{top:37px;right:calc(var(--gutter) + 10px)}
.sheet:not(.media-top) .sheet-body{padding-top:28px}
.sheet-body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:var(--s-2) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom));display:grid;gap:var(--s-5);align-content:start;transition:opacity var(--d-2)}
.sheet-body.swap{opacity:0}
.sheet-title{font-family:var(--font-serif);font-size:var(--t-3xl);line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
.sheet-head{display:grid;gap:8px}
.sec{display:grid;gap:10px}
.sec-title{font-size:var(--t-2xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.sec-title .i{width:14px;height:14px}
.planb{padding:12px 14px;border-radius:var(--r-md);background:var(--warn-soft);color:var(--warn);font-size:var(--t-sm);line-height:1.5}
.planb b{font-weight:800}
.addr{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);background:var(--surface-2);font-size:var(--t-sm);color:var(--ink-2)}
.addr .i{color:var(--ink-3)}
.addr span{flex:1;min-width:0}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);border-top:1px solid var(--line);padding-top:var(--s-4)}
.pager button{display:grid;gap:2px;padding:10px 12px;border-radius:var(--r-md);background:var(--surface-2);min-height:56px;transition:transform var(--d-1)}
.pager button:active{transform:scale(.97)}
.pager button:last-child{text-align:right}
.pager small{font-size:var(--t-2xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pager span{font-size:var(--t-sm);font-weight:650;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pager button[disabled]{opacity:0;pointer-events:none}
.driver{display:grid;gap:var(--s-4);text-align:center;padding:var(--s-4) 0}
.driver .big{font-size:clamp(2.2rem,10vw,3.4rem);font-weight:800;line-height:1.08;letter-spacing:-.02em}
.driver .mid{font-size:var(--t-xl);font-weight:600;color:var(--ink-2)}

/* ---------- carousel ---------- */
.car{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain}
.car::-webkit-scrollbar{display:none}
.car>*{scroll-snap-align:start;flex:0 0 86%}
.car.photos>img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);background:var(--surface-2)}
.car.photos>img:only-child{flex-basis:100%}
.dots{display:flex;justify-content:center;gap:6px;margin-top:8px}
.dots i{width:6px;height:6px;border-radius:3px;background:var(--line-strong);transition:width var(--d-2) var(--ease-out),background-color var(--d-2)}
.dots i.on{width:18px;background:var(--ink-2)}
.credit{font-size:var(--t-2xs);color:var(--ink-3);margin-top:4px}

/* ---------- option cards ---------- */
.opts>.opt{flex-basis:80%}
.opt{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;transition:border-color var(--d-2),box-shadow var(--d-2)}
.opt img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--surface-2)}
.opt-body{padding:12px;display:grid;gap:6px;align-content:start}
.opt-name{font-size:var(--t-md);font-weight:700;line-height:1.25}
.opt-meta{font-size:var(--t-xs);color:var(--ink-3);font-weight:600;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.opt-meta .star{color:var(--gold)}
.opt-note{font-size:var(--t-sm);color:var(--ink-2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.opt-acts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px}
.opt-acts .btn{min-height:40px;padding:8px 10px;font-size:var(--t-sm)}
.opt.chosen{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.choose{gap:0}.choose .i{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset var(--d-2) var(--ease-out) 60ms,width var(--d-2) var(--ease-out),margin var(--d-2) var(--ease-out);width:0;margin-right:0}
.choose.on{background:var(--accent);color:var(--accent-ink)}
.choose.on .i{stroke-dashoffset:0;width:18px;margin-right:6px}
.meal-status{display:grid;gap:10px;padding:14px;border-radius:var(--r-lg);background:var(--surface-2)}
.meal-status h3{font-size:var(--t-md);font-weight:700}

/* ---------- disclosure ---------- */
.disc{border-radius:var(--r-md);background:var(--surface-2);overflow:hidden}
.disc-btn{width:100%;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;font-weight:650;color:var(--ink)}
.disc-btn .lead{color:var(--ink-3)}
.disc-btn small{font-weight:500;color:var(--ink-3);font-size:var(--t-sm)}
.disc-btn .chev{margin-left:auto;color:var(--ink-3);transition:transform var(--d-2) var(--ease-out)}
.disc-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.disc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d-2) var(--ease-out)}
.disc-panel>div{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear var(--d-2)}
.disc-panel.open{grid-template-rows:1fr}
.disc-panel.open>div{visibility:visible;transition-delay:0s}
.disc-inner{padding:0 14px 14px;display:grid;gap:10px}
.rev{background:var(--surface);border-radius:var(--r-md);padding:12px;font-size:var(--t-sm);color:var(--ink-2);line-height:1.5;border:1px solid var(--line)}
.rev .who{display:flex;gap:6px;align-items:center;color:var(--ink-3);font-size:var(--t-xs);font-weight:600;margin-top:8px}
.rev .who .star{color:var(--gold)}
.info-text{font-size:var(--t-sm);color:var(--ink-2);line-height:1.55}

/* ---------- checklist ---------- */
.chk{width:100%;display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:54px;padding:10px 12px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);text-align:left;color:inherit;transition:transform var(--d-1) var(--ease-out),background-color var(--d-2)}
.chk:active{transform:scale(.985)}
.chk .box{width:26px;height:26px;border-radius:8px;border:2px solid var(--line-strong);display:grid;place-items:center;transition:background-color var(--d-2),border-color var(--d-2),transform var(--d-3) var(--spring)}
.chk .box .i{width:16px;height:16px;stroke-width:3;color:var(--accent-ink);stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset var(--d-2) var(--ease-out) 40ms}
.chk.on .box{background:var(--accent);border-color:var(--accent);transform:scale(1.04)}
.chk.on .box .i{stroke-dashoffset:0}
.chk .lab{font-size:var(--t-sm);line-height:1.4;transition:color var(--d-2)}
.chk.on .lab{color:var(--ink-3)}
.chk a{font-size:var(--t-xs);font-weight:700;display:inline-flex;align-items:center;gap:3px;min-height:32px}
.ring{width:44px;height:44px;flex:none}
.ring circle{fill:none;stroke-width:5}
.ring .bg{stroke:var(--surface-3)}
.ring .fg{stroke:var(--accent);stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .6s var(--ease-out)}
.ring-wrap{display:flex;align-items:center;gap:var(--s-3)}
.ring-wrap b{font-size:var(--t-lg)}

/* ---------- hotel card ---------- */
.hotel img{width:100%;aspect-ratio:16/9;object-fit:cover}
.hotel .card-pad{display:grid;gap:var(--s-3)}
.hotel h2{font-family:var(--font-serif);font-size:var(--t-2xl);line-height:1.05}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--tabs-h) + 16px);z-index:var(--z-toast);transform:translate(-50%,18px) scale(.96);opacity:0;pointer-events:none;width:max-content;max-width:calc(100vw - 32px);display:flex;align-items:center;gap:8px;padding:11px 16px;border-radius:var(--r-pill);background:var(--ink);color:var(--ink-inv);font-size:var(--t-sm);font-weight:650;box-shadow:0 12px 30px -10px rgba(0,0,0,.45);transition:transform var(--d-3) var(--spring),opacity var(--d-2)}
.toast.on{transform:translate(-50%,0) scale(1);opacity:1}
.toast .i{width:17px;height:17px;color:var(--accent)}

/* ---------- skeleton ---------- */
.sk-page{display:grid;gap:12px;padding-top:12px}
.sk{border-radius:var(--r-md);background:var(--surface-2);animation:breathe 1.4s var(--ease-io) infinite}
.sk-line{height:12px}.w40{width:40%}
.sk-title{height:40px;width:70%}
.sk-hero{height:320px;border-radius:var(--r-lg)}
.sk-card{height:72px;border-radius:var(--r-lg)}
.empty{display:grid;justify-items:center;text-align:center;gap:8px;padding:48px 24px;color:var(--ink-2)}
.empty .i{width:36px;height:36px;color:var(--ink-3)}

/* ---------- motion ---------- */
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
@keyframes ring{0%,100%{box-shadow:0 0 0 5px var(--accent-soft)}50%{box-shadow:0 0 0 9px transparent}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes drop-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
@keyframes vt-in-l{from{opacity:0;transform:translateX(44px)}}
@keyframes vt-in-r{from{opacity:0;transform:translateX(-44px)}}
@keyframes vt-out-l{to{opacity:0;transform:translateX(-44px)}}
@keyframes vt-out-r{to{opacity:0;transform:translateX(44px)}}
.enter>*{animation:rise var(--d-3) var(--ease-out) both}
.enter>.now-fab{animation:none}   /* the entry animation's fill would pin the Now button visible and off-centre */
.enter>*:nth-child(2){animation-delay:40ms}.enter>*:nth-child(3){animation-delay:80ms}.enter>*:nth-child(4){animation-delay:120ms}.enter>*:nth-child(n+5){animation-delay:150ms}
::view-transition-old(root){animation:vt-out 140ms var(--ease-in) both}
::view-transition-new(root){animation:vt-in 260ms var(--ease-out) both}
html[data-vt="next"]::view-transition-old(root){animation:vt-out-l 160ms var(--ease-in) both}
html[data-vt="next"]::view-transition-new(root){animation:vt-in-l 300ms var(--ease-out) both}
html[data-vt="prev"]::view-transition-old(root){animation:vt-out-r 160ms var(--ease-in) both}
html[data-vt="prev"]::view-transition-new(root){animation:vt-in-r 300ms var(--ease-out) both}
::view-transition-group(hdr),::view-transition-group(tabs){animation:none}
::view-transition-old(hdr),::view-transition-old(tabs){animation:none;opacity:0}
::view-transition-new(hdr),::view-transition-new(tabs){animation:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .sheet{transform:none!important;opacity:0;transition:opacity 150ms!important}
  .sheet-root.open .sheet{opacity:1}
  .sheet-scrim{transition:opacity 150ms!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}
@media (hover:hover){
  .btn:hover{filter:brightness(1.04)}
  .stop:hover,.lrow:hover{border-color:var(--line-strong)}
  a.mention:hover{text-decoration-color:var(--accent)}
}
@media (min-width:700px){
  :root{--gutter:24px}
  .hero-media{aspect-ratio:16/9}
  .car>*{flex-basis:48%}
  .opts>.opt{flex-basis:44%}
}
html[data-vt="fade"]::view-transition-old(root),html[data-vt="fade"]::view-transition-old(hdr),html[data-vt="fade"]::view-transition-old(tabs){animation:vt-fade-out 280ms var(--ease-out) both;opacity:1}
html[data-vt="fade"]::view-transition-new(root),html[data-vt="fade"]::view-transition-new(hdr),html[data-vt="fade"]::view-transition-new(tabs){animation:vt-fade-in 280ms var(--ease-out) both}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-fade-in{from{opacity:0}}
.next-title{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-lg);font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.next-title .i{color:var(--ink-3)}
.gsum{margin:0}
.sheet.peek{max-height:min(86dvh,720px)}
/* grid items containing carousels must be allowed to shrink below their content width */
.sheet-body,.sec,.hero-body,.next,.meal-status,.disc-inner,.stack,.sheet-head,.card-pad,.list{grid-template-columns:minmax(0,1fr)}
.sheet-body>*,.sec>*,.hero-body>*,.next>*,.list>*{min-width:0}
.meal-status .btn:not(.primary){background:var(--surface)}
/* badges wrap instead of overflowing; layout columns may shrink below a badge's natural width */
.chip{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word;text-align:left;border-radius:14px;min-width:0;max-width:100%;line-height:1.25}
.chip .i{align-self:flex-start;margin-top:1px}
.stop-main,.lrow-main,.opt-body,.sheet-head,.hero-over{grid-template-columns:minmax(0,1fr)}
.stop-main>*,.lrow-main>*,.opt-body>*{min-width:0}
.stop-meta,.row,.opt-meta,.stat{min-width:0;max-width:100%}
.stop-time{flex-wrap:wrap}
.glass-pill{max-width:100%;white-space:normal}
.leave{flex-wrap:wrap;row-gap:2px}

/* no gradients: hero title sits below the photo, status pill stays on the photo */
.hero-media .hero-over{display:none}
.hero-cap{padding:var(--s-4) var(--s-4) 0;display:grid;gap:4px}
.hero-cap .hero-title{color:var(--ink)}
.hero-cap .hero-time{color:var(--ink-3);opacity:1}
.hero-media.plain{display:flex;align-items:center;justify-content:space-between;padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4)}
.hero-media.plain .hero-top{position:static}
.hero-media.plain .hero-big-ico{position:static;width:40px;height:40px}
/* scrollable review lists inside accordions */
.disc-scroll{max-height:min(52vh,420px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:grid;gap:10px;padding:2px 4px 2px 0;border-radius:var(--r-md);scrollbar-width:thin}
.disc-scroll:focus-visible{outline-offset:-2px}
.disc-inner>.btn{justify-self:start}
/* option cards open their detail sheet */
.opt-open{display:block;width:100%;padding:0}
.opt-name{font-size:var(--t-md);font-weight:700;line-height:1.25;text-align:left;color:var(--ink)}
.opt-noimg{display:grid;place-items:center;aspect-ratio:16/10;background:var(--surface-2);color:var(--ink-3)}
.opt-noimg .i{width:28px;height:28px}
/* nearby cards */
.near>.nearc{flex-basis:62%}
.nearc{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden;text-align:left;transition:transform var(--d-1) var(--ease-out)}
.nearc:active{transform:scale(.98)}
.nearc img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--surface-2)}
.nearc-b{padding:10px;display:grid;gap:4px;min-width:0}
.nearc-b b{font-size:var(--t-sm);line-height:1.25}
.nearc .opt-meta .star{color:var(--gold)}
.booking{display:grid;gap:6px;padding:12px 14px;border-radius:var(--r-md);background:var(--surface-2)}
.bk-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:32px;font-size:var(--t-sm)}
.bk-row b{text-align:right;font-weight:700}
.bk-row .icon-btn{width:32px;height:32px;background:var(--surface)}
.bk-row .icon-btn .i{width:16px;height:16px}
.booking .btn{margin-top:4px}
/* ticked checklist items: grayed out and struck through; the line fades in with the tick */
.chk .lab{text-decoration-line:line-through;text-decoration-thickness:1.5px;text-decoration-color:transparent;transition:color var(--d-2),text-decoration-color var(--d-2)}
.chk.on .lab{color:var(--ink-3);text-decoration-color:var(--ink-3)}
/* info cards: closed shows title + one-line answer; open shows building blocks */
.disc-btn.two{min-height:64px;padding:10px 12px;gap:12px;align-items:center}
.disc-ico{width:36px;height:36px;border-radius:10px;flex:none}
.disc-ico .i{width:18px;height:18px}
.two-l{display:grid;gap:2px;min-width:0;text-align:left}
.two-l b{font-size:var(--t-md);font-weight:700;line-height:1.25}
.two-l small{font-size:var(--t-sm);color:var(--ink-3);font-weight:500;line-height:1.35}
.kv{display:grid;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);overflow:hidden}
.kv-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;padding:10px 12px;font-size:var(--t-sm);align-items:baseline}
.kv-row+.kv-row{border-top:1px solid var(--line)}
.kv-row span{color:var(--ink-3)}
.kv-row b{font-weight:650;text-align:right;color:var(--ink)}
.steps{margin:0;padding:0;list-style:none;counter-reset:st;display:grid;gap:8px}
.steps li{counter-increment:st;display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;font-size:var(--t-sm);line-height:1.45;align-items:start}
.steps li::before{content:counter(st);width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:800;font-size:var(--t-xs);display:grid;place-items:center}
.ilist{display:grid;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);overflow:hidden}
.il-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px 12px;min-height:52px;color:inherit}
.il-row+.il-row{border-top:1px solid var(--line)}
a.il-row:active{background:var(--surface-2)}
.il-main{display:grid;gap:2px;min-width:0}
.il-main b{font-size:var(--t-sm);font-weight:700}
.il-main span{font-size:var(--t-xs);color:var(--ink-3);line-height:1.4}
.il-right{font-size:var(--t-xs);font-weight:700;color:var(--ink-2);white-space:nowrap}
.il-row .chev{width:16px;height:16px;color:var(--ink-3)}
.tbl{width:100%;border-collapse:collapse;font-size:var(--t-sm);background:var(--surface);border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
.tbl th{font-size:var(--t-2xs);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:800;text-align:left;padding:8px 10px;background:var(--surface-2)}
.tbl td{padding:9px 10px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.tbl td:first-child{font-weight:700}
/* skip controls */
.skipbar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* "We went" gets its own row so no label wraps at 320px */
.skipbar.three>:first-child{grid-column:1/-1}
.went-btn.on{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.went-ask{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);background:var(--surface-2);font-size:var(--t-sm);color:var(--ink-2)}
.went-ask span{flex:1;min-width:0}
.went-ask b{color:var(--ink)}
.went-ask .btn{flex:none}
.skipbar .btn{min-height:40px}
.tl-item.skipped .stop{opacity:.5}
.tl-item.skipped .stop-title{text-decoration:line-through;text-decoration-color:var(--ink-3)}
.tl-item.skipped .tl-dot{border-style:dashed}
/* toast with an undo button */
.toast.has-act{pointer-events:auto;padding-right:6px}
.toast-act{margin-left:6px;padding:6px 12px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);font-weight:750;font-size:var(--t-sm)}
/* reviews: link to every review first, then a sideways carousel (no nested vertical scrolling) */
.rv-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:var(--t-sm);color:var(--ink-2)}
.rv-top .star{color:var(--gold)}
.rv-top b{color:var(--ink)}
.car.revs>*{flex-basis:84%}
.rv-card{display:grid;gap:8px;align-content:start;padding:14px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);min-height:180px;color:inherit}
.rv-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:var(--t-xs)}
.rv-stars{display:inline-flex;gap:1px}
.rv-stars .i{width:14px;height:14px;color:var(--surface-3)}
.rv-stars .i.on{color:var(--gold)}
.rv-text{font-size:var(--t-sm);line-height:1.5;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.rv-text.open{display:block;-webkit-line-clamp:unset;overflow:visible}
.rv-more{min-height:28px;justify-self:start}
.rv-who{font-size:var(--t-xs);font-weight:700;color:var(--ink-3);margin-top:auto}
.rv-all{place-content:center;justify-items:center;text-align:center;background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.rv-all .i{width:26px;height:26px}
.rv-all b{font-size:var(--t-lg);color:var(--ink)}
.rv-all span{display:inline-flex;align-items:center;gap:4px;font-weight:700}
.rv-all span .i{width:15px;height:15px}
/* width/height attributes reserve space; CSS keeps the 16:10 shape */
.nearc img,.opt img,.car.photos>img,.hotel img{height:auto}
.nearc .opt-meta span,.opt-meta>span{white-space:nowrap}
/* rows in the fixed-height sheet must size to their content; otherwise overflow-hidden items (dropdowns) collapse to 0 */
.sheet-body{grid-auto-rows:max-content}
.sheet-body>.disc,.sheet-body>.sec,.sheet-body>.planb,.sheet-body>.booking{min-height:min-content}
/* review cards: one fixed height for every card; full text opens in its own panel */
.rv-card{height:236px;min-height:0;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
.rv-text{-webkit-line-clamp:6;margin:0}
.rv-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:28px}
.rv-foot .rv-who{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-foot .rv-more{min-height:28px;flex:none}
.rv-all{height:236px}
.i.rv-on{color:var(--gold);width:16px;height:16px}
.i.rv-off{color:var(--surface-3);width:16px;height:16px}
.rv-text{align-self:start;max-height:9em;line-height:1.5}
/* header: weather as a plain link, sun time as plain text */
/* header weather: fills the space the title used; tapping opens Weather */
.hdr-wx{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:44px;color:inherit;text-decoration:none}
.hdr-wx .i{color:var(--gold)}
.hdr-wx .i.night{color:var(--ink-2)}   /* night skies in cool grey, daytime weather in gold */
.wx-main{display:grid;min-width:0;line-height:1.2}
.wx-top{display:flex;align-items:baseline;gap:6px;min-width:0}
.wx-top b{font-size:var(--t-lg);font-weight:750;line-height:1.1}
.wx-txt{min-width:0;font-size:var(--t-sm);font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-sub{min-width:0;font-size:var(--t-2xs);font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-sun{background:none;padding:0 2px;color:var(--ink-2);flex:none}
.hdr-in{gap:10px}
.coach ol[hidden]{display:none}
/* ---------- icon scale: four sizes, assigned by role ---------- */
:root{--ic-1:14px;--ic-2:18px;--ic-3:20px;--ic-4:24px}
body .i{width:var(--ic-2);height:var(--ic-2)}
/* 14: inside chips, metadata, ratings, section labels, small bubbles */
body .chip .i,body .opt-meta .i,body .rv-stars .i,body .i.rv-on,body .i.rv-off,body .sec-title .i,body .pager .i,body .stop-time .i,
body .tl-leg .leg-ico .i,body .tl-sun .sun-ico .i,body .rv-top .i,body .kv .i,body .nearc .i:not(.opt-noimg .i){width:var(--ic-1);height:var(--ic-1)}
/* 18: next to body text and links, chevrons, small buttons, buttons inside rows */
body .leg-line .i,body .addr>.i,body .notice .i,body .planb .i,body .link-btn .i,body .next-title .i,body .disc-btn .i,
body .il-row .i,body .stop .chev,body .lrow .chev,body .chk a .i,body .rv-all span .i,body .btn.sm .i,body .opt-acts .btn .i,
body .addr .icon-btn .i,body .bk-row .icon-btn .i,body .chk .box .i,body .disc-btn .lead{width:var(--ic-2);height:var(--ic-2)}
/* 20: buttons, header, category tiles, toast */
body .btn:not(.sm) .i,body .icon-btn .i,body .hdr-wx .i,body .hdr-sun .i,body .theme-btn .i,body .kind .i,body .thumb .i,body .toast .i,
body .disc-ico .i,body .opt-acts .btn.choose .i{width:var(--ic-3);height:var(--ic-3)}
body .addr .icon-btn .i,body .bk-row .icon-btn .i,body .opt-acts .btn .i{width:var(--ic-2);height:var(--ic-2)}
/* 24: tab bar, feature icons */
body .tabs a .i,body .hdr-wx>.i,body .coach .ico .i,body .rv-all>.i,body .opt-noimg .i,body .empty .i{width:var(--ic-4);height:var(--ic-4)}
/* exempt: decorative glyphs with their own geometry */
body .tl-dot .i{width:9px;height:9px}
body .hero-media.plain .hero-big-ico{width:40px;height:40px}
/* the choose check animates its width from 0 */
body .choose:not(.on) .i{width:0}
body .hdr-sun{font-size:var(--t-sm)}
.tl-leg .leg-ico{width:24px;height:24px;margin-top:-12px;left:-1px}
.tl-sun .sun-ico{width:24px;height:24px;margin-top:-12px;left:-1px}
/* ---------- five tabs ---------- */
/* ---------- Spend ---------- */
.xbig{font-family:var(--font-serif);font-size:var(--t-4xl);line-height:1;letter-spacing:-.01em}
.xsmall{font-size:var(--t-xs);line-height:1.5}
.xq{font-family:var(--font-serif);font-size:var(--t-2xl);line-height:1.05;font-weight:400}
.link-btn.inline{display:inline;min-height:0;font-size:inherit;padding:0}
.av{width:36px;height:36px;border-radius:var(--r-pill);display:grid;place-items:center;flex:none;background:var(--surface-2);color:var(--ink-2);font-size:var(--t-xs);font-weight:750;letter-spacing:.02em}
.owe{display:grid;grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:"av txt btn" "av amt btn";align-items:center;column-gap:12px;row-gap:2px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.owe .av{grid-area:av}
.owe-txt{grid-area:txt;font-size:var(--t-sm);color:var(--ink-2);min-width:0}
.owe-txt b{color:var(--ink);font-weight:700}
.owe-amt{grid-area:amt;font-size:var(--t-lg);font-weight:750}
.owe .btn{grid-area:btn}
.ppl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pp{display:grid;gap:2px;justify-items:start;align-content:start;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);min-width:0}
.pp .av{margin-bottom:6px}
.pp b{font-weight:700}
.pp .chip{margin-top:8px}
.cats{display:grid;gap:14px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.cat{display:grid;grid-template-columns:32px minmax(0,1fr) auto;grid-template-areas:"ico name amt" "ico bar bar";align-items:center;column-gap:12px;row-gap:6px}
.cat .kind{grid-area:ico;width:32px;height:32px;border-radius:10px}
.cat-name{grid-area:name;font-weight:650;font-size:var(--t-sm)}
.cat-amt{grid-area:amt;font-weight:700;font-size:var(--t-sm)}
.bar{grid-area:bar;height:6px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;background:var(--accent)}
.xrow .lrow-main{gap:2px}
.xmeta{font-size:var(--t-xs);line-height:1.4}
.xamt{font-weight:750;font-size:var(--t-md);padding-right:4px}
.btn.bad{color:var(--bad)}
/* expense form */
.xf{display:grid;gap:var(--s-5);min-width:0}
.xf-total{display:grid;gap:6px;padding:14px 16px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);transition:border-color var(--d-2),box-shadow var(--d-2)}
.xf-total:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.xf-amt{display:flex;align-items:baseline;gap:4px;font-family:var(--font-serif);font-size:var(--t-4xl);line-height:1.1;color:var(--ink-3)}
.xf-amt input{flex:1;min-width:0;border:0;background:none;padding:0;font:inherit;color:var(--ink);font-variant-numeric:tabular-nums;outline:none}
.xf-amt input::placeholder{color:var(--ink-3);opacity:.5}
.xf-tip{display:grid;gap:8px;font-size:var(--t-sm)}
.xf-tip[hidden]{display:none}
.field{display:grid;gap:8px;border:0;margin:0;padding:0;min-width:0}
.flabel{font-size:var(--t-2xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:0}
.in{width:100%;min-height:48px;padding:10px 14px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:16px;-webkit-appearance:none;appearance:none}
.in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
select.in{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2377706a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;text-overflow:ellipsis}
input[type="time"].in{display:flex;align-items:center}
input[type="time"].in::-webkit-date-and-time-value{text-align:left}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.pick{position:relative;display:inline-flex}
.pick input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pick span,.pick-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:var(--r-pill);background:var(--surface-2);color:var(--ink-2);font-size:var(--t-sm);font-weight:650;border:1px solid transparent;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--d-2),color var(--d-2),border-color var(--d-2),transform var(--d-1) var(--ease-out)}
.pick input:checked+span,.pick-btn.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.pick input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.pick span:active,.pick-btn:active{transform:scale(.96)}
.xf-actions{position:sticky;bottom:calc(-1 * (var(--s-6) + env(safe-area-inset-bottom)));z-index:2;display:grid;gap:8px;margin-bottom:calc(-1 * (var(--s-6) + env(safe-area-inset-bottom)));padding:12px 0 calc(var(--s-6) + env(safe-area-inset-bottom));background:var(--bg-elev);border-top:1px solid var(--line)}
.xphoto{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);text-align:left;font-weight:650;font-size:var(--t-sm);color:var(--ink-2);justify-self:start}
.xphoto[hidden]{display:none}
.xphoto img{width:56px;height:56px;object-fit:cover;border-radius:10px;background:var(--surface-2)}
.xphoto span{display:inline-flex;align-items:center;gap:6px}
.xfull{width:100%;height:auto;border-radius:var(--r-md);background:#fff}
.xread{position:relative;display:grid;min-height:320px;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2)}
.xread img{width:100%;max-height:62dvh;object-fit:contain;opacity:.35;filter:saturate(.5)}
.xread-ov{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;padding:24px}
.xread-ov b{font-family:var(--font-serif);font-size:var(--t-2xl);font-weight:400;color:var(--ink)}
.xread-ov span:not(.spin){font-size:var(--t-sm);color:var(--ink-2)}
.spin{width:32px;height:32px;border-radius:50%;border:3px solid var(--line-strong);border-top-color:var(--accent);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{from{opacity:1}to{opacity:.35}}
@media (prefers-reduced-motion:reduce){.spin{animation:breathe 1.2s ease-in-out infinite alternate}}
/* icon scale for Spend */
body .cat .kind .i,body .pick .i{width:var(--ic-2);height:var(--ic-2)}
body .xmeta .i{width:var(--ic-1);height:var(--ic-1);vertical-align:-.15em}
/* the form never grows past the sheet: inputs have a wide intrinsic size */
.xf,.xf-total,.field{grid-template-columns:minmax(0,1fr)}
.xf>*,.xf-total>*,.field>*{min-width:0}
.xf-amt input{width:0}
/* structured "What to do" */
.guide{display:grid;gap:12px;min-width:0}
.guide>*{margin:0;min-width:0}
.g-lead{font-size:var(--t-md);font-weight:650;line-height:1.4;color:var(--ink)}
.notice a.mention{color:inherit}
.opt-dirs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:6px}
.opt-dirs .btn{min-height:36px;padding-inline:8px}
/* walking route: a timeline row right after the stop the walk starts from */
.tl-route{min-height:40px;display:flex;align-items:center}
.tl-route-a{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:6px 0 6px 2px;color:var(--accent);text-decoration:none}
.tl-route .leg-ico{position:absolute;left:-1px;top:50%;margin-top:-12px;width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;z-index:1}
.tl-route .leg-txt{flex:1;min-width:0;font-size:var(--t-xs);line-height:1.35;color:var(--ink-2)}
.tl-route .leg-txt b{color:var(--accent);font-weight:700}
body .tl-route .leg-ico .i,body .tl-route .tl-route-go{width:var(--ic-1);height:var(--ic-1)}
.tl-route .tl-route-go{flex:none;color:var(--accent);margin-right:2px}
/* ---------- glass: navigation layer only, no gradients (glass_research.md steps 1-5) ---------- */
/* blur values stay literal: see the open report on var() inside -webkit-backdrop-filter. No --ink-3 on glass. */
/* step 1: contrast on existing glass */
.toast .i{color:var(--accent-inv)}
.glass-pill{background:var(--glass-dim)}
/* step 3: a fill on the header glass, and a lit edge on the tab bar */
.hdr .icon-btn{background:var(--glass-fill)}
/* step 4: toast and offline pill become glass */
.toast{background:var(--glass-ink);-webkit-backdrop-filter:saturate(1.4) blur(20px);backdrop-filter:saturate(1.4) blur(20px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 .5px var(--glass-edge),var(--glass-depth)}
.offline span{background:var(--glass-tabs);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);border-color:var(--glass-edge);box-shadow:var(--glass-lit),var(--glass-depth-sm)}
/* step 5: the Now button is the one tinted element */
.now-fab{display:flex;border-radius:var(--r-pill);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
.now-fab .btn.primary{background:var(--glass-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 10px 16px -12px rgba(255,255,255,.3),0 0 0 .5px var(--glass-edge),var(--glass-depth-sm)}
/* the toast is glass now: never let it sit on the Now button, lift it above while the button shows */
body:has(.now-fab.show) .toast{bottom:calc(var(--tabs-h) + 66px)}
/* step 2: fallbacks. Keep last so they win at equal specificity */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hdr,.seg-wrap{background:var(--bg)}
  .tabs{background:var(--surface-2)}
  .offline span{background:var(--surface)}
  .toast{background:var(--ink)}
  .now-fab .btn.primary{background:var(--accent)}
  .glass-pill{background:rgba(16,14,12,.72)}
  .sheet-close{background:var(--surface)}
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .hdr,.seg-wrap,.tabs,.offline span,.toast,.now-fab,.glass-pill,.sheet-close{-webkit-backdrop-filter:none;backdrop-filter:none}
  .sheet-close{background:var(--surface)}
  .hdr,.seg-wrap{background:var(--bg)}
  .tabs{background:var(--surface-2)}
  .offline span{background:var(--surface)}
  .toast{background:var(--ink)}
  .now-fab .btn.primary{background:var(--accent)}
  .glass-pill{background:rgba(16,14,12,.78)}
  .tabs-pill,.seg-wrap .seg-thumb{background:var(--surface)}
}
@media (prefers-contrast:more){
  .hdr,.hdr.scrolled,.seg-wrap{border-bottom:1px solid var(--line-strong)}   /* .hdr.scrolled would otherwise keep the faint line */
  .tabs{box-shadow:0 0 0 1px var(--line-strong)}
  .tabs-pill,.seg-thumb,.seg-wrap .seg-thumb{box-shadow:0 0 0 1.5px var(--ink)}
  .toast{box-shadow:0 0 0 1.5px var(--ink-inv)}
  .sheet-close{box-shadow:0 0 0 1.5px var(--ink)}
}