/* Fraunces, self-hosted (SIL OFL) — was Google Fonts, an EU GDPR liability (LG München) */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/fraunces-roman-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fonts/fraunces-roman-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


  /* ══════════════════════════════════════════════════════════════════════
     THE BALEARIC BAY — DESIGN TOKENS
     One place to tune the whole look. Palette is "Ceramica" — Positano /
     Amalfi majolica: whitewashed lime white, cobalt-glaze & deep Tyrrhenian
     blue, one hot stroke of sun-faded ceramic tomato, a Sfusato lemon.
     Red / blue / white. Edit a raw palette value once and it propagates
     through the UI *and* the SVG chart (JS reads the --map-* vars).
     ══════════════════════════════════════════════════════════════════════ */
  :root{
    /* ── Raw palette ─────────────────────────────────────────────────── */
    --c-ivory:#eef1ec;      /* whitewashed lime — the page */
    --c-shell:#fdfdfb;      /* fresh lime plaster — panels, chart land */
    --c-mist:#cfdfea;       /* Tyrrhenian haze — the sea canvas */
    --c-navy:#14324f;       /* deep Tyrrhenian navy — primary ink */
    --c-taupe:#4c5a68;      /* ceramic slate blue-grey — secondary text */
    --c-sand:#d0d9e0;       /* pale ceramic blue-grey — hairlines */
    --c-umber:#3b5468;      /* wet slate — chart coast stroke */
    --c-terra:#d23b30;      /* Amalfi ceramic tomato — primary accent */
    --c-terra-deep:#a82a20; /* kiln-fired red */
    --c-pool:#2b6ca6;       /* cobalt majolica — the sea blue */
    --c-brass:#d29b1f;      /* Sfusato lemon gold — warm secondary */
    --c-palm:#2f8f6a;       /* glazed sea-green — glassy */
    --c-gold:#d5a52c;       /* lemon glaze — fair */
    --c-amber:#df8130;      /* apricot ochre — choppy */
    --c-brick:#cb3f34;      /* ceramic red — exposed */
    --c-slate:#3f6690;      /* cobalt — chart values */
    --c-plum:#9c3a72;       /* bougainvillea — jellyfish */
    --c-teal:#0fb4ab;       /* turquoise glaze — today's exceptional beaches */

    /* ── Semantic surfaces & text ───────────────────────────────────── */
    --bg:var(--c-ivory);
    --panel:var(--c-shell);
    --sea:var(--c-mist);
    --ink:var(--c-navy);
    --soft:var(--c-taupe);
    --hair:var(--c-sand);
    --btn-line:var(--c-umber);   /* button/control outlines — darker blue for contrast on the map */
    --coast:var(--c-umber);
    --faint:color-mix(in srgb, var(--soft) 55%, var(--panel));  /* footnotes, credits */
    --sep:color-mix(in srgb, var(--coast) 32%, var(--panel));   /* rule / divider dots */

    /* ── Accents ────────────────────────────────────────────────────── */
    --clay:var(--c-terra);
    --clay-deep:var(--c-terra-deep);
    --turq:var(--c-pool);
    --brass:var(--c-brass);
    --dir-bg:color-mix(in srgb, var(--turq) 78%, var(--ink));   /* directions button */
    --dir-bg-hover:color-mix(in srgb, var(--turq) 55%, var(--ink));

    /* ── Calm-score bands ───────────────────────────────────────────── */
    --glassy:var(--c-palm);
    --fair:var(--c-gold);
    --choppy:var(--c-amber);
    --exposed:var(--c-brick);
    --exceptional:var(--c-teal); /* top-quality beach that is also calm right now — the turquoise map dot */
    --closed:#a6b0b6;       /* temporarily-closed grey */
    --loading:#ccd6db;      /* pre-data placeholder grey (cool) */

    /* ── Washes (translucent accent fills; derive from the accents) ─── */
    --wash-neutral:color-mix(in srgb, var(--coast) 11%, var(--panel));
    --wash-clay:color-mix(in srgb, var(--clay) 15%, var(--panel));
    --wash-live:color-mix(in srgb, var(--glassy) 16%, var(--panel));
    --live-ink:color-mix(in srgb, var(--glassy) 42%, var(--ink));
    --anchor-ok-bg:color-mix(in srgb, var(--glassy) 14%, var(--panel));
    --anchor-ok-ink:color-mix(in srgb, var(--glassy) 52%, var(--ink));
    --anchor-ok-line:color-mix(in srgb, var(--glassy) 30%, var(--panel));
    --anchor-warn-bg:color-mix(in srgb, var(--clay) 15%, var(--panel));
    --anchor-warn-ink:var(--clay-deep);
    --anchor-warn-line:color-mix(in srgb, var(--clay) 32%, var(--panel));
    --cred-bg:color-mix(in srgb, var(--ink) 55%, transparent);

    /* ── Chart / SVG (read into JS `MAP` at boot) ───────────────────── */
    --map-land:var(--panel);
    --map-coast:var(--coast);
    --map-ink:var(--ink);
    --map-halo:var(--bg);
    --map-depth:#9fb2c0;
    --map-wave:#3f6f9c;
    /* wind-particle strength ramp: light air → cobalt breeze → deep-navy gale */
    --map-wind-lo:#8fbad9;
    --map-wind-mid:#2f77b0;
    --map-wind-hi:#12314e;
    --map-temp:var(--c-slate);
    --map-town-stroke:#2c3e4d;
    /* NB: these three are read into JS and injected as SVG paint attributes,
       so they must be concrete colours (SVG attrs don't evaluate color-mix). */
    --map-club-stroke:#b7c4cd;
    --map-posidonia-1:rgba(40,120,140,.09);
    --map-posidonia-2:rgba(40,120,140,.16);
    --map-meadow:rgba(38,124,138,.22);      /* real posidonia meadow fill (boat mode) */
    --map-meadow-edge:rgba(28,92,106,.5);   /* meadow outline */
    --map-noanchor:#c05a34;                 /* no-anchor high-value zone (Decreto 25/2018) */
    --map-jelly:var(--c-plum);
    --map-shallow:rgba(72,168,188,.24);   /* legend "turquoise water" swatch (CSS context, var ok) */
    --sst-cool:#79b4d2;     /* sea-temp heat scale: cool → warm */
    --sst-mid:#e3c47c;
    --sst-warm:#e0996b;

    /* ── Typography ─────────────────────────────────────────────────── */
    --font-serif:"Fraunces",Georgia,serif;
    --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --track-mast:.28em;     /* masthead letter-spacing */
    --track-label:.16em;    /* small-caps section labels */
    --fs-h1:34px;
    --fs-sub:17.5px;

    /* ── Radius · shadow ────────────────────────────────────────────── */
    --r-sm:7px; --r-md:10px; --r-lg:14px; --r-xl:16px; --r-pill:999px;
    --sh-float:0 2px 14px color-mix(in srgb, var(--ink) 14%, transparent);
    --sh-pop:0 10px 34px color-mix(in srgb, var(--ink) 16%, transparent);
    --sh-btn:0 1px 5px color-mix(in srgb, var(--ink) 18%, transparent);
  }
  *{box-sizing:border-box; margin:0}
  html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
  html,body{height:100%; height:100dvh; width:100%; overflow:hidden}
  body{background:var(--bg); color:var(--ink); font:14px/1.45 var(--font-sans);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    display:grid; grid-template-columns:380px 1fr; position:fixed; inset:0;
    overscroll-behavior:none; touch-action:manipulation}
  .serif{font-family:var(--font-serif)}
  [class*="serif"],h1,.mast,.sub,.windline,.top5 .num,.top5 .nm,.card h3,.card .why,.pop h3{font-optical-sizing:auto}
  svg text{user-select:none}
  /* sea-temp heat halos — stop-colour set here (CSS) so tokens resolve */
  #tg0 stop{stop-color:var(--sst-cool)} #tg1 stop{stop-color:var(--sst-mid)} #tg2 stop{stop-color:var(--sst-warm)}
  #hatchNo rect{fill:var(--map-noanchor)} #hatchNo line{stroke:var(--map-noanchor)}
  .leg-boat{display:none}

  aside{padding:30px 32px 22px; display:flex; flex-direction:column; gap:17px; overflow-y:auto; border-right:1px solid var(--hair)}
  aside>div:first-child{padding-bottom:6px}
  .mast{font-family:var(--font-serif); font-size:21px; font-weight:600; letter-spacing:var(--track-mast); white-space:nowrap; color:var(--ink)}
  .intro{margin-top:9px; font-size:12.5px; line-height:1.5; color:var(--soft); max-width:34ch}
  .intro b{color:var(--ink); font-weight:600}
  .est{display:none}
  .mastrow{display:flex; align-items:center; justify-content:space-between; gap:10px}
  .mastrow>.seg{flex:none}
  /* interactive headline — the time word and island name are underlined dropdowns */
  h1 .hpick{cursor:pointer; color:inherit; white-space:nowrap; position:relative;
    border-bottom:2px solid var(--clay); padding-bottom:.02em;
    transition:border-color .15s, color .15s}
  h1 .hpick:hover,h1 .hpick.open{color:var(--clay-deep); border-color:var(--clay-deep)}
  h1 .hpick::after{content:"\25BE"; font-family:var(--font-sans); font-size:.42em; font-weight:700;
    vertical-align:.18em; margin-left:.22em; color:var(--clay); opacity:.72}
  h1 .hpick:hover::after,h1 .hpick.open::after{color:var(--clay-deep); opacity:1}
  /* dropdown menu shared by both pickers */
  .hmenu{position:fixed; z-index:60; background:var(--panel); border:1px solid var(--hair);
    border-radius:var(--r-md); box-shadow:var(--sh-pop); padding:5px; min-width:150px;
    max-height:62vh; overflow:auto; font-family:var(--font-sans)}
  .hmenu[hidden]{display:none}
  .hmenu button{display:block; width:100%; text-align:left; border:0; background:transparent;
    padding:8px 13px; border-radius:var(--r-sm); font-size:13.5px; color:var(--ink); cursor:pointer;
    white-space:nowrap; line-height:1.2}
  .hmenu button:hover{background:var(--wash-neutral)}
  .hmenu button.on{color:var(--clay); font-weight:600}
  .hmenu .hsep{height:1px; background:var(--hair); margin:5px 8px}
  h1{font-family:var(--font-serif); font-weight:430; font-size:var(--fs-h1); line-height:1.08; letter-spacing:-.012em; color:var(--ink)}
  .sub{font-family:var(--font-serif); font-style:italic; font-size:var(--fs-sub); color:var(--soft); line-height:1.42; margin-top:9px}
  .date{font-size:11px; letter-spacing:var(--track-label); color:var(--soft); text-transform:uppercase}

  /* header controls row — action buttons (time & island now live in the headline).
     Hidden for now — restore display:flex to bring back filters / feedback / best-beaches. */
  .controls{display:none; align-items:center; justify-content:flex-end; gap:8px 14px; margin-top:11px; flex-wrap:wrap}
  .actions{display:flex; align-items:center; gap:6px; margin-left:auto}
  .seg{display:inline-flex; align-items:center; gap:3px; background:transparent; border:0; padding:0}
  .seg button,.tbtn{border:0; background:transparent; padding:7px 14px; border-radius:7px; font-size:13px; font-weight:600;
    color:var(--soft); cursor:pointer}
  /* lightweight Beach/Boat toggle — plain labels, active one inked with a clay underline (no box or fill) */
  .seg button{padding:2px 6px; font-size:12.5px; color:var(--faint); position:relative; transition:color .15s}
  .seg button:hover{color:var(--soft)}
  .seg button.on{background:transparent; color:var(--ink)}
  .seg button.on::after{content:""; position:absolute; left:6px; right:6px; bottom:1px; height:2px; background:var(--clay); border-radius:2px}
  .tbtn{background:var(--panel); border:1px solid var(--btn-line); border-radius:10px}
  .tbtn.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
  .tbtn.ico{padding:6px 9px; display:inline-flex; align-items:center; justify-content:center}
  .tbtn.ico svg{display:block}
  /* floating filter control — sits on the map's top-right corner */
  .mapfilter{position:absolute; top:12px; right:12px; z-index:27; box-shadow:var(--sh-float)}
  .mapbest{position:absolute; top:48px; right:12px; z-index:27; box-shadow:var(--sh-float)}
  /* best-beaches list rendered inside the popover */
  .pop .bestrow{display:flex; align-items:center; gap:10px; padding:7px 0; cursor:pointer; border-top:1px solid var(--hair)}
  .pop .bestrow:first-of-type{border-top:0}
  .pop .bestrow:hover .bname{color:var(--clay)}
  .pop .brank{font-family:var(--font-serif); font-style:italic; font-size:13px; color:var(--clay); width:14px; text-align:center; flex:none}
  .pop .bname{font-family:var(--font-serif); font-size:15px; flex:1; min-width:0; line-height:1.15}
  .pop .bname small{display:block; font-family:var(--font-sans); font-size:10.5px; color:var(--soft); letter-spacing:.02em}
  .pop .bdot{width:10px; height:10px; border-radius:50%; flex:none}
  .pop .bnone{font-size:13px; color:var(--soft); padding:4px 0}

  .windline{font-family:var(--font-serif); font-size:19px; line-height:1.35}
  .windline b{font-weight:600}
  .windline .arrow{display:inline-block; transition:transform .5s; color:var(--clay); font-family:sans-serif; font-size:15px}
  .windline .wx{font-size:.8em; color:var(--soft)}
  .windline .wx b{color:var(--ink)}
  .brief{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--soft)}
  .brief b{color:var(--ink)}
  .tag{background:var(--wash-neutral); color:var(--soft); border-radius:var(--r-pill); padding:2px 9px; font-size:10px; letter-spacing:.06em}
  .tag.live{background:var(--wash-live); color:var(--live-ink)}

  .top5 h2{font-size:11px; letter-spacing:var(--track-label); color:var(--ink); text-transform:uppercase; margin-bottom:2px;
    border-top:3px double var(--ink); padding-top:9px}
  .top5 .row{display:flex; align-items:baseline; gap:11px; padding:9px 0; cursor:pointer; border-bottom:1px solid var(--hair)}
  .top5 .row:hover .nm{color:var(--clay)}
  .top5 .num{font-family:var(--font-serif); font-style:italic; font-size:14px; color:var(--clay); width:15px}
  .top5 .nm{font-family:var(--font-serif); font-size:17px; flex:1; line-height:1.2; transition:color .15s}
  .top5 .nm small{display:block; font-family:var(--font-sans); font-size:11px; color:var(--soft); letter-spacing:.02em}
  .top5 .t5x{display:none; position:absolute; top:6px; right:9px; z-index:1; border:0; background:var(--panel); font-size:21px; line-height:1; color:var(--faint); cursor:pointer; padding:4px 8px}
  .dot{width:11px; height:11px; border-radius:50%; align-self:center}
  .badge{min-width:30px; height:30px; border-radius:50%; color:#fff; font-weight:700; font-size:12px;
    display:flex; align-items:center; justify-content:center; align-self:center}

  .legend{font-size:11.5px; color:var(--soft); border-top:3px double var(--ink); padding-top:12px; margin-top:auto}
  .legend .li{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:4px}
  .legend .sw{width:10px; height:10px; border-radius:50%}
  .legend .sq{width:10px; height:10px; border-radius:2px}
  .foot{font-size:10px; color:var(--faint); line-height:1.5; margin-top:10px}

  main{position:relative; overflow:hidden; isolation:isolate;   /* isolate so the wind canvas (z-index:-1) sits above the sea gradient, below the SVG */
    background:radial-gradient(125% 95% at 50% -8%, color-mix(in srgb, var(--turq) 17%, var(--sea)), var(--sea) 72%)}
  /* wind-particle canvas — sits above the sea gradient, below the SVG land & markers */
  #windfx{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1}
  #windfx[hidden]{display:none}
  svg#chart{width:100%; height:100%; display:block; cursor:grab; touch-action:none}
  svg#chart.drag{cursor:grabbing}
  #gDots circle{transition:stroke .12s}
  #gDots circle:hover{stroke:var(--ink)}
  #gHalo,#gShoal,#gTemp,#gCont,#gPosi,#gPosiZone,#gLbl,#gWave,#gArrows,#gChips,#gJelly,#gTowns,#gRose,#gScale{pointer-events:none}
  .zoomui{position:absolute; right:16px; bottom:16px; display:flex; flex-direction:column; gap:6px}
  .zoomui button{width:34px; height:34px; border-radius:10px; border:1px solid var(--btn-line); background:var(--panel);
    font-size:16px; color:var(--ink); cursor:pointer}

  /* windy-style forecast time slider — bottom-centre of the map */
  #tbar{position:absolute; left:16px; right:64px; bottom:16px; z-index:24; max-width:560px; margin:0 auto;
    background:color-mix(in srgb, var(--panel) 90%, transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    border:1px solid var(--btn-line); border-radius:var(--r-lg); box-shadow:var(--sh-pop); padding:8px 16px 6px}
  .tbar-read{font-family:var(--font-serif); font-size:13px; color:var(--soft); text-align:center;
    margin-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .tbar-read b{color:var(--clay); font-weight:600}
  #tslide{display:block; width:100%; height:16px; margin:0; background:transparent; cursor:pointer;
    -webkit-appearance:none; appearance:none}
  #tslide::-webkit-slider-runnable-track{height:4px; border-radius:3px;
    background:linear-gradient(90deg, var(--clay), color-mix(in srgb, var(--turq) 55%, var(--hair)))}
  #tslide::-moz-range-track{height:4px; border-radius:3px;
    background:linear-gradient(90deg, var(--clay), color-mix(in srgb, var(--turq) 55%, var(--hair)))}
  #tslide::-webkit-slider-thumb{-webkit-appearance:none; margin-top:-6px; width:16px; height:16px; border-radius:50%;
    background:var(--clay); border:2px solid var(--panel); box-shadow:var(--sh-btn)}
  #tslide::-moz-range-thumb{width:16px; height:16px; border-radius:50%; background:var(--clay);
    border:2px solid var(--panel); box-shadow:var(--sh-btn)}
  .tbar-ticks{position:relative; height:11px; margin-top:2px; font-size:9px; letter-spacing:.05em;
    color:var(--faint); text-transform:uppercase}
  .tbar-ticks span{position:absolute; top:0; transform:translateX(-50%); white-space:nowrap}
  .tbar-ticks span.e0{transform:translateX(0)} .tbar-ticks span.e1{transform:translateX(-100%)}

  .pop{position:absolute; right:16px; top:16px; z-index:34; width:270px; padding:16px 18px; display:none;
    background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--sh-pop)}
  .pop.show{display:block}
  .pop h3{font-family:var(--font-serif); font-size:15px; margin-bottom:10px; padding-right:22px}
  .popx{position:absolute; top:9px; right:10px; z-index:4; border:0; background:var(--wash-neutral); font-size:19px; line-height:1;
    color:var(--soft); cursor:pointer; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:var(--r-pill)}
  .popx:hover{color:var(--ink)}
  .pop .grp{margin-bottom:11px}
  .pop .grp .k{font-size:11px; color:var(--soft); margin-bottom:5px; letter-spacing:.05em; text-transform:uppercase}
  .pop textarea{width:100%; min-height:110px; border:1px solid var(--hair); border-radius:var(--r-md); background:var(--panel);
    padding:10px; font:13px/1.45 var(--font-sans); color:var(--ink); resize:vertical}
  .pop .send{margin-top:9px; width:100%; border:0; border-radius:var(--r-pill); background:var(--ink); color:var(--bg);
    padding:9px; font-size:13px; font-weight:600; cursor:pointer}
  .pop .send:disabled{opacity:.5}
  .pop .note{font-size:10.5px; color:var(--faint); margin-top:7px; line-height:1.4}
  .chips{display:flex; flex-wrap:wrap; gap:5px}
  .chips button{border:1px solid var(--btn-line); background:var(--panel); border-radius:var(--r-pill); padding:5px 11px; font-size:11.5px;
    color:var(--soft); cursor:pointer}
  .chips button.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
  .lay{display:flex; align-items:center; gap:9px; padding:7px 0; font-size:13px; cursor:pointer}
  .lay input{accent-color:var(--clay)}
  .lay .sw{width:11px; height:11px; border-radius:3px}

  .card{position:absolute; left:16px; bottom:16px; z-index:32; width:334px; border-radius:var(--r-xl);
    display:none; background:var(--panel); border:1px solid var(--hair); overflow:hidden; max-height:calc(100vh - 32px);
    box-shadow:var(--sh-pop)}
  .card.show{display:flex; flex-direction:column; animation:pop .18s ease-out}
  .cardbody{overflow-y:auto; -webkit-overflow-scrolling:touch; padding:20px 22px; min-height:0}
  @keyframes pop{from{transform:translateY(8px); opacity:0}}
  .card .hd{display:flex; align-items:center; gap:13px; padding-right:52px}   /* clear of the corner buttons for long names */
  .card h3{font-family:var(--font-serif); font-weight:500; font-size:24px; line-height:1.08}
  .card .lab{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; margin-top:3px}
  .card .why{margin:11px 0 12px; font-family:var(--font-serif); font-style:italic; font-size:15.5px; color:var(--soft); line-height:1.45}
  .grid{display:grid; grid-template-columns:1fr 1fr; gap:9px 14px; font-size:13px}
  .grid .k{color:var(--soft); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase}
  .grid .v{font-weight:600; margin-top:1px}
  .attrs{display:flex; flex-wrap:wrap; gap:5px; margin-top:12px}
  .attrs span,.attrs a{background:var(--wash-neutral); color:var(--soft); border-radius:var(--r-pill); padding:3px 10px; font-size:11px}
  .attrs span[data-goto],.attrs a{cursor:pointer; color:var(--clay); text-decoration:none; background:var(--wash-clay)}
  .cnotes{display:flex; flex-direction:column; gap:6px; margin-top:11px}
  .cnotes:empty{display:none}
  .cnote{font-size:12px; line-height:1.42; color:var(--soft); background:var(--wash-neutral);
    border-radius:var(--r-md); padding:8px 11px}
  .cnote b{color:var(--ink); font-weight:600}
  .photo{position:relative; margin:12px 0 0; height:150px; border-radius:var(--r-lg); overflow:hidden; background:var(--wash-neutral)}
  .photo img{width:100%; height:100%; object-fit:cover; display:block; transition:opacity .35s ease}
  .photo .cred{position:absolute; right:6px; bottom:5px; font-size:9px; color:#fff; background:var(--cred-bg);
    padding:1px 7px; border-radius:var(--r-pill); letter-spacing:.03em; max-width:85%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .anchor-note{margin-top:12px; padding:10px 12px; border-radius:var(--r-md); font-size:12.5px; line-height:1.4;
    background:var(--anchor-ok-bg); color:var(--anchor-ok-ink); border:1px solid var(--anchor-ok-line)}
  .anchor-note.warn{background:var(--anchor-warn-bg); color:var(--anchor-warn-ink); border-color:var(--anchor-warn-line)}
  .card .x,.card .cfb{position:absolute; top:9px; z-index:2; width:30px; height:30px; border-radius:var(--r-pill); border:0;
    background:var(--panel); box-shadow:var(--sh-btn); font-size:17px; color:var(--soft); cursor:pointer;
    display:flex; align-items:center; justify-content:center; line-height:1}
  .card .x{right:9px}
  .card .cfb{right:45px; color:var(--faint)}
  .card .cfb:hover{color:var(--clay)}
  .attrs a.dirbtn{background:var(--dir-bg); color:#fff}
  .attrs a.dirbtn:hover{background:var(--dir-bg-hover)}
  .t5btn{display:none}

  /* floating "About" entry — mirrors the Beach/Boat control on the opposite corner */
  .infobtn{position:absolute; top:16px; left:16px; z-index:26; border:1px solid var(--btn-line);
    background:var(--panel); color:var(--soft); border-radius:10px; padding:7px 12px; font-size:12.5px;
    font-weight:600; cursor:pointer; box-shadow:var(--sh-float); display:inline-flex; align-items:center; gap:6px}
  .infobtn:hover{color:var(--ink)}
  .infobtn .ico-i{display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px;
    border:1.5px solid currentColor; border-radius:50%; font-style:italic; font-family:var(--font-serif);
    font-size:11px; font-weight:700; line-height:1}
  /* small "about / legal" text links (sidebar intro + footer credits) */
  a.about-link{color:var(--clay); text-decoration:none; font-weight:600; white-space:nowrap}
  a.about-link:hover{color:var(--clay-deep); text-decoration:underline}
  .foot a{color:var(--soft); text-decoration:none} .foot a:hover{color:var(--ink); text-decoration:underline}

  /* full-page overlay for About / Privacy / Terms */
  .scrim{position:fixed; inset:0; height:100vh; height:100dvh; z-index:50; display:none; padding:16px;
    background:color-mix(in srgb, var(--ink) 42%, transparent);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
  .scrim.show{display:flex}
  /* max-height:100% is of the dvh-sized scrim (minus its padding) so the sheet always fits the
     visible viewport — on mobile a vh-based height hid the bottom behind the browser toolbar */
  .sheet{margin:auto; width:min(680px,100%); max-height:min(100%,940px); display:flex; flex-direction:column;
    background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-xl); box-shadow:var(--sh-pop);
    overflow:hidden; animation:pop .18s ease-out}
  .sheet-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex:none;
    padding:14px 20px; border-bottom:1px solid var(--hair)}
  .sheet-head .brand{font-family:var(--font-serif); font-size:12px; letter-spacing:var(--track-label);
    text-transform:uppercase; color:var(--soft)}
  .sheet .x{border:0; background:var(--wash-neutral); width:30px; height:30px; border-radius:var(--r-pill);
    font-size:18px; line-height:1; color:var(--soft); cursor:pointer; display:flex; align-items:center; justify-content:center}
  .sheet .x:hover{color:var(--ink)}
  .sheet-body{overflow-y:auto; -webkit-overflow-scrolling:touch; padding:22px 26px 28px}
  .sheet-body h2{font-family:var(--font-serif); font-weight:500; font-size:27px; line-height:1.1; margin-bottom:4px}
  .sheet-body h3{font-family:var(--font-serif); font-weight:600; font-size:16px; margin:20px 0 4px}
  .sheet-body p{font-size:14px; line-height:1.62; color:var(--soft); margin-top:8px}
  .sheet-body p.lead{font-family:var(--font-serif); font-style:italic; font-size:17px; color:var(--ink); line-height:1.5; margin-top:6px}
  .sheet-body p.muted{font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); margin-top:2px}
  .sheet-body ul{margin:8px 0 0; padding:0; list-style:none}
  .sheet-body li{position:relative; font-size:14px; line-height:1.55; color:var(--soft); padding:3px 0 3px 16px}
  .sheet-body li::before{content:"·"; position:absolute; left:3px; color:var(--clay); font-weight:700}
  .sheet-body a{color:var(--clay); text-decoration:none; font-weight:600}
  .sheet-body a:hover{color:var(--clay-deep); text-decoration:underline}
  .sheet-body strong{color:var(--ink); font-weight:600}
  .sheet-body code{font-family:ui-monospace,Menlo,monospace; font-size:12.5px; background:var(--wash-neutral); padding:1px 5px; border-radius:5px}
  .sheet-body .warn{background:var(--anchor-warn-bg); color:var(--anchor-warn-ink); border:1px solid var(--anchor-warn-line);
    border-radius:var(--r-md); padding:11px 13px; font-size:13px; line-height:1.5; margin-top:16px}
  .sheet-body .warn strong{color:var(--anchor-warn-ink)}
  .sheet-body .legal-links{margin-top:22px; padding-top:14px; border-top:1px solid var(--hair); font-size:13.5px; color:var(--soft)}
  .swatch-inline{display:inline-block; width:10px; height:10px; border-radius:50%; vertical-align:baseline; margin:0 1px}

  @media (max-width:880px){
    body{grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr)}
    /* header collapses to a compact top bar; respect the notch & rounded corners */
    aside{flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px 10px; background:var(--panel);
      padding:max(10px,env(safe-area-inset-top)) max(13px,env(safe-area-inset-right)) 10px max(13px,env(safe-area-inset-left));
      border-right:0; border-bottom:1px solid var(--hair); overflow:hidden; max-width:100vw}
    aside>div:first-child{width:100%}
    .mastrow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center}
    .mast{font-size:13px; letter-spacing:.2em; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
    .mastrow{width:100%}
    .controls{width:100%; margin-top:7px; gap:8px 10px; flex-wrap:nowrap}
    .actions{gap:6px}
    .actions .tbtn{padding:8px 10px; font-size:12px; min-height:36px}
    .actions .tbtn.ico{padding:8px 10px}
    .t5btn{font-size:12px}
    #modeSeg{flex:none}
    #modeSeg button{padding:5px 8px; font-size:13px}
    h1{font-size:20px; width:100%; margin-top:3px; margin-bottom:9px}
    .sub{font-size:12.5px; margin-top:2px; width:100%}
    .legend,.foot,.top5,.date{display:none}
    /* keep the "what is this app" description visible on mobile, just compact */
    .intro{width:100%; max-width:none; margin-top:4px; font-size:11.5px; line-height:1.4}
    body.rv .intro{display:none}   /* returning visitors know the pitch — give the map the space */
    .seg button{padding:8px 10px}  /* comfortable thumb targets for Beach/Boat */
    .windline{font-size:14.5px; width:100%; margin-top:1px}
    .windline .arrow{font-size:13px}
    .brief{width:100%; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; font-size:11.5px; gap:4px 12px}
    .brief span{white-space:nowrap}
    main{min-height:0}
    .t5btn{display:inline-flex; align-items:center; justify-content:center; gap:3px}
    /* bottom sheets — lift clear of the home indicator, add a grab handle */
    .top5.open{display:block; position:absolute; left:10px; right:10px; z-index:28; background:var(--panel);
      bottom:max(10px,env(safe-area-inset-bottom)); border:1px solid var(--hair); border-radius:var(--r-xl);
      padding:18px 16px 14px; max-height:46vh; overflow:auto; box-shadow:var(--sh-pop)}
    .top5.open .t5x{display:block}
    .pop{left:0; right:0; top:auto; bottom:0; width:auto; border-radius:var(--r-xl) var(--r-xl) 0 0;
      max-height:64vh; overflow:auto; z-index:34; padding-top:22px;
      padding-bottom:max(16px,env(safe-area-inset-bottom))}
    .card{left:10px; right:10px; width:auto; bottom:max(10px,env(safe-area-inset-bottom));
      max-height:calc(100% - 20px)}   /* bound to the map area so the close button stays on-screen */
    .card .cardbody{padding-bottom:max(20px,env(safe-area-inset-bottom))}
    .infobtn{padding:6px 10px; font-size:12px}
    .scrim{padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom))}
    .sheet-body{padding:20px 18px 24px}
    .sheet-body h2{font-size:23px}
    .sheet-body p.lead{font-size:15.5px}
    .card::before,.top5.open::before,.pop::before{content:""; position:absolute; top:7px; left:50%;
      transform:translateX(-50%); width:36px; height:4px; border-radius:var(--r-pill); background:var(--hair); z-index:3}
    .zoomui{display:none}   /* pinch-zoom covers this on touch; buttons only on desktop */
    /* slider sits at the safe-area baseline and spans the full width (no zoom column to clear) */
    #tbar{bottom:max(12px,env(safe-area-inset-bottom)); right:max(16px,env(safe-area-inset-right))}
  }
  @media (min-width:881px){
    /* desktop: float the Beach/Boat toggle onto the map's top-right corner, freeing the header */
    #modeSeg{position:fixed; top:18px; right:20px; z-index:26; background:transparent; box-shadow:none}
    #modeSeg button{font-size:13px; text-shadow:0 0 5px var(--panel),0 0 5px var(--panel)}   /* halo keeps it legible over the map */
    /* stack the filter button directly beneath the Beach/Boat toggle, panel drops below both */
    .mapfilter{top:60px; right:18px}
    .mapbest{top:100px; right:18px}
    .pop{top:140px; right:18px; max-height:calc(100vh - 160px); overflow:auto}
    h1{margin-bottom:22px}   /* extra breathing room beneath the headline */
  }
  @media (max-width:420px){
    .mast{font-size:12px; letter-spacing:.16em}
    h1{font-size:18px}
    .sub{font-size:12px}
    .actions .tbtn{padding:7px 8px; font-size:11.5px}
    .t5btn{font-size:11.5px}
    #modeSeg button{padding:5px 7px; font-size:12px}
  }