/* Learning page: interactive ʻiwa map (port of the island-scroll demo, variant B). Everything is scoped under #view-map.
   The stage is a sticky full-viewport panel under the site header; page scroll = camera zoom (see scripts/learning-map.js).
   Controls are absolutely positioned inside the stage (never fixed) so they cannot collide with the site's theme toggle / pause pill. */

/* the map owns the scroll: no smooth scrolling or header-sized scroll padding while it is the active view, and the header must not
   shrink on scroll (it would change the stage height mid-zoom) */
html.lv-map { scroll-behavior: auto; scroll-padding-top: 0; }
html.lv-map.scrolled .site-header .wrap { min-height: var(--header-h); }

#view-map { --hud-h: 64px; position: relative; }
/* wavy top edge: the map's colour rises into the hero's waves (same colour as the stage's top row, so there is no seam) */
#view-map::before { content: ""; position: absolute; left: 0; right: 0; top: -55px; height: 56px; z-index: 3; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1400' height='56' viewBox='0 0 1400 56'><path d='M0 34Q175 4 350 34T700 34T1050 34T1400 34V56H0Z' fill='%23d6e7e0'/></svg>") repeat-x bottom / 1400px 56px; }
#view-map[hidden] { display: none; }
#view-map .lm-spacer { position: relative; }

#view-map .stage { position: -webkit-sticky; position: sticky; top: var(--lm-top, 64px); overflow: hidden;
  background: linear-gradient(#d6e7e0, rgba(214, 231, 224, 0) 90px), radial-gradient(120% 90% at 30% 40%, var(--sand-soft) 0%, var(--ocean-mist) 55%, #bcdad3 100%); }
#view-map .sr-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#view-map :focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }

/* ---------- map layers ---------- */
/* two stacked SVGs on their own layers: the static map (islands, route) repaints only when the camera moves; the trail layer repaints its dirty rect */
#view-map .world { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; will-change: transform; transform-origin: 0 0; }   /* #world/#world2 get a GPU transform while the camera zooms; #world3 (the bird) never does */
/* waves are a tiled CSS background on a composited layer: moving it never repaints */
#view-map .sea { position: absolute; left: -46px; top: -28px; right: -46px; bottom: -28px; pointer-events: none; will-change: transform;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='28'><path d='M5 9q5.5-5 11 0t11 0M28 23q5.5-5 11 0' fill='none' stroke='%238fc2bd' stroke-width='1.3' stroke-linecap='round'/></svg>"); }
#view-map .world .route { fill: none; stroke: rgba(47, 107, 108, .32); stroke-linecap: round; stroke-linejoin: round; }   /* alpha in the stroke, not group opacity: no off-screen layer per frame */
#view-map .world .trail { fill: none; stroke: var(--terracotta); stroke-linecap: round; stroke-linejoin: round; }
#view-map .world .geo { fill: none; stroke: none; visibility: hidden; }
#view-map .world .chain-island .shore { fill: var(--plumeria); stroke: var(--plumeria-soft); stroke-width: 5; stroke-linejoin: round; }
#view-map .world .chain-island .high { fill: var(--sea-ink); transition: fill .5s; }
#view-map .world .chain-island.done .high { fill: var(--leaf); }
#view-map .world .chain-island.soon .shore { fill: #e0c9a4; stroke: #efe0c4; }
#view-map .world .chain-island.soon .high { fill: #7fa39b; }
#view-map .world .chain-island text { display: none; font-family: var(--font-display); font-weight: 600; fill: var(--ocean-deep); paint-order: stroke; stroke: var(--sand-soft); stroke-linejoin: round; }
#view-map .stage.overview .world .chain-island text { display: inline; }
#view-map .world .anchor { fill: var(--sand-soft); stroke: var(--terracotta); }
#view-map .world .mark { fill: var(--sand-soft); stroke: var(--sea-ink); transition: fill .3s, stroke .3s; }
#view-map .world .mark.on { fill: var(--leaf); stroke: var(--leaf); }
#view-map .world .bird-fill { fill: var(--ocean-deep); }
#view-map .world .bird-shadow { fill: var(--ocean-deep); opacity: .16; }
#view-map .world .bird-dot { fill: none; }
#view-map .world .ripple { fill: none; stroke: var(--terracotta); }
#view-map .world .soon-badge { display: none; }
#view-map .stage.overview .world .soon-badge { display: inline; }
#view-map .soon-badge rect { fill: var(--sand-soft); stroke: var(--sea-ink); stroke-width: 1.5; }
#view-map .soon-badge text { font: 700 11.5px var(--font-body); fill: var(--ocean-deep); letter-spacing: .02em; }

/* ---------- island panel (a placeholder .isl-svg: the world island lands exactly on it) ---------- */
#view-map .island { position: absolute; inset: 0; margin: 0; padding: calc(var(--hud-h) + 12px) var(--gutter) 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 2rem; align-items: center; visibility: hidden; }   /* the script fades the active panel out (inline opacity) as the camera zooms out */
#view-map .island.is-active { visibility: visible; }
#view-map .stage.overview .island.is-active, #view-map .stage.overview .hint { visibility: hidden; }
#view-map .isl-art { display: grid; gap: .75rem; justify-items: center; text-align: center; align-self: center; }
#view-map .isl-svg { width: min(100%, 380px); height: auto; overflow: visible; visibility: hidden; }
#view-map .isl-name { position: relative; z-index: 1; padding: .55rem 1.5rem .7rem; border-radius: 22px; background: rgba(251, 246, 234, .9); text-align: center;
  box-shadow: 0 10px 26px -14px rgba(8, 52, 62, .45); --nb: max(.001, min(1, calc((var(--build) - .35) * 1.55))); --xb: max(.001, calc(1 - var(--exit) * 2.2));
  transform: scale(min(var(--nb), var(--xb))); will-change: transform; }
/* "Level N" is the big title, the island name the smaller line under it (the markup keeps the name as the heading) */
#view-map .isl-name .lv { display: block; font: 700 clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem)/1.15 var(--font-display); color: var(--ocean-deep); }
#view-map .isl-name h2 { font: 600 clamp(1.05rem, .95rem + .6vw, 1.4rem)/1.25 var(--font-display); color: var(--terracotta-dark); margin: .1rem 0 0; }
/* Playfair Display defaults to old-style numerals (a small "1" at x-height): use full-height lining numerals for every level number on the map */
#view-map .isl-name .lv, #view-map .isl-name h2, #view-map .world .chain-island text, #view-map .tg .vb { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
#view-map .soon-tag { display: none; }
#view-map .cards { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
/* cards fly in from the east one after another, fill left-to-right with their target var, and leave the same way (transform only) */
#view-map .tg { position: relative; display: grid; grid-template-columns: 28px 1fr; column-gap: .75rem; align-items: center; min-height: 56px; padding: .6rem .9rem;
  background: var(--sand-soft); border: 1px solid var(--sand-deep); border-radius: 14px; isolation: isolate; overflow: hidden; will-change: transform; transition: background-color .3s, border-color .3s;
  --bk: max(0, min(1, calc(var(--build) * 1.7 - var(--n) * .13))); --ek: max(0, min(1, calc(var(--exit) * 1.7 - (4 - var(--n)) * .13)));
  transform: translateX(calc((1 - var(--bk) + var(--ek)) * 118%)); }
#view-map .tg::before { content: ""; grid-row: 1 / span 3; width: 28px; height: 28px; border-radius: 50%; background: var(--plumeria-soft) center / 16px no-repeat; }
#view-map .tg::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--leaf-soft); transform-origin: 0 50%; transform: scaleX(var(--c)); }
#view-map .tg[data-k="1"] { --n: 0; --c: var(--tg1); } #view-map .tg[data-k="2"] { --n: 1; --c: var(--tg2); }
#view-map .tg[data-k="3"] { --n: 2; --c: var(--tg3); } #view-map .tg[data-k="4"] { --n: 3; --c: var(--tg4); } #view-map .tg[data-k="5"] { --n: 4; --c: var(--tg5); }
#view-map .tg .ty { grid-column: 2; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--terracotta); }
#view-map .tg .vb { grid-column: 2; font: 700 1.05rem/1.2 var(--font-display); color: var(--ocean-deep); }
#view-map .tg .tx { grid-column: 2; font-size: .86rem; color: var(--koa-soft); }
#view-map .tg[data-state="locked"] { background: rgba(251, 246, 234, .95); border-style: dashed; color: var(--koa-soft); }
#view-map .tg[data-state="locked"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a4234' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='9' rx='2'/><path d='M8 11V8a4 4 0 0 1 8 0v3'/></svg>"); background-color: var(--sand-deep); }
/* lock icon colours match the list's groups: targets 1-2 orange (plumeria / terracotta-dark), targets 3-5 blue (ocean mist / ocean-deep) */
#view-map .tg[data-state="locked"][data-k="1"]::before, #view-map .tg[data-state="locked"][data-k="2"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a3a15' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='9' rx='2'/><path d='M8 11V8a4 4 0 0 1 8 0v3'/></svg>"); background-color: var(--plumeria); }
#view-map .tg[data-state="locked"][data-k="3"]::before, #view-map .tg[data-state="locked"][data-k="4"]::before, #view-map .tg[data-state="locked"][data-k="5"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308343e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='9' rx='2'/><path d='M8 11V8a4 4 0 0 1 8 0v3'/></svg>"); background-color: var(--ocean-mist-deep); }
#view-map .tg[data-state="current"] { background: #fff; border: 2px solid var(--terracotta); box-shadow: 0 6px 18px -8px rgba(165, 72, 31, .55); }
#view-map .tg[data-state="current"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='5' fill='%23a5481f'/></svg>"); background-color: var(--plumeria); }
#view-map .tg[data-state="done"] { background: var(--leaf-soft); border-color: var(--leaf); }
#view-map .tg[data-state="done"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>"); background-color: var(--leaf); }

/* ---------- HUD + controls (absolute inside the stage) ---------- */
#view-map .hud { position: absolute; z-index: 20; top: 10px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); background: rgba(251, 246, 234, .97);
  border: 1px solid var(--sand-deep); border-radius: var(--r-pill); box-shadow: var(--shadow-soft); padding: 0 6px 0 18px; }
#view-map .hud-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 48px; }
#view-map .hud-label { font-weight: 600; font-size: .92rem; color: var(--ocean-deep); }
#view-map .hud-track { position: absolute; left: 18px; right: 18px; bottom: 5px; height: 3px; background: var(--sand-deep); border-radius: 3px; overflow: hidden; }
#view-map .hud-bar { display: block; height: 100%; width: 100%; background: var(--terracotta); transform-origin: 0 50%; transform: scaleX(0); }
#view-map .jump-toggle { min-width: 44px; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--ocean); color: var(--sand-soft); font: 600 .85rem var(--font-body); cursor: pointer; }
#view-map .jump-toggle:hover { background: var(--ocean-deep); }
#view-map .jump { position: absolute; top: calc(100% + 8px); right: 0; margin: 0; padding: .5rem; list-style: none; display: grid; gap: 4px; background: var(--sand-soft); border: 1px solid var(--sand-deep);
  border-radius: var(--r-md); box-shadow: var(--shadow-soft); min-width: 220px; }
#view-map .jump[hidden] { display: none; }
#view-map .jump button { width: 100%; min-height: 44px; text-align: left; padding: 0 .9rem; border: 0; border-radius: 10px; background: transparent; color: var(--koa); font: 500 .95rem var(--font-body); cursor: pointer; }
#view-map .jump button:hover { background: var(--plumeria-soft); }
#view-map .jump button[aria-current="true"] { background: var(--ocean-mist); font-weight: 700; }

#view-map .view-btn, #view-map .back-btn, #view-map .next-btn { position: absolute; z-index: 20; display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 20px; border-radius: var(--r-pill);
  font: 600 .95rem var(--font-body); cursor: pointer; box-shadow: none; }   /* flat: no shadow, no gradient */
/* bottom offsets leave room for the site's theme toggle (left) and pause pill (right), which sit at bottom:16px inside the same corner */
#view-map .view-btn { left: 16px; bottom: 76px; border: 2px solid var(--ocean); background: var(--sand-soft); color: var(--ocean-deep); }
#view-map .view-btn:hover { background: #fff; }
#view-map .view-btn[aria-pressed="true"] { background: var(--ocean); color: var(--sand-soft); }
#view-map .back-btn { display: none; left: 16px; bottom: 136px; border: 0; background: var(--terracotta); color: var(--sand-soft); }
#view-map .back-btn.on { display: inline-flex; animation: lm-rise .3s cubic-bezier(.2, .8, .2, 1); }
#view-map .back-btn:hover { background: var(--terracotta-dark); }
#view-map .next-btn { right: 16px; bottom: 76px; padding: 0 22px; border: 0; background: var(--terracotta); color: var(--sand-soft); font-size: 1rem; }
#view-map .next-btn:hover:not(:disabled) { background: var(--terracotta-dark); }
#view-map .next-btn:disabled { background: #d8d4cb; color: #5c564d; cursor: not-allowed; box-shadow: none; }
#view-map .hint { position: absolute; z-index: 10; left: 50%; bottom: 24%; transform: translateX(-50%); width: min(30rem, calc(100% - 2 * var(--gutter))); margin: 0; padding: .9rem 1.2rem; text-align: center;
  background: rgba(251, 246, 234, .94); border: 1px solid var(--sand-deep); border-radius: var(--r-md); box-shadow: var(--shadow-soft); color: var(--koa); }
#view-map .hint[hidden] { display: none; }
#view-map .hint kbd { font: 600 .9em var(--font-body); padding: .05rem .45rem; border: 1px solid var(--sand-deep); border-bottom-width: 2px; border-radius: 6px; background: #fff; }

#view-map .end-toast { display: none; }
#view-map .end-toast.on { display: flex; align-items: center; gap: .4rem; position: absolute; z-index: 30; left: 50%; bottom: 200px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px);
  padding: .55rem .6rem .55rem 1.4rem; background: var(--sand-soft); border: 1px solid var(--sand-deep); border-left: 5px solid var(--terracotta); border-radius: var(--r-md); box-shadow: var(--shadow-soft);
  animation: lm-toast .4s cubic-bezier(.2, .8, .2, 1); }
#view-map .end-toast p { margin: 0; font: 600 clamp(1.05rem, .95rem + .5vw, 1.3rem)/1.3 var(--font-display); color: var(--ocean-deep); }
#view-map .end-x { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--koa-soft); cursor: pointer; }
#view-map .end-x:hover { background: var(--sand-deep); }
@keyframes lm-toast { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes lm-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  #view-map .island { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: .5rem; align-items: start; padding-bottom: 132px; }   /* cards clear the bottom control row (76px offset + 48px buttons) */
  #view-map .isl-svg { width: min(40vw, 165px); }   /* smaller island = smaller loop, so the bird circles above the cards */
  #view-map .isl-name .lv { font-size: 1.5rem; }
  #view-map .isl-name h2 { font-size: 1rem; }
  #view-map .cards { gap: .4rem; }
  #view-map .tg { min-height: 48px; padding: .35rem .7rem; grid-template-columns: 24px auto 1fr; }
  #view-map .tg::before { width: 24px; height: 24px; background-size: 14px; grid-row: 1; }
  #view-map .tg .ty { grid-column: 3; grid-row: 1; justify-self: end; }
  #view-map .tg .vb { grid-column: 2; grid-row: 1; }
  #view-map .tg .tx { display: none; }
}
/* short phones (iPhone SE class, or any phone with browser chrome showing): smaller island + tighter cards so they still clear the bottom buttons */
@media (max-width: 760px) and (max-height: 760px) {
  #view-map .isl-svg { width: min(30vw, 112px); }
  #view-map .isl-name { padding: .3rem 1rem .4rem; }
  #view-map .isl-name .lv { font-size: 1.25rem; }
  #view-map .isl-name h2 { font-size: .95rem; }
  #view-map .island { gap: .2rem; padding-top: calc(var(--hud-h) + 6px); padding-bottom: 128px; }
  #view-map .cards { gap: .25rem; }
  #view-map .tg { min-height: 40px; padding: .2rem .6rem; }
}
@media (max-width: 760px) and (max-height: 660px) {
  #view-map .isl-svg { width: min(26vw, 96px); }
  #view-map .tg { min-height: 36px; }
}
@media (prefers-reduced-motion: reduce) { #view-map * { transition: none !important; animation: none !important; } }

/* Level 1 target cards link to their unit plan (stretched link keeps the whole card clickable) */
#view-map .tg .tg-link { color: inherit; text-decoration: none; }
#view-map .tg .tg-link::after { content: ""; position: absolute; inset: 0; }
#view-map .tg:hover .tg-link, #view-map .tg .tg-link:focus-visible { text-decoration: underline; }
#view-map .tg:has(.tg-link:focus-visible) { outline: 3px solid var(--terracotta); outline-offset: -3px; }
#view-map .tg .tg-link:focus-visible { outline: none; }

/* locked target: the title is plain text, not a link */
#view-map .tg .tg-link:not([href]) { cursor: default; }
#view-map .tg:hover .tg-link:not([href]) { text-decoration: none; }

/* Map view is a full-screen stage: no site footer under it (the list view keeps the footer). */
html.lv-map site-footer { display: none; }