/* weather.css — warehouse weather (weather-ui.js). Tokens come from app.css. */

.wx { color: #fff; line-height: 1.35; min-width: 0; flex: none; }
.wx.l0 { --lvl: var(--ok-dk); }
.wx.l1 { --lvl: var(--warn-dk); }
.wx.l2 { --lvl: var(--crit-dk); }
svg.wi { display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.glass { background: rgba(1, 36, 68, .6); backdrop-filter: blur(5px); }

/* ---------------------------------------------------------------- the warehouse now */
.wx-now { text-shadow: 0 1px 8px rgba(1, 36, 68, .95); }
.wx-city { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; opacity: .92; }
.wx-temp { display: flex; align-items: center; gap: 8px; margin: 5px 0 3px; }
.wx-temp svg { width: 28px; height: 28px; stroke-width: 1.5; }
.wx-temp b { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -.01em; }
.wx-cond { font-size: 11px; letter-spacing: .05em; opacity: .94; }

/* ---------------------------------------------------------------- the week */
.wx-week { border-radius: 10px; padding: 7px 8px 6px; border: 1px solid rgba(255, 255, 255, .18); }
.wx-wk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; min-height: 18px; }
.wx-wk-now { display: none; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
.wx-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; white-space: nowrap; }
.wx-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--lvl); flex: none; }
.wx-tag {
  margin-left: auto; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; white-space: nowrap;
  padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .55); cursor: help;
}
.wx-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.wx-days .d {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0 4px; border-radius: 6px;
  font-weight: 600; letter-spacing: .03em; min-width: 0;
}
.wx-days .d span { font-size: 8.5px; text-transform: uppercase; opacity: .85; }
.wx-days .d:first-child span { opacity: 1; font-weight: 800; }
.wx-days .d svg { width: 17px; height: 17px; }
.wx-days .d b { font-size: 11px; font-weight: 800; }
.wx-days .d em { font-style: normal; font-size: 9px; opacity: .65; }
.wx-days .d.l1 { background: rgba(240, 180, 41, .34); box-shadow: inset 0 -3px 0 var(--warn-dk); }
.wx-days .d.l2 { background: rgba(255, 122, 87, .42); box-shadow: inset 0 -3px 0 var(--crit-dk); }
.wx-days .d.sk i { width: 17px; height: 17px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.wx-days .d.sk { animation: wx-pulse 1.4s ease-in-out infinite; }
@keyframes wx-pulse { 50% { opacity: .55; } }

/* ---------------------------------------------------------------- overview banners
 * The week is a panel along the bottom of the photo. Its edges follow the
 * padding app.css gives .banner-top, which leaves room for the slanted sides. */
.wx-banner .wx-week { position: absolute; bottom: 14px; left: 28px; right: 28px; }
.banner:nth-child(n+2) .wx-week { left: calc(var(--slant) + 22px); }
.banner:not(:last-child) .wx-week { right: calc(var(--slant) + 10px); }

/* stacked banners (app.css): a little taller so the panel clears the site name,
 * and the week stays a compact panel under it instead of stretching across */
@media (max-width: 1180px) {
  .banner-top { height: 214px; }
  .wx-banner .wx-week { right: auto; width: min(560px, calc(100% - 54px)); }
}
/* narrow: no room for the "now" block beside the site name; it moves into the panel,
 * whose header wraps, so the banner is taller still */
@media (max-width: 560px) {
  .banner-top { height: 252px; }
  .wx-banner .wx-now { display: none; }
  .wx-banner .wx-wk-now { display: inline; }
  .wx-wk-head { flex-wrap: wrap; row-gap: 4px; }
}

/* ---------------------------------------------------------------- site hero
 * One block (glass, a button): the warehouse now on the left, the week on the right.
 * Clicking it opens the detail drawer under the hero (app.js). */
.wx-hero {
  display: flex; align-items: center; gap: 20px; max-width: 100%; padding: 12px 16px 12px 18px;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .22); text-align: left; cursor: pointer;
  transition: border-color .25s, box-shadow .25s;
}
.wx-hero:not([data-panel]) { cursor: default; }
.wx-hero:hover { border-color: var(--gold-400); }
.wx-hero:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; }
.wx-hero.active { border-color: var(--gold-500); box-shadow: 0 0 0 2px var(--gold-500); }
.wx-hero .wx-now { flex: none; min-width: 108px; padding-right: 20px; border-right: 1px solid rgba(255, 255, 255, .22); }
.wx-hero .wx-week { flex: none; min-width: 0; padding: 0; border: 0; border-radius: 0; }
.wx-hero .wx-days { grid-template-columns: repeat(7, 50px); gap: 3px; }
.wx-more { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; opacity: .85; white-space: nowrap; }
.wx-more svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.wx-hero:hover .wx-more { opacity: 1; }
.wx-hero.active .wx-more svg { transform: rotate(180deg); }

/* The KPI row is pulled up over the hero by a negative margin (app.css) and sits
 * above its neighbours, so with the weather drawer open in front of it the row
 * covered the drawer's bottom. While the drawer is open the row drops below it. */
.kpi-row { transition: margin-top .5s var(--ease); }
#wx-drawer.open + .kpi-row { margin-top: 18px; }

/* the detail drawer (inside app.css's .drawer) */
.wx-dr svg.wi { width: 20px; height: 20px; color: var(--navy-700); }
.wx-cell { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.wx-sub { display: flex; align-items: center; gap: 8px; margin: 22px 0 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.wx-sub b { background: var(--blue-100); color: var(--navy-700); border-radius: 999px; padding: 1px 9px; font-size: 11px; letter-spacing: 0; }
.wx-empty { margin: 8px 0; color: var(--ink-2); font-size: 13px; }
.wx-why { color: var(--ink-2); font-size: 12px; margin-left: 6px; }
.wx-note { margin: 14px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }

@media (max-width: 720px) {
  .site-hero-right { width: 100%; align-items: stretch; }
  .wx-hero { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
  .wx-hero .wx-now { display: none; }
  .wx-hero .wx-wk-now { display: inline; }
  .wx-hero .wx-week { flex: 1; }
  .wx-hero .wx-days { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
  .wx-hero .wx-more { margin-left: auto; }
}

/* footer credit */
.ftr-wx { font-size: 12px; opacity: .8; padding: 4px 0; white-space: nowrap; }