/* =============================================================================
   HAWAII ATLAS REDESIGN DARK V1

   Final visual cascade derived from:
   Atlas Style Guide Restyle Dark V2 - Best Style.html

   The application architecture, data, routes, state and map remain unchanged.
   This layer replaces the earlier Topographic Night chrome with the supplied
   night-field-notebook system while keeping css/atlas.css as rollback evidence.
   ============================================================================= */

@font-face{
  font-family:"JR Hand";
  src:url("../assets/atlas/fonts/JRHand.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

:root{
  /* Exact dark-guide palette. */
  --guide-page:#0E1010;
  --guide-paper:#181A1A;
  --guide-paper-soft:#1F2221;
  --guide-paper-deep:#131515;
  --guide-grid:#313433;
  --guide-border:#313534;
  --guide-border-dim:#292C2B;
  --guide-border-strong:#4D514F;
  --guide-ink:#D8D2C3;
  --guide-ink-bright:#F5F0E4;
  --guide-ink-soft:#C1BAAA;
  --guide-ink-dim:#AAA393;
  --guide-ink-faint:#8E897D;
  --guide-pine:#CBD7CA;
  --guide-amber:#E3AA4D;
  --guide-amber-ink:#F2C46D;
  --guide-green:#8FA767;
  --guide-green-ink:#B8CF87;
  --guide-terracotta:#D86C4B;
  --guide-terracotta-ink:#F09072;
  --guide-blue:#64A8D0;
  --guide-blue-ink:#91C8E3;
  --guide-teal:#59A9A8;
  --guide-teal-ink:#7EC6C2;
  --guide-mint:#8FB9A4;
  --guide-char:#080D0C;
  --guide-tan:#D5A268;
  --guide-cream:#F0E6D1;
  --guide-red-pencil:#E27E70;
  --guide-solid-amber:#946116;
  --guide-solid-green:#4B6532;
  --guide-solid-terracotta:#8D3D2A;
  --guide-solid-blue:#2C6B91;
  --guide-solid-teal:#24676A;

  --guide-radius-control:8px;
  --guide-radius-card:10px;
  --guide-radius-plate:18px;
  --guide-pill:999px;
  --guide-shadow-card:0 14px 32px -17px rgba(0,0,0,.88),0 2px 8px -5px rgba(0,0,0,.74),inset 0 1px 0 rgba(255,255,255,.055);
  --guide-shadow-lift:0 24px 52px -24px rgba(0,0,0,.96),0 7px 18px -10px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.075);
  --guide-micro-grid:linear-gradient(rgba(213,216,214,.038) 1px,transparent 1px),linear-gradient(90deg,rgba(213,216,214,.038) 1px,transparent 1px);
  --guide-micro-grid-deep:linear-gradient(rgba(213,216,214,.052) 1px,transparent 1px),linear-gradient(90deg,rgba(213,216,214,.052) 1px,transparent 1px);

  /* Application compatibility aliases. */
  --bg:var(--guide-page);
  --surface:var(--guide-paper);
  --surface-2:var(--guide-paper-soft);
  --surface-active:#272A29;
  --border:var(--guide-border);
  --border-strong:var(--guide-border-strong);
  --text:var(--guide-ink-bright);
  --text-dim:var(--guide-ink-dim);
  --text-faint:var(--guide-ink-faint);
  --orange:var(--guide-terracotta);
  --orange-bright:var(--guide-terracotta-ink);
  --accent:var(--guide-green);
  --accent-ink:var(--guide-green-ink);
  --cta:var(--guide-solid-green);
  --contour:#283029;
  --p1:#26352B;
  --p2:#111714;
  --r-sm:var(--guide-radius-control);
  --r-md:var(--guide-radius-card);
  --r-lg:var(--guide-radius-plate);
  --radius:var(--guide-radius-card);
  --shadow:var(--guide-shadow-card);
  --shadow2:var(--guide-shadow-lift);

  --font-display:"Brand Slab",Rockwell,Georgia,serif;
  --font-interface:"IBM Plex Mono",ui-monospace,monospace;
  --font-body:"Spectral",Georgia,serif;
  --font-metadata:"IBM Plex Mono",ui-monospace,monospace;
  --font-numeric:"Brand Slab",Rockwell,Georgia,serif;
  --font-hand:"JR Hand","Comic Sans MS",cursive;
  --font:var(--font-interface);
  --mono:var(--font-metadata);
  --font-h2:var(--font-display);
  --font-h3:var(--font-display);
  --font-num:var(--font-numeric);
}

html{color-scheme:dark;scroll-behavior:smooth}
body{
  --v6-ink:var(--guide-ink-bright);
  --v6-ink-soft:var(--guide-ink-dim);
  --v6-ink-faint:var(--guide-ink-faint);
  --v6-key:var(--accent-ink);
  --v6-key-rgb:184,207,135;
  --v6-warning:var(--guide-terracotta-ink);
  --v6-warning-rgb:240,144,114;
  min-width:320px;
  color:var(--guide-ink);
  background-color:var(--guide-page);
  background-image:
    radial-gradient(circle at 14% 4%,rgba(105,122,123,.115),transparent 38%),
    radial-gradient(circle at 88% 92%,rgba(126,136,130,.085),transparent 42%),
    radial-gradient(circle at 52% 36%,rgba(227,170,77,.04),transparent 48%),
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(118,124,122,.095) 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(118,124,122,.095) 39px 40px),
    repeating-linear-gradient(0deg,transparent 0 199px,rgba(142,148,146,.10) 199px 200px),
    repeating-linear-gradient(90deg,transparent 0 199px,rgba(142,148,146,.10) 199px 200px);
  background-attachment:fixed;
  font-family:var(--font-interface);
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body[data-mode="dive"]{
  --accent:var(--guide-teal);
  --accent-ink:var(--guide-teal-ink);
  --cta:var(--guide-solid-teal);
  --contour:#203031;
  --p1:#1E3838;
  --p2:#101819;
  --v6-key:var(--guide-teal-ink);
  --v6-key-rgb:126,198,194;
}
body::after{
  z-index:500;
  opacity:.16;
  mix-blend-mode:soft-light;
  filter:invert(1);
}
#shell{position:relative;z-index:1}

::selection{color:var(--guide-page);background:var(--guide-amber-ink)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#0C0E0E}
::-webkit-scrollbar-thumb{border:2px solid #0C0E0E;border-radius:var(--guide-pill);background:var(--guide-border-strong)}
::-webkit-scrollbar-thumb:hover{background:#696E6B}
button,a,input,select,textarea{caret-color:var(--accent-ink)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--guide-blue-ink);
  outline-offset:3px;
}

/* Application shell: a compact field index on dark paper. */
nav#rail{
  width:82px;
  padding:14px 8px 12px;
  gap:7px;
  border-right:1px solid var(--guide-border);
  background-color:rgba(12,14,14,.96);
  background-image:var(--guide-micro-grid);
  background-size:10px 10px;
  box-shadow:12px 0 30px rgba(0,0,0,.24),inset -1px 0 rgba(255,255,255,.02);
  backdrop-filter:blur(12px);
}
#rail .logo{
  width:20px;
  height:20px;
  min-height:20px;
  margin:8px 0 22px;
  padding:0;
  border:0;
  border-radius:4px;
  color:transparent;
  background:linear-gradient(135deg,var(--guide-blue),var(--guide-teal));
  box-shadow:0 0 16px rgba(89,169,168,.18);
  transform:rotate(45deg);
}
#rail button{
  width:66px;
  min-height:62px;
  padding:8px 3px 7px;
  gap:6px;
  border:1px solid transparent;
  border-radius:var(--guide-radius-control);
  color:var(--guide-ink-faint);
  background:transparent;
}
#rail button svg{stroke-width:1.65}
#rail button span{font-size:11px;letter-spacing:.07em}
#rail button:hover{color:var(--guide-ink-bright);background:var(--guide-paper-soft);transform:translateY(-2px)}
#rail button.on{
  color:var(--accent-ink);
  border-color:var(--guide-border-strong);
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent),var(--guide-paper-soft);
  box-shadow:inset 0 0 0 1px rgba(126,198,194,.10),var(--guide-shadow-card);
}

main#stage{background:transparent}
body .view.scroll,
body[data-mode="dive"] .view.scroll,
body[data-mode="hike"] .view.scroll{
  background-color:var(--guide-page);
  background-image:
    radial-gradient(circle at 88% 10%,rgba(89,169,168,.05),transparent 36%),
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(118,124,122,.08) 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px,rgba(118,124,122,.08) 39px 40px),
    repeating-linear-gradient(0deg,transparent 0 199px,rgba(142,148,146,.08) 199px 200px),
    repeating-linear-gradient(90deg,transparent 0 199px,rgba(142,148,146,.08) 199px 200px);
}

/* The map stays real; a restrained vignette integrates it with the paper UI. */
#mapCanvas::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:400;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(8,13,12,.18),transparent 18%,transparent 80%,rgba(8,13,12,.14)),linear-gradient(180deg,rgba(8,13,12,.10),transparent 24%,transparent 80%,rgba(8,13,12,.14));
  box-shadow:inset 0 0 90px rgba(0,0,0,.22);
}
.leaflet-pane,.leaflet-top,.leaflet-bottom{z-index:450}

/* Guide paper surfaces. */
#rankPanel,
#detailPanel,
#wxPanel,
.fpanel,
.card,
.bcard,
.entry,
.setList .si,
#logModal,
.leaflet-popup-content-wrapper,
.atlas-legal-pop .leaflet-popup-content-wrapper,
.atlas-wreck-pop .leaflet-popup-content-wrapper{
  border:1px solid var(--guide-border);
  color:var(--guide-ink);
  background-color:var(--guide-paper);
  background-image:var(--guide-micro-grid);
  background-size:10px 10px;
  box-shadow:var(--guide-shadow-card);
}
#rankPanel,
#detailPanel,
#wxPanel,
#logModal{
  border-color:var(--guide-border-strong);
  border-radius:var(--guide-radius-plate);
  box-shadow:var(--guide-shadow-lift);
}
#layersPanel,#leftStack .fpanel{
  border-color:var(--guide-border-strong);
  background-color:rgba(24,26,26,.97);
  background-image:var(--guide-micro-grid);
  background-size:10px 10px;
  background-position:0 0;
  background-repeat:repeat;
}
.card,.setList .si,.entry{border-radius:var(--guide-radius-card)}

/* Map top controls. */
.topbar{padding:13px 18px;gap:10px}
.toggle{
  overflow:hidden;
  border:1px solid var(--guide-border-strong);
  border-radius:var(--guide-radius-card);
  background:var(--guide-paper);
  box-shadow:var(--guide-shadow-card);
}
.toggle button{
  min-width:96px;
  color:var(--guide-ink-dim);
  background:transparent;
  border-right:1px solid var(--guide-border);
}
.toggle button:last-child{border-right:0}
.toggle button:hover{color:var(--guide-ink-bright);background:var(--guide-paper-soft)}
.toggle button.on{color:#F8F6EE;background:var(--guide-solid-green);box-shadow:inset 0 1px rgba(255,255,255,.07)}
body[data-mode="dive"] .toggle button.on{background:var(--guide-solid-teal)}
#layersOpenTop,
#condOpenTop,
#condOpen{
  min-height:44px;
  padding:9px 14px;
  border:1px solid var(--guide-border-strong);
  border-radius:var(--guide-radius-control);
  color:var(--guide-ink);
  background:var(--guide-paper-soft);
  box-shadow:var(--guide-shadow-card),inset 0 1px rgba(255,255,255,.04);
  font:500 var(--read-label)/1 var(--font-interface);
  letter-spacing:.07em;
}
#layersOpenTop{display:none}
#layersOpenTop:hover,#condOpenTop:hover,#condOpen:hover{color:var(--accent-ink);border-color:var(--accent);transform:translateY(-2px)}

.fpHead{min-height:42px;padding:2px 1px}
.fpHead h5,
.fpanel h5,
.card h5,
.secH,
.wxh{
  color:var(--guide-ink-bright);
  font-family:var(--font-interface);
  font-weight:600;
  letter-spacing:.08em;
}
.fpHead .chev{border-color:var(--guide-ink-faint)}
.fpHead:hover h5,.fpHead:hover .chev{color:var(--accent-ink);border-color:var(--accent-ink)}
.fpanel .fpBody{padding-top:1px;border-top:1px dashed var(--guide-border)}

.lay{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.lay .sw,
.ovRow{
  border:1px solid var(--guide-border);
  border-radius:var(--guide-radius-control);
  color:var(--guide-ink-faint);
  background:var(--guide-paper-deep);
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
.lay .sw:hover,.ovRow:hover{color:var(--guide-ink-bright);border-color:var(--guide-border-strong);background:var(--guide-paper-soft)}
.lay .sw.on,.ovRow.on{
  color:var(--accent-ink);
  border-color:var(--accent);
  background:rgba(89,169,168,.09);
  box-shadow:inset 0 0 0 1px rgba(126,198,194,.10);
}
.ovRow .dot{background:var(--guide-border-strong);box-shadow:none}
.ovRow.on .dot{background:var(--accent-ink);box-shadow:0 0 0 3px rgba(126,198,194,.10)}

.cond .r{color:var(--guide-ink-dim);border-bottom:1px dashed var(--guide-border)}
.cond .r b{color:var(--guide-ink-bright)}
.cond .upd{color:var(--guide-ink-faint)}

/* Ranked places: guide cards, quiet grid, one restrained score signal. */
#rankPanel{overflow:hidden;background-color:rgba(24,26,26,.98)}
#rankPanel .hd,
#detailPanel .hd,
#wxPanel .hd,
#logModal .hd,
#logModal .ft{
  border-color:var(--guide-border);
  background:rgba(19,21,21,.88);
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
#rankPanel .hd b,#detailPanel .hd b,#wxPanel .hd b,#logModal .hd b{color:var(--guide-ink-bright)}
#rankPanel .hd button,
#detailPanel .hd button,
#wxPanel .hd button,
#modalClose{
  border:1px solid var(--guide-border-strong);
  border-radius:var(--guide-radius-control);
  color:var(--guide-ink-dim);
  background:var(--guide-paper-soft);
}
#rankPanel .hd button:hover,#detailPanel .hd button:hover,#wxPanel .hd button:hover,#modalClose:hover{
  color:var(--accent-ink);
  border-color:var(--accent);
  background:#272A29;
}
#rankBody{padding:14px}
.hero,
.rrow{
  position:relative;
  border:1px solid var(--guide-border);
  border-radius:var(--guide-radius-card);
  background-color:var(--guide-paper);
  background-image:var(--guide-micro-grid);
  background-size:10px 10px;
  box-shadow:var(--guide-shadow-card);
  transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s,border-color .18s;
}
.hero{padding:14px}
.hero:hover,.rrow:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--guide-shadow-lift)}
.hero h3,.rrow .nm{
  color:var(--guide-ink-bright);
  font-family:var(--font-display);
  font-weight:400;
  text-transform:none;
}
.hero .meta{color:var(--guide-ink-dim)}
.hero .big,.rrow .sc{color:var(--guide-amber-ink);font-family:var(--font-numeric)}
.hero .big small{color:var(--guide-ink-faint);font-family:var(--font-metadata)}
.rrow .n{color:var(--guide-ink-faint)}
.rrow .nm .adv{color:var(--guide-terracotta-ink)}

/* Shared controls and tokens. */
.btn,
.copyBtn,
.setList .ctl,
.subBack,
.detailBackRow>button,
.backRow button,
.tool-button,
.fc-button{
  border:1px solid var(--guide-border-strong);
  border-radius:var(--guide-radius-control);
  color:var(--guide-ink);
  background:var(--guide-paper-soft);
  box-shadow:var(--guide-shadow-card),inset 0 1px rgba(255,255,255,.045);
  font-family:var(--font-interface);
}
.btn:hover,.copyBtn:hover,.setList .ctl:hover,.subBack:hover,.detailBackRow>button:hover,.backRow button:hover{
  color:var(--accent-ink);
  border-color:var(--accent);
  background:#272A29;
  filter:none;
  transform:translateY(-2px);
}
.btn:not(.ghost){color:#F8F6EE;border-color:var(--accent);background:var(--cta)}
.btn.ghost{color:var(--guide-ink-dim);background:var(--guide-paper-deep);border-color:var(--guide-border-strong)}
.btn.ghost:hover{color:var(--accent-ink);border-color:var(--accent);background:var(--guide-paper-soft)}
.chip{
  border:1px solid var(--guide-border-strong);
  border-radius:var(--guide-radius-control);
  color:var(--guide-ink-dim);
  background:var(--guide-paper-soft);
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 3px 8px rgba(0,0,0,.18);
}
.score,.scoreBadge .v,.statRow .v,.statBar .v,.collectionScore,.detailContextScore .v{font-family:var(--font-numeric);color:var(--guide-amber-ink)}

/* Selected-place drawer. */
#detailPanel{
  --v5-panel-ink:var(--guide-ink-bright);
  --v5-panel-ink-soft:var(--guide-ink-dim);
  --v5-panel-ink-faint:var(--guide-ink-faint);
  --v5-panel-accent:var(--accent-ink);
  --v5-panel-accent-rgb:184,207,135;
  top:64px;
  right:16px;
  bottom:54px;
  width:420px;
  color:var(--guide-ink);
  background-color:rgba(24,26,26,.985);
  background-image:var(--guide-micro-grid);
  background-size:10px 10px;
  backdrop-filter:blur(12px) saturate(.76);
}
body[data-mode="dive"] #detailPanel{--v5-panel-accent-rgb:126,198,194}
#detailPanel::before{border-color:rgba(255,255,255,.03);border-radius:13px}
#detailPanel #detailBody .ph.heroPh{
  border:0;
  border-radius:0;
  background:#000;
  box-shadow:none;
}
#detailPanel #detailBody .scoreBadge{
  border:1px solid var(--guide-border-strong);
  border-radius:var(--guide-radius-control);
  background:rgba(19,21,21,.92);
  box-shadow:var(--guide-shadow-card);
}
#detailPanel #detailBody h2{color:var(--guide-ink-bright);font-family:var(--font-display);letter-spacing:-.01em}
#detailPanel #detailBody .loc,#detailPanel #detailBody .desc{color:var(--guide-ink-dim)}
#detailPanel #detailBody .desc{font-family:var(--font-body)}
#detailPanel #detailBody .statRow{border-color:var(--guide-border);background:var(--guide-border)}
#detailPanel #detailBody .statRow>div{
  background-color:var(--guide-paper-deep);
  background-image:var(--guide-micro-grid-deep);
  background-size:10px 10px;
}
#detailPanel #detailBody .statRow .v{color:var(--guide-amber-ink)}
#detailPanel #detailBody .statRow .t{color:var(--guide-ink-faint)}
#detailPanel>.actions{border-color:var(--guide-border);background:rgba(19,21,21,.88)}
#detailPanel .actions .btn{border-radius:var(--guide-radius-control);box-shadow:var(--guide-shadow-card)}
#detailPanel .actions>.btn:not(.ghost){color:#F8F6EE;background:var(--cta);border-color:var(--accent)}
#detailPanel .actions .btn.ghost{color:var(--guide-ink-dim);background:var(--guide-paper-deep);border-color:var(--guide-border-strong)}

#coach{
  border:1px solid var(--accent);
  border-radius:var(--guide-radius-card);
  color:var(--guide-ink);
  background-color:var(--guide-paper);
  background-image:var(--guide-micro-grid);
  background-size:10px 10px;
  box-shadow:var(--guide-shadow-lift);
}
#coach::before{border-color:var(--accent);background:var(--guide-paper)}
#coach p{color:var(--guide-ink-dim);font-family:var(--font-body)}
#coach b{color:var(--accent-ink)}

#footBar{
  color:var(--guide-ink-faint);
  border-top:1px solid var(--guide-border);
  background:rgba(12,14,14,.94);
  box-shadow:0 -8px 22px rgba(0,0,0,.2);
  backdrop-filter:blur(10px);
}
#footBar .lg{color:var(--guide-ink-bright)}
#footBar .right span{color:var(--guide-ink-dim);font-family:var(--font-numeric)}
.badge{
  color:var(--guide-ink-dim);
  border:1px solid var(--guide-border-strong);
  border-radius:var(--guide-radius-control);
  background:rgba(24,26,26,.94);
  box-shadow:var(--guide-shadow-card);
}
.badge b{color:var(--accent-ink);text-shadow:none}

/* Leaflet controls and map labels inherit the field-notebook chrome. */
.leaflet-control-zoom,
.leaflet-control-layers,
.leaflet-bar,
.leaflet-control-attribution{
  border-color:var(--guide-border-strong)!important;
  border-radius:var(--guide-radius-control)!important;
  background:rgba(24,26,26,.94)!important;
  box-shadow:var(--guide-shadow-card)!important;
}
.leaflet-bar a,
.leaflet-control-zoom a{
  color:var(--guide-ink)!important;
  border-color:var(--guide-border)!important;
  background:var(--guide-paper)!important;
}
.leaflet-bar a:hover,.leaflet-control-zoom a:hover{color:var(--accent-ink)!important;background:var(--guide-paper-soft)!important}
.leaflet-control-attribution,.leaflet-control-attribution a{color:var(--guide-ink-faint)!important}
.leaflet-popup-tip{background:var(--guide-paper)!important}
.leaflet-popup-close-button{color:var(--guide-ink-dim)!important}
.leaflet-popup-close-button:hover{color:var(--guide-terracotta-ink)!important}
.pin{background:var(--guide-char);border-color:var(--accent);box-shadow:0 0 0 3px rgba(8,13,12,.72)}
.pin:hover,.pin.sel{background:var(--accent);box-shadow:0 0 0 4px rgba(8,13,12,.75)}
.pin .plbl{
  color:var(--guide-ink);
  border:1px solid var(--guide-border-strong);
  border-radius:var(--guide-radius-control);
  background:rgba(24,26,26,.96);
  box-shadow:var(--guide-shadow-card);
}

/* Full place pages: field-guide cover, clipped folder tabs, paper content. */
#view-detail .pageWrap{max-width:1280px;padding:28px 40px 90px}
.detailBackRow{margin-bottom:18px;padding-bottom:14px;border-bottom:1px dashed var(--guide-border)}
.detailContext span,.detailContextScore .t{color:var(--guide-ink-faint)}
.detailContext b{color:var(--guide-ink-dim)}
.detailContextScore .v{color:var(--guide-amber-ink)}
.detailPrimaryNav{
  top:0;
  margin:0 -14px;
  padding:12px 14px 11px;
  border:0;
  border-bottom:1px solid var(--guide-border);
  background:rgba(14,16,16,.94);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
  backdrop-filter:blur(12px);
}
.detailTabs{align-items:flex-end;gap:7px}
.detailTabs>[role="tab"]{
  --detail-tab-color:var(--guide-solid-teal);
  min-height:44px;
  padding:11px 22px 10px;
  border:0;
  border-radius:0;
  color:#F8F6EE;
  background:var(--detail-tab-color);
  clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 100%,0 100%);
  box-shadow:none;
  opacity:.72;
  transition:transform .18s cubic-bezier(.16,1,.3,1),opacity .18s,filter .18s;
}
.detailTabs>[role="tab"]:nth-child(1){--detail-tab-color:var(--guide-solid-terracotta)}
.detailTabs>[role="tab"]:nth-child(2){--detail-tab-color:var(--guide-solid-teal)}
.detailTabs>[role="tab"]:nth-child(3){--detail-tab-color:var(--guide-amber);color:#151B17}
.detailTabs>[role="tab"]:nth-child(4){--detail-tab-color:var(--guide-solid-blue)}
.detailTabs>[role="tab"]:nth-child(5){--detail-tab-color:var(--guide-solid-green)}
.detailTabs>[role="tab"]:hover{color:#fff;background:var(--detail-tab-color);opacity:.92;transform:translateY(-2px)}
.detailTabs>[role="tab"][aria-selected="true"]{
  color:#fff;
  border:0;
  background:var(--detail-tab-color);
  box-shadow:none;
  opacity:1;
  transform:translateY(-3px);
  filter:brightness(1.08);
}
.detailTabs>[role="tab"]:nth-child(3)[aria-selected="true"]{color:#151B17}
.detailOverview{
  position:relative;
  min-height:560px;
  margin-top:28px;
  padding:46px 48px;
  overflow:hidden;
  border:1px solid var(--guide-border-strong);
  border-radius:var(--guide-radius-plate);
  background-color:var(--guide-paper);
  background-image:linear-gradient(rgba(199,203,201,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(199,203,201,.075) 1px,transparent 1px);
  background-size:18px 18px;
  box-shadow:var(--guide-shadow-lift);
}
.detailOverview::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent 24%);
}
.detailOverview>*{position:relative;z-index:1}
.detailOverviewCopy h1{color:var(--guide-ink-bright);font-family:var(--font-display);letter-spacing:-.025em}
.detailOverviewCopy .loc{color:var(--guide-ink-dim)}
.detailOverviewCopy .desc{color:var(--guide-ink);font-family:var(--font-body)}
.detailOverview .statBar{border-color:var(--guide-border)}
.detailOverview .statBar>div{border-color:var(--guide-border)}
.detailOverview .statBar .v{color:var(--guide-amber-ink);font-family:var(--font-numeric)}
.detailOverview .statBar .t{color:var(--guide-ink-faint)}
.detailPanelIntro{padding-top:54px}
.detailPanelIntro h2{color:var(--guide-ink-bright);font-family:var(--font-display);letter-spacing:-.018em}
.detailPanelIntro p{color:var(--guide-ink-soft);font-family:var(--font-body);font-style:italic}
.detailSubTabs{border-color:var(--guide-border)}
.detailSubTabs>[role="tab"]{color:var(--guide-ink-dim)}
.detailSubTabs>[role="tab"]:hover,.detailSubTabs>[role="tab"][aria-selected="true"]{color:var(--guide-ink-bright)}
.detailSubTabs>[role="tab"]::after{height:3px;background:var(--guide-amber)}
.detailSubPanel>.card,.detailConditionsGrid>.card,.detailAccessGrid>.card{background-color:var(--guide-paper);background-image:var(--guide-micro-grid);background-size:10px 10px}
.detailFactRows{border-color:var(--guide-border);background:var(--guide-border)}
.detailFactRows>div{background:var(--guide-paper-deep)}
.detailFactRows span{color:var(--guide-ink-faint)}
.detailFactRows b{color:var(--guide-ink-bright);font-family:var(--font-numeric)}
.detailLocationHint{color:var(--guide-terracotta-ink);font-family:var(--font-hand);font-size:clamp(18px,1.65vw,23px);line-height:1.15;transform:rotate(-1deg);transform-origin:left center}
.detailEmptyCopy,.subLead,.researchLead,.wreckStory,.wreckNote p{color:var(--guide-ink-soft);font-family:var(--font-body)}
.subRow,.linkRow{
  border-color:var(--guide-border);
  border-radius:var(--guide-radius-control);
  background:var(--guide-paper-deep);
}
.subRow:hover,.linkRow:hover{border-color:var(--accent);background:var(--guide-paper-soft)}
.subRow b,.linkRow .t{color:var(--guide-ink-bright)}
.subRow .k,.linkRow .ch,.linkRow .pl{color:var(--guide-ink-faint)}

/* Collection, logbook and settings surfaces. */
.pageWrap{max-width:1220px;padding:38px 38px 84px}
.colHead{
  margin-bottom:26px;
  padding:20px 24px 18px;
  border:1px solid var(--guide-border-strong);
  border-radius:var(--guide-radius-card);
  background-color:var(--guide-paper);
  background-image:var(--guide-micro-grid-deep);
  background-size:24px 24px;
  box-shadow:var(--guide-shadow-card);
}
.colHead h1{color:var(--guide-ink-bright);font-family:var(--font-display);font-weight:400;letter-spacing:-.025em}
.colHead>span{color:var(--guide-ink-faint)}
.bucketGrid{gap:20px}
.bcard{
  overflow:hidden;
  border:0;
  border-radius:0;
  background-color:#1A1D1C;
  background-image:var(--guide-micro-grid);
  background-size:10px 10px;
  box-shadow:none;
  clip-path:polygon(14px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
  filter:drop-shadow(0 8px 11px rgba(0,0,0,.44));
}
.bcard:hover{border-color:transparent;box-shadow:none;filter:drop-shadow(0 13px 18px rgba(0,0,0,.58));transform:translateY(-3px)}
.bcard .nm{color:var(--guide-ink-bright);font-family:var(--font-display);font-weight:400;text-transform:none}
.bcard .meta{color:var(--guide-ink-dim)}
.bcard .rm{color:var(--guide-terracotta-ink)}
.collectionScore{color:var(--guide-amber-ink)}
.collectionScoreLabel{color:var(--guide-ink-faint)}
.entry{background-color:var(--guide-paper);transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s,border-color .18s}
.entry:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--guide-shadow-lift)}
.entry .date{color:var(--guide-amber-ink)}
.entry .nm{color:var(--guide-ink-bright);font-family:var(--font-display);font-weight:400;text-transform:none}
.entry .meta{color:var(--guide-ink-dim);font-family:var(--font-body)}
.tl::before{background:var(--guide-border-strong)}
.entry::before{border-color:var(--guide-green);background:var(--guide-paper);box-shadow:none}
.setList .si{background-color:var(--guide-paper);transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s,border-color .18s}
.setList .si:hover{border-color:var(--guide-border-strong);transform:translateY(-3px);box-shadow:var(--guide-shadow-lift)}
.setList .si b{color:var(--guide-ink-bright)}
.setList .si span{color:var(--guide-ink-dim);font-family:var(--font-body)}
.settingsLayout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);gap:24px;align-items:start}
.settingsLayout .setList{max-width:none}
.settingsFieldCard{
  position:relative;
  overflow:hidden;
  padding:24px 24px 26px;
  border:1px solid var(--guide-border-strong);
  border-radius:var(--guide-radius-card);
  color:var(--guide-ink);
  background-color:var(--guide-paper);
  background-image:var(--guide-micro-grid-deep);
  background-size:24px 24px;
  box-shadow:var(--guide-shadow-card);
}
.settingsFieldCard::before{content:"";position:absolute;top:0;right:24px;width:74px;height:5px;background:var(--guide-terracotta)}
.settingsHand{max-width:330px;margin:4px 0 18px;color:var(--guide-amber-ink);font:400 clamp(31px,3vw,43px)/.98 var(--font-hand);transform:rotate(-1.5deg);transform-origin:left center}
.settingsFieldCard p{max-width:39ch;color:var(--guide-ink-soft);font:400 var(--read-body)/1.65 var(--font-body)}
.settingsSourceRule{margin:22px 0 18px;border-top:1px dashed var(--guide-border-strong)}
.settingsFieldCard h2{margin-bottom:11px;color:var(--guide-ink-bright);font:400 22px/1.15 var(--font-display)}
.settingsFieldCard dl{display:grid;gap:0;margin:0}
.settingsFieldCard dl>div{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--guide-border)}
.settingsFieldCard dt{color:var(--guide-ink-faint);font:500 var(--read-micro)/1.4 var(--font-interface);letter-spacing:.08em}
.settingsFieldCard dd{margin:0;color:var(--guide-ink-dim);font:400 var(--read-meta)/1.45 var(--font-interface)}
.empty{color:var(--guide-ink-dim)}
.empty h3{color:var(--guide-ink-bright);font-family:var(--font-display);font-weight:400}
.empty p{font-family:var(--font-body)}

/* Weather, forms and supporting app surfaces. */
#wxPanel{
  color:var(--guide-ink);
  background-color:rgba(24,26,26,.985);
  background-image:var(--guide-micro-grid);
  background-size:10px 10px;
}
.wxDate{color:var(--guide-ink-bright);font-family:var(--font-display)}
.wxWhere,.wxUpdated{color:var(--guide-ink-faint)}
.wxkv{
  border-color:var(--guide-border);
  border-radius:var(--guide-radius-card);
  background:var(--guide-paper-deep);
}
.wxkv .v{color:var(--guide-amber-ink);font-family:var(--font-numeric)}
.wxkv .t{color:var(--guide-ink-faint)}
.wxAlert{border-color:rgba(216,108,75,.42);background:rgba(216,108,75,.10)}
.wxAlert b{color:var(--guide-terracotta-ink)}
.wxAlert span{color:var(--guide-ink-soft);font-family:var(--font-body)}
.wxNoAlert{color:var(--guide-green-ink);border-color:rgba(143,167,103,.34);background:rgba(143,167,103,.075)}
#advisoryStrip{border-color:rgba(216,108,75,.42);border-radius:var(--guide-radius-control);color:var(--guide-terracotta-ink);background:rgba(24,26,26,.96);box-shadow:var(--guide-shadow-card)}
#advisoryStrip .dot{background:var(--guide-terracotta)}

/* Lazy 3D flyover chrome follows the same field-notebook system. */
.flyover{color:var(--guide-ink);background:var(--guide-page);font-family:var(--font-interface)}
.flyover .flyover__map{
  background:radial-gradient(ellipse at 50% 42%,rgba(89,169,168,.12),transparent 58%),var(--guide-page);
}
.flyover__shade{
  background:linear-gradient(180deg,rgba(8,13,12,.62),transparent 30%),linear-gradient(0deg,rgba(8,13,12,.76),transparent 34%),radial-gradient(ellipse at center,transparent 42%,rgba(8,13,12,.52) 125%);
}
.flyover__identity,
.flyover__foot,
.flyover__note,
.flyover__close,
.flyover .mapboxgl-ctrl-group,
.flyover-btn{
  border-color:var(--guide-border-strong);
  border-radius:var(--guide-radius-card);
  color:var(--guide-ink);
  background-color:rgba(24,26,26,.96);
  background-image:var(--guide-micro-grid);
  background-size:10px 10px;
  background-position:0 0;
  background-repeat:repeat;
  box-shadow:var(--guide-shadow-card);
}
.flyover__identity,.flyover__foot,.flyover__note{box-shadow:var(--guide-shadow-lift)}
.flyover__eyebrow{color:var(--guide-terracotta-ink)}
.flyover__eyebrow>span{background:currentColor;box-shadow:none}
.flyover__titleText{color:var(--guide-ink-bright);font-family:var(--font-display);letter-spacing:-.01em;text-shadow:none}
.flyover__subtitle,.flyover__hint,.flyoverLaunch__copy small{color:var(--guide-ink-dim)}
.flyover__close{border-radius:var(--guide-radius-control);color:var(--guide-ink-dim)}
.flyover__close:hover{color:var(--accent-ink);border-color:var(--accent);box-shadow:var(--guide-shadow-lift);transform:translateY(-2px)}
.flyover__play{
  color:#F8F6EE;
  border-color:var(--accent);
  border-radius:var(--guide-radius-control);
  background:var(--cta);
  box-shadow:var(--guide-shadow-card);
}
.flyover__play:hover:not(:disabled){color:#fff;border-color:var(--accent-ink);box-shadow:var(--guide-shadow-lift);transform:translateY(-2px)}
.flyover__timeline::after{background:var(--guide-border-strong)}
.flyover__scrub::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--accent) var(--flyover-progress,0%),var(--guide-border-strong) var(--flyover-progress,0%))}
.flyover__scrub::-webkit-slider-thumb{border-color:var(--guide-paper);background:var(--accent-ink);box-shadow:0 4px 12px rgba(0,0,0,.42)}
.flyover__progress{color:var(--guide-amber-ink);font-family:var(--font-numeric)}
.flyover__hint svg{stroke:var(--accent-ink)}
.flyover__hint i{background:var(--accent-ink);box-shadow:none}
.flyover__note{color:var(--guide-ink);font-family:var(--font-body)}
.flyover__spinner{border-color:var(--guide-border-strong);border-top-color:var(--accent-ink);box-shadow:none}
.flyover .mapboxgl-ctrl-group button{color:var(--guide-ink);border-color:var(--guide-border);background:transparent}
.flyover .mapboxgl-ctrl-group button:hover{background:var(--guide-paper-soft)}
.flyover .mapboxgl-ctrl-attrib{color:var(--guide-ink-faint);background:rgba(14,16,16,.88)}
.flyover .mapboxgl-ctrl-attrib a{color:var(--guide-blue-ink)}
.flyover-btn{color:var(--accent-ink);font-family:var(--font-interface)}
.flyover-btn:hover{color:var(--guide-ink-bright);border-color:var(--accent);box-shadow:var(--guide-shadow-lift);transform:translateY(-2px)}
.flyoverLaunch__glyph{border-color:var(--accent);border-radius:var(--guide-radius-control);background:rgba(89,169,168,.09)}

#modalScrim{background:rgba(8,13,12,.86);backdrop-filter:blur(6px)}
#logModal{background-color:var(--guide-paper)}
.field label,.autoNote{color:var(--guide-ink-faint)}
.field input,.field select,.field textarea,
.logf-input{
  border:1px solid var(--guide-border-strong);
  border-radius:var(--guide-radius-control);
  color:var(--guide-ink-bright);
  background:var(--guide-paper-deep);
  box-shadow:inset 0 3px 12px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.02);
  font-family:var(--font-body);
}
.field input::placeholder,.field textarea::placeholder,.logf-input::placeholder{color:var(--guide-ink-faint)}
.field input:focus,.field select:focus,.field textarea:focus,.logf-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(89,169,168,.11),inset 0 2px 8px rgba(0,0,0,.34)}
.autoNote{border-color:var(--guide-border);background:var(--guide-paper-deep)}
.autoNote span{color:var(--guide-ink)}
.modalError,.logf-error{color:var(--guide-terracotta-ink)}

/* Charts and generated interface fragments. */
.profileHost,
.chartPh,
.elev-wrap,
.elev-chart,
.wxSpark,
.atlas-cov-drop{
  border-color:var(--guide-border)!important;
  border-radius:var(--guide-radius-card)!important;
  background-color:var(--guide-paper-deep)!important;
  background-image:var(--guide-micro-grid-deep)!important;
  background-size:24px 24px!important;
}
.elev-axis,.elev-grid,.profileHost line{stroke:var(--guide-border-strong)}
.profileHost text,.elev-tick,.elev-axis-title{fill:var(--guide-ink-faint);color:var(--guide-ink-faint);font-family:var(--font-metadata)}
.elev-line,.profileHost .elev-line{stroke:var(--accent)}
.elev-fill,.profileHost .elev-fill{fill:rgba(89,169,168,.12)}
.wreckFacts>div,.wreckNote{border-color:var(--guide-border);background:var(--guide-paper-deep)}
.wreckFacts .v{color:var(--guide-amber-ink);font-family:var(--font-numeric)}
.wreckFacts .t,.wreckNote>span{color:var(--guide-ink-faint)}
.wreckVessel{color:var(--guide-ink-bright);font-family:var(--font-display)}

/* The guide permits only pulse, fill and a 3px interactive lift. */
@media (prefers-reduced-motion:no-preference){
  #advisoryStrip .dot,.pulse,.liveDot{animation:atlas-field-pulse 3.2s ease-in-out infinite}
  .scoreFactorFill,.progress i,.folder-bar i{animation:atlas-field-fill .9s cubic-bezier(.16,1,.3,1) both}
  @keyframes atlas-field-pulse{0%,100%{transform:scale(1);opacity:.72}50%{transform:scale(1.18);opacity:1}}
  @keyframes atlas-field-fill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
}

@media (max-width:1180px){
  #layersDock{width:300px}
  #leftStack{width:270px}
  #rightStack{width:330px}
}

@media (max-width:980px){
  #view-detail .pageWrap{padding-inline:28px}
  .detailOverview{padding:38px 34px}
  .settingsLayout{grid-template-columns:1fr}
}

@media (max-width:760px){
  nav#rail{
    height:72px;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom));
    border-top:1px solid var(--guide-border-strong);
    border-right:0;
    background-color:rgba(12,14,14,.97);
    background-image:var(--guide-micro-grid);
    background-size:10px 10px;
    box-shadow:0 -15px 35px rgba(0,0,0,.56),inset 0 1px rgba(255,255,255,.02);
  }
  #rail button{min-width:70px;min-height:54px;padding:5px 8px}
  #rail button:hover{transform:none}
  main#stage{height:calc(100vh - 72px)}
  .topbar{padding:9px 10px}
  .toggle button{min-width:66px;min-height:44px;padding-inline:11px}
  #layersOpenTop{display:block;margin-left:auto;min-height:44px;padding:8px 10px;font-size:11px}
  #condOpenTop{margin-left:0;padding-inline:9px;font-size:11px}
  #layersDock.mobile-open{
    display:block;
    top:62px;
    right:10px;
    left:10px;
    width:auto;
    max-width:370px;
    max-height:calc(100% - 150px);
    margin-left:auto;
    transform:none;
    z-index:32;
    background:transparent;
  }
  #layersDock.mobile-open #layersPanel{display:flex;max-height:calc(100vh - 164px)}
  #rankPanel{left:10px;right:10px;bottom:10px;border-radius:15px}
  #detailPanel,#wxPanel{top:58px;right:8px;bottom:10px;left:8px;width:auto;border-radius:15px}
  #view-detail .pageWrap{padding:16px 16px calc(112px + env(safe-area-inset-bottom))}
  .detailPrimaryNav{margin-inline:-16px;padding-inline:16px}
  .detailTabs>[role="tab"]{padding:11px 16px 10px}
  .detailOverview{margin-top:22px;padding:28px 22px;border-radius:14px}
  .detailOverviewCopy h1{letter-spacing:-.02em}
  .colHead{padding:17px 18px 15px}
  .settingsFieldCard{padding:22px 20px 24px}
  .pageWrap{padding:20px 15px calc(112px + env(safe-area-inset-bottom))}
  .bcard:hover,.entry:hover,.setList .si:hover{transform:none}
  #mapCanvas::after{box-shadow:inset 0 0 46px rgba(0,0,0,.16)}
}

@media (max-width:520px){
  .detailTabs{gap:5px}
  .detailTabs>[role="tab"]{padding-inline:14px;font-size:var(--read-micro)}
  .detailOverview{padding:24px 18px}
  .colHead h1{font-size:32px}
}

@media (max-width:350px){
  .topbar{gap:4px;padding-inline:6px}
  .toggle button{min-width:58px;padding-inline:6px}
  #layersOpenTop,#condOpenTop{padding-inline:7px;font-size:10px}
}

@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{
    --guide-ink:#E9E4D9;
    --guide-ink-soft:#D4CCBC;
    --guide-ink-dim:#C2BAAA;
    --guide-border:#455951;
    --guide-border-dim:#374A43;
  }
}

@media (forced-colors:active){
  *{background-image:none!important;box-shadow:none!important;filter:none!important}
  .detailTabs>[role="tab"],.bcard{clip-path:none}
}