/* ===========================================================================
   Laga · Surf Trip · multi-tab companion app
   Design read: surf trip on the Cantabrian coast, midsummer (San Juan).
   Orient and inspire. Tokens grounded in the subject (wet slate, Atlantic, low sun).
   Type: Bricolage Grotesque (display), Geist (body), Geist Mono (data).
   One locked accent: low-sun amber. Radius lock: panels 18px, pills 999, small 12px.
   =========================================================================== */
@font-face{font-family:Bricolage;src:url(/fonts/bricolage-700.woff2) format("woff2");font-weight:700;font-display:swap;font-style:normal}
@font-face{font-family:Bricolage;src:url(/fonts/bricolage-800.woff2) format("woff2");font-weight:800;font-display:swap;font-style:normal}
@font-face{font-family:Geist;src:url(/fonts/geist-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Geist;src:url(/fonts/geist-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Geist;src:url(/fonts/geist-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fonts/geistmono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --ink:#13201c; --ink-soft:#39473f; --muted:#586860; --faint:#67746c;
  --paper:#eceee9; --surface:#f8f9f6; --surface-2:#e6eae2; --line:#d7ddd2;
  --sea1:#0c2624; --sea2:#11403c;
  /* amber: --accent for FILLS, --accent-text for amber-as-text/icon on light (AA-safe) */
  --accent:#ef8a1f; --accent-deep:#cf6f12; --accent-soft:#f9e7cd; --accent-text:#9c5208;
  --on-accent-ink:#241606;
  --ok:#2c6b4f; --ok-soft:#dde9e0;
  --shadow:0 1px 2px rgba(16,32,28,.05), 0 14px 32px -22px rgba(16,32,28,.5);
  --shadow-lg:0 2px 6px rgba(16,32,28,.08), 0 30px 60px -34px rgba(16,32,28,.6);
  --r:18px; --r-sm:12px;
  --disp:Bricolage,Geist,ui-sans-serif,system-ui,sans-serif;
  --body:Geist,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --rail:264px;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#e9ede8; --ink-soft:#c4cdc6; --muted:#9aa8a0; --faint:#8b988f;
    --paper:#0c1311; --surface:#121b18; --surface-2:#1a2521; --line:#26312c;
    --accent:#f59a37; --accent-deep:#f0851b; --accent-soft:#2a2012; --accent-text:#f0851b; --on-accent-ink:#241606;
    --ok:#5cc48c; --ok-soft:#142a1f;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 36px -24px rgba(0,0,0,.8);
    --shadow-lg:0 2px 8px rgba(0,0,0,.55), 0 36px 64px -32px rgba(0,0,0,.85);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4{margin:0; line-height:1.04; font-family:var(--disp); font-weight:800; letter-spacing:-.02em}
p{margin:0}
a{color:inherit; text-decoration:none}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
svg.ic{width:1em; height:1em; display:inline-block; vertical-align:-.125em; stroke:currentColor; fill:none; flex:none}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px; border-radius:6px}

/* ---------- App shell ---------- */
.app{min-height:100dvh}
.rail{display:none}
.stage{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
.offline{display:none; position:sticky; top:0; z-index:30; background:var(--accent); color:var(--on-accent-ink);
  text-align:center; font-size:13px; font-weight:600; padding:6px 12px}
body.is-offline .offline{display:block}

/* views (tab panels) */
.view{display:none}
.view.active{display:block}
@media (prefers-reduced-motion:no-preference){
  /* opacity-only so a fixed parallax layer inside a view is not captured by a transform */
  .view.active{animation:viewIn .4s ease both}
  @keyframes viewIn{from{opacity:0}to{opacity:1}}
}

.pad{padding:22px 18px 8px; max-width:760px; margin:0 auto}
.section-h{font-size:clamp(1.7rem,7vw,2.2rem); margin:6px 0 2px}
.section-sub{color:var(--muted); margin:0 0 16px; max-width:60ch}

/* ---------- HOY / Hero (fixed-layer parallax) ---------- */
.hero{position:relative; min-height:84svh; display:flex; flex-direction:column; justify-content:flex-end;
  color:#fff; isolation:isolate}
/* background image layer: scrolls with hero by default; becomes a fixed parallax layer when motion is allowed */
.hoy-bg{position:absolute; inset:0; z-index:-1; overflow:hidden; background:#0c2624 center/cover no-repeat}
.hoy-bg img{width:100%;height:100%;object-fit:cover;display:block}
.hero-scrim{position:absolute; inset:0;
  background:linear-gradient(178deg, rgba(8,28,26,.28) 0%, rgba(8,26,24,.05) 26%, rgba(7,22,21,.58) 60%, rgba(5,16,16,.96) 100%)}
.hero-grain{position:absolute; inset:0; opacity:.06; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:no-preference){
  .hoy-bg{position:fixed; inset:0}
}
.hoy-sheet{position:relative; z-index:1; background:var(--paper)}
.hero-inner{position:relative; padding:0 18px calc(20px + env(safe-area-inset-bottom)); max-width:760px; margin:0 auto; width:100%}
.eyebrow{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:#fff; opacity:.92; margin-bottom:12px}
.eyebrow .ic{font-size:15px; color:#fff}
.hero h1{font-size:clamp(3rem,15vw,5.4rem); letter-spacing:-.04em; text-wrap:balance; text-shadow:0 2px 30px rgba(0,0,0,.45)}
.hero .h-sub{font-family:var(--body); font-weight:500; font-size:clamp(1.05rem,4.5vw,1.3rem); margin-top:8px; opacity:.96; max-width:36ch; text-shadow:0 1px 16px rgba(0,0,0,.45)}
.cd{display:inline-flex; align-items:center; gap:10px; margin-top:18px; padding:10px 14px; border-radius:999px;
  background:rgba(8,22,21,.62); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(8px);
  font-size:14px; font-weight:600; text-shadow:0 1px 8px rgba(0,0,0,.5)}
@media (prefers-reduced-transparency:reduce){.cd{background:rgba(6,18,18,.82);backdrop-filter:none}}
.cd .ic{color:#fff; font-size:16px}
.cd .cd-time{font-family:var(--mono); font-weight:500}
@media (prefers-reduced-motion:no-preference){
  .hero.boot .eyebrow,.hero.boot h1,.hero.boot .h-sub,.hero.boot .cd{animation:rise .8s cubic-bezier(.16,1,.3,1) both}
  .hero.boot h1{animation-delay:.06s}.hero.boot .h-sub{animation-delay:.14s}.hero.boot .cd{animation-delay:.22s}
  @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}

/* ---------- Ribbon (tide / itinerary) ---------- */
.ribbon-wrap{background:linear-gradient(180deg,var(--sea1),var(--sea2)); color:#eaf4f1; padding:16px 14px 18px}
.ribbon-head{display:flex; justify-content:space-between; align-items:baseline; max-width:760px; margin:0 auto 11px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.72}
.ribbon{position:relative; max-width:760px; margin:0 auto; display:grid; grid-template-columns:repeat(6,1fr); gap:6px}
.rday{position:relative; text-align:center; padding:10px 2px 8px; border-radius:var(--r-sm); background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08)}
.rday .rd-d{font-family:var(--mono); font-size:11px; opacity:.7}
.rday .rd-n{font-family:var(--disp); font-weight:800; font-size:18px; line-height:1.1; margin-top:1px}
.rday .ic{font-size:15px; margin-top:5px; opacity:.6}
.rday.past{opacity:.5}
.rday.today{background:var(--accent); border-color:transparent; color:var(--on-accent-ink)}
.rday.today .rd-d,.rday.today .ic{opacity:.85}
.rday.today .ic{color:var(--on-accent-ink)}
@media (prefers-reduced-motion:no-preference){.rday{transition:background .3s}}
.now-line{position:absolute; top:-4px; bottom:-4px; width:2px; background:#fff; border-radius:2px; z-index:3;
  box-shadow:0 0 0 3px rgba(239,138,31,.35)}
@media (prefers-reduced-motion:no-preference){.now-line{transition:left .6s cubic-bezier(.16,1,.3,1)}}
.now-line::before{content:""; position:absolute; top:-5px; left:50%; transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(255,255,255,.4)}

/* ---------- Panels / cards ---------- */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:18px; margin:0 0 14px}
.panel-h{display:flex; align-items:center; gap:11px; margin-bottom:4px}
.panel-h .badge{width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;
  background:var(--accent-soft); color:var(--accent-text); font-size:19px}
.panel-h h3{font-size:1.18rem; letter-spacing:-.02em}
.panel-h .where{font-size:13px; color:var(--muted); margin-top:1px}
.lead{color:var(--ink-soft); margin:2px 0 0}
.meta{display:grid; grid-template-columns:auto 1fr; gap:7px 14px; margin-top:14px; font-size:14.5px; align-items:baseline}
.meta dt{color:var(--muted); display:flex; align-items:center; gap:7px}
.meta dt .ic{font-size:15px; color:var(--faint)}
.meta dd{margin:0; font-weight:500}
.actions{display:flex; flex-wrap:wrap; gap:9px; margin-top:15px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:var(--r-sm);
  font-family:var(--body); font-size:14px; font-weight:600; cursor:pointer;
  background:var(--surface-2); color:var(--ink); border:1px solid var(--line); transition:background .2s}
.btn .ic{font-size:16px}
.btn-primary{background:var(--accent); color:var(--on-accent-ink); border-color:transparent}
.btn-primary .ic{color:var(--on-accent-ink)}
@media (prefers-reduced-motion:no-preference){
  .btn{transition:transform .07s, background .2s}
  .btn:active{transform:scale(.97)}
}
.tag{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-size:12.5px; font-weight:600;
  background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line)}
.tag.accent{background:var(--accent-soft); color:var(--accent-text); border-color:transparent}
.tag.ok{background:var(--ok-soft); color:var(--ok); border-color:transparent}
.tag .ic{font-size:14px}
.note{margin-top:14px; font-size:13.5px; color:var(--muted); display:flex; gap:9px; align-items:flex-start; line-height:1.5}
.note .ic{font-size:16px; color:var(--faint); margin-top:1px; flex:none}

/* Today snapshot on Hoy */
.today-strip{display:flex; gap:9px; flex-wrap:wrap; margin-top:13px}

/* ---------- Ruta timeline ---------- */
.timeline{position:relative; margin-top:6px}
.leg{position:relative; padding-left:46px; margin-bottom:14px}
.leg::before{content:""; position:absolute; left:18px; top:34px; bottom:-14px; width:2px; background:var(--line)}
.leg:last-child::before{display:none}
.leg .node{position:absolute; left:6px; top:6px; width:26px;height:26px;border-radius:50%;
  background:var(--surface-2); border:2px solid var(--line); display:grid; place-items:center; font-size:13px; color:var(--muted); z-index:2}
.leg.active .node{background:var(--accent); border-color:var(--accent); color:var(--on-accent-ink)}
.leg.past .node{background:var(--ok); border-color:var(--ok); color:#fff}
.leg .panel{margin:0}
.leg.active .panel{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft), var(--shadow)}
.leg.past .panel{opacity:.66}
body.show-past .leg.past .panel{opacity:1}
.leg.past .leg-extra{display:none}
body.show-past .leg.past .leg-extra{display:block}
.state{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-left:auto; padding-top:3px}
.leg.active .state{color:var(--accent-text)} .leg.past .state{color:var(--ok)} .leg.future .state{color:var(--faint)}
.legtimes{display:flex; align-items:center; gap:10px; margin-top:12px; font-family:var(--mono); font-size:15px; font-weight:500}
.legtimes .ar{color:var(--faint)}
.legtimes small{font-family:var(--body); font-size:11px; color:var(--muted); display:block; font-weight:500; letter-spacing:0}
.toggle-past{display:inline-flex; align-items:center; gap:6px; margin:0 0 14px; background:none; border:0;
  color:var(--muted); font:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:4px 0}
.toggle-past .ic{font-size:15px}
@media (prefers-reduced-motion:no-preference){
  .toggle-past .ic{transition:transform .2s}
  body.show-past .toggle-past .ic{transform:rotate(90deg)}
}

/* ---------- Map embeds (lazy, degrade offline) ---------- */
.mapembed{width:100%; aspect-ratio:16/10; margin-top:14px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface-2); overflow:hidden; display:block}
.mapembed iframe{width:100%; height:100%; border:0; display:block}

/* ---------- Forecast strip (Surf) ---------- */
.media-band{position:relative; border-radius:var(--r); overflow:hidden; margin-bottom:16px; color:#fff; isolation:isolate}
.media-band img{width:100%; height:200px; object-fit:cover; display:block}
.media-band .cap{position:absolute; inset:auto 0 0 0; padding:16px; z-index:1;
  background:linear-gradient(0deg, rgba(7,22,21,.82), transparent)}
.media-band .cap h3{font-size:1.4rem}
.media-band .cap p{font-size:13.5px; opacity:.92; margin-top:3px; max-width:40ch}
.fcast{display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:2px 2px 12px; scroll-snap-type:x mandatory}
.fday{flex:0 0 124px; scroll-snap-align:start; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:13px; box-shadow:var(--shadow)}
.fday.today{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft), var(--shadow)}
.fday.past{opacity:.55}
.fday .fd-d{font-family:var(--mono); font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.fday.today .fd-d{color:var(--accent-text)}
.fday .fd-t{font-family:var(--disp); font-weight:800; font-size:1.5rem; margin:6px 0 2px}
.fday .fd-t small{font-family:var(--mono); font-size:.85rem; color:var(--muted); font-weight:500}
.fday .fd-row{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft); margin-top:7px}
.fday .fd-row .ic{font-size:14px; color:var(--faint)}
.statline{display:flex; gap:18px; flex-wrap:wrap; margin-top:4px}
.stat .v{font-family:var(--disp); font-weight:800; font-size:1.7rem}
.stat .k{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:5px}
.stat .k .ic{font-size:14px; color:var(--accent-text)}

/* ---------- Surf data-viz (tide / waves / gauges / avisos) ---------- */
/* Day selector (segmented control) */
.tide-days{display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:14px 0 4px; padding-bottom:2px}
.tide-day{flex:0 0 auto; padding:7px 13px; border-radius:999px; cursor:pointer;
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13px; font-weight:500;
  background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line)}
.tide-day[aria-pressed="true"]{background:var(--accent); color:var(--on-accent-ink); border-color:transparent}
@media (prefers-reduced-motion:no-preference){.tide-day{transition:background .2s,color .2s}}

/* Chart frame */
.tide-chart{position:relative; margin-top:12px; border:1px solid var(--line); border-radius:var(--r-sm);
  overflow:hidden; background:var(--surface-2)}
#tideSvg{display:block; width:100%; height:auto; aspect-ratio:720/250}

/* SVG strokes/fills keyed to tokens (vector-effect keeps lines crisp under non-uniform scale) */
.tide-night{fill:var(--sea1); opacity:.10}
.tide-grid{stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke}
.tide-fill{fill:var(--accent); opacity:.14}
.tide-curve{fill:none; stroke:var(--accent-deep); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke}
.tide-mid{stroke:var(--ok); stroke-width:1.5; stroke-dasharray:2 4; vector-effect:non-scaling-stroke; opacity:.7}
.tide-dot{fill:var(--surface); stroke:var(--accent-deep); stroke-width:2; vector-effect:non-scaling-stroke}
.tide-now-line{stroke:var(--ink); stroke-width:2; vector-effect:non-scaling-stroke}
.tide-now-dot{fill:var(--accent); stroke:var(--surface); stroke-width:2; vector-effect:non-scaling-stroke}
@media (prefers-color-scheme:dark){
  .tide-night{opacity:.28}
  .tide-fill{opacity:.18}
}
/* SVG text labels (sized in user units; scale uniformly with the locked-ratio box) */
.tide-lbl{font-family:var(--mono); font-size:16px; font-variant-numeric:tabular-nums; fill:var(--ink); font-weight:500}
.tide-lbl-h{fill:var(--muted)}
.tide-axis{font-family:var(--mono); font-size:13px; fill:var(--faint); font-variant-numeric:tabular-nums}
.tide-extkind{font-family:var(--mono); font-size:15px; font-weight:600; fill:var(--accent-text)}
@media (prefers-color-scheme:dark){.tide-extkind{fill:var(--accent-deep)}}
@media (prefers-reduced-motion:no-preference){
  .tide-now-dot{animation:tideNowPulse 2.4s ease-in-out infinite}
  @keyframes tideNowPulse{0%,100%{opacity:1}50%{opacity:.55}}
}

/* Legend */
.tide-legend{display:flex; flex-wrap:wrap; gap:14px; margin-top:11px; font-size:12.5px; color:var(--muted)}
.tide-legend span{display:inline-flex; align-items:center; gap:6px}
.tide-legend .sw{width:13px; height:13px; border-radius:4px; flex:none}
.tide-legend .sw-day{background:var(--surface-2); border:1px solid var(--line)}
.tide-legend .sw-night{background:var(--sea1); opacity:.55}
.tide-legend .sw-mid{background:repeating-linear-gradient(90deg,var(--ok) 0 3px,transparent 3px 6px); border-radius:0; height:3px; margin-top:5px}

/* Wave bars */
.bars{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; align-items:end; margin-top:16px; height:148px}
.bar-col{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:7px}
.bar-val{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13px; font-weight:500; color:var(--ink)}
.bar-track{position:relative; width:100%; max-width:40px; flex:1; display:flex; align-items:flex-end;
  background:var(--surface-2); border-radius:var(--r-sm); overflow:hidden}
.bar-fill{width:100%; background:var(--line); border-radius:var(--r-sm)}
.bar-col.today .bar-fill{background:var(--accent)}
.bar-col.na .bar-track{background:transparent; border:1px dashed var(--line)}
.bar-col.na .bar-fill{background:transparent}
.bar-na{font-family:var(--mono); font-size:11px; color:var(--faint); align-self:center; margin-bottom:8px}
.bar-day{font-family:var(--mono); font-size:12px; color:var(--muted)}
.bar-col.today .bar-day{color:var(--accent-text)}
@media (prefers-reduced-motion:no-preference){.bar-fill{transition:height .5s cubic-bezier(.16,1,.3,1)}}

/* Gauge tiles */
.gauges{display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:16px}
.gauge{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:14px}
.gauge-ic{font-size:18px; color:var(--accent-text)}
.gauge-v{font-family:var(--disp); font-weight:800; font-size:1.45rem; line-height:1.05; margin-top:8px; letter-spacing:-.02em}
.gauge-v.mono{font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums}
.gauge-v small{font-size:.62em; color:var(--muted); font-weight:500}
.gauge-k{font-size:12px; color:var(--muted); margin-top:3px}
@media (min-width:520px){.gauges{grid-template-columns:repeat(4,1fr)}}

/* AEMET avisos */
.avisos{background:var(--accent-soft); border:1px solid var(--accent-text); border-radius:var(--r); padding:16px; margin:0 0 14px}
.avisos-head{display:flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:800; font-size:1.05rem; color:var(--accent-text)}
.avisos-head .ic{font-size:20px}
.avisos-body{color:var(--ink-soft); font-size:14px; margin-top:7px; line-height:1.5}
.avisos-btn{margin-top:13px; width:100%; background:var(--accent); color:var(--on-accent-ink); border-color:transparent}
.avisos-btn .ic{color:var(--on-accent-ink)}

/* ---------- Despensa (static pantry) ---------- */
.pantry{display:grid; gap:22px}
@media (min-width:560px){.pantry{grid-template-columns:1fr 1fr; gap:22px 28px}}
.pgroup{min-width:0}
.pgroup-h{display:flex; align-items:center; gap:9px; margin:0 0 4px;
  font-family:var(--body); font-weight:700; font-size:15px; color:var(--ink)}
.pgroup-h .ic{font-size:18px; color:var(--accent-text); flex:none}
ul.plist{list-style:none; margin:0; padding:0}
ul.plist li{padding:9px 2px; border-top:1px solid var(--line); font-size:15.5px; color:var(--ink-soft); line-height:1.35}
ul.plist li:first-child{border-top:0}
.opt{color:var(--faint); font-size:13px}

/* ---------- Mapa ---------- */
.places{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.place{position:relative; display:flex; flex-direction:column; gap:5px; padding:15px; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); min-height:104px}
.place .pl-ic{font-size:20px; color:var(--accent-text)}
.place .pl-n{font-weight:600; font-size:15px; line-height:1.2}
.place .pl-s{font-size:12px; color:var(--muted); line-height:1.35}
.place .go{position:absolute; top:13px; right:13px; color:var(--faint); font-size:16px}
@media (prefers-reduced-motion:no-preference){
  .place{transition:transform .07s}
  .place:active{transform:scale(.98)}
}
.nearrow{display:flex; gap:9px; overflow-x:auto; padding-bottom:10px; -webkit-overflow-scrolling:touch}
.nearchip{flex:none; display:inline-flex; align-items:center; gap:8px; padding:11px 15px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent-text); font-weight:600; font-size:14px; border:0}
.nearchip .ic{font-size:17px}

footer{color:var(--faint); font-size:12.5px; text-align:center; padding:20px 18px 18px; line-height:1.7}
footer .mono{font-size:11.5px}

/* ---------- Bottom tab bar (mobile) ---------- */
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; justify-content:center; gap:2px;
  background:color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter:blur(14px) saturate(1.3);
  border-top:1px solid var(--line); padding:7px 6px calc(7px + env(safe-area-inset-bottom))}
@supports not (backdrop-filter:blur(1px)){.tabbar{background:var(--surface)}}
.tabbtn{flex:1; max-width:92px; background:none; border:0; cursor:pointer; display:flex; flex-direction:column; align-items:center;
  gap:3px; padding:6px 2px; border-radius:var(--r-sm); color:var(--muted); font-family:var(--body); font-size:10.5px; font-weight:600}
.tabbtn .ic{font-size:21px}
.tabbtn[aria-current="page"]{color:var(--accent-text)}
@media (prefers-reduced-motion:no-preference){
  .tabbtn .ic{transition:transform .2s}
  .tabbtn[aria-current="page"] .ic{transform:translateY(-1px)}
}

/* ---------- Desktop: left rail ---------- */
@media (min-width:900px){
  .app{display:grid; grid-template-columns:var(--rail) 1fr}
  .tabbar{display:none}
  .stage{padding-bottom:0; min-height:100dvh}
  .rail{display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100dvh; padding:26px 18px;
    background:var(--surface); border-right:1px solid var(--line)}
  .rail .brand{display:flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:800; font-size:1.4rem; letter-spacing:-.03em; padding:4px 8px 14px}
  .rail .brand .ic{font-size:24px; color:var(--accent-text)}
  .rail .navbtn{display:flex; align-items:center; gap:13px; padding:11px 14px; border-radius:var(--r-sm); cursor:pointer;
    background:none; border:0; color:var(--ink-soft); font-family:var(--body); font-size:15px; font-weight:600; text-align:left; width:100%}
  .rail .navbtn .ic{font-size:20px; color:var(--muted)}
  .rail .navbtn[aria-current="page"]{background:var(--accent-soft); color:var(--accent-text)}
  .rail .navbtn[aria-current="page"] .ic{color:var(--accent-text)}
  .rail .navbtn:hover:not([aria-current="page"]){background:var(--surface-2)}
  .rail .rail-status{margin-top:auto; padding:14px; border-radius:var(--r); background:var(--surface-2); border:1px solid var(--line)}
  .rail .rail-status .rs-k{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
  .rail .rail-status .rs-v{font-family:var(--disp); font-weight:800; font-size:1.15rem; margin-top:3px; line-height:1.1}
  .rail .rail-status .rs-c{font-family:var(--mono); font-size:13px; color:var(--accent-text); margin-top:6px; display:flex; align-items:center; gap:7px}
  .hero{min-height:min(86dvh,720px)}
  .pad,.hero-inner,.ribbon,.ribbon-head{max-width:820px}
  .places{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .rail .navbtn .ic{transition:transform .2s}
  .rail .navbtn:active .ic{transform:scale(.9)}
  /* the fixed parallax layer must clear the rail; only meaningful while it is viewport-fixed */
  .hoy-bg{left:var(--rail)}
}