/* Map — ported from design-options/04-living-map.html ("Perú alive"). Keyframes are global, so they're prefixed map-. */
[data-tab="map"]{--tab-accent:#ffb547;--ocean:#041a1f;--ink:#e9f3ee;--muted:#8fb3ad;--line:rgba(143,179,173,.18);--neon:#ff6b4a;--amber:#ffb547;
  --panel:rgba(6,30,34,.94);--ease:cubic-bezier(.2,.8,.2,1);
  --serif:'Fraunces',Georgia,serif;--mono:'IBM Plex Mono',ui-monospace,monospace;--sans:'Instrument Sans',system-ui,sans-serif;
  position:relative;display:flex;flex-direction:column;height:calc(100dvh - var(--tabbar-h) - env(safe-area-inset-bottom));min-height:560px;overflow:clip;
  background:var(--ocean);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;
  button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;-webkit-tap-highlight-color:transparent}
  button:disabled,button[aria-disabled="true"]{opacity:.35;cursor:default}
  :focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:8px}
  [hidden]{display:none!important}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* drifting Pacific: two wave layers, transform-only */
  .waves{position:absolute;inset:0;overflow:hidden;pointer-events:none}
  .waves i{position:absolute;inset:-60px -240px;animation:map-drift 14s linear infinite;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='28'%3E%3Cpath d='M0 14q15-8 30 0t30 0 30 0 30 0' fill='none' stroke='%2363d6c4' stroke-opacity='.10' stroke-width='1.2'/%3E%3C/svg%3E")}
  .waves i+i{background-size:180px 42px;opacity:.6;animation-duration:22s;animation-direction:reverse;top:-46px}

  /* header */
  .head{position:relative;z-index:3;flex:none;padding:calc(env(safe-area-inset-top) + 14px) 16px 0;background:linear-gradient(var(--ocean) 80%,transparent)}
  .brand{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .brand h1{margin:0;font:700 34px/1 var(--serif);letter-spacing:-.02em}
  .brand h1 em{font-weight:400;color:var(--amber)}
  .brand small{font:11px var(--mono);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
  .lede{display:none}
  .chips{display:flex;gap:8px;overflow-x:auto;padding:10px 16px 6px;margin:0 -16px;scrollbar-width:none;scroll-snap-type:x proximity}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none;scroll-snap-align:start;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:rgba(8,38,42,.7);
    display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;transition:transform .2s}
  .chip b{width:9px;height:9px;border-radius:50%;background:var(--c,var(--ink));box-shadow:0 0 10px var(--c,var(--ink))}
  .chip span{font:11px var(--mono);color:var(--muted)}
  .chip[aria-pressed=true]{background:color-mix(in srgb,var(--c,#fff) 18%,transparent);border-color:var(--c,var(--ink))}
  .chip:active{transform:scale(.96)}

  /* map: sized to fit the stage (container units); zoom = wider map + native scrolling */
  .stage{position:relative;z-index:1;flex:1;min-height:0;margin-bottom:104px;display:flex;overflow:hidden;container-type:size}
  &.zoomed .stage{overflow:auto;overscroll-behavior:contain}
  .mapwrap{position:relative;flex:none;margin:auto;aspect-ratio:1000/1423;container-type:inline-size;
    width:calc(var(--z,1) * min(100cqw, 100cqh * 1000 / 1423));transition:translate .5s var(--ease)}
  svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible} /* neighbours bleed to the stage edges */
  .grat line{stroke:var(--line);stroke-width:1;stroke-dasharray:4 8}
  .gl{font:13px var(--mono);fill:#4f7d78}
  .neigh{fill:#0b262a;stroke:#174247;stroke-width:1.5}
  .bands{opacity:0;animation:map-fade 1.4s ease .6s forwards}
  .rivers path{fill:none;stroke:#3aa6b0;stroke-opacity:.55;stroke-width:2.1;stroke-linecap:round}
  .contours{opacity:.5}
  .peak{transform-box:fill-box;transform-origin:center;animation:map-breathe 9s ease-in-out infinite}
  .peak path{fill:none;stroke:#7fe0cf;stroke-width:1.2}
  .lake{fill:#0e4f5a;stroke:#7fe0cf;stroke-opacity:.6;stroke-width:1.3}
  .outline{fill:none;stroke:#7fe0cf;stroke-width:2.7;stroke-opacity:.85;filter:drop-shadow(0 0 4px rgba(127,224,207,.5));animation:map-fade 1.2s ease both}
  .lbl{font:italic 21px var(--serif);fill:var(--muted);letter-spacing:.3em;text-transform:uppercase}
  .lbl.big{font-size:30px;letter-spacing:.5em;fill:#3f7f78}
  .lbl.band{font:16px var(--mono);font-style:normal;letter-spacing:.35em;fill:#bfe6dc;opacity:.55}
  .glow{fill:none;stroke:var(--neon);stroke-width:13;stroke-opacity:.2;stroke-linecap:round;stroke-linejoin:round}
  .trail{fill:none;stroke:var(--amber);stroke-width:5;stroke-linecap:round;stroke-dasharray:.1 13;animation:map-march 1.1s linear infinite} /* marching ants */
  .trail.alt{stroke:#4fd6ff;stroke-width:2.5;stroke-linecap:butt;stroke-dasharray:14 9;animation:none} /* flights, boats, trains: not a road */
  .mask{fill:none;stroke:#fff;stroke-width:30;stroke-dasharray:1;stroke-dashoffset:0}

  /* pins: HTML buttons over the SVG => real focus + 44 px hit areas around a small glowing dot */
  .pins{position:absolute;inset:0}
  .pin{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;z-index:2;--c:#fff;
    opacity:0;transform:scale(.3);transition:opacity .35s,transform .35s}
  &.ready .pin{opacity:1;transform:none;transition-delay:var(--d)}
  &.ready .pin.off{opacity:.12;transform:scale(.5);pointer-events:none;transition-delay:0s}
  .pin .dot{width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2.5px rgba(4,26,31,.85),0 0 14px 2px var(--c);transition:transform .25s}
  .pin .ring{position:absolute;width:11px;height:11px;border-radius:50%;border:2px solid var(--c);opacity:0}
  .pin:is(.in,.near,.sel) .ring{animation:map-pulse 2.4s ease-out infinite;animation-delay:calc(var(--d) * 2)}
  .pin:hover .dot,.pin.sel .dot,.pin.near .dot{transform:scale(1.4)}
  .pin.sel{z-index:4}.pin.sel .ring{border-color:#fff}
  .pin.near .dot{box-shadow:0 0 0 2.5px #fff,0 0 18px 4px var(--c)}
  .pin .num{position:absolute;top:1px;right:-1px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--neon);color:#1a0b06;font:600 11px/18px var(--mono);text-align:center;display:none}
  .pin.in{z-index:3}.pin.in .num{display:block}
  .pin .tag{position:absolute;left:32px;white-space:nowrap;font:500 11px var(--mono);color:var(--ink);text-shadow:0 0 6px var(--ocean),0 0 3px var(--ocean),0 0 2px var(--ocean);
    pointer-events:none;opacity:0;transition:opacity .2s}
  .pin.left .tag{left:auto;right:32px}
  .pin:hover .tag,.pin.sel .tag,.pin:focus-visible .tag{opacity:1}
  .pin:focus-visible{outline-offset:-6px;border-radius:50%}
  .you{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#4fd6ff;border:3px solid #fff;box-shadow:0 0 0 6px #4fd6ff44,0 0 20px #4fd6ff;z-index:5;pointer-events:none}
  .hint{position:absolute;left:3%;bottom:8%;width:38%;margin:0;font:italic 13px/1.35 var(--serif);color:#bfe6dc;pointer-events:none;opacity:0;animation:map-fade 1s ease 1.6s forwards}
  .hint b{color:var(--amber);font-weight:600}
  &.routed .hint{display:none}
  .legend{position:absolute;left:3%;bottom:3.5%;max-width:94%;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font:10px var(--mono);color:#8fb3ad;
    padding:4px 9px;border-radius:8px;background:rgba(4,26,31,.82)} /* backdrop: readable over the Andes / Bolivia shading */
  .legend s,.legend u{text-decoration:none;color:var(--amber)}.legend u{color:#4fd6ff}
  .legend i{width:14.1cqw;height:2px;background:linear-gradient(90deg,#4f7d78 50%,transparent 50%) 0 0/20px 2px} /* 200 km ≈ 1.84° of longitude at 12°S */
  .zoom{position:absolute;z-index:3;right:10px;top:calc(env(safe-area-inset-top) + 128px);display:grid;gap:6px}
  &:has(.sheet.open) .zoom{visibility:hidden} /* under the sheet on the phone */
  .zoom button{width:44px;height:44px;border-radius:50%;background:var(--panel);border:1px solid var(--line);font:500 22px/1 var(--mono);color:var(--ink)}
  .zoom .mo{font-size:13px}
  :root[data-motion=paused] & :is(.waves i,.peak,.trail,.pin .ring){animation-play-state:paused} /* the shared motion toggle */

  /* route dock: a bar on the phone that opens upwards over the map */
  .btn{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-weight:600;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
    text-decoration:none;color:var(--ink);white-space:nowrap;transition:transform .15s}
  .btn:active{transform:scale(.96)}
  .btn.hot{background:var(--neon);color:#1a0b06;border-color:transparent;box-shadow:0 6px 24px -6px var(--neon)}
  .btn.ghost:hover{background:rgba(255,255,255,.05)}
  .dock{position:absolute;z-index:6;left:0;right:0;bottom:0;max-height:calc(100% - 120px);display:flex;flex-direction:column;
    background:var(--panel);backdrop-filter:blur(14px);border-top:1px solid var(--line);border-radius:20px 20px 0 0;padding:10px 16px 12px}
  .dockbar{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;flex:none}
  .dockbar .t{flex:1 0 100%;min-width:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px}
  .dockbar .t b{font:700 19px var(--serif)}
  .dockbar .sum{font:12px/1.4 var(--mono);color:var(--amber);overflow-wrap:anywhere} /* wraps: stops · km · days always readable */
  .dockbar .btn{padding:0 12px;flex:1 1 auto}
  .drawer{display:none;min-height:0;flex-direction:column}
  .dock.open .drawer{display:flex}
  .stops{list-style:none;padding:0;margin:10px 0 0;overflow:auto;min-height:0;max-height:38dvh}
  .stops li{position:relative;display:flex;align-items:center;gap:6px;padding:5px 0 5px 6px;border-top:1px dashed var(--line);animation:map-slide .4s ease}
  .stops .n{position:absolute;left:-6px;top:0;width:22px;height:22px;border-radius:50%;background:var(--neon);color:#1a0b06;font:600 11px/22px var(--mono);text-align:center;box-shadow:0 0 0 2px #061e22} /* on the thumbnail's corner */
  .stops .noimg .n{position:static;flex:none}
  .th{flex:none;width:44px;height:44px;border-radius:10px;object-fit:cover;background:#0b262a}
  .noimg :is(.th,.credit){display:none}
  .nmw{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
  /* compact rows: the name button's hit area stretches over the whole row; move buttons sit above it */
  .nm{padding:0;text-align:left;font-size:15px;line-height:1.2;overflow-wrap:anywhere}
  .nm::after{content:"";position:absolute;inset:0;border-radius:12px}
  .nmw small{font:11px/14px var(--mono);color:var(--muted)}
  .nmw .credit{max-width:100%;font:10.5px/13px var(--sans);color:var(--muted);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* plain text, one line */
  .stops .mv{position:relative;z-index:1;flex:none;width:44px;height:44px;border-radius:50%;color:var(--muted);font-size:18px}
  .stops .mv:not(:disabled):hover{background:rgba(255,255,255,.06);color:var(--ink)}
  .stops .empty{display:block;padding:12px 0;font:italic 15px/1.4 var(--serif);color:var(--muted);border:0}
  .link{min-height:44px;color:var(--amber)!important;text-decoration:underline;text-underline-offset:3px;font:inherit!important}
  .tools{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;padding-top:10px;border-top:1px dashed var(--line)}
  .saved{font:12px var(--mono);color:var(--muted)}
  .near{border-bottom:1px dashed var(--line);margin-bottom:8px;padding-bottom:6px;overflow:auto;min-height:0}
  .near-h{display:flex;justify-content:space-between;align-items:center}
  .near-h{margin:-8px -6px 0 0}
  .near-h b{font:italic 600 17px var(--serif);color:#4fd6ff}
  .near-msg{margin:0 0 6px;font:13px var(--mono);color:var(--muted)}
  /* one swipeable row on the phone, so the pins it names stay visible above it */
  .near-list{list-style:none;padding:0 16px 2px;margin:0 -16px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
  .near-list li{position:relative;flex:none;display:flex;align-items:center;gap:10px;padding:4px 14px 4px 4px;border-radius:14px;border:1px solid #4fd6ff44;background:#4fd6ff0d}
  .near-list li:hover{background:#4fd6ff22}
  .near-list .nm{font-weight:600;white-space:nowrap}
  .near-list small{color:#4fd6ff;white-space:nowrap}
  .near-list .credit{max-width:210px}
  /* chooser for pins too close to tell apart */
  .choose{position:absolute;z-index:9;width:min(280px,calc(100% - 16px));padding:8px;border-radius:16px;background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 18px 40px -12px #000;max-height:calc(100% - 16px);overflow:auto;overscroll-behavior:contain}
  .choose p{margin:2px 8px 6px;font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .choose ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
  .choose button{width:100%;min-height:44px;display:flex;align-items:center;gap:10px;padding:0 10px;border-radius:10px;text-align:left;font-size:15px}
  .choose button:hover{background:rgba(255,255,255,.06)}
  .choose b{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
  .choose small{margin-left:auto;font:11px var(--mono);color:var(--neon)}
  /* replace / add confirm (same pattern as the Trips tab) */
  .ask{width:min(400px,calc(100vw - 32px));padding:0;border:1px solid var(--line);border-radius:20px;background:#06262b;color:var(--ink);font-family:var(--sans)}
  .ask::backdrop{background:rgba(2,12,14,.7)}
  .ask form{position:relative;padding:22px 20px 20px}
  .ask h2{font:700 26px/1.1 var(--serif);margin:0 44px 10px 0;text-wrap:balance}
  .ask-p{margin:0 0 16px;color:#cfe5df;line-height:1.45}
  .ask-acts{display:flex;flex-direction:column;gap:10px}
  .ask .x{position:absolute;top:10px;right:10px}
  .x{flex:none;width:44px;height:44px;border-radius:50%;font-size:22px;color:var(--muted)}

  /* detail sheet: bottom sheet on the phone, side panel ≥ 1024 px */
  .sheet{position:absolute;z-index:8;left:0;right:0;bottom:0;max-height:66%;overflow:auto;overscroll-behavior:contain;background:var(--panel);backdrop-filter:blur(18px);
    border-top:1px solid var(--line);border-radius:24px 24px 0 0;padding:8px 20px 20px;transform:translateY(105%);visibility:hidden;
    transition:transform .45s var(--ease),visibility 0s .45s}
  .sheet.open{transform:none;visibility:visible;transition:transform .45s var(--ease)}
  .grab{width:44px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 4px}
  .sh-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
  .itag{flex:1;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c);display:flex;align-items:center;gap:8px}
  .itag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
  .ph{position:relative;margin:4px 0 0;border-radius:16px;overflow:hidden;aspect-ratio:2/1;max-height:22dvh;width:100%;background:#0b262a}
  .ph img{width:100%;height:100%;object-fit:cover;display:block}
  .ph figcaption{position:absolute;right:10px;bottom:0;color:#fff;text-shadow:0 1px 3px #000}
  .sheet h2{font:700 clamp(28px,8vw,40px)/1.02 var(--serif);letter-spacing:-.02em;margin:10px 0 4px}
  .sheet h2:focus{outline:none} /* programmatic focus target, not a control */
  .reg{margin:0;font:12px var(--mono);color:var(--muted)}
  .hook{font:italic 19px/1.35 var(--serif);margin:12px 0;color:#d8ece6}
  .facts{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:6px}
  .facts li{font:13px/1.45 var(--mono);padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
  .facts li::before{content:"→ ";color:var(--c)}
  /* actions stick to the bottom of the sheet: never scrolled away */
  .sh-act{position:sticky;bottom:-20px;display:flex;gap:8px;margin:0 -20px -20px;padding:12px 20px 20px;background:linear-gradient(#061e2200,#061e22 14px)}
  .sh-act .btn{min-height:52px;font-size:16px}
  .sh-act .btn.hot{flex:1}
  .btn.done{background:transparent;color:var(--neon);border-color:var(--neon);box-shadow:none}
  .dir{border-color:#4fd6ff66;color:#4fd6ff;background:var(--panel)}
  .from{font:12px var(--mono);color:var(--muted);margin:0;min-height:1em}
  /* full entry: the summary, every tip and the research sources, folded */
  .full{margin:12px 0 4px;border-top:1px dashed var(--line)}
  .full summary{padding:12px 0;font:600 14px/20px var(--sans);color:var(--amber);cursor:pointer} /* 44 px tall, native marker kept */
  .fe{font-size:14px;line-height:1.5;color:#d8ece6}
  .fe p{margin:0 0 10px}
  .fe h3{margin:12px 0 4px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .fe ul{margin:0;padding-left:1.1em;display:grid;gap:4px}
  .fe .src{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:0 14px}
  .fe .src a{color:#4fd6ff;display:inline-flex;align-items:center;min-height:44px;text-underline-offset:3px}

  @media (min-width:1024px){
    display:grid;grid-template-columns:440px 1fr;grid-template-rows:auto minmax(0,1fr);height:100dvh;
    .head{grid-column:1;padding:36px 0 0 44px;background:none}
    .brand h1{font-size:64px}
    .brand small{width:100%}
    .lede{display:block;font:20px/1.4 var(--serif);color:#cfe5df;margin:14px 0 4px;max-width:380px}
    .chips{flex-wrap:wrap;overflow:visible;margin:0;padding:12px 0;gap:6px}
    .chip{padding:0 12px}
    .near-list{flex-wrap:wrap;margin:0;padding:0}
    .stage{grid-column:2;grid-row:1/3;margin:0;padding:20px}
    .dockbar .btn{flex:0 1 auto}
    .zoom{top:24px;right:auto;left:460px}
    &:has(.sheet.open) .zoom{visibility:visible}
    .dock{position:relative;grid-column:1;grid-row:2;align-self:end;margin:12px 0 28px 44px;border:1px solid var(--line);border-radius:20px;padding:16px;max-height:calc(100% - 40px)}
    .drawer{display:flex}
    .toggle{display:none}
    .stops{max-height:none}
    .hint{font-size:17px}
    .sheet{left:auto;top:20px;bottom:20px;right:20px;width:400px;max-height:none;border:1px solid var(--line);border-radius:24px;padding:20px 26px;transform:translateX(calc(100% + 40px))}
    .sh-act{margin:0 -26px -20px;padding:12px 26px 20px}
    .grab{display:none}
    &:has(.sheet.open) .hint{opacity:0!important}
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important}
    .bands,.hint{opacity:1}
    .pin .ring{display:none}
  }
}
@keyframes map-drift{to{transform:translateX(120px)}}
@keyframes map-fade{from{opacity:0}to{opacity:1}}
@keyframes map-breathe{50%{transform:scale(1.06) rotate(2deg)}}
@keyframes map-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.4);opacity:0}}
@keyframes map-march{to{stroke-dashoffset:-13.1}}
@keyframes map-slide{from{opacity:0;transform:translateY(8px)}}