/* =============================================================================
   css/atlas-weather.css — the FULL CONDITIONS drawer, the detail-page weather
   block, and the map advisory strip. 2026-08-20.

   Everything here is built from the same custom properties css/atlas.css
   defines (Topographic Night layer + V5 panel material + V6 text hierarchy),
   so a palette change there restyles all of this for free. The section accent
   appears only on key figures and the active state; orange only on genuine
   advisories — the design system's binding restraint rule.
   ============================================================================= */

/* ---- the drawer ---------------------------------------------------------- */

/* Same slot, same obsidian material and entry motion as #detailPanel — the
   drawer IS a detail panel, its subject is today instead of a spot. */
#wxPanel{
  position:absolute;
  top:64px;right:16px;bottom:54px;width:360px;
  z-index:23;                       /* one above #detailPanel so they never interleave */
  display:none;
  flex-direction:column;
  overflow:hidden;
  background:var(--v5-panel-surface,
    radial-gradient(ellipse at center,rgba(4,6,7,.99) 0%,rgba(5,7,8,.98) 38%,rgba(5,7,8,.91) 58%,rgba(5,7,8,.64) 78%,rgba(5,7,8,.43) 100%));
  border:1px solid var(--border-strong);
  border-radius:17px;
  box-shadow:0 24px 64px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.065),inset 0 0 42px rgba(255,255,255,.012);
  backdrop-filter:blur(12px) saturate(.78);
  -webkit-backdrop-filter:blur(12px) saturate(.78);
  animation:v5PanelIn .28s cubic-bezier(.2,.8,.2,1);
}
#wxPanel.on{display:flex}
#wxPanel::before{
  content:"";position:absolute;inset:4px;z-index:2;pointer-events:none;
  border:1px solid rgba(255,255,255,.035);border-radius:12px;
}
#wxPanel .hd{
  display:flex;align-items:center;gap:8px;
  min-height:48px;padding:11px 14px;
  border-bottom:1px solid var(--border);
}
#wxPanel .hd b{
  font-size:10px;letter-spacing:.17em;color:var(--v6-ink);font-weight:400;
}
#wxPanel .hd button{
  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:var(--r-sm);
  color:var(--v6-ink-soft);
  font-size:9px;letter-spacing:.06em;
  min-height:32px;padding:4px 10px;
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
#wxPanel .hd button:hover{color:var(--v6-key);border-color:var(--accent)}
#wxPanel .hd #wxRefresh{margin-left:auto}
#wxBody{flex:1;overflow-y:auto;padding:14px}

/* ---- shared weather vocabulary ------------------------------------------ */

.wxDate{
  font-family:var(--font-h2);
  font-size:14px;color:var(--v6-ink);letter-spacing:.03em;
}
.wxWhere{
  font-size:9.5px;color:var(--v6-ink-faint);letter-spacing:.1em;
  text-transform:uppercase;
  margin:3px 0 12px;
}

/* stat tiles — the same 1px-hairline grid as the V7 stat bar */
.wxGrid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--border);border:1px solid var(--border);
  border-radius:var(--r-md);overflow:hidden;
  margin-bottom:12px;
}
.wxGrid.three{grid-template-columns:1fr 1fr 1fr}
.wxGrid.two{grid-template-columns:1fr 1fr}
.wxkv{background:rgba(4,7,7,.82);padding:9px 10px;min-width:0}
.wxkv .v{
  font-family:var(--font-num);font-size:13px;color:var(--v6-ink);
  line-height:1.25;overflow-wrap:break-word;
}
.wxkv.key .v{color:var(--v6-key)}
.wxkv.warn .v{color:var(--v6-warning)}
.wxkv .t{font-size:7.5px;letter-spacing:.13em;color:var(--v6-ink-soft);margin-top:3px}

/* section eyebrows + ledger rows */
.wxh{
  font-size:9px;letter-spacing:.18em;color:#C5CDC5;font-weight:400;
  margin:14px 0 8px;
}
#wxBody .r,.wxFull .r,.wxFeeds .r{
  display:flex;justify-content:space-between;gap:10px;
  font-size:10.5px;color:var(--v6-ink-soft);
  border-bottom:1px dotted var(--border);
  padding-bottom:5px;margin-bottom:6px;
}
#wxBody .r b,.wxFull .r b{color:var(--v6-ink);font-weight:400;text-align:right}

/* the rain sparkline */
.wxSpark{margin:2px 0 4px}
.wxSpark svg{
  display:block;width:100%;height:44px;
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:rgba(3,6,6,.6);
  padding:3px 2px 0;box-sizing:border-box;
}
.wxSpark svg line{stroke:var(--border-strong);stroke-width:.6}
.wxSpark svg rect{fill:var(--accent);opacity:.85}
.wxSpark .cap{
  display:flex;justify-content:space-between;
  font-size:7.5px;letter-spacing:.1em;color:var(--v6-ink-faint);
  margin-top:4px;
}
.wxSpark .cap span:nth-child(2){color:var(--v6-ink-soft)}

/* advisories — the only orange surfaces */
.wxAlert{
  border:1px solid var(--orange);
  border-left:3px solid var(--orange-bright);
  border-radius:var(--r-md);
  background:rgba(161,78,49,.08);
  padding:9px 11px;margin-bottom:8px;
  display:flex;flex-direction:column;gap:3px;
}
.wxAlert b{
  font-size:10.5px;letter-spacing:.06em;color:var(--v6-warning);font-weight:400;
  text-transform:uppercase;
}
.wxAlert span{font-size:10px;color:var(--v6-ink-soft);line-height:1.5}
.wxAlert .until{color:var(--v6-ink-faint);font-size:9px;letter-spacing:.06em}
.wxNoAlert{
  border:1px dashed var(--border-strong);border-radius:var(--r-sm);
  padding:8px 10px;
  font-size:10px;color:var(--v6-ink-faint);letter-spacing:.04em;
}
.wxNoAlert.warn{
  border-color:rgba(196,154,75,.72);
  color:var(--folio-ochre,var(--v6-warning));
  background:rgba(196,154,75,.08);
}

/* feeds + freshness footer */
.wxFeeds{margin-top:4px}
.wxStale{
  margin-top:10px;
  border:1px dashed var(--border-strong);border-radius:var(--r-sm);
  padding:7px 10px;
  font-size:9.5px;color:var(--v6-ink-soft);line-height:1.5;
}
.wxUpdated{
  margin-top:12px;
  font-size:8.5px;letter-spacing:.14em;color:var(--v6-ink-faint);
}

/* ---- the CURRENT CONDITIONS panel gets an opener ------------------------- */

#condOpen{
  width:100%;margin-top:9px;
  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:var(--r-sm);
  color:var(--v6-ink-soft);
  font-family:var(--font-num);
  font-size:9px;letter-spacing:.1em;
  min-height:30px;padding:6px 10px;
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
#condOpen:hover{color:var(--v6-key);border-color:var(--accent)}

/* ---- the phone entry point ------------------------------------------------ */

/* The right stack (and its FULL CONDITIONS button) is hidden at phone widths,
   so the topbar carries a compact opener there. Hidden on desktop, where the
   panel's own button is the entry. */
#condOpenTop{
  display:none;
  margin-left:auto;
  min-height:34px;
  padding:7px 13px;
  border:1px solid var(--border-strong);
  border-radius:999px;
  background-color:rgba(4,7,7,.985);
  background-image:var(--control-texture);
  background-size:100% 100%,300px auto;background-position:center;
  box-shadow:var(--shadow);
  color:var(--v6-ink-soft);
  font-family:var(--font-num);
  font-size:9px;letter-spacing:.1em;
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
#condOpenTop:hover{color:var(--v6-key);border-color:var(--accent)}
@media (max-width:980px){
  #condOpenTop{display:block}
}

/* ---- map advisory strip -------------------------------------------------- */

/* Sits under the topbar when NWS alerts are active. Factual event names,
   click opens the drawer at the ADVISORIES section. */
#advisoryStrip{
  position:absolute;top:56px;left:50%;transform:translateX(-50%);
  z-index:18;
  display:none;align-items:center;gap:8px;
  max-width:min(560px,calc(100% - 700px));
  padding:7px 14px;
  border:1px solid var(--orange);
  border-radius:999px;
  background-color:rgba(4,7,7,.97);
  background-image:var(--control-texture);
  background-size:100% 100%,300px auto;background-position:center;
  box-shadow:var(--shadow),0 0 18px rgba(201,106,71,.12);
  color:var(--v6-warning);
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;
}
#advisoryStrip.on{display:flex}
#advisoryStrip .dot{
  width:7px;height:7px;flex:none;border-radius:50%;
  background:var(--orange-bright);
  box-shadow:0 0 9px var(--orange-bright);
}
#advisoryStrip:hover{border-color:var(--orange-bright)}

/* ---- detail-page full weather block -------------------------------------- */

.wxDivider{height:1px;background:var(--border);margin:12px 0}
.wxFull .wxh:first-child{margin-top:2px}
.wxFull .wxGrid{margin-bottom:10px}

/* The full-width weather row flows its sections into columns so the page
   reads like a chart legend, not one long strip. break-inside guards keep a
   tile grid or an advisory card from splitting across the fold. */
.wxCols{column-count:2;column-gap:26px}
.wxCols .wxSec{break-inside:avoid;display:block}
.wxCols .wxGrid,.wxCols .wxSpark,.wxCols .wxAlert,.wxCols .wxNoAlert{break-inside:avoid}
.wxCols .wxSec:first-child .wxh{margin-top:0}
@media (max-width:980px){.wxCols{column-count:1}}

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

@media (max-width:1180px){
  #wxPanel{width:330px}
  #advisoryStrip{max-width:min(480px,calc(100% - 640px))}
}
@media (max-width:980px){
  #advisoryStrip{max-width:calc(100% - 320px)}
}
@media (max-width:760px){
  #wxPanel{top:56px;left:8px;right:8px;bottom:80px;width:auto;border-radius:15px}
  #advisoryStrip{
    top:50px;left:10px;right:10px;transform:none;max-width:none;
  }
  /* three cells stay three-up — collapsing to two leaves a phantom cell of
     bare grid background where the missing sixth tile would sit. */
  .wxGrid.three .wxkv .v{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  #wxPanel{animation:none}
}
@media (prefers-contrast:more){
  #wxPanel,#advisoryStrip{background-image:none;background-color:#030505}
  .wxkv{background:#030505}
}