/* =============================================================================
   css/atlas-layout.css — the 2026-08-20 layout redesign, per Dan's markup.

   What moved (positions ONLY — every surface material, radius and glow still
   comes from css/atlas.css, which stays the verbatim V7 prototype stylesheet):
     · HIKING / DIVING toggle       -> upper LEFT (leads the topbar)
     · MAP LAYERS                   -> top CENTER, collapsible
     · CURRENT CONDITIONS           -> upper LEFT, collapsible
     · SHOW TODAY'S TOP / rank list -> RIGHT column
   The upper-right HAWAII ADVENTURE ATLAS name pill is removed. The smaller
   bottom map badge remains as geographic context.
   What is gone: the three filter chips and the ISLAND inset panel.
   ============================================================================= */

/* ---- collapsible floating panels ------------------------------------------ */

.fpHead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;
  margin:0;padding:2px 1px;
  background:transparent;border:0;
  cursor:pointer;
  text-align:left;
}
.fpHead h5{margin-bottom:0}
.fpHead .chev{
  width:7px;height:7px;flex:0 0 auto;
  border-right:1px solid var(--text-dim);
  border-bottom:1px solid var(--text-dim);
  transform:rotate(45deg) translate(-1px,-1px);   /* pointing down = open */
  transition:transform .2s ease,border-color .2s ease;
}
.fpHead:hover h5{color:var(--text)}
.fpHead:hover .chev{border-color:var(--accent)}
.fpanel .fpBody{margin-top:10px}
.fpanel.closed .fpBody{display:none}
.fpanel.closed .fpHead .chev{transform:rotate(-45deg) translate(0,1px)}  /* pointing right = closed */
.fpanel.closed{padding-bottom:10px}

/* ---- CENTER dock: MAP LAYERS ----------------------------------------------- */

#layersDock{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:248px;z-index:21;pointer-events:none;
}
#layersDock>*{pointer-events:auto}
#layersPanel{width:100%}

/* The moved floating panels keep the tactile topographic material that
   css/atlas.css scopes to the original right-side stack. */
#layersPanel,
#leftStack .fpanel{
  background-color:rgba(4,7,7,.97);
  background-image:var(--surface-texture);
  background-size:100% 100%,100% 100%,560px auto;
  background-position:center,center,center;
  background-repeat:no-repeat,no-repeat,no-repeat;
  border-color:var(--border-strong);
}

/* ---- LEFT dock: CURRENT CONDITIONS ----------------------------------------- */

#leftStack{
  position:absolute;top:62px;left:16px;width:248px;
  display:flex;flex-direction:column;align-items:stretch;gap:11px;
  z-index:15;pointer-events:none;
}
#leftStack>*{pointer-events:auto}
#leftStack .cond{width:100%}

/* The first-run coach occupies this same corner. Once GOT IT removes the
   coach from the DOM, the conditions card takes its normal place. */
#view-map:has(#coach) #leftStack{display:none}

/* ---- RIGHT dock: TODAY'S TOP ----------------------------------------------- */

#rightStack{
  position:absolute;top:62px;right:16px;bottom:49px;width:322px;
  display:flex;flex-direction:column;align-items:stretch;gap:11px;
  z-index:15;pointer-events:none;
}
#rightStack>*{pointer-events:auto}
#rightStack #rankPanel{
  position:static;top:auto;right:auto;bottom:auto;left:auto;
  width:100%;flex:1 1 auto;min-height:0;
}
#rightStack #rankCollapsed{
  position:static;top:auto;right:auto;bottom:auto;left:auto;
  align-self:flex-end;
}

/* Right-side drawers replace, rather than cover, the ranked dock. */
#view-map:has(#detailPanel.on) #rightStack,
#view-map:has(#wxPanel.on) #rightStack{display:none}
#view-map:has(#detailPanel.on) #layersDock,
#view-map:has(#wxPanel.on) #layersDock{display:none}
#view-map:has(#detailPanel.on) #advisoryStrip,
#view-map:has(#wxPanel.on) #advisoryStrip,
#view-map:has(#coach) #advisoryStrip{display:none}

/* The ranked dock now owns the lower-right edge. Keep the compact identity
   badge, but center it in the free map band instead of layering it over rows. */
.badge{right:auto;left:50%;transform:translateX(-50%)}
#view-map:has(#advisoryStrip.on) .badge{display:none}

/* Active advisories use the free bottom-center band so they never sit beneath
   an expanded MAP LAYERS menu. The phone layout restores the top strip. */
@media (min-width:981px){
  #advisoryStrip{
    top:auto;right:392px;bottom:58px;left:324px;
    width:auto;max-width:560px;margin-inline:auto;transform:none;
  }
}

/* ---- responsive parity ------------------------------------------------------ */

@media (max-width:1180px){
  #layersDock{width:224px}
  #leftStack{width:224px}
  #rightStack{width:285px}
}
@media (min-width:981px) and (max-width:1180px){
  #advisoryStrip{
    right:calc(clamp(300px,30vw,330px) + 32px);
    left:280px;max-width:480px;
  }
}

/* Small tablets keep the ranked list available on the right. MAP LAYERS and
   the compact conditions card yield to the map; CONDITIONS remains in the
   topbar as the full-drawer entry point. */
@media (max-width:980px){
  #layersDock,#leftStack{display:none}
  #rightStack{display:flex;width:min(330px,calc(100% - 32px))}
  .badge{display:none}
}
@media (min-width:761px) and (max-width:980px){
  #advisoryStrip{
    top:64px;right:362px;left:16px;bottom:auto;
    transform:none;max-width:none;
  }
}

/* Phones return the ranked list to the familiar full-width bottom sheet. */
@media (max-width:760px){
  #rightStack{display:contents}
  #rightStack #rankPanel{
    position:absolute;left:10px;right:10px;top:auto;bottom:10px;
    width:auto;height:42vh;min-height:285px;flex:none;
  }
  #rightStack #rankCollapsed{position:absolute;left:auto;right:10px;top:auto;bottom:10px}
}
@media (max-width:480px){
  #rightStack #rankPanel{height:46vh}
}

@media (prefers-contrast:more){
  #layersPanel,#leftStack .fpanel{background-image:none;background-color:#030505}
}