/* =============================================================================
   HAWAII ATLAS REDESIGN FROM IMAGES V7
   User-approved Field Folio Seam layout.

   The live satellite map is the large left folio page. The UI material lives
   around it: a graphite navigation spine, attached paper tabs, one stitched
   seam, and a continuous right field ledger. No filter is applied to the map.
   ============================================================================= */

:root{
  --folio-abyss:#070A0A;
  --folio-graphite:#101312;
  --folio-paper:#101312;
  --folio-paper-raised:#171A18;
  --folio-field-white:#F5F0E4;
  --folio-cream:#D8D2C3;
  --folio-muted:#AAA393;
  --folio-faint:#858074;
  --folio-hike:#A7C868;
  --folio-dive:#65B9B8;
  --folio-ochre:#D5A24A;
  --folio-clay:#D86C4B;
  --folio-blueprint:#67AFC8;
  --folio-rule:rgba(216,210,195,.21);
  --folio-rule-soft:rgba(216,210,195,.105);
  --folio-grid:rgba(216,210,195,.043);
  --folio-ledger-w:372px;
  --folio-stitch-w:22px;
  --folio-rail-w:86px;
  --folio-shadow:0 18px 38px -20px rgba(0,0,0,.9),0 3px 10px -6px rgba(0,0,0,.8),inset 0 1px rgba(255,255,255,.045);
  --folio-lift:0 30px 64px -28px rgba(0,0,0,.96),0 10px 22px -13px rgba(0,0,0,.86),inset 0 1px rgba(255,255,255,.06);
  --folio-grid-10:linear-gradient(var(--folio-grid) 1px,transparent 1px),linear-gradient(90deg,var(--folio-grid) 1px,transparent 1px);
  --folio-grid-18:linear-gradient(rgba(216,210,195,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(216,210,195,.06) 1px,transparent 1px);
  --folio-grid-24:linear-gradient(rgba(216,210,195,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(216,210,195,.07) 1px,transparent 1px);
  --folio-stripe:repeating-linear-gradient(135deg,rgba(16,19,18,.07) 0 1.8px,transparent 1.8px 7px);
  --bg:var(--folio-abyss);
  --surface:var(--folio-paper);
  --surface-2:var(--folio-paper-raised);
  --text:var(--folio-field-white);
  --text-dim:var(--folio-muted);
  --accent:var(--folio-hike);
  --accent-ink:#C9E891;
  --cta:#506D34;
}

body[data-mode="dive"]{
  --accent:var(--folio-dive);
  --accent-ink:#91D9D5;
  --cta:#2A7173;
}

html{background:var(--folio-abyss)}
body{
  color:var(--folio-cream);
  background:var(--folio-abyss)!important;
  font-synthesis:none;
}

/* Grain belongs to paper, never to the satellite map. */
body::after{display:none!important}

::selection{color:var(--folio-abyss);background:var(--folio-field-white)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--folio-graphite)}
::-webkit-scrollbar-thumb{border:2px solid var(--folio-graphite);border-radius:0;background:var(--folio-muted)}
::-webkit-scrollbar-thumb:hover{background:var(--folio-field-white)}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--folio-blueprint);
  outline-offset:3px;
}

#shell{
  position:relative;
  z-index:1;
  height:100dvh;
  background:var(--folio-abyss);
}

/* --------------------------------------------------------------------------
   Navigation spine
   -------------------------------------------------------------------------- */

nav#rail{
  width:var(--folio-rail-w);
  padding:15px 9px 12px;
  gap:6px;
  border:0;
  border-right:1px solid rgba(216,210,195,.36);
  border-radius:0;
  background-color:var(--folio-graphite);
  background-image:
    linear-gradient(90deg,transparent 0 calc(100% - 7px),rgba(213,162,74,.24) calc(100% - 7px) calc(100% - 6px),transparent calc(100% - 6px)),
    var(--folio-grid-10);
  background-size:auto,10px 10px,10px 10px;
  box-shadow:15px 0 36px rgba(0,0,0,.42),inset -1px 0 rgba(255,255,255,.025);
  backdrop-filter:none;
}

#rail .logo{
  position:relative;
  width:34px;
  height:34px;
  min-height:34px;
  margin:3px 0 20px;
  border:1px solid rgba(216,210,195,.44);
  border-radius:4px 6px 3px 5px;
  color:transparent;
  background:transparent;
  box-shadow:none;
  transform:none;
}
#rail .logo::before,
#rail .logo::after{
  display:none;
}
#rail .logo img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover}

#rail button{
  width:68px;
  min-height:68px;
  padding:8px 4px 7px;
  gap:7px;
  border:1px solid transparent;
  border-radius:5px 7px 4px 6px;
  color:var(--folio-muted);
  background:transparent;
  box-shadow:none;
  transition:color .2s,background-color .2s,border-color .2s,transform .36s cubic-bezier(.16,1,.3,1);
}
#rail button svg{width:23px;height:23px;stroke:currentColor;filter:none}
#rail button span{font-size:10px;line-height:1.1;letter-spacing:.08em}
#rail button:hover{color:var(--folio-field-white);border-color:var(--folio-rule);background:rgba(245,240,228,.035);transform:translateY(-2px)}
#rail button.on{
  color:var(--accent-ink);
  border-color:rgba(245,240,228,.48);
  background-color:var(--folio-field-white);
  background-image:linear-gradient(112deg,rgba(16,19,18,.04),transparent 56%),var(--folio-grid-10);
  background-size:auto,10px 10px;
  box-shadow:var(--folio-shadow);
}
#rail button.on svg{color:var(--folio-graphite)}
#rail button.on span{color:color-mix(in srgb,var(--accent) 72%,var(--folio-graphite))}

/* Keep the first viewport map-led. The original coach remains available as
   soon as a user focuses or activates the activity switch. */
#coach{display:none}
#modeWrap:focus-within #coach{display:block}

main#stage{height:100dvh;background:var(--folio-abyss)}

/* --------------------------------------------------------------------------
   Field Folio map and bound ledger
   -------------------------------------------------------------------------- */

#view-map{
  overflow:hidden;
  background:var(--folio-abyss);
}

#mapCanvas{
  inset:0 var(--folio-ledger-w) 0 0;
  overflow:hidden;
  border:1px solid rgba(216,210,195,.4);
  border-left:0;
  background:#04111B;
  box-shadow:inset -20px 0 38px rgba(0,0,0,.28);
}

/* Registration ruler frame. This never recolors the tile imagery. */
#mapCanvas::before{
  content:"";
  position:absolute;
  inset:8px;
  z-index:499;
  pointer-events:none;
  border:1px solid rgba(216,210,195,.4);
  background:
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(103,175,200,.42) 39px 40px) top 0 left 0/100% 7px no-repeat,
    repeating-linear-gradient(90deg,transparent 0 199px,rgba(213,162,74,.68) 199px 200px) top 0 left 0/100% 11px no-repeat,
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(103,175,200,.42) 39px 40px) top 0 left 0/7px 100% no-repeat,
    repeating-linear-gradient(0deg,transparent 0 199px,rgba(213,162,74,.68) 199px 200px) top 0 left 0/11px 100% no-repeat;
  opacity:.82;
}
#mapCanvas::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:400;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(7,10,10,.13),transparent 8%,transparent 91%,rgba(7,10,10,.24));
  box-shadow:inset 0 0 24px rgba(0,0,0,.16);
}

.leaflet-pane,.leaflet-top,.leaflet-bottom{z-index:450}
.leaflet-control-container{font-family:var(--font-interface)}

#folioLedger{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  z-index:22;
  display:flex;
  flex-direction:column;
  width:var(--folio-ledger-w);
  min-width:0;
  padding:18px 16px 52px calc(var(--folio-stitch-w) + 14px);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  border:0;
  color:var(--folio-cream);
  background-color:var(--folio-graphite);
  background-image:
    linear-gradient(rgba(216,210,195,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(216,210,195,.045) 1px,transparent 1px);
  background-size:100% 26px,26px 100%;
  box-shadow:-20px 0 40px rgba(0,0,0,.42),inset 1px 0 rgba(255,255,255,.025);
}

.folioStitch{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:var(--folio-stitch-w);
  pointer-events:none;
  border-right:1px solid rgba(216,210,195,.2);
  border-left:1px solid rgba(216,210,195,.14);
  background:
    repeating-linear-gradient(40deg,transparent 0 8px,rgba(216,210,195,.68) 8px 10px,transparent 10px 18px),
    repeating-linear-gradient(140deg,transparent 0 8px,rgba(216,210,195,.58) 8px 10px,transparent 10px 18px),
    linear-gradient(90deg,rgba(0,0,0,.44),transparent 40%,rgba(0,0,0,.32));
  opacity:.9;
}

#folioLedger::after{
  content:"";
  position:fixed;
  top:14px;
  right:12px;
  width:8px;
  height:8px;
  pointer-events:none;
  border-top:1px solid var(--folio-ochre);
  border-left:1px solid var(--folio-ochre);
  box-shadow:4px 4px 0 -3px var(--folio-ochre);
  opacity:.72;
}

/* The source docks become one continuous reading page. */
#folioLedger #leftStack,
#folioLedger #rightStack,
#folioLedger #detailPanel{
  position:static;
  inset:auto;
  width:100%;
  flex:none;
  margin:0;
  transform:none;
  pointer-events:auto;
}
#folioLedger #leftStack{display:flex!important;order:1}
#folioLedger #rightStack{display:flex!important;order:2;min-height:0;margin-top:2px}
#folioLedger #detailPanel{order:3;margin-top:2px}

#folioLedger .fpanel,
#folioLedger #rankPanel,
#folioLedger #detailPanel{
  border:0;
  border-top:1px solid var(--folio-rule);
  border-radius:0;
  color:var(--folio-cream);
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
#folioLedger #leftStack .fpanel{display:flex;width:100%;padding:0;flex-direction:column;background:transparent}
#folioLedger .fpHead,
#folioLedger #rankPanel .hd,
#folioLedger #detailPanel .hd{
  min-height:48px;
  padding:10px 0 9px;
  border:0;
  border-bottom:1px solid var(--folio-rule-soft);
  color:var(--folio-field-white);
  background:transparent;
  box-shadow:none;
}
#folioLedger .fpHead h5,
#folioLedger #rankPanel .hd b,
#folioLedger #detailPanel .hd b{
  color:var(--accent-ink);
  font:600 13px/1.2 var(--font-interface);
  letter-spacing:.08em;
}
#folioLedger .fpHead h5::before,
#folioLedger #rankPanel .hd b::before,
#folioLedger #detailPanel .hd b::before{
  content:"";
  display:inline-block;
  width:9px;
  height:9px;
  margin:0 9px 0 2px;
  border:1px solid currentColor;
  border-radius:55% 44% 48% 52%;
  transform:rotate(9deg);
  vertical-align:1px;
}
#folioLedger .fpBody{width:100%;margin:0;padding:8px 0 10px;border:0}
#folioLedger .cond .r{min-height:29px;padding:5px 2px;border-bottom:1px solid var(--folio-rule-soft);font-size:12px}
#folioLedger .cond .r span{color:var(--folio-muted)}
#folioLedger .cond .r b{color:var(--folio-field-white);font-weight:500;font-variant-numeric:tabular-nums}
#folioLedger .cond .upd{padding-top:8px;color:var(--folio-faint);font-size:11px}
#folioLedger #condOpen{
  width:100%;
  min-height:44px;
  margin-top:8px;
  border:1px solid var(--folio-rule);
  border-radius:4px 6px 3px 5px;
  color:var(--folio-cream);
  background:rgba(245,240,228,.025);
  box-shadow:none;
}

#folioLedger #rankPanel{
  position:static;
  display:flex;
  width:100%;
  min-height:180px;
  max-height:none;
  flex:0 1 auto;
  overflow:visible;
}
#folioLedger #rankBody{padding:6px 0 10px;overflow:visible}
#folioLedger #rankPanel .hd button,
#folioLedger #detailPanel .hd button{
  min-width:44px;
  min-height:44px;
  margin-left:auto;
  border:0;
  border-radius:0;
  color:var(--folio-muted);
  background:transparent;
  box-shadow:none;
}
#folioLedger #rankPanel .hd button:hover,
#folioLedger #detailPanel .hd button:hover{color:var(--folio-field-white);background:rgba(245,240,228,.04)}

#folioLedger .hero,
#folioLedger .rrow{
  min-height:48px;
  margin:0;
  padding:8px 2px;
  border:0;
  border-bottom:1px solid var(--folio-rule-soft);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transition:background-color .2s,color .2s,transform .36s cubic-bezier(.16,1,.3,1);
}
#folioLedger .hero{padding-block:11px}
#folioLedger .hero .atlas-photo-frame,
#folioLedger .rrow .atlas-photo-frame{display:none}
#folioLedger .hero .top>div{
  display:grid;
  width:100%;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:10px;
}
#folioLedger .hero .big{text-align:right}
#folioLedger #detailBody .atlas-photo-frame.is-empty{display:none}
#folioLedger .hero:hover,
#folioLedger .rrow:hover{border-color:var(--folio-rule-soft);background:rgba(245,240,228,.045);box-shadow:none;transform:translateX(3px)}
#folioLedger .hero h3,
#folioLedger .rrow .nm{color:var(--folio-field-white);font-family:var(--font-display);font-weight:400}
#folioLedger .hero .big,
#folioLedger .rrow .sc{color:var(--folio-ochre);font-family:var(--font-numeric);font-variant-numeric:tabular-nums}
#folioLedger .rrow .n{color:var(--folio-ochre)}

/* Leaflet keeps semantic Zoom in and Zoom out labels, while the visible
   marks use the Atlas line system instead of the library's text glyphs. */
#view-map .leaflet-control-zoom a{
  position:relative;
  font-size:0;
  line-height:1;
}
#view-map .leaflet-control-zoom a::before,
#view-map .leaflet-control-zoom-in::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:1.5px;
  border-radius:2px;
  background:currentColor;
  transform:translate(-50%,-50%) rotate(-1deg);
}
#view-map .leaflet-control-zoom-in::after{transform:translate(-50%,-50%) rotate(89deg)}

#folioLedger #rankCollapsed{
  position:static;
  align-self:stretch;
  width:100%;
  min-height:48px;
  border:1px solid var(--folio-rule);
  border-radius:4px 5px 3px 6px;
  background:transparent;
}

#folioLedger #detailPanel{
  display:none;
  max-height:none;
  color:var(--folio-cream);
  background:transparent;
}
#folioLedger #detailPanel.on{display:flex}
#folioLedger #detailPanel::before{display:none}
#folioLedger #detailPanel #detailBody{padding:10px 0 12px;overflow:visible}
#folioLedger #detailPanel #detailBody .ph.heroPh{
  overflow:hidden;
  border:1px solid var(--folio-rule);
  border-radius:2px 5px 3px 4px;
  background:var(--folio-abyss);
}
#folioLedger #detailPanel #detailBody h2{color:var(--folio-field-white);font-size:20px}
#folioLedger #detailPanel #detailBody .desc{color:var(--folio-cream);font-size:15px;line-height:1.48}
#folioLedger #detailPanel #detailBody .statRow{gap:1px;border:1px solid var(--folio-rule);background:var(--folio-rule)}
#folioLedger #detailPanel #detailBody .statRow>div{background:rgba(7,10,10,.62);background-image:var(--folio-grid-10);background-size:10px 10px}
#folioLedger #detailPanel>.actions{padding:10px 0 0;border-top:1px solid var(--folio-rule);background:transparent}

/* Do not hide the ledger when place detail opens. It is one bound page. */
#view-map:has(#detailPanel.on) #folioLedger #rightStack{display:flex!important}
#view-map:has(#detailPanel.on) #folioLedger #rankPanel{max-height:250px;overflow:hidden}
@media (min-width:981px){
  #view-map:has(#detailPanel.on) #layersDock{display:block}
}

/* --------------------------------------------------------------------------
   Map controls and tabs
   -------------------------------------------------------------------------- */

.topbar{
  top:0;
  right:var(--folio-ledger-w);
  left:0;
  padding:10px 18px 0;
  gap:8px;
  align-items:flex-start;
}

.toggle{
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.toggle button{
  position:relative;
  min-width:108px;
  min-height:48px;
  margin-right:3px;
  padding:12px 17px 11px;
  border:1px solid rgba(216,210,195,.34);
  border-bottom-color:rgba(216,210,195,.56);
  border-radius:2px 3px 0 0;
  clip-path:polygon(3px 0,calc(100% - 4px) 0,100% 5px,100% 100%,0 100%,0 3px);
  color:var(--folio-cream);
  background-color:rgba(16,19,18,.94);
  background-image:var(--folio-grid-10);
  background-size:10px 10px;
  box-shadow:var(--folio-shadow);
  font:600 13px/1 var(--font-interface);
  letter-spacing:.08em;
}
.toggle button:last-child{border-right:1px solid rgba(216,210,195,.34)}
.toggle button:hover{color:var(--folio-field-white);background-color:var(--folio-paper-raised)}
.toggle button.on{
  color:var(--folio-graphite);
  border-color:var(--accent);
  background:var(--folio-field-white);
  box-shadow:var(--folio-lift);
}
.toggle button.on::after{
  content:"";
  position:absolute;
  right:9px;
  bottom:7px;
  left:9px;
  height:2px;
  background:var(--accent);
  transform:rotate(-1deg);
}

#layersDock{
  top:10px;
  left:calc((100% - var(--folio-ledger-w))/2);
  width:min(330px,34vw);
  transform:translateX(-50%);
  z-index:24;
}
#layersPanel{
  padding:0;
  border:1px solid rgba(216,210,195,.34);
  border-radius:3px 5px 2px 4px;
  background-color:rgba(16,19,18,.96);
  background-image:var(--folio-grid-10);
  background-size:10px 10px;
  box-shadow:var(--folio-shadow);
}
#layersPanel .fpHead{min-height:48px;padding:10px 13px}
#layersPanel .fpBody{padding:10px 12px 13px;border-top:1px solid var(--folio-rule)}
#layersPanel .lay{grid-template-columns:repeat(2,minmax(0,1fr))}
#layersPanel .lay .sw,
#layersPanel .ovRow{
  min-height:44px;
  border:1px solid var(--folio-rule);
  border-radius:3px 5px 2px 4px;
  background:rgba(7,10,10,.46);
}
#layersPanel .lay .sw.on,
#layersPanel .ovRow.on{color:var(--folio-graphite);border-color:var(--folio-field-white);background:var(--folio-field-white)}

#layersOpenTop{display:none}
#condOpenTop{
  display:none;
  min-height:48px;
  border:1px solid var(--folio-rule);
  border-radius:3px 5px 2px 4px;
  color:var(--folio-cream);
  background:rgba(16,19,18,.94);
  box-shadow:var(--folio-shadow);
}

#coach{
  border:1px solid var(--accent);
  border-radius:4px 6px 3px 5px;
  background-color:var(--folio-graphite);
  background-image:var(--folio-grid-10);
  background-size:10px 10px;
  box-shadow:var(--folio-lift);
}

#footBar{
  right:var(--folio-ledger-w);
  min-height:38px;
  padding:8px 16px;
  border-top:1px solid rgba(216,210,195,.28);
  color:var(--folio-faint);
  background:rgba(7,10,10,.93);
  box-shadow:none;
  backdrop-filter:none;
}
#footBar .lg{color:var(--folio-field-white)}
#footBar .right span{color:var(--folio-muted);font-variant-numeric:tabular-nums}
.badge{
  right:var(--folio-ledger-w);
  bottom:44px;
  left:calc((100% - var(--folio-ledger-w))/2);
  transform:translateX(-50%);
  border:1px solid var(--folio-rule);
  border-radius:3px 5px 2px 4px;
  background:rgba(16,19,18,.9);
  box-shadow:var(--folio-shadow);
}

#advisoryStrip{
  right:calc(var(--folio-ledger-w) + 20px);
  left:20px;
  width:auto;
  max-width:540px;
  border:1px solid var(--folio-clay);
  border-radius:3px 5px 2px 4px;
  background:rgba(16,19,18,.96);
  box-shadow:var(--folio-shadow);
}

#wxPanel{
  top:16px;
  right:16px;
  bottom:16px;
  width:calc(var(--folio-ledger-w) - 32px);
  border:1px solid var(--folio-rule);
  border-radius:3px 5px 2px 4px;
  background-color:var(--folio-graphite);
  background-image:var(--folio-grid-18);
  background-size:18px 18px;
  box-shadow:var(--folio-lift);
  backdrop-filter:none;
}

/* Leaflet chrome stays tactile while the imagery stays photographic. */
.leaflet-control-zoom,
.leaflet-control-layers,
.leaflet-bar,
.leaflet-control-attribution{
  border:1px solid rgba(216,210,195,.34)!important;
  border-radius:3px 5px 2px 4px!important;
  background:rgba(16,19,18,.92)!important;
  box-shadow:var(--folio-shadow)!important;
}
.leaflet-bar a,.leaflet-control-zoom a{
  min-width:44px!important;
  min-height:44px!important;
  line-height:44px!important;
  color:var(--folio-field-white)!important;
  border-color:var(--folio-rule)!important;
  background:rgba(16,19,18,.92)!important;
}
.leaflet-control-attribution{color:var(--folio-muted)!important}
.leaflet-control-attribution a{
  color:var(--folio-field-white)!important;
  text-decoration:underline!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:2px!important;
}
.pin{background:var(--folio-abyss);border-color:var(--accent);box-shadow:0 0 0 3px rgba(7,10,10,.82)}
.pin:hover,.pin.sel{background:var(--folio-field-white);border-color:var(--accent);box-shadow:0 0 0 4px rgba(7,10,10,.78)}
.pin .plbl{
  border:1px solid rgba(216,210,195,.35);
  border-radius:3px 5px 2px 4px;
  color:var(--folio-field-white);
  background:rgba(16,19,18,.94);
  box-shadow:var(--folio-shadow);
}

/* --------------------------------------------------------------------------
   Shared paper controls and non-map views
   -------------------------------------------------------------------------- */

.btn,.copyBtn,.setList .ctl,.subBack,.detailBackRow>button,.backRow button,.tool-button,.fc-button{
  min-height:44px;
  border:1px solid var(--folio-rule);
  border-radius:3px 5px 2px 4px;
  color:var(--folio-cream);
  background:rgba(16,19,18,.84);
  box-shadow:var(--folio-shadow);
}
.btn:hover,.copyBtn:hover,.setList .ctl:hover,.subBack:hover,.detailBackRow>button:hover,.backRow button:hover{
  color:var(--folio-field-white);
  border-color:var(--accent);
  background:var(--folio-paper-raised);
  transform:translateY(-2px);
}
.btn:not(.ghost){color:var(--folio-field-white);border-color:var(--accent);background:var(--cta)}
.btn.ghost{color:var(--folio-cream);background:rgba(7,10,10,.52)}
.chip{
  border:1px solid var(--folio-rule);
  border-radius:3px 5px 2px 4px;
  color:var(--folio-muted);
  background:rgba(16,19,18,.72);
  box-shadow:none;
}

body .view.scroll,
body[data-mode="dive"] .view.scroll,
body[data-mode="hike"] .view.scroll{
  background-color:var(--folio-abyss);
  background-image:
    radial-gradient(circle at 82% 5%,rgba(103,175,200,.045),transparent 32%),
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(216,210,195,.055) 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(216,210,195,.055) 39px 40px),
    repeating-linear-gradient(0deg,transparent 0 199px,rgba(216,210,195,.075) 199px 200px),
    repeating-linear-gradient(90deg,transparent 0 199px,rgba(216,210,195,.075) 199px 200px);
  background-size:auto;
}

.pageWrap{max-width:1320px;padding:30px 42px 110px}
.colHead{
  align-items:flex-end;
  min-height:112px;
  margin-bottom:28px;
  padding:22px 26px 18px;
  border:1px solid var(--folio-rule);
  border-radius:4px 7px 3px 6px;
  background-color:rgba(16,19,18,.88);
  background-image:var(--folio-grid-24);
  background-size:24px 24px;
  box-shadow:var(--folio-shadow);
}
.colHead h1{color:var(--folio-field-white);font-family:var(--font-display);font-size:clamp(34px,4vw,58px);font-weight:400;letter-spacing:-.025em}
.colHead>span{color:var(--folio-muted)}

.bcard,.entry,.setList .si,.card{
  border:1px solid var(--folio-rule);
  border-radius:4px 7px 3px 6px;
  background-color:rgba(16,19,18,.9);
  background-image:var(--folio-grid-10);
  background-size:10px 10px;
  box-shadow:var(--folio-shadow);
}
.bcard:hover,.entry:hover,.setList .si:hover{border-color:var(--accent);box-shadow:var(--folio-lift);transform:translateY(-3px)}

.entry{position:relative}
.entry::before{
  content:"";
  position:absolute;
  top:-8px;
  bottom:-8px;
  left:-18px;
  width:10px;
  background:repeating-linear-gradient(40deg,transparent 0 5px,var(--folio-rule) 5px 6px,transparent 6px 11px);
}
.entry .date{color:var(--folio-blueprint)}
.entry .nm,.bcard h3{color:var(--folio-field-white);font-family:var(--font-display)}

.settingsLayout{grid-template-columns:minmax(0,1fr) minmax(300px,390px);gap:28px}
.settingsFieldCard{
  border:1px solid var(--folio-rule);
  border-radius:4px 7px 3px 6px;
  background-color:rgba(16,19,18,.94);
  background-image:var(--folio-grid-24);
  background-size:24px 24px;
  box-shadow:var(--folio-shadow);
}
.ridgeReefIllustration{
  display:block;
  width:calc(100% + 2px);
  height:auto;
  margin:-1px -1px 20px;
  border-bottom:1px solid var(--folio-rule);
  background:var(--folio-graphite);
}

/* Full detail field dividers and measured content. */
#view-detail .pageWrap{max-width:1320px;padding:28px 42px 110px}
.detailPrimaryNav{
  top:0;
  margin:0 -16px;
  padding:12px 16px 10px;
  border-bottom:1px solid var(--folio-rule);
  background:rgba(7,10,10,.95);
  box-shadow:0 16px 30px rgba(0,0,0,.32);
  backdrop-filter:none;
}
.detailTabs{gap:5px}
.detailTabs>[role="tab"]{
  min-height:46px;
  padding:11px 18px;
  border:1px solid var(--folio-rule);
  border-radius:3px 5px 0 0;
  clip-path:polygon(3px 0,calc(100% - 4px) 0,100% 5px,100% 100%,0 100%,0 3px);
  color:var(--folio-cream);
  background:var(--folio-graphite);
  box-shadow:none;
}
.detailTabs>[role="tab"][aria-selected="true"]{color:var(--folio-graphite);border-color:var(--folio-field-white);background:var(--folio-field-white);transform:translateY(-3px)}
.detailOverview{
  border:1px solid var(--folio-rule);
  border-radius:4px 7px 3px 6px;
  background-color:rgba(16,19,18,.9);
  background-image:var(--folio-grid-18);
  background-size:18px 18px;
  box-shadow:var(--folio-shadow);
}
.detailOverviewCopy h1{color:var(--folio-field-white);font-family:var(--font-display);font-weight:400}
.detailOverviewCopy p,.detailStory{max-width:72ch;color:var(--folio-cream);font-family:var(--font-body)}
.profileHost,.chartPh,.elev-wrap,.elev-chart,.wxSpark,.atlas-cov-drop{
  border-color:var(--folio-rule)!important;
  border-radius:4px 7px 3px 6px!important;
  background-color:rgba(7,10,10,.76)!important;
  background-image:var(--folio-grid-24)!important;
  background-size:24px 24px!important;
}

/* Context photography remains explicitly labeled and is never map evidence. */
/* Scrapbook photo band on the collection pages, ported verbatim from the
   V5 prototype (css/atlas-redesign-images-v5.css). Handwritten captions use
   the vendored JR Hand face via --font-hand. */
.collectionPhotoBand{
  display:grid;
  grid-template-columns:1.25fr .85fr .75fr;
  gap:10px;
  height:190px;
  margin:12px 0 28px;
}
.collectionPhotoBand figure{
  position:relative;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(242,237,223,.42);
  border-radius:14px 9px 16px 11px;
  background-image:var(--field-photo);
  background-position:center;
  background-size:cover;
  filter:saturate(.7) contrast(1.06);
  box-shadow:0 22px 52px -28px rgba(0,0,0,.92),0 7px 18px -12px rgba(0,0,0,.76);
}
.collectionPhotoBand figure:nth-child(2){transform:rotate(.8deg) translateY(12px)}
.collectionPhotoBand figure:nth-child(3){transform:rotate(-.7deg) translateY(-7px)}
.collectionPhotoBand figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(13,16,16,.78))}
.collectionPhotoBand figcaption{position:absolute;z-index:1;left:12px;bottom:9px;font-family:var(--font-hand);font-size:16px;color:#F2EDDF}
@media (max-width:900px){
  .collectionPhotoBand{height:152px;grid-template-columns:1.4fr .9fr}
  .collectionPhotoBand figure:nth-child(3){display:none}
}

.field-context-photo{
  position:relative;
  overflow:hidden;
  min-height:240px;
  margin:0 0 30px;
  border:1px solid var(--folio-rule);
  border-radius:4px 7px 3px 6px;
  background:var(--folio-graphite);
  box-shadow:var(--folio-lift);
}
.field-context-photo img{display:block;width:100%;height:clamp(240px,34vw,430px);object-fit:cover}
.field-context-photo figcaption{
  position:absolute;
  right:12px;
  bottom:12px;
  max-width:calc(100% - 24px);
  padding:8px 10px;
  border:1px solid var(--folio-rule);
  color:var(--folio-cream);
  background:rgba(7,10,10,.88);
  font:500 11px/1.35 var(--font-interface);
  letter-spacing:.04em;
}
.field-source-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.field-source-grid figure{margin:0;border:1px solid var(--folio-rule);background:var(--folio-abyss)}
.field-source-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.field-source-grid figcaption{padding:7px 8px;color:var(--folio-muted);font:500 10px/1.35 var(--font-interface)}

/* --------------------------------------------------------------------------
   Responsive folio
   -------------------------------------------------------------------------- */

@media (max-width:1180px){
  :root{--folio-ledger-w:330px;--folio-rail-w:78px}
  nav#rail{padding-inline:6px}
  #rail button{width:65px}
  #folioLedger{padding-right:12px;padding-left:calc(var(--folio-stitch-w) + 11px)}
  .toggle button{min-width:92px;padding-inline:13px}
  #layersDock{width:270px}
}

@media (max-width:980px){
  :root{--folio-ledger-w:0px}
  #mapCanvas{right:0}
  .topbar{right:0}
  #layersDock{left:50%}
  #view-map:has(#detailPanel.on) #layersDock:not(.mobile-open){display:none!important}
  #footBar{right:0}
  .badge{right:auto;left:50%}
  #folioLedger{
    top:auto;
    right:10px;
    bottom:10px;
    left:10px;
    width:auto;
    height:min(48vh,530px);
    padding:24px 16px 14px;
    border:1px solid var(--folio-rule);
    border-radius:6px 8px 4px 7px;
    box-shadow:var(--folio-lift);
  }
  .folioStitch{
    top:0;
    right:0;
    bottom:auto;
    left:0;
    width:auto;
    height:17px;
    border:0;
    border-bottom:1px solid var(--folio-rule);
    background:
      repeating-linear-gradient(40deg,transparent 0 8px,rgba(216,210,195,.62) 8px 10px,transparent 10px 18px),
      repeating-linear-gradient(140deg,transparent 0 8px,rgba(216,210,195,.52) 8px 10px,transparent 10px 18px),
      linear-gradient(rgba(0,0,0,.32),transparent);
  }
  #folioLedger::after{display:none}
  #folioLedger #leftStack{display:flex!important}
  #folioLedger #rightStack{display:flex!important}
  #folioLedger #rankPanel{height:auto;min-height:190px;max-height:none}
  #folioLedger #condOpen{min-height:44px}
  #folioLedger #detailPanel{inset:auto;width:100%;max-height:none}
  #view-map:has(#detailPanel.on) #folioLedger #leftStack{display:none!important}
  #view-map:has(#detailPanel.on) #folioLedger #rankPanel{display:none!important}
  #view-map:has(#detailPanel.on) #folioLedger{height:min(68vh,670px)}
  #advisoryStrip{right:16px;left:16px;max-width:none}
  #wxPanel{right:10px;bottom:10px;left:10px;width:auto}
  .settingsLayout{grid-template-columns:1fr}
}

@media (max-width:760px){
  #shell{height:100%}
  nav#rail{
    width:100%;
    height:72px;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom));
    border-top:1px solid var(--folio-rule);
    border-right:0;
    background-position:0 0;
    box-shadow:0 -14px 34px rgba(0,0,0,.64);
  }
  #rail .logo,#rail .spacer{display:none}
  #rail button{width:auto;min-width:70px;min-height:54px;padding:5px 8px}
  #rail button:hover{transform:none}
  #rail button svg{width:20px;height:20px}
  main#stage{height:calc(100dvh - 72px)}
  #mapCanvas{inset:0}
  #mapCanvas::before{inset:5px}
  .topbar{padding:8px 8px 0;gap:5px}
  .toggle button{min-width:74px;min-height:44px;padding:10px 9px;font-size:11px}
  #layersOpenTop{display:block;margin-left:auto;min-width:44px;min-height:44px;padding:8px 10px}
  #condOpenTop{display:block;min-width:44px;min-height:44px;padding:8px 10px}
  #layersDock{display:none}
  #layersDock.mobile-open{
    display:block;
    top:58px;
    right:8px;
    left:8px;
    width:auto;
    max-width:390px;
    max-height:calc(100% - 148px);
    margin-left:auto;
    transform:none;
  }
  #layersDock.mobile-open #layersPanel{display:flex;max-height:calc(100dvh - 166px);overflow:auto}
  #folioLedger{right:8px;bottom:8px;left:8px;height:min(45vh,470px);padding:23px 13px 12px}
  #folioLedger .fpHead,#folioLedger #rankPanel .hd,#folioLedger #detailPanel .hd{min-height:44px;padding-block:8px}
  #folioLedger .cond .r{min-height:27px;padding-block:4px}
  #folioLedger .hero,#folioLedger .rrow{min-height:44px}
  #footBar,.badge{display:none}
  #wxPanel{top:54px;right:8px;bottom:8px;left:8px;width:auto;border-radius:5px 7px 4px 6px}
  .pageWrap,#view-detail .pageWrap{padding:18px 15px calc(112px + env(safe-area-inset-bottom))}
  .colHead{min-height:90px;margin-bottom:20px;padding:17px 18px 15px}
  .colHead h1{font-size:34px}
  .detailPrimaryNav{margin-inline:-15px;padding-inline:15px}
  .detailTabs>[role="tab"]{padding-inline:15px}
  .detailOverview{padding:26px 18px}
  .field-context-photo img{height:250px}
  .field-source-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:520px){
  #folioLedger{height:min(43vh,410px)}
  .toggle button{min-width:66px;padding-inline:7px}
  #layersOpenTop,#condOpenTop{font-size:10px;padding-inline:7px}
  .field-source-grid{grid-template-columns:1fr}
  .detailTabs{gap:3px}
  .detailTabs>[role="tab"]{padding-inline:13px;font-size:11px}
}

@media (max-width:350px){
  .topbar{padding-inline:5px;gap:3px}
  .toggle button{min-width:58px;padding-inline:5px;font-size:10px}
  #layersOpenTop,#condOpenTop{padding-inline:6px;font-size:9px}
  #folioLedger{right:5px;bottom:5px;left:5px;padding-inline:10px}
}

@media (prefers-reduced-motion:no-preference){
  #folioLedger{transition:box-shadow .42s cubic-bezier(.16,1,.3,1)}
  .folio-ledger-enter{animation:folio-bind-in .64s cubic-bezier(.16,1,.3,1) both}
  @keyframes folio-bind-in{from{clip-path:inset(0 0 0 100%);filter:blur(5px);box-shadow:none}to{clip-path:inset(0);filter:blur(0);box-shadow:var(--folio-lift)}}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media (prefers-contrast:more){
  :root{--folio-cream:#F5F0E4;--folio-muted:#D8D2C3;--folio-rule:rgba(245,240,228,.48);--folio-rule-soft:rgba(245,240,228,.27)}
  #folioLedger{background-image:linear-gradient(rgba(245,240,228,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(245,240,228,.09) 1px,transparent 1px)}
}

@media (forced-colors:active){
  *{background-image:none!important;box-shadow:none!important;filter:none!important;clip-path:none!important}
  #mapCanvas::before,#mapCanvas::after,.folioStitch{display:none!important}
  #folioLedger{border:1px solid CanvasText}
}

/* --------------------------------------------------------------------------
   Authored field-symbol integration
   -------------------------------------------------------------------------- */

.atlas-icon{
  display:block;
  width:24px;
  height:24px;
  flex:0 0 auto;
  overflow:visible;
  color:currentColor;
}

:where(button[aria-pressed="true"],.is-selected,.is-loading) .atlas-icon{
  --atlas-icon-cell:var(--folio-field-white);
  --atlas-icon-frame:var(--folio-field-white);
  --atlas-icon-mark:var(--folio-graphite);
  --atlas-icon-glyph-fill:var(--folio-graphite);
  --atlas-icon-trace-opacity:.22;
}

:where(#rail button.on,.toggle button.on,#layersPanel .sw.on,#layersPanel .ovRow.on) .atlas-icon{
  --atlas-icon-cell:var(--folio-graphite);
  --atlas-icon-frame:var(--folio-graphite);
  --atlas-icon-mark:var(--folio-field-white);
  --atlas-icon-glyph-fill:var(--folio-field-white);
}

.is-loading .atlas-icon{--atlas-icon-spinner-animation:atlas-icon-spin 900ms linear infinite}
button:disabled .atlas-icon{opacity:.48}

.btn,
.setList .ctl,
#condOpen,
#rankCollapsed,
#wxRefresh,
#fullBack,
.subBack,
.logf-add,
#modalSave{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.btn .atlas-icon,
.setList .ctl .atlas-icon,
#condOpen .atlas-icon,
#rankCollapsed .atlas-icon,
#wxRefresh .atlas-icon,
#fullBack .atlas-icon,
.subBack .atlas-icon,
.logf-add .atlas-icon,
#modalSave .atlas-icon{width:21px;height:21px}

#rail button .atlas-icon{width:24px;height:24px;stroke:none}

.toggle button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.toggle button .atlas-icon{width:22px;height:22px}

#layersOpenTop,
#condOpenTop{
  align-items:center;
  justify-content:center;
  gap:7px;
}
#layersOpenTop.mobile-open,
#condOpenTop.mobile-open{display:flex}
#layersOpenTop .atlas-icon,
#condOpenTop .atlas-icon{width:21px;height:21px}

#folioLedger .fpHead h5{
  display:flex;
  align-items:center;
  gap:8px;
}
#folioLedger .fpHead h5::before{display:none}
#folioLedger .fpHead .atlas-icon{width:22px;height:22px}

#layersPanel .lay .sw{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  text-align:left;
}
#layersPanel .ovRow{
  display:grid;
  grid-template-columns:22px minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  text-align:left;
}
#layersPanel :is(.sw,.ovRow) .atlas-icon{width:20px;height:20px}

:is(#detailClose,#wxClose,#modalClose,.flyover__close,.logf-remove){
  display:grid;
  place-items:center;
}
:is(#detailClose,#wxClose,#modalClose,.flyover__close,.logf-remove) .atlas-icon{width:22px;height:22px}

.emptySymbol{
  display:grid;
  place-items:center;
  margin:0 auto 14px;
  color:var(--accent);
}
.emptySymbol .atlas-icon{width:56px;height:56px}

.settingsMainColumn{display:flex;min-width:0;flex-direction:column;gap:24px}
.setList .ctl{min-width:112px}

.fieldSymbolKey{
  padding:22px;
  border:1px solid var(--folio-rule);
  border-radius:4px 7px 3px 6px;
  color:var(--folio-cream);
  background-color:rgba(16,19,18,.9);
  background-image:var(--folio-grid-10);
  background-size:10px 10px;
  box-shadow:var(--folio-shadow);
}
.fieldSymbolKey__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}
.fieldSymbolKey__head h2{
  margin:0 0 6px;
  color:var(--folio-field-white);
  font:400 26px/1.1 var(--font-display);
  letter-spacing:-.02em;
}
.fieldSymbolKey__head p{max-width:62ch;margin:0;color:var(--folio-muted);font-family:var(--font-body);line-height:1.5}
.fieldSymbolKey__head>.atlas-icon{width:34px;height:34px;color:var(--folio-blueprint)}
.fieldSymbolKey__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:4px;
}
.fieldSymbolKey__item{
  min-width:0;
  min-height:74px;
  padding:8px 6px;
  border:1px solid transparent;
  border-radius:3px 5px 2px 4px;
  color:var(--folio-muted);
  background:transparent;
  box-shadow:none;
}
.fieldSymbolKey__item .atlas-icon{width:30px;height:30px}
.fieldSymbolKey__item>span{
  max-width:100%;
  color:inherit;
  font:600 10px/1.2 var(--font-interface);
  letter-spacing:.035em;
  overflow-wrap:anywhere;
}
.fieldSymbolKey__item:hover{color:var(--folio-field-white);border-color:var(--folio-rule);background:rgba(245,240,228,.035);transform:translateY(-2px)}
.fieldSymbolKey__item[aria-pressed="true"]{color:var(--accent-ink);border-color:var(--accent);background:rgba(245,240,228,.055)}
.fieldSymbolKey__status{
  min-height:1.5em;
  max-width:70ch;
  margin:16px 0 0;
  padding-top:12px;
  border-top:1px solid var(--folio-rule-soft);
  color:var(--folio-cream);
  font-family:var(--font-body);
  line-height:1.5;
}

.subRow .arr .atlas-icon,
.linkRow :is(.pl,.ext) .atlas-icon,
.flyoverLaunch__arrow .atlas-icon,
.flyoverLaunch__explore .atlas-icon{width:19px;height:19px}
.linkRow .pl,.linkRow .ext{display:grid;place-items:center}
.linkRow .pl{color:var(--accent)}
.linkRow .ext{color:var(--folio-muted)}

.flyoverLaunch__glyph{border:0;background:transparent}
.flyoverLaunch__glyph .atlas-icon{width:25px;height:25px}
.flyover__hint .atlas-icon{width:21px;height:21px;color:var(--accent)}
.flyover__play{width:auto!important;min-width:108px!important;padding-inline:14px!important}
.flyover__playText{display:inline!important}
.flyover__spinner{
  width:24px;
  height:24px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  animation:none;
}
.flyover__spinner .atlas-icon{width:24px;height:24px;color:var(--accent)}
.flyover__note.is-loading .atlas-icon{--atlas-icon-spinner-animation:atlas-icon-spin 900ms linear infinite}

.atlas-wreck__mark{
  width:30px;
  height:30px;
  border:0;
  border-radius:0;
  color:var(--accent);
  background:transparent;
  box-shadow:none;
}
.atlas-wreck__mark .atlas-icon{width:30px;height:30px}

.logf-remove .atlas-icon{width:20px;height:20px}

/* --------------------------------------------------------------------------
   Finish-review corrections
   -------------------------------------------------------------------------- */

/* Field measurements stay mechanically monospaced. The slab is reserved for
   place names and display hierarchy. */
:root{
  --font-numeric:"DM Mono","IBM Plex Mono",ui-monospace,monospace;
  --font-num:var(--font-numeric);
}
#folioLedger .cond .r b,
#folioLedger .cond .upd,
#folioLedger .rrow .n,
#folioLedger .rrow .sc,
#rankProgress,
#footBar .right,
.score,.scoreBadge .v,.statRow .v,.statBar .v,.collectionScore,.detailFactRows b{
  font-family:var(--font-numeric);
  font-variant-numeric:tabular-nums;
}

/* Selected paper controls use dark graphite type at AA contrast. Lichen and
   sea glass remain as the hand-drawn underline and state rule. */
#tHike.on,#tDive.on,.toggle button.on,
#rail button.on,#rail button.on span{
  color:var(--folio-graphite);
}
#tHike.on .atlas-icon,
#tDive.on .atlas-icon,
#rail button.on .atlas-icon{
  color:var(--folio-graphite);
  --atlas-icon-cell:transparent;
  --atlas-icon-frame:var(--folio-graphite);
  --atlas-icon-mark:var(--folio-graphite);
  --atlas-icon-glyph-fill:transparent;
}

/* Real paper grain belongs to the interface binding, never the satellite map. */
nav#rail{
  background-image:
    linear-gradient(90deg,transparent 0 calc(100% - 7px),rgba(213,162,74,.24) calc(100% - 7px) calc(100% - 6px),transparent calc(100% - 6px)),
    var(--folio-grid-10),
    linear-gradient(rgba(1,4,3,.92),rgba(1,4,3,.92)),
    url("../assets/textures/field-paper-grain.png");
  background-size:auto,10px 10px,10px 10px,auto,256px 256px;
  background-blend-mode:normal;
}
#folioLedger{
  background-image:
    linear-gradient(rgba(216,210,195,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(216,210,195,.045) 1px,transparent 1px),
    linear-gradient(rgba(1,4,3,.92),rgba(1,4,3,.92)),
    url("../assets/textures/field-paper-grain.png");
  background-size:100% 26px,26px 100%,auto,256px 256px;
  background-blend-mode:normal;
  box-shadow:-26px 0 52px rgba(0,0,0,.56),-3px 0 0 rgba(216,210,195,.08),inset 2px 0 rgba(255,255,255,.04);
}
.folioStitch{
  box-shadow:inset -4px 0 9px rgba(0,0,0,.55),inset 2px 0 rgba(245,240,228,.055),-7px 0 16px rgba(0,0,0,.3);
}
.toggle button:not(.on),#layersPanel,.fieldSymbolKey{
  background-image:var(--folio-grid-10),linear-gradient(rgba(1,4,3,.92),rgba(1,4,3,.92)),url("../assets/textures/field-paper-grain.png");
  background-size:10px 10px,10px 10px,auto,256px 256px;
  background-blend-mode:normal;
}
.toggle button.on,#rail button.on{
  background-image:
    linear-gradient(112deg,rgba(16,19,18,.045),transparent 56%),
    var(--folio-grid-10),
    url("../assets/textures/field-paper-grain.png");
  background-size:auto,10px 10px,10px 10px,256px 256px;
  background-blend-mode:normal,normal,normal,soft-light;
}
/* The same selected-paper hatching marks every "on" surface: an inset
   plate that stops short of the edges. isolation keeps the negative-z
   overlay above the button's own fill but under its icon and label. */
#rail button.on,
.toggle button.on,
#layersPanel .lay .sw.on,
#layersPanel .ovRow.on,
.detailTabs>[role="tab"][aria-selected="true"]{
  position:relative;
  isolation:isolate;
}
#rail button.on::before,
.toggle button.on::before,
#layersPanel .lay .sw.on::before,
#layersPanel .ovRow.on::before,
.detailTabs>[role="tab"][aria-selected="true"]::before{
  content:"";
  position:absolute;
  inset:4px;
  z-index:-1;
  pointer-events:none;
  border-radius:3px;
  background:var(--folio-stripe);
}

/* The approved ledger is a compact field table: conditions, five ranked
   places, then the selected-place plate share one desktop viewport. */
#folioLedger .fpHead,
#folioLedger #rankPanel .hd,
#folioLedger #detailPanel .hd{min-height:44px;padding-block:7px}
#folioLedger .fpBody{padding-block:5px 7px}
#folioLedger .cond .r{min-height:25px;padding-block:3px;font-size:11px}
#folioLedger .cond .upd{padding-top:5px;font-size:10px}
#folioLedger #condOpen{min-height:44px;margin-top:6px}
#folioLedger #rankPanel{min-height:0}
#folioLedger #rankBody{padding-block:3px 6px}
#folioLedger .rrow{min-height:44px;padding:5px 2px;gap:8px}
#folioLedger .rrow.top-ranked{border-top:1px solid var(--folio-rule-soft)}
#folioLedger .rrow .n{width:17px;font-size:11px}
#folioLedger .rrow .nm{font-size:12px;line-height:1.12}
#folioLedger .rrow .sc{font-size:16px}
#folioLedger #detailPanel #detailBody{padding-top:7px}
#view-map:has(#detailPanel.on) #folioLedger #rankPanel{max-height:252px}

@media (min-width:981px) and (hover:hover) and (pointer:fine){
  /* Keep the approved first-viewport reading order intact when a place is
     selected: conditions, five ranked places, spot data, then its actions. */
  #folioLedger{padding-top:12px;padding-bottom:12px}
  #folioLedger .fpHead,
  #folioLedger #rankPanel .hd,
  #folioLedger #detailPanel .hd{min-height:36px;padding-block:4px}
  #folioLedger #leftStack .fpHead{min-height:44px}
  #folioLedger .fpBody{padding-block:2px 4px}
  #folioLedger .cond .r{min-height:21px;padding-block:2px;line-height:1.15}
  #folioLedger .cond .upd{padding-top:3px;line-height:1.15}
  #folioLedger #condOpen{min-height:44px;margin-top:4px}
  #folioLedger #rankBody{padding-block:1px 3px}
  #folioLedger .rrow{min-height:44px;padding-block:3px}
  #folioLedger #detailPanel #detailBody{padding-block:4px 6px}
  #folioLedger #detailPanel #detailBody h2{margin-bottom:2px;font-size:18px;line-height:1.14}
  #folioLedger #detailPanel #detailBody .loc{margin-bottom:4px;font-size:11px;line-height:1.35}
  #folioLedger #detailPanel #detailBody .chip{display:none}
  #folioLedger #detailPanel #detailBody .desc{
    display:-webkit-box;
    margin-block:5px 7px;
    overflow:hidden;
    font-size:13px;
    line-height:1.36;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  #folioLedger #detailPanel #detailBody .statRow{
    grid-template-columns:repeat(4,minmax(0,1fr));
    margin-block:6px;
  }
  #folioLedger #detailPanel #detailBody .statRow>div{min-height:48px;padding:4px 3px}
  #folioLedger #detailPanel #detailBody .statRow .v{padding:0;font-size:12px}
  #folioLedger #detailPanel #detailBody .statRow .t{padding:0;font-size:10px;line-height:1.2}
  #folioLedger #detailPanel #detailBody .chipWrap{display:none}
  #folioLedger #detailPanel #detailBody .flyoverLaunch{display:none}
  #folioLedger #detailPanel>.actions{gap:5px;padding-top:6px}
  #folioLedger #detailPanel>.actions .row2{gap:5px}
  #folioLedger #detailPanel>.actions .btn{min-height:44px;padding-block:5px}
  #view-map:has(#detailPanel.on) #folioLedger #rankPanel{max-height:264px}
}

@media (min-width:981px) and (pointer:coarse),
       (min-width:981px) and (hover:none){
  #folioLedger #condOpen,
  #folioLedger .rrow,
  #folioLedger #detailPanel>.actions .btn{min-height:44px}
  #folioLedger #leftStack .fpHead{min-height:44px}
}

@media (max-width:760px){
  .toggle button{min-width:84px}
  #layersOpenTop,#condOpenTop{display:flex}
  .fieldSymbolKey{padding:18px 14px}
  .fieldSymbolKey__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width:520px){
  #layersOpenTop>span,#condOpenTop>span{display:none}
  .fieldSymbolKey__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fieldSymbolKey__item{min-height:70px;padding-inline:3px}
}

@media (max-width:350px){
  .toggle button{min-width:78px;gap:4px;font-size:9px}
  .toggle button .atlas-icon{width:19px;height:19px}
}

/* --------------------------------------------------------------------------
   TODAY page: ranked hikes, ranked dives, and the island's measured weather
   in three ledger columns; one tabbed column at a time on small screens.
   -------------------------------------------------------------------------- */

#view-today .todayTabs{display:none}
.todayGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  align-items:start;
}
.todayCol{min-width:0}
.todayCol h2{
  margin:0 0 12px;
  padding-bottom:9px;
  border-bottom:1px solid var(--folio-rule-soft);
  font:600 13px/1.2 var(--font-interface);
  letter-spacing:.08em;
}
.todayCol[data-col="hikes"] h2{color:#C9E891}
.todayCol[data-col="dives"] h2{color:#91D9D5}
.todayCol[data-col="weather"] h2{color:var(--folio-cream)}

.todayHero{margin-bottom:14px}
.todayHero .todayHeroPh{margin-bottom:10px}
.todayHeroName{display:flex;flex-direction:column;gap:3px;margin:2px 0 12px}
.todayHeroName b{
  color:var(--folio-field-white);
  font:400 19px/1.15 var(--font-display);
}
.todayHeroName span{color:var(--folio-muted);font:400 11px/1.3 var(--font-interface);letter-spacing:.05em}

.todayList{display:flex;flex-direction:column}
.todayRow{border-bottom:1px solid var(--folio-rule-soft)}
.todayRowHead{
  display:grid;
  grid-template-columns:20px 46px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  width:100%;
  min-height:58px;
  padding:6px 4px;
  border:0;
  border-radius:0;
  text-align:left;
  color:var(--folio-cream);
  background:transparent;
  box-shadow:none;
  transition:background-color .2s,transform .36s cubic-bezier(.16,1,.3,1);
}
.todayRowHead:hover{background:rgba(245,240,228,.045);transform:translateX(3px)}
.todayRowHead .n{color:var(--folio-ochre);font:500 11px/1 var(--font-numeric)}
.todayRowHead .todayThumb{width:46px;height:46px;margin:0}
.todayRowHead .todayThumb .atlas-frame-image{width:100%;height:100%;object-fit:cover}
.todayRowHead .nm{
  color:var(--folio-field-white);
  font:400 13.5px/1.15 var(--font-display);
  overflow:hidden;
  text-overflow:ellipsis;
}
.todayRowHead .sc{
  color:var(--folio-ochre);
  font:500 16px/1 var(--font-numeric);
  font-variant-numeric:tabular-nums;
}
.todayRowBody{padding:2px 4px 14px 76px}
.todayRow.open .todayRowHead{background:rgba(245,240,228,.03)}
.todayDelta{color:var(--folio-ochre)}

#todayWeather{display:flex;flex-direction:column;gap:14px}

/* Desktop: each column keeps its own scroll so the three lists stay bound. */
@media (min-width:901px){
  .todayCol{max-height:calc(100dvh - 200px);overflow-y:auto;padding-right:4px}
  .todayCol h2{position:sticky;top:0;z-index:1;background:var(--bg)}
}

/* Mobile: tabs choose one column at a time. */
@media (max-width:900px){
  #view-today .todayTabs{display:flex;gap:8px;margin:0 0 16px}
  #view-today .todayTabs [role="tab"]{
    flex:1 1 0;
    min-height:44px;
    padding:10px 8px;
    border:1px solid var(--folio-rule);
    border-radius:3px 5px 2px 4px;
    color:var(--folio-cream);
    background:transparent;
    box-shadow:none;
    font:600 12px/1 var(--font-interface);
    letter-spacing:.06em;
  }
  #view-today .todayTabs [role="tab"][aria-selected="true"]{
    position:relative;
    isolation:isolate;
    color:var(--folio-graphite);
    border-color:var(--folio-field-white);
    background:var(--folio-field-white);
  }
  #view-today .todayTabs [role="tab"][aria-selected="true"]::before{
    content:"";
    position:absolute;
    inset:4px;
    z-index:-1;
    pointer-events:none;
    border-radius:3px;
    background:var(--folio-stripe);
  }
  .todayGrid{display:block}
  .todayCol{display:none}
  .todayCol.on{display:block}
  .todayCol h2{display:none}
  .todayRowBody{padding-left:36px}
}

/* --------------------------------------------------------------------------
   TODAY MAP page: the user-approved C5-1 Cascade field chart. Today's
   ranked places drawn around a hand-drawn Oʻahu, leader lines to every
   listed place, cascading side lists. The 1620x1060 composition scales
   as one unit on desktop and reflows to a stacked page on small screens.
   -------------------------------------------------------------------------- */

#view-today-map .tmHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:30px;
  margin-bottom:10px;
}
#view-today-map .tmHeadLeft{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
#view-today-map .tmHead h1{margin:0;color:var(--folio-field-white);font:400 clamp(30px,3vw,40px)/1.05 var(--font-display)}
#view-today-map .tmDate{padding-top:10px;color:var(--folio-faint);font:400 11px/1.2 var(--font-interface);letter-spacing:.1em}

.tmToggle{display:flex}
.tmToggle button{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  margin-right:3px;
  padding:10px 16px;
  border:1px solid rgba(216,210,195,.34);
  border-radius:2px 3px 0 0;
  clip-path:polygon(3px 0,calc(100% - 4px) 0,100% 5px,100% 100%,0 100%,0 3px);
  color:var(--folio-cream);
  background-color:rgba(16,19,18,.94);
  box-shadow:var(--folio-shadow);
  font:600 12.5px/1 var(--font-interface);
  letter-spacing:.08em;
}
.tmToggle button:hover{color:var(--folio-field-white);background-color:var(--folio-paper-raised)}
.tmToggle button.on{
  position:relative;
  isolation:isolate;
  color:var(--folio-graphite);
  background:var(--folio-field-white);
}
.tmToggle button[data-mode="hike"].on{border-color:var(--folio-hike)}
.tmToggle button[data-mode="dive"].on{border-color:var(--folio-dive)}
.tmToggle button.on::before{
  content:"";
  position:absolute;
  inset:4px;
  z-index:-1;
  pointer-events:none;
  border-radius:3px;
  background:var(--folio-stripe);
}
.tmToggle button.on::after{
  content:"";
  position:absolute;
  right:9px;
  bottom:6px;
  left:9px;
  height:2px;
  transform:rotate(-1deg);
}
.tmToggle button[data-mode="hike"].on::after{background:var(--folio-hike)}
.tmToggle button[data-mode="dive"].on::after{background:var(--folio-dive)}
.tmToggle button.on .atlas-icon{color:var(--folio-graphite)}

.tmStageWrap{position:relative;width:100%;overflow:hidden}
.tmStage{position:relative;width:1620px;height:1060px;transform-origin:top left}
.tmIslandTitle{
  position:absolute;
  top:0;
  right:0;
  left:0;
  color:#E9E3D3;
  font:500 34px/1.2 var(--font-interface);
  letter-spacing:.5em;
  text-indent:.5em;
  text-align:center;
}
.tmMap{position:absolute;color:#E9E3D3}
.tmChart svg{display:block;width:100%;height:auto;filter:drop-shadow(0 0 18px rgba(233,227,211,.06))}
.tmPin{position:absolute;transform:translate(-50%,-100%);color:#E9E3D3}
.tmDot{
  position:absolute;
  width:8px;
  height:8px;
  transform:translate(-50%,-50%);
  border:1.5px solid #E9E3D3;
  border-radius:50%;
  background:rgba(7,10,10,.8);
}
.tmBlock{position:absolute;display:flex;flex-direction:column}
.tmTitle{
  display:flex;
  align-items:center;
  gap:9px;
  color:#E9E3D3;
  font:500 15px/1.3 var(--font-interface);
  letter-spacing:.22em;
}
.tmTitle i{flex:1;border-bottom:1px solid rgba(233,227,211,.5)}
.tmHero{
  display:flex;
  flex-direction:column;
  gap:2px;
  box-sizing:border-box;
  margin:8px 0 6px;
  padding:11px 13px;
  border:1px solid rgba(233,227,211,.55);
  border-radius:10px;
  text-align:left;
  color:var(--folio-cream);
  background:rgba(233,227,211,.045);
  box-shadow:none;
  transition:background-color .2s;
}
.tmHero:hover{background:rgba(233,227,211,.09)}
.tmHero--empty{border-style:dashed;color:var(--folio-faint);font:400 10.5px/1.4 var(--font-interface);letter-spacing:.08em}
.tmHeroTop{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tmHeroTop b{color:var(--folio-field-white);font:500 15px/1.25 var(--font-interface)}
.tmHeroTop i{color:#E9E3D3;font:500 24px/1 var(--font-numeric);font-style:normal;font-variant-numeric:tabular-nums}
.tmHeroMeta{margin-top:2px;color:var(--folio-faint);font:400 10px/1.3 var(--font-interface);letter-spacing:.1em}
.tmHeroF{display:flex;justify-content:space-between;gap:8px;margin-top:3px;color:var(--folio-muted);font:400 10.5px/1.3 var(--font-interface)}
.tmHeroF b{color:var(--folio-cream);font-weight:500}
.tmHeroF em{color:var(--folio-ochre);font-style:normal}
.tmRows{display:flex;flex-direction:column}
.tmRow{
  display:flex;
  align-items:baseline;
  gap:10px;
  box-sizing:border-box;
  min-height:30px;
  padding:0 2px;
  border:0;
  border-radius:0;
  text-align:left;
  background:transparent;
  box-shadow:none;
  transition:background-color .2s;
}
.tmRow:hover{background:rgba(245,240,228,.05)}
.tmRow .nm{overflow:hidden;color:var(--folio-cream);font:400 13px/1.3 var(--font-interface);white-space:nowrap;text-overflow:ellipsis}
.tmRow .sc{margin-left:auto;color:#E9E3D3;font:500 16px/1 var(--font-numeric);font-variant-numeric:tabular-nums}
.tmBand{display:grid;grid-template-columns:1.02fr 1fr;gap:2px 30px;align-items:start}
.tmLeaders{position:absolute;inset:0;pointer-events:none;stroke:rgba(233,227,211,.38);stroke-width:1}
.tmCompass{position:absolute;left:8px;bottom:60px;color:#E9E3D3}
.tmCompass text{font:11px var(--font-interface);fill:currentColor;stroke:none;text-anchor:middle}

/* Small screens: the poster reflows into a stacked page. */
@media (max-width:900px){
  #view-today-map .tmHead{flex-direction:column;gap:8px}
  #view-today-map .tmDate{padding-top:0}
  .tmStageWrap{height:auto!important;overflow:visible}
  .tmStage{position:static;width:auto;height:auto;transform:none!important;display:flex;flex-direction:column;gap:20px}
  .tmIslandTitle{position:static;order:1;font-size:24px}
  .tmMap{position:static;order:2;width:100%!important;height:auto!important;left:auto!important;top:auto!important}
  .tmPin,.tmDot{display:none}
  .tmBlock{position:static;order:3;width:auto!important;left:auto!important;top:auto!important}
  .tmHero{width:100%!important}
  .tmRow{width:100%!important;margin-left:0!important}
  .tmBand{grid-template-columns:1fr;gap:2px}
  .tmLeaders,.tmCompass{display:none}
}