/* =============================================================================
   css/atlas-leaflet.css — the ONLY styling that is not in Dan's V7 prototype.
   Everything here exists because the prototype's map was a static plate and
   the real app's map is Leaflet. Nothing here changes a colour, a radius, a
   font or a spacing value: every rule reads the same custom properties
   css/atlas.css defines, so the two stay locked together.

   Contents
     1  the Leaflet canvas inside #mapCanvas, + the Topographic Night tile grade
     2  pins as L.divIcon (the prototype's .pin markup, unwrapped)
     3  Leaflet's own chrome (zoom, attribution, the hidden style switcher)
     4  live-data affordances the static mock had no need for:
        overlay toggle rows, the elevation chart, the log form grid
     5  responsive parity with the prototype's own breakpoints
   ============================================================================= */

/* ---------- 1. the map canvas ------------------------------------------- */

/* The prototype painted a baked raster into #mapCanvas. Real tiles go there
   instead; the base colour and the cinematic vignette (::after) stay. */
#mapCanvas{background-image:none}
#mapCanvas #map{position:absolute;inset:0;z-index:1;background:transparent}
#mapCanvas::after{z-index:4}

/* The prototype's #mapCanvas background-image was three layers: two darkening
   gradients over the baked plate. Dropping the plate for real tiles dropped
   the gradients with it, and the ocean came back too bright. They are restored
   here verbatim, as an overlay above the tiles and below every control. */
#mapCanvas::before{
  content:"";
  position:absolute;inset:0;
  z-index:3;
  pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(1,5,7,.18),transparent 20%,transparent 80%,rgba(1,5,7,.18)),
    radial-gradient(ellipse at 50% 47%,transparent 44%,rgba(1,5,7,.18) 74%,rgba(1,5,7,.40) 120%);
}

.leaflet-container{
  background:#071B25;
  font-family:var(--font);
  outline:none;
}
.leaflet-container a{color:var(--accent)}

/* Topographic Night grade. Dan's prototype plate is a satellite view of Oahu
   graded to deep navy water and dark saturated land, so SATELLITE is the boot
   style and gets the lightest touch; the light chart styles (USGS Topo, CARTO
   light, Pau Hana, OpenTopo) are inverted into a dark chart so they land in
   the same key. Applied to the tile pane alone — never to pins, panels or
   labels. */
.leaflet-tile-pane{
  filter:brightness(.66) contrast(1.1) saturate(1.14);
}
body[data-basemap="usgs-topo"] .leaflet-tile-pane,
body[data-basemap="carto-light"] .leaflet-tile-pane,
body[data-basemap="opentopo"] .leaflet-tile-pane,
body[data-basemap="pau-hana"] .leaflet-tile-pane{
  filter:invert(1) hue-rotate(178deg) brightness(.86) contrast(.94) saturate(.66);
}
body[data-basemap="esri-ocean"] .leaflet-tile-pane{
  filter:brightness(.68) contrast(1.1) saturate(1.02);
}
body[data-basemap="carto-dark"] .leaflet-tile-pane{
  filter:brightness(.9) contrast(1.06) saturate(.9);
}
/* The overlay pane rides above the base and must NOT be inverted twice. */
.leaflet-overlay-pane,.leaflet-marker-pane,.leaflet-tooltip-pane,.leaflet-popup-pane{filter:none}

/* ---------- 2. pins ------------------------------------------------------ */

/* L.divIcon wraps our markup in a positioned div; .pin already carries the
   prototype's translate(-50%,-50%), so the wrapper must not add its own. */
.atlas-pin-wrap{background:none;border:0}
.atlas-pin-wrap .pin{position:absolute;left:50%;top:50%}

/* The prototype showed a name pill beside every pin because it had five of
   them. The real island has 54, so a pill on each one buries the map. The
   pills therefore ride the ranked spots (.pin.named, the current TODAY'S TOP
   entries) and any pin that is hovered, focused or selected — the same
   information, revealed instead of stacked. */
.atlas-pin-wrap .pin .plbl{opacity:0;transition:opacity .18s ease-out}
.atlas-pin-wrap .pin.named .plbl,
.atlas-pin-wrap .pin.sel .plbl,
.atlas-pin-wrap .pin:hover .plbl,
.leaflet-marker-icon:focus-visible .pin .plbl{opacity:1}
.atlas-pin-wrap .pin:hover,.atlas-pin-wrap .pin.sel{z-index:5}
.leaflet-marker-icon:focus-visible .pin{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:50%;
}

/* ---------- 3. Leaflet chrome -------------------------------------------- */

/* The style switcher control still mounts (it keeps the registry's map
   reference, mode listener and persisted-overlay restore alive) but the V7
   shell owns layer choice through the MAP LAYERS panel, so it is hidden. */
.atlas-style-control,.leaflet-control-layers,.basemap-switcher,
.leaflet-control.atlas-basemaps,.leaflet-control.atlas-controls,
.leaflet-top.leaflet-left .leaflet-control-atlas-style{display:none !important}

.leaflet-control-zoom{
  border:1px solid var(--border-strong) !important;
  border-radius:var(--r-md) !important;
  box-shadow:var(--shadow) !important;
  overflow:hidden;
  margin:12px !important;
}
.leaflet-control-zoom a{
  background-color:rgba(4,7,7,.985);
  background-image:var(--control-texture);
  background-size:100% 100%,300px auto;
  background-position:center;
  color:var(--text-dim);
  border:0;
  border-bottom:1px solid var(--border);
  width:32px;height:32px;line-height:32px;
  font-family:var(--font-num);
}
.leaflet-control-zoom a:last-child{border-bottom:0}
.leaflet-control-zoom a:hover{color:var(--accent);background-color:rgba(6,11,8,.98)}

/* Attribution lives in the coordinates bar (app.js moves the control's own
   element there), so it keeps updating per basemap without fighting the
   edition badge and the coordinates for the same corner. */
#footBar .attr{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  overflow:hidden;
}
#footBar .attr .leaflet-control-attribution{
  position:static;
  margin:0;
  padding:0;
  max-width:100%;
  background:none !important;
  border:0;
  border-radius:0;
  box-shadow:none;
  color:var(--text-faint) !important;
  font-family:var(--font);
  font-size:8.5px !important;
  letter-spacing:.03em;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#footBar .attr a{color:var(--text-dim) !important;text-decoration:none}
#footBar .attr a:hover{color:var(--accent) !important}
#footBar .attr svg{display:none}

/* Leaflet stacks its own control corners; keep them clear of the V7 panels. */
.leaflet-top.leaflet-left{top:56px;left:0}
.leaflet-bottom.leaflet-left{bottom:38px}
.leaflet-bottom.leaflet-right{bottom:30px}
.leaflet-top,.leaflet-bottom{z-index:13}

/* Legend / weather / pin-drop controls the app already owns, dressed to match. */
.leaflet-control:not(.leaflet-control-zoom):not(.leaflet-control-attribution){
  background-color:rgba(4,7,7,.97);
  background-image:var(--surface-texture);
  background-size:100% 100%,100% 100%,560px auto;
  background-position:center;
  background-repeat:no-repeat;
  border:1px solid var(--border-strong);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow2);
  color:var(--text-dim);
  font-size:10px;
  letter-spacing:.06em;
}

/* ---------- 4. live-data affordances ------------------------------------- */


/* MAP LAYERS holds three cells in the prototype because it listed three
   styles. The live registry carries five in hike mode and four in dive, so the
   row becomes a three-up grid: identical cells, wrapped instead of squeezed. */
.lay{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.lay .sw{
  flex:none;
  min-height:40px;
  padding:4px 3px;
  text-align:center;
  line-height:1.25;
  hyphens:auto;
}

/* Overlay toggle rows under MAP LAYERS. Dotted hairline = provisional, the
   design system's rule for auto/optional things. */
#overlayRows{margin-top:9px;display:flex;flex-direction:column;gap:5px}
#overlayRows:empty{display:none}
.ovRow{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;
  padding:7px 9px;
  border:1px dotted var(--border-strong);
  border-radius:var(--r-sm);
  background-color:rgba(4,7,7,.985);
  background-image:var(--control-texture);
  background-size:100% 100%,300px auto;
  background-position:center;
  color:var(--text-dim);
  font-family:var(--font);
  font-size:9px;
  letter-spacing:.09em;
  text-align:left;
  text-transform:uppercase;
  min-height:32px;
}
.ovRow:hover{color:var(--text);border-color:var(--border-strong)}
.ovRow .dot{
  width:8px;height:8px;flex:none;border-radius:50%;
  border:1px solid var(--border-strong);background:transparent;
}
.ovRow.on{
  color:var(--accent);
  border-style:solid;
  border-color:var(--accent);
  box-shadow:inset 0 0 16px color-mix(in srgb,var(--accent) 8%,transparent);
}
.ovRow.on .dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px var(--accent)}

/* First-run clarity: the ranked list fills in as each spot's feeds answer, so
   it says how far along it is rather than looking like a half-loaded list. */
#rankPanel .hd{flex-wrap:nowrap}
#rankPanel .hd b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rankProgress{
  flex:none;
  margin-left:8px;
  font-size:8.5px;
  letter-spacing:.12em;
  color:var(--text-faint);
  white-space:nowrap;
}
#rankProgress[hidden]{display:none}

/* The elevation profile card. js/elevation.js renders a hand-rolled SVG and
   injects css/elevation.css; these rules re-point its colours at the section
   accent so the chart belongs to the page it sits in. */
.profileHost{min-height:230px;display:flex;flex-direction:column;justify-content:center}
.profileHost .ph.chartTall{width:100%}
.profileHost svg{width:100%;height:auto;overflow:visible}
.profileHost .elev-fill,.profileHost [class*="elev"] path[fill]:not([fill="none"]){
  fill:color-mix(in srgb,var(--accent) 18%,transparent);
}
.profileHost .elev-line,.profileHost path[stroke]:not([stroke="none"]){stroke:var(--accent)}
.profileHost text{fill:var(--text-dim);font-family:var(--font);font-size:9px}
.profileHost line,.profileHost .elev-grid{stroke:var(--border)}
.profileHost .elev-unavailable,.profileHost p{
  color:var(--text-dim);font-size:11px;line-height:1.55;margin:0;
}
.depthPlate{padding-top:2px}

/* Log form: the prototype's two-up row, lifted out of its inline style so the
   480px breakpoint can collapse it without an !important fight. */
.fieldRow2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.modalError{
  color:var(--orange-bright);
  font-size:10px;
  letter-spacing:.06em;
  min-height:13px;
}
.field input[type="date"],.field input[type="time"]{color-scheme:dark}

.noscript{
  position:fixed;inset:0;display:grid;place-items:center;
  padding:40px;text-align:center;color:var(--text-dim);font-size:13px;
}

/* ---------- 5. responsive parity ----------------------------------------- */

/* The edition badge sits above the coordinates bar instead of on top of it,
   and it belongs to the map: on a scrolling page it would sit on the page's
   own coordinates footer. */
.badge{bottom:44px}
body:not([data-view="map"]) .badge{display:none}

@media (max-width:980px){
  .leaflet-top.leaflet-left{top:52px}
}
@media (max-width:760px){
  /* Name pills run off a phone screen, so only the selected pin carries one. */
  .atlas-pin-wrap .pin.named .plbl,
  .atlas-pin-wrap .pin:hover .plbl{opacity:0}
  .atlas-pin-wrap .pin.sel .plbl{opacity:1}
  .leaflet-control-zoom{margin:8px !important}
  .leaflet-top.leaflet-left{top:50px}
  .leaflet-bottom.leaflet-left,.leaflet-bottom.leaflet-right{bottom:calc(42vh + 16px)}
  .leaflet-control-attribution{max-width:70vw}
  #overlayRows{display:none}
}
@media (max-width:480px){
  .fieldRow2{grid-template-columns:1fr;gap:0}
}
@media (prefers-contrast:more){
  .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) contrast(1.05)}
  .ovRow{background-image:none;background-color:#030505}
}

/* =============================================================================
   SUB-LOCATION PINS + SUB-LOCATION DETAIL — the 2026-08-20 feature restore.
   Named features nested under a dive site (Land of Oz, the bubblers, moorings)
   explode out of their selected parent as smaller accent-ring dots and get
   their own obsidian-panel detail view. Vocabulary: the V7 .pin/.plbl pair at
   reduced scale, the ovRow row grammar for tappable lists, the copyRow for GPS.
   ============================================================================= */

/* The dots: visibly children of the site pin — smaller, thinner ring, hollow. */
.atlas-sub-wrap{background:none;border:0}
.atlas-sub-wrap .pin.sub{
  width:12px;height:12px;
  border-width:2px;
  background:rgba(2,7,8,.92);
  box-shadow:0 0 0 1.5px rgba(2,7,8,.55),0 2px 8px rgba(0,0,0,.4),0 0 9px color-mix(in srgb,var(--accent) 11%,transparent);
}
.atlas-sub-wrap .pin.sub:hover,
.atlas-sub-wrap .pin.sub.sel{background:var(--accent);box-shadow:0 0 12px var(--accent)}
.atlas-sub-wrap .pin.sub.hz{border-color:var(--orange-bright)}
.atlas-sub-wrap .pin.sub.hz:hover,
.atlas-sub-wrap .pin.sub.hz.sel{background:var(--orange-bright);box-shadow:0 0 12px var(--orange-bright)}
.atlas-sub-wrap .pin.sub .plbl{left:14px;top:-3px;font-size:8.5px;padding:1px 5px}
/* Every expanded child wears its pill once the map is close enough to
   separate them (js/atlas/subpins.js toggles .subZoom on #map at z>=13.5);
   below that the site-pin rule applies: hover and selected only. */
#map.subZoom .atlas-sub-wrap .pin.sub .plbl{opacity:1}

/* Panel section eyebrow — same voice as the floating panels' h5. */
.secH{
  font-size:9px;letter-spacing:.17em;color:#C2CAC2;font-weight:400;
  margin:14px 0 8px;padding-top:12px;border-top:1px solid var(--border);
}

/* SPOTS AT THIS SITE rows */
.subList{display:flex;flex-direction:column;gap:5px}
.subRow{
  display:flex;align-items:center;gap:8px;
  width:100%;min-height:34px;
  padding:7px 9px;
  border:1px dotted var(--border-strong);
  border-radius:var(--r-sm);
  background-color:rgba(4,7,7,.985);
  background-image:var(--control-texture);
  background-size:100% 100%,300px auto;
  background-position:center;
  color:var(--text-dim);
  font-family:var(--font);
  text-align:left;
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
.subRow b{font-size:10.5px;font-weight:400;letter-spacing:.04em;color:var(--text)}
.subRow .k{font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);margin-left:auto}
.subRow .arr{color:var(--text-faint);font-size:12px}
.subRow:hover{border-color:var(--accent);border-style:solid;color:var(--text)}
.subRow:hover .arr{color:var(--accent)}

/* External link rows (videos, guides) — WATCH / LEARN MORE / FIELD NOTES. */
.linkList{display:flex;flex-direction:column;gap:5px}
.linkRow{
  display:flex;align-items:center;gap:8px;
  width:100%;min-height:34px;
  padding:7px 9px;
  border:1px dotted var(--border-strong);
  border-radius:var(--r-sm);
  background-color:rgba(4,7,7,.985);
  background-image:var(--control-texture);
  background-size:100% 100%,300px auto;
  background-position:center;
  color:var(--text-dim);
  text-decoration:none;
  transition:color .2s ease,border-color .2s ease;
}
.linkRow .pl{color:var(--accent);font-size:8px;flex:none}
.linkRow .t{font-size:10.5px;letter-spacing:.03em;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkRow .ch{font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-left:auto;flex:none;max-width:38%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkRow .ext{color:var(--text-faint);font-size:10px;flex:none}
.linkRow:hover{border-color:var(--accent);border-style:solid}
.linkRow:hover .ext{color:var(--accent)}
.linkRow:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent);border-style:solid}
.linkRow:focus-visible .ext{color:var(--accent)}

/* Sub-location detail chrome */
#detailPanel.subpinMode .actions{display:none}
.subBack{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--border-strong);
  background-color:rgba(4,7,7,.985);
  background-image:var(--control-texture);
  background-size:100% 100%,300px auto;
  background-position:center;
  border-radius:999px;
  color:var(--text-dim);
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 12px;margin-bottom:10px;
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
.subBack:hover{color:var(--accent);border-color:var(--accent)}
#detailBody .copyRow{margin-top:10px}

/* SPOTS AT THIS SITE on the full dive page */
.subLead{font-size:11px;color:var(--text-dim);margin-bottom:12px;max-width:640px}
.pageSubGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.pageSub h6{margin-bottom:6px}
.pageSub .subDesc{font-size:10.5px;color:var(--text-dim);line-height:1.6;margin-top:4px}

/* =============================================================================
   FIELD NOTES + WRECK HISTORY — the 2026-08-20 Phase C feature restore.
   These cards use the V7 card, stat and dotted-row vocabulary while keeping
   the researched prose readable at desktop and phone widths.
   ============================================================================= */

/* Chart-derived wreck depth provenance sits immediately under the published
   depth stat bar, so the two sources cannot be mistaken for one measurement. */
.chartedDepthNote{
  display:flex;align-items:flex-start;gap:9px;
  margin-top:8px;padding:7px 9px;
  border:1px dotted var(--border-strong);
  border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--accent) 4%,rgba(4,7,7,.82));
  color:var(--text-dim);
  font-size:8.5px;letter-spacing:.08em;line-height:1.45;
}
.chartedDepthNote[hidden]{display:none}
.chartedDepthLabel{color:var(--accent);white-space:nowrap}
.chartedDepthFacts{display:flex;flex-wrap:wrap;gap:3px 0}
.chartedDepthFacts span{display:inline-flex;align-items:center;white-space:nowrap}
.chartedDepthFacts span+span::before{
  content:"/";margin:0 7px;color:var(--border-strong);
}

.diveResearchGrid{grid-template-columns:minmax(0,1.35fr) minmax(300px,.9fr)}
.diveResearchGrid.oneCard{grid-template-columns:1fr}
.diveResearchGrid.oneCard>.card:not([hidden]){grid-column:1/-1}
#pageSubWrap[hidden],
#diveResearchWrap[hidden],
#diveResearchWrap>.card[hidden]{display:none!important}
.wreckHistoryCard,.fieldNotesCard{min-width:0}
.researchLead{
  max-width:640px;margin:0 0 10px;
  color:var(--text-dim);font-size:11px;line-height:1.6;
}
.wreckVessel{
  margin:0 0 11px;
  color:var(--text);font-family:var(--font-h3);
  font-size:14px;line-height:1.45;letter-spacing:.025em;
}
.wreckFacts{
  display:grid;grid-template-columns:minmax(100px,.42fr) minmax(160px,1fr);
  gap:1px;margin-bottom:12px;
  border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;
  background:var(--border);
}
.wreckFacts>div{
  display:flex;flex-direction:column;gap:3px;
  min-width:0;padding:9px 10px;background:rgba(4,7,7,.82);
}
.wreckFacts .v{color:var(--text);font-family:var(--font-num);font-size:13px;line-height:1.25}
.wreckFacts .t{color:var(--text-dim);font-size:8px;letter-spacing:.14em}
.wreckStory{
  margin:0 0 11px;color:var(--text-dim);
  font-size:11.5px;line-height:1.68;
}
.wreckNote{
  display:grid;grid-template-columns:92px 1fr;gap:10px;
  padding:9px 0;border-top:1px dotted var(--border-strong);
}
.wreckNote>span{color:var(--accent);font-size:8.5px;letter-spacing:.13em}
.wreckNote p{margin:0;color:var(--text-dim);font-size:10.5px;line-height:1.58}
.wreckHistoryCard .secH,.fieldNotesCard .secH{margin-top:12px}

@media (max-width:980px){
  .diveResearchGrid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .chartedDepthNote{display:block}
  .chartedDepthLabel{display:block;margin-bottom:4px}
  .chartedDepthFacts{display:flex}
  .wreckFacts{grid-template-columns:1fr}
  .wreckNote{grid-template-columns:1fr;gap:4px}
}