/* =============================================================================
   css/atlas.css — Hawaii Adventure Atlas
   TRANSPLANTED VERBATIM from Dan's V7 interactive prototype
   ("Hawaii Adventure Atlas - Topographic Night · V7", 2026-08-20), which is
   the master spec for BOTH structure and visual design.

   The only edits made to the prototype's stylesheet:
     - the 12 embedded base64 data: URIs (5 fonts, 3 textures, 4 frame masks)
       were extracted to real files under assets/atlas/ and referenced by path.
       Self-hosted; no font CDN. Everything else is byte-for-byte the
       prototype.

   Layer order inside this file, as authored in the prototype:
     1. Hawaii Atlas Dark V1 base (U1 "Baseline Union" palette, dual
        extraction: [data-mode] flips HIKING forest cast / DIVING teal cast)
     2. TOPOGRAPHIC NIGHT 2026 restyle  (ground #020607, baked raster topo)
     3. V5 cartographic-obsidian detail panel
     4. V6 restrained text hierarchy
     5. V7 handmade photo frames

   NOTE (departure from tokens/colors.css in the design-system folder): the
   prototype's Topographic Night layer deliberately overrides the base tokens
   (ground #0C0D0E -> #020607, accent #96C06B -> #A8D76F, #4FC1C7 -> #48DDE3,
   orange #A14E31/#C96A47 -> #D86933/#FF9557, radii 6/10/12 -> 7/12/17).
   Per the source-of-truth hierarchy, the prototype wins.
   ============================================================================= */

@font-face{font-family:'Clarity Marker';src:url(../assets/atlas/fonts/ClarityMarker.woff2) format('woff2');font-weight:400;font-style:normal;}
@font-face{font-family:'Gehrig2';src:url(../assets/atlas/fonts/Gehrig2.woff2) format('woff2');font-weight:400;font-style:normal;}
@font-face{font-family:'Stargaze Typewriter';src:url(../assets/atlas/fonts/StargazeTypewriter.woff2) format('woff2');font-weight:400;font-style:normal;}
@font-face{font-family:'Maverick';src:url(../assets/atlas/fonts/Maverick.woff2) format('woff2');font-weight:400;font-style:normal;}
@font-face{font-family:'Capture Bold';src:url(../assets/atlas/fonts/CaptureBold.woff2) format('woff2');font-weight:400;font-style:normal;}
/* ============================================================
   HAWAII ATLAS DARK V1 — design system applied
   Palette: U1 "Baseline Union" (one palette, dual extraction:
   forest-cast HIKING / teal-cast DIVING, shared rust-orange)
   Type: Clarity Marker H1 · Gehrig2 H2 · Stargaze H3 ·
         Maverick body/labels/chips/index · Capture Bold metrics/buttons
   Style: S4 "Soft Instrument" — soft shadows, 1px hairlines,
          6/10/12px radii, airy density, topo ground + light grain
   ============================================================ */
:root{
  /* shared ground + ink */
  --bg:#0C0D0E; --text:#E2E4D6;
  --orange:#A14E31; --orange-bright:#C96A47;
  /* radii (S4: S1 radii on S3 body) */
  --r-sm:6px; --r-md:10px; --r-lg:12px; --radius:10px;
  /* soft elevation */
  --shadow:0 4px 14px rgba(0,0,0,.35);
  --shadow2:0 8px 24px rgba(0,0,0,.5);
  --font:'Maverick',ui-monospace,monospace;
  --font-display:'Clarity Marker',var(--font);
  --font-h2:'Gehrig2',var(--font);
  --font-h3:'Stargaze Typewriter',serif;
  --font-num:'Capture Bold',var(--font);
}
/* HIKING extraction (default) */
body{
  --surface:#131712; --surface-2:#1A1F18; --surface-active:#232B1D;
  --border:#28301F; --border-strong:#3A4830;
  --text-dim:#8A8F5C; --text-faint:#5E634A;
  --accent:#96C06B; --cta:#5B5E43; --contour:#1C2315;
  --p1:#2E4A3A; --p2:#173028;
}
/* DIVING extraction */
body[data-mode="dive"]{
  --surface:#13191A; --surface-2:#1A2322; --surface-active:#1F2E2C;
  --border:#283331; --border-strong:#3A4C48;
  --text-dim:#8FA39D; --text-faint:#5C6E6A;
  --accent:#4FC1C7; --cta:#4E7A72; --contour:#182022;
  --p1:#1B4A55; --p2:#0B2836;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg) url(../assets/atlas/topo-landscape.webp) center/cover no-repeat fixed;
  color:var(--text);font-family:var(--font);font-size:13px;overflow:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.3;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
button{font-family:var(--font);cursor:pointer;transition:all .24s ease-out}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}
.ph{border:1px solid var(--border);background:linear-gradient(160deg,var(--p1),var(--p2));
  display:flex;align-items:center;justify-content:center;
  color:rgba(226,228,214,.35);font-size:9px;letter-spacing:.12em;border-radius:var(--r-md);flex:none}
.chip{display:inline-block;border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:2px 8px;
  font-size:9.5px;color:var(--text-dim);background:transparent;letter-spacing:.04em}
.btn{background:var(--cta);border:1px solid var(--cta);border-radius:var(--r-md);
  padding:8px 14px;font-size:11px;font-family:var(--font-num);color:var(--bg);letter-spacing:.08em;box-shadow:var(--shadow)}
.btn:hover{filter:brightness(1.15)}
.btn.ghost{background:transparent;border:1px solid var(--cta);color:var(--accent);box-shadow:none}
.btn.ghost:hover{border-color:var(--accent)}
.score{font-family:var(--font-num);color:var(--accent)}

/* ---------- shell ---------- */
#shell{display:flex;height:100vh}
nav#rail{width:62px;flex:none;border-right:1px solid var(--border);background:var(--surface);
  display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px;z-index:30}
#rail .logo{width:38px;height:38px;border:1px solid var(--border-strong);border-radius:var(--r-md);
  background:linear-gradient(160deg,var(--p1),var(--p2));
  display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--accent);margin-bottom:10px;letter-spacing:.06em}
#rail button{width:48px;border:1px solid transparent;background:transparent;border-radius:var(--r-md);
  padding:7px 0 5px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text-dim)}
#rail button svg{stroke:currentColor}
#rail button span{font-size:7.5px;letter-spacing:.08em}
#rail button:hover{color:var(--text)}
#rail button.on{background:var(--surface-active);border-color:var(--border-strong);color:var(--accent)}
#rail .spacer{flex:1}
main#stage{flex:1;position:relative;min-width:0}

/* ---------- views ---------- */
.view{position:absolute;inset:0;display:none;overflow:hidden}
.view.on{display:block}
.view.scroll{overflow-y:auto}
.view.scroll{background:transparent}

/* ---------- MAP view ---------- */
#mapCanvas{position:absolute;inset:0;background:transparent}
#mapCanvas > svg{position:absolute;inset:0;width:100%;height:100%}
#mapTag{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px dashed var(--border-strong);
  color:var(--text-faint);padding:10px 26px;font-size:10px;letter-spacing:.14em;border-radius:var(--r-md);pointer-events:none}
.topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;padding:10px 14px;z-index:20;pointer-events:none}
.topbar>*{pointer-events:auto}
.appname{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow);
  padding:8px 12px;font-size:11px;letter-spacing:.18em;color:var(--text)}
#modeWrap{position:relative}
.toggle{display:flex;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow)}
.toggle button{border:none;background:transparent;padding:8px 16px;font-size:10.5px;letter-spacing:.1em;color:var(--text-dim);font-family:var(--font-num)}
.toggle button.on{background:var(--cta);color:var(--bg)}
.chips{display:flex;gap:7px;margin-left:auto}
.fchip{background:var(--surface);border:1px solid var(--border);border-radius:999px;box-shadow:var(--shadow);
  padding:7px 12px;font-size:9.5px;letter-spacing:.08em;color:var(--text-dim)}
.fchip.on{background:var(--surface-active);border-color:var(--accent);color:var(--accent)}
/* floating ranked panel */
#rankPanel{position:absolute;top:56px;left:14px;bottom:44px;width:296px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow2);display:flex;flex-direction:column;z-index:15;overflow:hidden}
#rankPanel .hd{display:flex;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border)}
#rankPanel .hd b{font-size:10px;letter-spacing:.16em;color:var(--text-dim);font-weight:400}
#rankPanel .hd button{margin-left:auto;border:1px solid var(--border);background:transparent;border-radius:var(--r-sm);
  font-size:9px;color:var(--text-dim);padding:3px 8px}
#rankPanel .hd button:hover{color:var(--accent);border-color:var(--accent)}
#rankBody{flex:1;overflow-y:auto;padding:10px}
.hero{border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface-2);padding:10px;margin-bottom:9px;cursor:pointer;transition:border-color .24s ease-out}
.hero:hover{border-color:var(--accent)}
.hero .top{display:flex;gap:10px}
.hero .ph{width:84px;height:100px}
.hero h3{font-size:12px;letter-spacing:.06em;margin-bottom:2px;font-weight:400}
.hero .big{font-size:30px;font-family:var(--font-num);color:var(--accent);line-height:1.05}
.hero .big small{display:block;font-size:9px;letter-spacing:.18em;color:var(--text-dim);font-family:var(--font)}
.hero .meta{margin-top:7px;font-size:10.5px;color:var(--text-dim);line-height:1.7}
.rrow{display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);
  padding:7px 9px;margin-bottom:7px;cursor:pointer;transition:all .24s ease-out}
.rrow:hover{background:var(--surface-2);border-color:var(--border-strong)}
.rrow .ph{width:34px;height:34px;font-size:7px}
.rrow .n{width:12px;color:var(--text-faint);font-size:11px}
.rrow .nm{flex:1;font-size:11px;letter-spacing:.04em}
.rrow .nm .adv{display:block;font-size:9px;color:var(--orange-bright);margin-top:1px}
.rrow .sc{font-size:14px;font-family:var(--font-num);color:var(--accent)}
#rankCollapsed{position:absolute;top:56px;left:14px;z-index:15;display:none}
/* right floating stack */
#rightStack{position:absolute;top:56px;right:14px;width:212px;display:flex;flex-direction:column;gap:10px;z-index:15}
.fpanel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow2);padding:10px}
.fpanel h5{font-size:9px;letter-spacing:.16em;color:var(--text-dim);margin-bottom:8px;font-weight:400}
.lay{display:flex;gap:6px}
.lay .sw{flex:1;height:38px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);
  font-size:7.5px;color:var(--text-faint);display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;cursor:pointer;transition:all .24s ease-out}
.lay .sw.on{border-color:var(--accent);background:var(--surface-active);color:var(--accent)}
.cond .r{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text-dim);margin-bottom:6px;
  border-bottom:1px dotted var(--border);padding-bottom:5px}
.cond .r b{color:var(--text);font-weight:400}
.cond .upd{font-size:8.5px;color:var(--text-faint);letter-spacing:.08em;margin-top:2px}
.miniIsle{height:92px;position:relative}
.miniIsle .island{position:absolute;inset:6px;border:1px dashed var(--border-strong);border-radius:42% 55% 46% 50%;background:var(--surface-2)}
.miniIsle .dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.miniIsle .lbl{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:8px;color:var(--text-faint);letter-spacing:.1em}
/* footer bar */
#footBar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;padding:7px 14px;z-index:14;
  background:var(--surface);border-top:1px solid var(--border);font-size:9.5px;color:var(--text-dim);letter-spacing:.1em}
#footBar .lg{letter-spacing:.22em;color:var(--text)}
#footBar .right{margin-left:auto;display:flex;gap:16px}
#footBar .right span{font-family:var(--font-num);color:var(--accent);font-size:9px}
/* map pins */
.pin{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--accent);cursor:pointer;z-index:12;
  transform:translate(-50%,-50%);transition:all .24s ease-out}
.pin:hover,.pin.sel{background:var(--accent);box-shadow:0 0 12px var(--accent)}
.pin .plbl{position:absolute;left:20px;top:-2px;white-space:nowrap;font-size:9px;color:var(--text-dim);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:1px 5px}
/* detail slide-over */
#detailPanel{position:absolute;top:56px;right:14px;bottom:44px;width:330px;background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-lg);box-shadow:var(--shadow2);z-index:22;display:none;flex-direction:column;overflow:hidden}
#detailPanel.on{display:flex}
#detailPanel .hd{display:flex;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border)}
#detailPanel .hd b{font-size:10px;letter-spacing:.14em;color:var(--text-dim);font-weight:400}
#detailPanel .hd button{margin-left:auto;border:1px solid var(--border);background:transparent;border-radius:var(--r-sm);
  width:22px;height:22px;color:var(--text-dim);font-size:11px}
#detailPanel .hd button:hover{color:var(--orange-bright);border-color:var(--orange)}
#detailBody{flex:1;overflow-y:auto;padding:12px}
#detailBody .ph.heroPh{width:100%;height:130px;margin-bottom:10px;position:relative;border-radius:var(--r-lg)}
.scoreBadge{position:absolute;top:8px;right:8px;background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--r-md);
  padding:5px 9px;text-align:center;box-shadow:var(--shadow)}
.scoreBadge .v{font-size:17px;font-family:var(--font-num);color:var(--accent);line-height:1}
.scoreBadge .t{font-size:7px;letter-spacing:.16em;color:var(--text-dim)}
#detailBody h2{font-family:var(--font-display);font-size:19px;letter-spacing:.06em;margin-bottom:2px;font-weight:400}
#detailBody .loc{font-size:10px;color:var(--text-dim);margin-bottom:8px}
#detailBody .desc{font-size:11px;color:var(--text-dim);line-height:1.55;margin:8px 0}
.statRow{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin:10px 0}
.statRow div{background:var(--surface-2);padding:8px}
.statRow .v{font-size:13px;font-family:var(--font-num);color:var(--text)}
.statRow .t{font-size:8px;letter-spacing:.12em;color:var(--text-dim)}
.chipWrap{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0}
#detailPanel .actions{padding:10px 12px;border-top:1px solid var(--border);display:grid;gap:7px}
#detailPanel .actions .row2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
/* coach mark */
#coach{position:absolute;top:52px;left:0;width:250px;background:var(--surface-2);border:1px solid var(--accent);border-radius:var(--r-md);
  box-shadow:var(--shadow2);padding:11px 13px;z-index:40}
#coach::before{content:"";position:absolute;top:-6px;left:40px;width:10px;height:10px;background:var(--surface-2);
  border-left:1px solid var(--accent);border-top:1px solid var(--accent);transform:rotate(45deg)}
#coach p{font-size:10.5px;line-height:1.55;color:var(--text-dim);margin-bottom:8px}
#coach b{color:var(--accent)}
#coach .btn{padding:5px 10px;font-size:9.5px}

/* ---------- FULL DETAIL page ---------- */
.pageWrap{max-width:1060px;margin:0 auto;padding:20px 26px 60px}
.backRow{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.backRow button{border:1px solid var(--border);background:var(--surface);border-radius:var(--r-sm);padding:6px 11px;font-size:10px;color:var(--text-dim)}
.backRow button:hover{color:var(--accent);border-color:var(--accent)}
.dHead{display:grid;grid-template-columns:380px 1fr;gap:18px;margin-bottom:16px}
.dHead .ph{height:250px;position:relative;border-radius:var(--r-lg);box-shadow:var(--shadow2)}
.dHead h1{font-family:var(--font-display);font-size:30px;letter-spacing:.05em;margin:4px 0 2px;font-weight:400}
.dHead .loc{font-size:11px;color:var(--text-dim);margin-bottom:8px}
.dHead .desc{font-size:12px;color:var(--text-dim);line-height:1.6;margin:10px 0}
.statBar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-top:10px}
.statBar div{background:var(--surface);padding:10px}
.statBar .v{font-size:16px;font-family:var(--font-num);color:var(--accent)}
.statBar .t{font-size:8.5px;letter-spacing:.12em;color:var(--text-dim)}
.dGrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-bottom:12px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px;box-shadow:var(--shadow)}
.card h5{font-size:9px;letter-spacing:.16em;color:var(--text-dim);margin-bottom:9px;font-weight:400}
.card ul{list-style:none}
.card li{font-size:11px;color:var(--text-dim);margin-bottom:6px;padding-left:12px;position:relative}
.card li::before{content:"";position:absolute;left:0;top:5px;width:5px;height:5px;background:var(--accent);border-radius:50%}
.chartPh{height:120px}
.secTl{position:relative;padding-left:18px}
.secTl::before{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:1px;background:var(--border-strong)}
.secTl .s{position:relative;margin-bottom:10px;font-size:10.5px;color:var(--text-dim)}
.secTl .s b{display:block;color:var(--text);font-weight:400;font-size:11px}
.secTl .s::before{content:"";position:absolute;left:-17px;top:3px;width:8px;height:8px;border-radius:50%;background:var(--bg);border:1px solid var(--accent)}
.photoStrip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.photoStrip .ph{height:90px}
.scoreBadge.topLeft{left:10px;right:auto;top:10px}
.dHead .diffLine{margin-bottom:6px}
.dHead .diffLine .chip{color:var(--orange-bright);border-color:var(--orange)}
#detailBody>.chip, #detailBody>.chip+.chip{color:var(--orange-bright);border-color:var(--orange)}
.chartTall{height:230px}
.dGrid.threeUp{grid-template-columns:1fr 1fr 2fr}
.dGrid.profileRow{grid-template-columns:1fr 2fr}
.accessGroup{margin-bottom:12px}
.accessGroup:last-child{margin-bottom:0}
.accessGroup h6{font-family:var(--font-h3);font-size:11.5px;font-weight:400;color:var(--text);margin-bottom:7px;letter-spacing:.03em}
.copyRow{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.copyRow .copyBtn{border:1px solid var(--cta);background:transparent;border-radius:var(--r-sm);
  font-size:8.5px;letter-spacing:.04em;color:var(--accent);padding:2px 9px;flex:none;min-width:46px;font-family:var(--font-num)}
.copyRow .copyBtn:hover{border-color:var(--accent);background:var(--surface-active)}
.copyRow span{font-size:10.5px;color:var(--text-dim)}
.photoWide{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.photoWide .ph{height:110px}
.dFoot{display:flex;gap:16px;border-top:1px solid var(--border);padding-top:10px;font-size:9.5px;color:var(--text-dim);letter-spacing:.1em}
.dFoot .lg{letter-spacing:.22em;color:var(--text)}
.dFoot .right{margin-left:auto;display:flex;gap:14px}
.dFoot .right span{font-family:var(--font-num);color:var(--accent);font-size:9px}

/* ---------- BUCKET ---------- */
.colHead{display:flex;align-items:baseline;gap:12px;margin-bottom:14px}
.colHead h1{font-family:var(--font-display);font-size:24px;letter-spacing:.08em;font-weight:400}
.colHead span{color:var(--text-dim);font-size:11px;font-family:var(--font-h2)}
.bWrap{display:grid;grid-template-columns:1fr 230px;gap:14px}
.cardGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:11px;align-content:start}
.bcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden;cursor:pointer;transition:all .24s ease-out}
.bcard:hover{border-color:var(--border-strong);transform:translateY(-2px);box-shadow:var(--shadow2)}
.bcard .ph{height:82px;border:none;border-bottom:1px solid var(--border);border-radius:0;width:100%}
.bcard .b{padding:9px 11px}
.bcard .nm{font-size:11.5px;margin-bottom:2px;letter-spacing:.03em}
.bcard .meta{font-size:10px;color:var(--text-dim)}
.bcard .row{display:flex;justify-content:space-between;align-items:center;margin-top:7px}
.bcard .rm{border:none;background:none;font-size:9px;color:var(--text-faint);text-decoration:underline}
.bcard .rm:hover{color:var(--orange-bright)}
.isleCard{position:sticky;top:14px;height:300px}
.isleCard .island{position:absolute;inset:38px 14px 26px;border:1px dashed var(--border-strong);border-radius:42% 55% 46% 50%;background:var(--surface-2)}
.isleCard .dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.isleCard .dot.done{background:var(--accent)}
.isleCard .lbl{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:8.5px;color:var(--text-faint);letter-spacing:.1em}
.empty{border:1px dashed var(--border-strong);border-radius:var(--r-lg);padding:40px;text-align:center;color:var(--text-dim)}
.empty h3{font-family:var(--font-h2);font-size:14px;margin-bottom:6px;color:var(--text);font-weight:400}
.empty p{font-size:11px;margin-bottom:14px}

/* ---------- LOGBOOK ---------- */
.tl{position:relative;padding-left:26px;max-width:760px}
.tl::before{content:"";position:absolute;left:8px;top:4px;bottom:4px;width:1px;background:var(--border-strong)}
.tl .month{font-size:10px;letter-spacing:.16em;color:var(--text-dim);margin:16px 0 9px;position:relative}
.tl .month::before{content:"";position:absolute;left:-22px;top:2px;width:9px;height:9px;border-radius:50%;background:var(--surface-active);border:1px solid var(--border-strong)}
.entry{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow);
  padding:11px 13px;margin-bottom:9px;position:relative;display:flex;gap:12px}
.entry::before{content:"";position:absolute;left:-22px;top:17px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.entry .eph{width:58px;height:58px}
.entry .date{font-family:var(--font-num);font-size:9px;color:var(--orange-bright);letter-spacing:.1em;margin-bottom:2px}
.entry .nm{font-size:12.5px;letter-spacing:.02em}
.entry .meta{font-size:10.5px;color:var(--text-dim);line-height:1.6;margin-top:2px}
.entry .cond{margin-top:6px;display:flex;gap:5px;flex-wrap:wrap}

/* ---------- SETTINGS ---------- */
.setList{max-width:520px}
.setList .si{display:flex;align-items:center;justify-content:space-between;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;margin-bottom:9px;box-shadow:var(--shadow)}
.setList .si b{font-size:11.5px;font-weight:400;font-family:var(--font-h2)}
.setList .si span{display:block;font-size:10px;color:var(--text-dim);margin-top:2px}
.setList .ctl{border:1px solid var(--cta);background:transparent;border-radius:var(--r-sm);padding:5px 10px;font-size:9.5px;color:var(--accent);font-family:var(--font-num)}

/* ---------- modal ---------- */
#modalScrim{position:fixed;inset:0;background:rgba(6,7,8,.72);z-index:60;display:none;align-items:center;justify-content:center}
#modalScrim.on{display:flex}
#logModal{width:420px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--shadow2);overflow:hidden}
#logModal .hd{padding:12px 15px;border-bottom:1px solid var(--border);display:flex;align-items:center}
#logModal .hd b{font-size:11px;letter-spacing:.14em;color:var(--text);font-weight:400}
#logModal .hd button{margin-left:auto;border:1px solid var(--border);background:transparent;border-radius:var(--r-sm);width:22px;height:22px;color:var(--text-dim)}
#logModal .bd{padding:15px}
.field{margin-bottom:11px}
.field label{display:block;font-size:9px;letter-spacing:.14em;color:var(--text-dim);margin-bottom:4px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--border);border-radius:var(--r-sm);
  padding:8px 9px;font-family:var(--font);font-size:11.5px;color:var(--text);background:var(--bg)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field textarea{height:64px;resize:none}
.autoNote{background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:var(--r-sm);padding:8px 10px;
  font-size:10px;color:var(--text-dim);margin-bottom:11px}
.autoNote span{color:var(--text)}
#logModal .ft{padding:12px 15px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}

.badge{position:fixed;bottom:12px;right:12px;background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-sm);padding:6px 10px;font-size:9px;color:var(--text-dim);letter-spacing:.06em;z-index:80}
.badge b{color:var(--accent);font-weight:400}

/* ================================================================
   HAWAII ATLAS / TOPOGRAPHIC NIGHT — 2026 RESTYLE
   Visual-only override: original fonts, data, markup and interactions
   remain intact. Raster is reserved for the map/material references;
   all text and controls remain native HTML.
   ================================================================ */
:root{
  --bg:#020607;
  --surface:#050808;
  --surface-2:#080d0c;
  --surface-active:#101813;
  --border:rgba(205,215,203,.20);
  --border-strong:rgba(218,226,213,.38);
  --text:#EEF2EC;
  --text-dim:#AAB2AA;
  --text-faint:#737D75;
  --orange:#D86933;
  --orange-bright:#FF9557;
  --gold:#F4D15C;
  --r-sm:7px;
  --r-md:12px;
  --r-lg:17px;
  --radius:12px;
  --shadow:0 12px 28px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.055);
  --shadow2:0 24px 62px rgba(0,0,0,.66),0 4px 14px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.075);
  --map-image:url("../assets/atlas/map-image.jpg");
  --topo-image:url("../assets/atlas/topo-image.jpg");
  --surface-texture:
    radial-gradient(ellipse at 50% 50%,rgba(3,6,6,.995) 0 31%,rgba(3,6,6,.98) 45%,rgba(3,6,6,.91) 59%,rgba(3,6,6,.76) 78%,rgba(3,6,6,.60) 100%),
    linear-gradient(135deg,rgba(255,255,255,.025),transparent 35%,rgba(0,0,0,.24)),
    var(--topo-image);
  --control-texture:
    radial-gradient(ellipse at 50% 50%,rgba(3,6,6,1) 0 36%,rgba(3,6,6,.98) 54%,rgba(3,6,6,.88) 78%,rgba(3,6,6,.63) 100%),
    var(--topo-image);
}

body{
  --accent:#A8D76F;
  --cta:#536D3B;
  --contour:#374A2B;
  --p1:#162319;
  --p2:#050909;
  background:#020607 !important;
  color:var(--text);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body[data-mode="dive"]{
  --accent:#48DDE3;
  --cta:#246B70;
  --contour:#154D52;
  --p1:#0D2729;
  --p2:#03090A;
}
body::after{display:none}

button,.pin,.hero,.rrow,.bcard,.lay .sw{
  -webkit-tap-highlight-color:transparent;
}
button:focus-visible,[onclick]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* Shell + map scene */
#shell{background:#020607}
nav#rail{
  width:68px;
  padding:12px 7px 10px;
  gap:5px;
  border-right:1px solid var(--border);
  background-color:rgba(4,7,7,.985);
  background-image:var(--surface-texture);
  background-size:100% 100%,100% 100%,480px auto;
  background-position:center,center,36% center;
  box-shadow:14px 0 40px rgba(0,0,0,.34),inset -1px 0 rgba(255,255,255,.03);
}
#rail .logo{
  width:43px;height:43px;margin-bottom:8px;
  border:1px solid var(--border-strong);
  background-image:var(--control-texture);
  background-size:100% 100%,250px auto;
  color:var(--accent);
  box-shadow:var(--shadow),inset 0 0 18px rgba(168,215,111,.06);
  text-shadow:0 0 14px currentColor;
}
#rail button{
  width:52px;min-height:54px;
  border-radius:11px;
  color:#8F9890;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease,transform .2s ease;
}
#rail button:hover{color:var(--text);transform:translateY(-1px)}
#rail button.on{
  color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 46%,transparent);
  background-color:rgba(5,10,8,.96);
  background-image:var(--control-texture);
  background-size:100% 100%,250px auto;
  box-shadow:inset 0 0 18px color-mix(in srgb,var(--accent) 8%,transparent),0 8px 18px rgba(0,0,0,.25);
}
#rail button svg{filter:drop-shadow(0 0 7px color-mix(in srgb,currentColor 34%,transparent))}
#rail button span{font-size:7px;letter-spacing:.11em}

#mapCanvas{
  background-color:#071B25;
  background-image:
    linear-gradient(90deg,rgba(1,5,7,.18),transparent 20%,transparent 80%,rgba(1,5,7,.18)),
    radial-gradient(ellipse at 50% 47%,transparent 44%,rgba(1,5,7,.18) 74%,rgba(1,5,7,.40) 120%),
    var(--map-image);
  background-size:100% 100%,100% 100%,cover;
  background-position:center,center,center;
  background-repeat:no-repeat;
}
#mapCanvas::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,4,6,.14),transparent 18%,transparent 79%,rgba(0,4,6,.24)),
    radial-gradient(circle at 50% 50%,transparent 55%,rgba(0,0,0,.12));
  opacity:.9;
}
#contours{z-index:2;pointer-events:none}
#pinLayer{position:absolute;inset:0;z-index:11;pointer-events:none}
#pinLayer .pin{pointer-events:auto}

/* Reusable tactile topographic surfaces */
#rankPanel,#detailPanel,#rightStack .fpanel,#coach,#footBar,
.appname,.toggle,.fchip,#rankCollapsed,.badge,
.card,.bcard,.entry,.setList .si,#logModal,.scoreBadge,.autoNote,
.empty,.backRow button,.statBar,.statRow,.dFoot{
  background-color:rgba(4,7,7,.97);
  background-image:var(--surface-texture);
  background-size:100% 100%,100% 100%,560px auto;
  background-position:center,center,center;
  background-repeat:no-repeat,no-repeat,no-repeat;
  border-color:var(--border);
}
.appname,.toggle,.fchip,#rankCollapsed,.badge,.backRow button,.chip,.btn,
.copyRow .copyBtn,.setList .ctl,#detailPanel .hd button,#rankPanel .hd button,
#logModal .hd button,.lay .sw{
  background-color:rgba(4,7,7,.985);
  background-image:var(--control-texture);
  background-size:100% 100%,300px auto;
  background-position:center;
  background-repeat:no-repeat;
}

/* Top chrome */
.topbar{padding:12px 16px;gap:12px}
.appname{
  padding:10px 16px;
  border:1px solid var(--border-strong);
  border-radius:999px;
  box-shadow:var(--shadow);
  font-size:11px;letter-spacing:.19em;
  color:var(--text);
}
.toggle{
  border:1px solid var(--border-strong);
  border-radius:999px;
  box-shadow:var(--shadow);
}
.toggle button{
  min-width:88px;min-height:36px;
  padding:8px 18px;
  color:var(--text-dim);
  transition:color .2s ease,background .2s ease,box-shadow .2s ease;
}
.toggle button+button{border-left:1px solid var(--border)}
.toggle button.on{
  color:var(--accent);
  background-color:rgba(5,10,8,.98);
  background-image:var(--control-texture);
  background-size:100% 100%,280px auto;
  background-position:center;
  box-shadow:inset 0 0 22px color-mix(in srgb,var(--accent) 10%,transparent),0 0 18px color-mix(in srgb,var(--accent) 10%,transparent);
  text-shadow:0 0 12px color-mix(in srgb,var(--accent) 28%,transparent);
}
.chips{gap:8px}
.fchip{
  min-height:36px;padding:8px 13px;
  border:1px solid var(--border-strong);
  color:var(--text-dim);
  box-shadow:var(--shadow);
}
.fchip:hover{color:var(--text);border-color:rgba(235,240,230,.5);transform:translateY(-1px)}
.fchip.on{
  color:var(--accent);
  border-color:var(--accent);
  background-color:rgba(6,11,8,.98);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent),0 10px 25px rgba(0,0,0,.35),inset 0 0 20px color-mix(in srgb,var(--accent) 7%,transparent);
}

/* Ranked panel */
#rankPanel{
  top:62px;left:16px;bottom:49px;width:322px;
  border:1px solid var(--border-strong);
  border-radius:18px;
  box-shadow:var(--shadow2);
}
#rankPanel .hd,#detailPanel .hd{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  box-shadow:inset 0 -1px rgba(0,0,0,.46);
}
#rankPanel .hd b,#detailPanel .hd b{
  color:#C5CCC5;
  letter-spacing:.17em;
}
#rankPanel .hd button,#detailPanel .hd button,#logModal .hd button{
  border-color:var(--border-strong);
  color:var(--text-dim);
  box-shadow:inset 0 1px rgba(255,255,255,.04);
}
#rankPanel .hd button:hover,#detailPanel .hd button:hover,#logModal .hd button:hover{
  color:var(--accent);border-color:var(--accent);
}
#rankBody{padding:11px}
.hero,.rrow{
  position:relative;isolation:isolate;overflow:hidden;
  background-color:rgba(3,6,6,.96);
  background-image:var(--surface-texture);
  background-size:100% 100%,100% 100%,430px auto;
  background-position:center,center,center;
  background-repeat:no-repeat;
  border-color:var(--border);
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 8px 20px rgba(0,0,0,.18);
}
.hero{padding:12px;border-radius:14px;margin-bottom:10px}
.hero:hover,.rrow:hover{
  border-color:color-mix(in srgb,var(--accent) 72%,var(--border));
  transform:translateY(-1px);
  box-shadow:0 12px 25px rgba(0,0,0,.34),inset 0 0 25px color-mix(in srgb,var(--accent) 4%,transparent);
}
.hero .ph{
  width:90px;height:108px;
  border-color:var(--border-strong);
  box-shadow:inset 0 0 24px rgba(0,0,0,.5);
}
.hero h3{color:var(--text);font-size:11.5px;letter-spacing:.07em}
.hero .big{font-size:34px;text-shadow:0 0 20px color-mix(in srgb,var(--accent) 20%,transparent)}
.hero .meta{color:var(--text-dim);line-height:1.75}
.rrow{padding:8px 10px;border-radius:12px;margin-bottom:8px}
.rrow .ph{width:36px;height:36px;border-color:var(--border)}
.rrow .n{color:var(--text-faint)}
.rrow .sc{font-size:15px;text-shadow:0 0 13px color-mix(in srgb,var(--accent) 18%,transparent)}
.rrow .nm .adv{color:var(--orange-bright)}
#rankCollapsed{top:64px;left:16px}

/* Shared media placeholders become miniature cartographic plates */
.ph{
  color:rgba(238,242,236,.52);
  border-color:var(--border-strong);
  background-color:#071216;
  background-image:
    linear-gradient(180deg,rgba(1,4,5,.15),rgba(1,4,5,.56)),
    radial-gradient(circle at 50% 48%,transparent 18%,rgba(2,6,7,.56) 112%),
    var(--map-image);
  background-size:100% 100%,100% 100%,cover;
  background-position:center,center,center;
  text-shadow:0 2px 8px #000;
}
body[data-mode="dive"] .ph{filter:saturate(.9) hue-rotate(4deg)}

/* Right information stack */
#rightStack{top:62px;right:16px;width:226px;gap:11px}
.fpanel{
  padding:12px;
  border:1px solid var(--border-strong);
  border-radius:16px;
  box-shadow:var(--shadow2);
}
.fpanel h5{font-size:9px;color:#C2CAC2;letter-spacing:.17em;margin-bottom:10px}
.lay{gap:7px}
.lay .sw{
  height:44px;
  border-color:var(--border);
  border-radius:9px;
  color:var(--text-faint);
  align-items:center;padding:0;
}
.lay .sw:hover{color:var(--text);border-color:var(--border-strong)}
.lay .sw.on{
  color:var(--accent);border-color:var(--accent);
  box-shadow:inset 0 0 18px color-mix(in srgb,var(--accent) 8%,transparent),0 0 16px color-mix(in srgb,var(--accent) 9%,transparent);
}
.cond .r{color:var(--text-dim);border-color:var(--border);margin-bottom:7px;padding-bottom:6px}
.cond .r b{color:var(--text)}
.cond .upd{color:var(--text-faint);margin-top:5px}
.miniIsle{height:108px}
.miniIsle .island,.isleCard .island{
  border:1px solid var(--border-strong);
  background-color:#07141A;
  background-image:linear-gradient(rgba(1,5,7,.18),rgba(1,5,7,.54)),var(--map-image);
  background-size:cover;
  background-position:center;
  box-shadow:inset 0 0 25px rgba(0,0,0,.56);
}
.miniIsle .dot,.isleCard .dot{box-shadow:0 0 14px var(--accent)}
.miniIsle .lbl,.isleCard .lbl{color:var(--text-dim)}

/* Map tags and interactive markers */
#mapTag{
  z-index:3;
  padding:9px 20px;
  color:#D0D6CF;
  background:rgba(2,6,7,.90);
  border:1px solid rgba(210,219,207,.36);
  border-radius:999px;
  box-shadow:0 12px 28px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.06);
  backdrop-filter:none;
}
.pin{
  width:19px;height:19px;
  border-width:3px;
  background:#031014;
  box-shadow:0 0 0 2px rgba(2,7,8,.64),0 4px 14px rgba(0,0,0,.48),0 0 14px color-mix(in srgb,var(--accent) 13%,transparent);
}
.pin:hover,.pin.sel{
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(2,7,8,.78),0 0 22px color-mix(in srgb,var(--accent) 56%,transparent);
  transform:translate(-50%,-50%) scale(1.14);
}
.pin .plbl{
  left:23px;top:-3px;
  padding:3px 8px;
  color:#C0C8C0;
  background:rgba(2,6,7,.94);
  border:1px solid rgba(205,215,203,.28);
  border-radius:999px;
  box-shadow:0 6px 15px rgba(0,0,0,.35);
  letter-spacing:.08em;
}
.pin:hover .plbl,.pin.sel .plbl{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 52%,transparent)}

/* Footer/status rail */
#footBar{
  padding:9px 16px;
  border-top:1px solid var(--border-strong);
  box-shadow:0 -12px 30px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.035);
  color:var(--text-dim);
}
#footBar .lg{color:var(--text)}
#footBar .right span{color:var(--text-dim)}

/* Detail panel */
#detailPanel{
  top:62px;right:16px;bottom:49px;width:354px;
  border:1px solid var(--border-strong);
  border-radius:18px;
  box-shadow:var(--shadow2);
}
#detailBody{padding:14px}
#detailBody .ph.heroPh{height:150px;border-radius:14px}
.scoreBadge{border-color:var(--border-strong);box-shadow:var(--shadow)}
#detailBody h2{font-size:21px;color:var(--text)}
#detailBody .loc,#detailBody .desc{color:var(--text-dim)}
.statRow,.statBar{gap:1px;border-color:var(--border)}
.statRow div,.statBar div{background:rgba(4,7,7,.82)}
.statRow .t,.statBar .t{color:var(--text-dim)}
.statRow .v,.statBar .v{color:var(--text)}
#detailPanel .actions{padding:12px 14px;border-color:var(--border)}

/* Buttons + chips */
.btn{
  min-height:36px;
  padding:8px 15px;
  color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 70%,var(--border));
  border-radius:9px;
  box-shadow:0 8px 20px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.05),inset 0 0 18px color-mix(in srgb,var(--accent) 5%,transparent);
  text-shadow:0 0 12px color-mix(in srgb,var(--accent) 22%,transparent);
  transition:color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.btn:hover{
  filter:none;
  color:#DDF5C6;
  border-color:var(--accent);
  transform:translateY(-1px);
  box-shadow:0 12px 25px rgba(0,0,0,.4),0 0 18px color-mix(in srgb,var(--accent) 11%,transparent),inset 0 0 22px color-mix(in srgb,var(--accent) 8%,transparent);
}
.btn:active{transform:translateY(1px);box-shadow:0 4px 10px rgba(0,0,0,.38),inset 0 2px 8px rgba(0,0,0,.54)}
.btn.ghost{background-color:rgba(3,6,6,.98);border-color:var(--border-strong);color:var(--text-dim)}
.btn.ghost:hover{color:var(--accent);border-color:var(--accent)}
.chip{
  padding:4px 9px;
  color:#ADB6AD;
  border-color:var(--border);
  background-color:rgba(3,6,6,.86);
  border-radius:999px;
}
#detailBody>.chip,.dHead .diffLine .chip{
  color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 74%,var(--border));
}

/* Coach mark */
#coach{
  top:54px;width:268px;
  border:1px solid var(--accent);
  border-radius:13px;
  box-shadow:var(--shadow2),0 0 25px color-mix(in srgb,var(--accent) 8%,transparent);
}
#coach::before{background:#050808;border-color:var(--accent)}
#coach p{color:var(--text-dim)}

/* Scrollable collection/detail views */
.view.scroll{
  background-color:#030607;
  background-image:
    linear-gradient(rgba(2,5,6,.86),rgba(2,5,6,.94)),
    radial-gradient(ellipse at 50% 24%,rgba(28,48,38,.11),transparent 50%),
    var(--topo-image);
  background-size:100% 100%,100% 100%,720px auto;
  background-position:center,center,center top;
  background-repeat:no-repeat,no-repeat,repeat;
}
body[data-mode="dive"] .view.scroll{
  background-image:
    linear-gradient(rgba(2,5,6,.86),rgba(2,5,6,.94)),
    radial-gradient(ellipse at 50% 24%,rgba(18,70,75,.12),transparent 50%),
    var(--topo-image);
}
.pageWrap{max-width:1120px;padding:27px 30px 70px}
.backRow button{border-color:var(--border-strong);color:var(--text-dim)}
.backRow button:hover{color:var(--accent);border-color:var(--accent)}
.dHead{grid-template-columns:minmax(320px,400px) 1fr;gap:22px;margin-bottom:18px}
.dHead .ph{height:270px;border-radius:18px}
.dHead h1{font-size:34px;color:var(--text)}
.dHead .loc,.dHead .desc{color:var(--text-dim)}
.card{
  padding:15px;
  border:1px solid var(--border-strong);
  border-radius:15px;
  box-shadow:var(--shadow);
}
.card h5{color:#C5CDC5;letter-spacing:.18em}
.card li,.copyRow span{color:var(--text-dim)}
.card li::before{box-shadow:0 0 8px var(--accent)}
.secTl::before{background:var(--border-strong)}
.secTl .s{color:var(--text-dim)}
.secTl .s b{color:var(--text)}
.copyRow .copyBtn,.setList .ctl{
  color:var(--accent);border-color:color-mix(in srgb,var(--accent) 60%,var(--border));
}
.copyRow .copyBtn:hover,.setList .ctl:hover{border-color:var(--accent);box-shadow:inset 0 0 16px color-mix(in srgb,var(--accent) 8%,transparent)}
.dFoot{border-top-color:var(--border-strong);color:var(--text-dim)}
.dFoot .right span{color:var(--accent)}

/* Bucket, logbook, settings */
.colHead{padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:18px}
.colHead h1{font-size:27px;color:var(--text)}
.colHead span{color:var(--text-dim)}
.bWrap{grid-template-columns:1fr 250px;gap:17px}
.cardGrid{gap:14px}
.bcard{
  border:1px solid var(--border-strong);
  border-radius:15px;
  box-shadow:var(--shadow);
}
.bcard:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow2)}
.bcard .ph{height:104px;border-bottom-color:var(--border)}
.bcard .b{padding:12px 13px}
.bcard .meta{color:var(--text-dim)}
.bcard .rm{color:var(--text-faint)}
.isleCard{height:320px}
.entry{
  border:1px solid var(--border-strong);
  border-radius:15px;
  padding:13px 15px;
  box-shadow:var(--shadow);
}
.entry .meta{color:var(--text-dim)}
.entry .eph{width:64px;height:64px}
.entry::before{box-shadow:0 0 12px var(--accent)}
.tl::before{background:var(--border-strong)}
.setList{max-width:600px}
.setList .si{
  padding:15px 17px;
  border:1px solid var(--border-strong);
  border-radius:14px;
  box-shadow:var(--shadow);
}
.setList .si span{color:var(--text-dim)}

/* Modal + form fields */
#modalScrim{background:rgba(0,3,4,.83)}
#logModal{
  width:440px;
  border:1px solid var(--border-strong);
  border-radius:17px;
  box-shadow:0 34px 90px rgba(0,0,0,.78),0 0 0 1px rgba(255,255,255,.025);
}
#logModal .hd,#logModal .ft{border-color:var(--border)}
.field label{color:var(--text-dim)}
.field input,.field select,.field textarea{
  border-color:var(--border-strong);
  border-radius:9px;
  color:var(--text);
  background:#030607;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.025);
}
.field input::placeholder,.field textarea::placeholder{color:#626C64}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent),inset 0 2px 8px rgba(0,0,0,.4);
}
.autoNote{border-color:var(--border-strong);color:var(--text-dim)}
.autoNote span{color:var(--text)}

.badge{
  bottom:13px;right:13px;
  border:1px solid var(--border-strong);
  border-radius:999px;
  padding:7px 12px;
  color:var(--text-dim);
  box-shadow:var(--shadow);
}
.badge b{color:var(--accent);text-shadow:0 0 12px color-mix(in srgb,var(--accent) 18%,transparent)}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#020506}
::-webkit-scrollbar-thumb{background:#38433C;border:2px solid #020506;border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:#56635A}

/* Compact desktop: preserve the geographic coordinate system while
   reducing chrome before hiding anything important. */
@media (max-width:1180px){
  #rankPanel{width:285px}
  #rightStack{width:198px}
  .appname{padding-inline:12px;font-size:10px}
  .toggle button{min-width:74px;padding-inline:13px}
  .fchip{padding-inline:10px;font-size:8.5px}
  #detailPanel{width:330px}
}
@media (max-width:980px){
  #rightStack{display:none}
  .chips .fchip:nth-child(n+3){display:none}
  #rankPanel{width:272px}
  .dHead{grid-template-columns:1fr}
  .dHead .ph{height:340px}
  .dGrid,.dGrid.threeUp,.dGrid.profileRow{grid-template-columns:1fr 1fr}
  .dGrid.threeUp .card:last-child{grid-column:1/-1}
  .bWrap{grid-template-columns:1fr}
  .isleCard{position:relative;top:auto;height:240px}
}
@media (max-width:760px){
  html,body{min-height:100%;height:100%}
  #shell{display:block;height:100%}
  nav#rail{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    width:100%;height:68px;
    flex-direction:row;justify-content:space-around;
    padding:7px 10px;
    border-right:0;border-top:1px solid var(--border-strong);
    box-shadow:0 -15px 35px rgba(0,0,0,.5);
    z-index:100;
  }
  #rail .logo,#rail .spacer{display:none}
  #rail button{width:auto;min-width:64px;min-height:51px;padding:5px 9px}
  main#stage{height:calc(100vh - 68px)}
  .topbar{padding:9px 10px;gap:7px}
  .appname{font-size:8px;letter-spacing:.12em;padding:9px 10px}
  .toggle button{min-width:64px;min-height:34px;padding:7px 10px;font-size:9px}
  .chips{display:none}
  #coach{left:-96px;top:49px;width:250px}
  #coach::before{left:130px}
  #rankPanel{left:10px;right:10px;top:auto;bottom:10px;width:auto;height:42vh;min-height:285px}
  #rankCollapsed{left:10px;top:auto;bottom:10px}
  #footBar{display:none}
  #detailPanel{left:10px;right:10px;top:58px;bottom:10px;width:auto}
  #mapTag{top:43%;padding:8px 13px;font-size:8px}
  .pageWrap{padding:18px 15px 44px}
  .dHead .ph{height:260px}
  .dGrid,.dGrid.threeUp,.dGrid.profileRow{grid-template-columns:1fr}
  .dGrid.threeUp .card:last-child{grid-column:auto}
  .statBar{grid-template-columns:1fr 1fr}
  .photoWide{grid-template-columns:1fr 1fr}
  .photoWide .ph:last-child{display:none}
  .colHead{flex-wrap:wrap}
  .colHead .btn{width:100%;margin-left:0 !important}
  .badge{display:none}
}
@media (max-width:480px){
  .appname{max-width:126px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  #rankPanel{height:46vh}
  .hero .ph{width:78px}
  .hero .big{font-size:29px}
  #logModal{width:calc(100vw - 24px)}
  #logModal .bd>div[style]{grid-template-columns:1fr !important;gap:0 !important}
  .photoWide{grid-template-columns:1fr}
  .dHead h1{font-size:28px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto !important;animation:none !important;transition-duration:.01ms !important}
}
@media (prefers-contrast:more){
  :root{--border:rgba(255,255,255,.38);--border-strong:rgba(255,255,255,.68);--text-dim:#D3D8D3;--text-faint:#AEB6AF}
  #rankPanel,#detailPanel,#rightStack .fpanel,.card,.bcard,.entry,.setList .si,#logModal{background-image:none;background-color:#030505}
}
@media (forced-colors:active){
  *{background-image:none !important;box-shadow:none !important;text-shadow:none !important}
  .pin{forced-color-adjust:none}
}

/* ================================================================
   V5 / SPOT DETAIL PANEL — CARTOGRAPHIC OBSIDIAN TRANSPLANT
   Extracted from the supplied V2 panel and deliberately scoped to
   #detailPanel so every other surface in the atlas remains unchanged.
   ================================================================ */
#detailPanel{
  --v5-panel-ink:#F2F1EA;
  --v5-panel-ink-soft:#B4B5AD;
  --v5-panel-ink-faint:#747970;
  --v5-panel-line:rgba(223,218,199,.22);
  --v5-panel-line-hot:rgba(229,223,202,.36);
  --v5-panel-accent:#A7D66F;
  --v5-panel-accent-rgb:167,214,111;
  --orange:#A14E31;
  --orange-bright:#C96A47;
  --r-sm:8px;
  --v5-panel-surface:
    radial-gradient(ellipse at center,rgba(4,6,7,.99) 0%,rgba(5,7,8,.98) 38%,rgba(5,7,8,.91) 58%,rgba(5,7,8,.64) 78%,rgba(5,7,8,.43) 100%),
    linear-gradient(145deg,rgba(25,29,29,.44),rgba(2,4,5,.82)),
    var(--topo-image) center/cover no-repeat;
  --v5-panel-control:
    radial-gradient(circle at center,rgba(5,7,8,.99) 0 44%,rgba(5,7,8,.79) 72%,rgba(5,7,8,.40) 100%),
    var(--topo-image) center/260px auto no-repeat;
  top:64px;
  right:16px;
  bottom:54px;
  width:360px;
  background:var(--v5-panel-surface);
  background-blend-mode:normal;
  border:1px solid var(--v5-panel-line-hot);
  border-radius:17px;
  box-shadow:
    0 24px 64px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.065),
    inset 0 0 42px rgba(255,255,255,.012);
  backdrop-filter:blur(12px) saturate(.78);
  -webkit-backdrop-filter:blur(12px) saturate(.78);
  animation:v5PanelIn .28s cubic-bezier(.2,.8,.2,1);
}
body[data-mode="dive"] #detailPanel{
  --v5-panel-accent:#47D8D8;
  --v5-panel-accent-rgb:71,216,216;
}
#detailPanel::before{
  content:"";
  position:absolute;
  inset:4px;
  z-index:2;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.035);
  border-radius:12px;
}
#detailPanel .hd{
  min-height:48px;
  padding:11px 14px;
  border-bottom-color:var(--v5-panel-line);
  box-shadow:none;
}
#detailPanel .hd b{
  color:var(--v5-panel-ink);
  letter-spacing:.14em;
}
#detailPanel .hd button{
  width:22px;
  height:22px;
  min-width:38px;
  min-height:32px;
  padding:4px 10px;
  color:var(--v5-panel-ink-soft);
  background:var(--v5-panel-control);
  border-color:var(--v5-panel-line);
  box-shadow:none;
}
#detailPanel .hd button:hover{
  color:var(--v5-panel-accent);
  border-color:rgba(var(--v5-panel-accent-rgb),.7);
}
#detailPanel>#detailBody{padding:14px}
#detailPanel #detailBody .ph.heroPh{
  height:152px;
  border-radius:14px;
  border-color:var(--v5-panel-line);
  color:rgba(242,241,234,.46);
  background:
    radial-gradient(circle at center,rgba(5,7,8,.94) 0 40%,rgba(5,7,8,.45) 100%),
    linear-gradient(145deg,rgba(var(--v5-panel-accent-rgb),.20),rgba(3,8,8,.52)),
    var(--topo-image) center/cover no-repeat;
  box-shadow:inset 0 0 28px rgba(0,0,0,.46);
  filter:none;
}
#detailPanel #detailBody .scoreBadge{
  background:var(--v5-panel-surface);
  border-color:var(--v5-panel-line);
  box-shadow:0 10px 28px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter:blur(12px) saturate(.78);
  -webkit-backdrop-filter:blur(12px) saturate(.78);
}
#detailPanel #detailBody .scoreBadge .v{color:var(--v5-panel-accent)}
#detailPanel #detailBody .scoreBadge .t{color:var(--v5-panel-ink-soft)}
#detailPanel #detailBody h2{
  font-size:19px;
  color:var(--v5-panel-ink);
}
#detailPanel #detailBody .loc,
#detailPanel #detailBody .desc{color:var(--v5-panel-ink-soft)}
#detailPanel .chip{
  padding:4px 9px;
  color:var(--v5-panel-ink-soft);
  background:rgba(0,0,0,.26);
  border-color:var(--v5-panel-line);
  border-radius:999px;
}
#detailPanel #detailBody>.chip{
  color:var(--orange-bright);
  border-color:var(--orange);
}
#detailPanel #detailBody .statRow{
  gap:1px;
  background:var(--v5-panel-line);
  border-color:var(--v5-panel-line);
}
#detailPanel #detailBody .statRow>div{
  background:var(--v5-panel-surface);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
#detailPanel #detailBody .statRow .v{color:var(--v5-panel-ink)}
#detailPanel #detailBody .statRow .t{color:var(--v5-panel-ink-soft)}
#detailPanel>.actions{
  padding:10px 12px;
  border-color:var(--v5-panel-line);
}
#detailPanel .actions .btn{
  min-height:42px;
  padding:9px 15px;
  color:var(--v5-panel-accent);
  background:var(--v5-panel-control);
  border:1px solid rgba(var(--v5-panel-accent-rgb),.68);
  border-radius:10px;
  box-shadow:0 9px 22px rgba(0,0,0,.35),inset 0 0 16px rgba(var(--v5-panel-accent-rgb),.06);
  text-shadow:none;
  transform:none;
}
#detailPanel .actions .btn:hover{
  filter:none;
  color:#fff;
  background-color:rgba(var(--v5-panel-accent-rgb),.08);
  border-color:var(--v5-panel-accent);
  box-shadow:0 10px 26px rgba(0,0,0,.42),0 0 18px rgba(var(--v5-panel-accent-rgb),.12);
  transform:none;
}
#detailPanel .actions .btn:active{
  transform:translateY(1px);
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
#detailPanel .actions .btn.ghost{
  color:var(--v5-panel-ink-soft);
  background:var(--v5-panel-control);
  border-color:var(--v5-panel-line-hot);
}
#detailPanel .actions .btn.ghost:hover{
  color:var(--v5-panel-accent);
  border-color:rgba(var(--v5-panel-accent-rgb),.72);
}
@keyframes v5PanelIn{
  from{opacity:0;transform:translateX(18px)}
  to{opacity:1;transform:translateX(0)}
}
@media (max-width:760px){
  #detailPanel{
    top:56px;
    left:8px;
    right:8px;
    bottom:48px;
    width:auto;
    border-radius:15px;
  }
}
@media (prefers-reduced-motion:reduce){
  #detailPanel{animation:none}
}
@media (prefers-contrast:more){
  #detailPanel{background-image:none;background-color:#030505}
  #detailPanel #detailBody .ph.heroPh,
  #detailPanel #detailBody .scoreBadge,
  #detailPanel #detailBody .statRow>div,
  #detailPanel .hd button,
  #detailPanel .actions .btn{background-image:none;background-color:#030505}
}
/* END V5 / SPOT DETAIL PANEL */

/* ========================================================================== 
   V6 / RESTRAINED TEXT HIERARCHY
   Warm white and soft grey carry the interface. Lime is reserved for scores,
   key statistics, selected states, and primary actions. Orange is reserved
   for difficulty and genuine advisories. Typography and layout are unchanged.
   ========================================================================== */
body{
  --v6-ink:#F2F1EA;
  --v6-ink-soft:#B4B5AD;
  --v6-ink-faint:#747970;
  --v6-key:#A7D66F;
  --v6-key-rgb:167,214,111;
  --v6-warning:#FF9550;
  --v6-warning-rgb:255,149,80;
  --text:var(--v6-ink);
  --text-dim:var(--v6-ink-soft);
  --text-faint:var(--v6-ink-faint);
  color:var(--v6-ink);
}
body[data-mode="dive"]{
  --text:var(--v6-ink);
  --text-dim:var(--v6-ink-soft);
  --text-faint:var(--v6-ink-faint);
}

/* Primary information stays warm white. */
.appname,
.hero h3,
.rrow .nm,
.cond .r b,
.dHead h1,
.accessGroup h6,
.secTl .s b,
.bcard .nm,
.entry .nm,
.setList .si b,
.autoNote span{
  color:var(--v6-ink);
}

/* Supporting copy, labels, coordinates, and utility controls recede to grey. */
#rail button,
.toggle button,
.fchip,
#rankPanel .hd b,
.fpanel h5,
.card h5,
.hero .meta,
.rrow .n,
.lay .sw,
.cond .r,
#mapTag,
.pin label,
#footBar,
#footBar .right span,
.backRow button,
.dHead .loc,
.dHead .desc,
.chip,
.statBar .t,
.statRow .t,
.copyRow span,
.secTl .s,
.dFoot,
.dFoot .right span,
.colHead span,
.bcard .meta,
.tl .month,
.entry .date,
.entry .meta,
.setList .si span,
.autoNote,
.copyBtn,
.setList .ctl{
  color:var(--v6-ink-soft);
}
.copyRow .copyBtn{
  color:var(--v6-ink-soft);
  border-color:rgba(223,218,199,.36);
}

.rrow .n,
.lay .sw,
.pin label,
.ph,
.empty,
.bcard .rm{
  color:var(--v6-ink-faint);
}

/* Key numerical information and selected states receive the single lime cue. */
#rail button.on,
.toggle button.on,
.fchip.on,
.lay .sw.on,
.hero .big,
.rrow .sc,
.score,
.scoreBadge .v,
.statBar .v,
.statRow .v,
.pin.active label,
.coach b,
.badge b,
.btn,
.copyBtn:hover,
.setList .ctl:hover{
  color:var(--v6-key);
}
#coach b{
  color:var(--v6-key);
}
#tHike.on,
#tDive.on{
  color:var(--v6-key);
}

/* Neutral buttons remain neutral until interaction. */
.btn.ghost{
  color:var(--v6-ink-soft);
}
.btn.ghost:hover,
.backRow button:hover{
  color:var(--v6-key);
}

/* Difficulty and warnings are the only orange text states. */
.dHead .diffLine .chip,
#detailPanel #detailBody>.chip,
.rrow .nm .adv{
  color:var(--v6-warning);
}
.dHead .diffLine .chip,
#detailPanel #detailBody>.chip{
  border-color:rgba(var(--v6-warning-rgb),.82);
}

/* Carry the same hierarchy into the V5 pop-out without touching its material. */
#detailPanel{
  --v5-panel-ink:var(--v6-ink);
  --v5-panel-ink-soft:var(--v6-ink-soft);
  --v5-panel-ink-faint:var(--v6-ink-faint);
  --v5-panel-accent:var(--v6-key);
  --v5-panel-accent-rgb:var(--v6-key-rgb);
  --v5-panel-orange:rgba(var(--v6-warning-rgb),.68);
  --v5-panel-orange-bright:var(--v6-warning);
}
body[data-mode="dive"] #detailPanel{
  --v5-panel-accent:var(--v6-key);
  --v5-panel-accent-rgb:var(--v6-key-rgb);
}
#detailPanel .hd b,
#detailPanel #detailBody h2{
  color:var(--v6-ink);
}
#detailPanel #detailBody .loc,
#detailPanel #detailBody .desc,
#detailPanel #detailBody .statRow .t,
#detailPanel #detailBody .scoreBadge .t{
  color:var(--v6-ink-soft);
}
#detailPanel #detailBody .chipWrap .chip,
#detailPanel .actions .btn.ghost,
#detailPanel .hd button{
  color:var(--v6-ink-soft);
}
#detailPanel #detailBody .scoreBadge .v,
#detailPanel #detailBody .statRow .v,
#detailPanel .actions>.btn:not(.ghost){
  color:var(--v6-key);
}
#detailPanel .actions .btn.ghost:hover,
#detailPanel .hd button:hover{
  color:var(--v6-key);
}

/* Keep the detailed trail page faithful to the supplied V6 reference. */
.dHead .diffLine .chip{
  color:var(--v6-warning);
}
.statBar .v{
  color:var(--v6-key);
}
.cond .r span,
.copyRow span,
.secTl .s{
  color:var(--v6-ink-soft);
}
.copyBtn{
  color:var(--v6-ink-soft);
  border-color:rgba(223,218,199,.36);
}
.setList .ctl{
  border-color:rgba(223,218,199,.36);
}
.copyRow .copyBtn:hover{
  color:var(--v6-key);
  border-color:rgba(var(--v6-key-rgb),.72);
}
.entry .date{
  color:var(--v6-ink-soft);
}
.dFoot .right span{
  color:var(--v6-ink-soft);
}

/* END V6 / RESTRAINED TEXT HIERARCHY */



/* ================================================================
   V7 / HANDMADE PHOTO FRAME TRANSPLANT
   Exact masks are embedded from the supplied frame components. Missing
   photography uses a deliberate evidence-safe state instead of a placeholder.
   ================================================================ */
:root{
  --atlas-frame-black:#000000;
  --atlas-frame-opening:#101716;
  --atlas-frame-square-mask:url("../assets/atlas/frame-square-mask.png");
  --atlas-frame-wide2-mask:url("../assets/atlas/frame-wide2-mask.png");
  --atlas-frame-wide3-mask:url("../assets/atlas/frame-wide3-mask.png");
}

.atlas-photo-frame.ph{
  position:relative;
  isolation:isolate;
  container-type:inline-size;
  display:block;
  flex:none;
  height:auto;
  margin:0;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:var(--atlas-frame-black);
  background-image:none;
  color:#050505;
  text-shadow:none;
  filter:none !important;
}
.atlas-photo-frame--square{aspect-ratio:1 / 1}
.atlas-photo-frame--wide2{aspect-ratio:1774 / 887}
.atlas-photo-frame--wide3{aspect-ratio:3 / 2}

.atlas-frame-opening{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  overflow:hidden;
  background-color:var(--atlas-frame-opening);
  background-image:
    linear-gradient(rgba(238,233,220,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(238,233,220,.045) 1px,transparent 1px),
    radial-gradient(circle at 58% 42%,rgba(113,190,208,.10),transparent 56%);
  background-size:12px 12px,12px 12px,auto;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}
.atlas-photo-frame--square .atlas-frame-opening{
  -webkit-mask-image:var(--atlas-frame-square-mask);
  mask-image:var(--atlas-frame-square-mask);
}
.atlas-photo-frame--wide2 .atlas-frame-opening{
  -webkit-mask-image:var(--atlas-frame-wide2-mask);
  mask-image:var(--atlas-frame-wide2-mask);
}
.atlas-photo-frame--wide3 .atlas-frame-opening{
  -webkit-mask-image:var(--atlas-frame-wide3-mask);
  mask-image:var(--atlas-frame-wide3-mask);
}

.atlas-frame-image{
  position:absolute;
  display:block;
  object-fit:cover;
  object-position:50% 50%;
}
.atlas-photo-frame--square .atlas-frame-image{inset:0;width:100%;height:100%}
.atlas-photo-frame--wide2 .atlas-frame-image{left:3.16%;top:5.86%;width:94.31%;height:88.28%}
.atlas-photo-frame--wide3 .atlas-frame-image{left:5.6%;top:6%;width:88.9%;height:87.5%}
.atlas-frame-image:not([src]),.atlas-frame-image[src=""]{display:none}
.atlas-photo-frame.is-populated .atlas-frame-empty{display:none}

.atlas-frame-empty{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  color:rgba(238,233,220,.55);
  font-family:var(--font-interface,ui-monospace,monospace);
  font-weight:600;
  line-height:1.15;
  letter-spacing:.09em;
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
}
.atlas-frame-empty .atlas-icon{
  width:22%;
  max-width:36px;
  height:auto;
  aspect-ratio:1;
  color:rgba(184,215,111,.78);
}
.atlas-photo-frame--square .atlas-frame-empty{
  flex-direction:column;
  font-size:6.5cqw;
  text-align:center;
}
.atlas-photo-frame--wide2 .atlas-frame-empty,
.atlas-photo-frame--wide3 .atlas-frame-empty{
  font-size:2.65cqw;
}

.atlas-visually-hidden{
  position:absolute !important;
  width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Preserve the source layout while respecting each supplied aspect ratio. */
.hero .atlas-photo-frame{width:90px;height:auto}
.rrow .atlas-photo-frame{width:36px;height:auto}
#detailBody .atlas-photo-frame.heroPh{width:100%;height:auto;margin-bottom:10px}
.dHead .atlas-photo-frame{width:100%;height:auto}
.photoWide .atlas-photo-frame{width:100%;height:auto}
.bcard .atlas-photo-frame{width:100%;height:auto;border:0;border-radius:0}
.entry .atlas-photo-frame.eph{width:58px;height:auto}

@media (max-width:760px){
  .photoWide .atlas-photo-frame:last-child{display:none}
}
@media (max-width:480px){
  .hero .atlas-photo-frame{width:78px}
  .photoWide .atlas-photo-frame{display:block}
}
/* END V7 / HANDMADE PHOTO FRAME TRANSPLANT */