/* =========================================================
   Guimbal WX — Public WWW Synced-Data Dashboard
   File: css/04-forecast-hazards-quakes.css
   Version: V2-R33 Visual Correction Pass 45 - July 2026
   Copyright: © Andrew Tunnera 2025-2026. All rights reserved.
   Role: Active runtime file
   ========================================================= */

/* ========================== Forecast / Hazards / Quakes ========================== */
.hazards-quakes-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
  align-items:stretch;
  padding:0;
  margin-bottom:var(--gap);
}
.hzq-span-2{ grid-column:1 / -1; }
#forecast7Panel{ --c1:#0ea5e9; --c2:#22c55e; min-height:0; }
#hazardsPanel{ --c1:#ef4444; --c2:#facc15; }
#quakesPanel{ --c1:#60a5fa; --c2:#ef4444; }
#forecast7Panel .ribbon-body-card,
#hazardsPanel .ribbon-body-card,
#quakesPanel .ribbon-body-card{
  box-shadow:inset 0 0 42px 15px color-mix(in oklab, var(--c1) 14%, transparent), inset 0 0 42px 15px color-mix(in oklab, var(--c2) 12%, transparent), 0 6px 16px rgba(0,0,0,.18);
}
.forecast7-grid,
#forecast7Panel .forecast7-grid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:6px;
  align-items:stretch;
}
.fct-tile,
#forecast7Panel .fct-tile{
  display:grid;
  grid-template-rows:auto auto auto auto;
  gap:3px;
  text-align:center;
  padding:6px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)), rgba(17,24,39,.32);
  box-shadow:0 0 10px 3px rgba(14,165,233,.11), 0 0 10px 3px rgba(34,197,94,.10), inset 0 0 0 1px rgba(255,255,255,.05);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.fct-tile:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.22); }
.fct-tile .dow{ color:#cfe8ff; font-size:.78rem; font-weight:900; letter-spacing:.2px; }
.fct-tile .wx-ico{ font-size:1.15rem; filter:drop-shadow(0 0 6px rgba(255,255,255,.18)); }
.fct-tile .hi-lo{ font-size:.80rem; font-weight:900; font-variant-numeric:tabular-nums; }
.fct-tile .hi{ color:#ef4444; }
.fct-tile .lo{ color:#60a5fa; }
.fct-tile .pop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  justify-self:center;
  padding:.14rem .42rem;
  border-radius:999px;
  font-weight:900;
  font-size:.76rem;
  color:#0b1520;
  background:linear-gradient(135deg, rgba(14,165,233,.86), rgba(34,197,94,.86));
  border:1px solid rgba(255,255,255,.16);
}

/* Hazards */
.haz-note-wrap{ margin:0 0 6px; }
.panel-note{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.42rem .52rem;
  margin:0;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)), rgba(0,0,0,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 14px rgba(0,0,0,.16);
  font-size:.84rem;
  line-height:1.18;
  font-weight:750;
}
.panel-note .note-ico{ font-size:1em; filter:drop-shadow(0 0 6px rgba(255,255,255,.22)); }
.panel-note a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border-radius:8px;
  color:#0b1520;
  text-decoration:none;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.24);
}
.panel-note a[target="_blank"]::after{ content:"↗"; margin-left:4px; font-weight:900; font-size:.85em; opacity:.85; }
.panel-note--hazards{ border-color:rgba(239,68,68,.35); box-shadow:0 0 12px 4px rgba(239,68,68,.14), 0 0 12px 4px rgba(250,204,21,.12), inset 0 0 0 1px rgba(255,255,255,.06); }
.panel-note--hazards .note-ico{ color:#fca5a5; }
.panel-note--hazards a{ background:linear-gradient(135deg,#f59e0b,#ef4444); }
.panel-note--quakes{ border-color:rgba(96,165,250,.35); box-shadow:0 0 12px 4px rgba(96,165,250,.14), 0 0 12px 4px rgba(239,68,68,.12), inset 0 0 0 1px rgba(255,255,255,.06); }
.panel-note--quakes .note-ico{ color:#93c5fd; }
.panel-note--quakes a{ background:linear-gradient(135deg,#60a5fa,#ef4444); }
.hazard-chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin:0 0 6px;
}
.hazard-chips .pill{
  --hz-chip:#3b82f6;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), var(--hz-chip);
  color:#fff;
  border-color:color-mix(in oklab, var(--hz-chip) 78%, #fff 12%);
  box-shadow:0 2px 8px rgba(0,0,0,.22), 0 0 10px 3px color-mix(in oklab, var(--hz-chip) 22%, transparent), inset 0 0 0 1px rgba(255,255,255,.06);
}
.hazard-chips .pill.hz-warning{ --hz-chip:var(--hz-red); }
.hazard-chips .pill.hz-watch{ --hz-chip:var(--hz-amber); }
.hazard-chips .pill.hz-advisory{ --hz-chip:var(--hz-yellow); color:#0b1520; text-shadow:none; }
.hazard-chips .pill.hz-wind{ --hz-chip:var(--hz-blue); }
.hazard-chips .pill.hz-flood{ --hz-chip:var(--hz-indigo); }
.hazard-chips .pill.hz-clear{ --hz-chip:var(--hz-green); }
.hazard-chips .pill.none{ color:#e5e7eb; background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.25); }
.nowcast-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:5px 10px;
}
.nowcast-row .kv{
  display:grid;
  grid-template-columns:minmax(10ch, 40%) minmax(0, 1fr);
  align-items:center;
  column-gap:8px;
}
.nowcast-row .kv .k,
.nowcast-row .kv .v{ font-size:.82rem; }

/* Quakes */
.quakes-strip{
  position:relative;
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  align-items:stretch;
  overflow-x:auto;
  overflow-y:hidden;
  padding:5px 6px 6px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  scrollbar-width:thin;
  mask-image:linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.quakes-strip::-webkit-scrollbar{ height:8px; }
.quakes-strip::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); border-radius:10px; }
.quakes-strip::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.22); border-radius:10px; }
.quakes-strip::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.32); }
.q-row{
  display:grid;
  grid-template-rows:auto 1fr;
  gap:5px;
  margin:4px 0 6px;
}
#quakesPanel .q-row:first-of-type{ --qglow:rgba(168,85,247,.24); --qglow-border:rgba(168,85,247,.40); }
#quakesPanel .q-row:last-of-type{ --qglow:rgba(59,130,246,.24); --qglow-border:rgba(59,130,246,.40); }
.q-label.small{
  justify-self:start;
  padding:3px 8px;
  border-radius:8px;
  border:1px solid var(--qglow-border, rgba(255,255,255,.14));
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(17,24,39,.45);
  color:#eaf2ff;
  box-shadow:inset 0 0 26px 9px var(--qglow, rgba(96,165,250,.20)), 0 4px 10px rgba(0,0,0,.18);
  font-size:.78rem;
  font-weight:900;
  line-height:1;
}
.q-row .quakes-strip{ box-shadow:inset 0 0 36px 13px var(--qglow, rgba(96,165,250,.16)), 0 6px 14px rgba(0,0,0,.16); }
.q-chip,
.quake-chip{
  box-sizing:border-box;
  display:grid;
  grid-template-columns:max-content 1fr max-content;
  align-items:start;
  column-gap:8px;
  row-gap:6px;
  min-width:clamp(170px, 26vw, 260px);
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 5px 12px rgba(0,0,0,.14), 0 0 12px 4px var(--qglow, rgba(96,165,250,.16));
}
.q-head{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:max-content 1fr max-content;
  align-items:center;
  column-gap:8px;
}
.q-mag{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  padding:.18rem .48rem .16rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:#a7f3d0;
  color:#111827;
  font-weight:900;
  line-height:1;
}
.q-mag.m4{ background:#fde68a; }
.q-mag.m5{ background:#fb923c; }
.q-mag.m6{ background:#f87171; }
.q-mag::after{ content:" — Mag — "; margin:0 8px; color:#000; font-weight:900; }
.q-place{
  grid-column:1 / -1;
  margin-top:1px;
  color:#e5e7eb;
  font-size:.88rem;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.q-meta span:first-child{ display:none; }
.q-meta span:last-child{ display:block; color:#a3a3a3; font-size:.80rem; white-space:nowrap; }