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

/* ========================== Reset & Base ========================== */
*{ box-sizing:border-box; }
html{ min-height:100%; }
body{
  min-height:100%;
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 18% -10%, rgba(14,165,233,.12), transparent 52%),
    radial-gradient(1000px 540px at 82% -8%, rgba(250,204,21,.10), transparent 50%),
    var(--bg);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:15px;
  line-height:1.35;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{
  width:min(98%, 1920px);
  margin:0 auto;
  padding:0 6px;
}
.main{ min-width:0; }
button,input,select,textarea{ font:inherit; }
button{ cursor:pointer; }
a{ color:inherit; }
code{ color:#e5e7eb; }
.tiny{ font-size:.82rem; }
.muted{ color:var(--muted); }
.ico{ margin-right:.45rem; display:inline-block; transform:translateY(1px); }
.hidden,[hidden]{ display:none !important; }

.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  position:fixed;
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  padding:8px 12px;
  background:var(--blue);
  color:#fff;
  border-radius:8px;
  z-index:9999;
}

/* ========================== Buttons / Pills ========================== */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  min-height:27px;
  padding:.24rem .56rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.30);
  color:#f8fafc;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
    rgba(17,24,39,.70);
  box-shadow:0 2px 8px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.07);
  text-shadow:0 1px 0 rgba(0,0,0,.45);
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}
.pill--sm{ min-height:25px; padding:.20rem .50rem; font-size:.78rem; }
.pill.transparent{ background:rgba(255,255,255,.07); color:#e2e8f0; }
.pill.units.metric,
.pill.units:not(.imperial){ background:linear-gradient(135deg,#3b82f6,#0ea5e9); color:#fff; border-color:rgba(147,197,253,.70); }
.pill.units.imperial{ background:linear-gradient(135deg,#ef4444,#f97316); color:#fff; border-color:rgba(252,165,165,.70); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.48rem .72rem;
  border-radius:10px;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.05);
  color:var(--ink);
  text-decoration:none;
}
.btn.primary{ background:linear-gradient(135deg,var(--accent),#ef4444); color:#fff; border-color:transparent; }
.btn.secondary{ background:rgba(55,65,81,.75); color:#e5e7eb; }
.btn:focus-visible,
.pill:focus-visible,
.foot-link:focus-visible,
.input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--ring);
  outline-offset:2px;
}
.btn.busy{ pointer-events:none; opacity:.72; }
.btn.busy .spinner{
  width:16px;
  height:16px;
  border:2px solid rgba(255,255,255,.38);
  border-top-color:#fff;
  border-radius:50%;
  display:inline-block;
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ========================== Title Bar ========================== */
.title3d{
  position:relative;
  margin:6px 0 5px;
  perspective:1200px;
}
.title3d-inner{
  position:relative;
  transform-style:preserve-3d;
  padding:8px 12px;
  border-radius:14px;
  overflow:hidden;
  background:
    linear-gradient(180deg, var(--bar-sheen), transparent 55%),
    linear-gradient(135deg, var(--bar-start), var(--bar-end));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:var(--shadow), var(--dual-glow-md), inset 0 0 0 1px rgba(255,255,255,.16);
}
.title3d h1{
  margin:0;
  text-align:center;
  line-height:1.04;
  letter-spacing:.25px;
  font-size:clamp(1.04rem, 2.1vw, 1.52rem);
}
.title3d .sub{
  margin:3px 0 0;
  text-align:center;
  color:#04121f;
  opacity:.90;
  font-weight:800;
  letter-spacing:.12px;
  font-size:clamp(.78rem, 1.4vw, .95rem);
}
.title3d .gloss{
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(110% 55% at 50% -22%, rgba(255,255,255,.50), transparent 60%);
}
.title3d h1 .t-brand{
  color:var(--yellow);
  font-style:italic;
  font-weight:900;
  margin-right:.35ch;
  text-shadow:0 0 8px rgba(31,41,55,.55), 0 0 2px rgba(31,41,55,.90);
  -webkit-text-stroke:.35px rgba(17,24,39,.70);
}
.title3d h1 .t-title{
  color:var(--blue);
  font-weight:900;
  text-shadow:0 0 8px rgba(31,41,55,.55), 0 0 2px rgba(31,41,55,.90);
  -webkit-text-stroke:.35px rgba(17,24,39,.70);
}
.title3d h1 .t-sun{
  margin:0 .42ch;
  transform:translateY(1px);
  filter:drop-shadow(0 0 6px rgba(250,204,21,.46)) drop-shadow(0 0 10px rgba(14,165,233,.25));
}
.title3d .sub .sub-ico{ margin-right:.45ch; transform:translateY(1px); }

/* ========================== Status Bar ========================== */
.status-bar{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 6px;
  padding:5px 8px;
  border-radius:12px;
  background:
    linear-gradient(180deg, var(--bar-sheen), transparent 42%),
    linear-gradient(135deg, var(--bar-end), var(--bar-start));
  box-shadow:var(--shadow-soft), var(--dual-glow-sm), inset 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(6px) saturate(130%);
}
.status-bar > *{ position:relative; z-index:1; }
.status-left,
.status-right{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.status-right{ margin-left:auto; }
.top-clock{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 7px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(15,20,26,.36);
  color:#f8fafc;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.30);
  font-variant-numeric:tabular-nums;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}
.top-clock::before{ content:"🕒"; transform:translateY(1px); opacity:.95; }
.top-clock--sm{ font-size:.84rem; }
#topClockTime{ letter-spacing:.12px; }
#status{ color:#f8fafc; }
#moonPill{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding:var(--moon-pill-pad-y) var(--moon-pill-pad-x);
  min-height:var(--moon-pill-min-h);
}
.status-bar #dayStatusPill.day{ background:linear-gradient(135deg,#fde047,#f97316); color:#0b1520; text-shadow:0 1px 0 rgba(255,255,255,.25); }
.status-bar #dayStatusPill.dawn{ background:linear-gradient(135deg,#fca5a5,#f59e0b); color:#0b1520; }
.status-bar #dayStatusPill.dusk{ background:linear-gradient(135deg,#fb923c,#a78bfa); color:#0b1520; }
.status-bar #dayStatusPill.night{ background:linear-gradient(135deg,#0f172a,#1e293b); color:#e5e7eb; }
.status-bar .pill.live{ background:linear-gradient(135deg,#34d399,#22c55e); color:#0b1520; border-color:#22c55e; text-shadow:0 1px 0 rgba(255,255,255,.35); }
.status-bar #hazDupPill{
  --hz-chip:var(--hz-red);
  color:#0b1520;
  background:linear-gradient(135deg,var(--hz-chip), color-mix(in oklab, var(--hz-chip) 70%, black));
  border-color:color-mix(in oklab, var(--hz-chip) 80%, #fff 12%);
}
#hazDupPill.hz-warning,#hazDupPill[data-sev="warning"]{ --hz-chip:var(--hz-red); }
#hazDupPill.hz-watch,#hazDupPill[data-sev="watch"]{ --hz-chip:var(--hz-amber); }
#hazDupPill.hz-advisory,#hazDupPill[data-sev="advisory"]{ --hz-chip:var(--hz-yellow); }
#hazDupPill.hz-wind,#hazDupPill[data-sev="wind"]{ --hz-chip:var(--hz-blue); }
#hazDupPill.hz-flood,#hazDupPill[data-sev="flood"]{ --hz-chip:var(--hz-indigo); }
#hazDupPill.hz-clear,#hazDupPill[data-sev="clear"]{ --hz-chip:var(--hz-green); }
#hazDupPill.none{ color:#e5e7eb; background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.35); }

/* ========================== Shared Card Language ========================== */
.glow-outer{ box-shadow:var(--shadow), var(--dual-glow-sm); }

.ribbon .ribbon-title{
  grid-column:1 / -1;
  justify-self:center;
}
.ribbon-title .title-ico{ margin-right:2px; transform:translateY(1px); }
.ribbon-title .title-text{
  display:inline-block;
  background:linear-gradient(90deg, var(--c1,var(--blue)), var(--c2,var(--yellow)));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.ribbon-title--tight{ margin-bottom:6px; }
.ribbon-title--glass::after{ display:none; }
.ribbon-title .glass-ico svg{ width:18px; height:18px; display:block; }
#fc7StatusPill.pill,
#hazStatusPill.pill,
#quakesStatusPill.pill{ margin-left:8px; }

/* Shared recessed rows */
.ribbon-item,
.gauge-rows .kv,
.nowcast-row .kv{
  min-width:0;
}
.ribbon-label,
.gauge-rows .kv .k,
.nowcast-row .kv .k{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  min-height:22px;
  min-width:0;
  padding:3px 7px;
  border:1px solid var(--row-label-border);
  border-radius:8px;
  background:var(--row-label-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055), inset 0 -1px 0 rgba(0,0,0,.20);
  color:#e8eaee;
  font-size:.82rem;
  line-height:1;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ribbon-value,
.gauge-rows .kv .v,
.nowcast-row .kv .v{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  min-height:22px;
  min-width:0;
  width:100%;
  padding:3px 9px;
  border:1px solid var(--row-value-border);
  border-radius:9px;
  background:var(--row-value-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.30);
  color:#f4f6f8;
  font-size:.98rem;
  line-height:1;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ribbon-unit{ margin-left:4px; opacity:.92; font-size:.88em; }
@media (hover:hover){
  .ribbon-value:hover,
  .gauge-rows .kv .v:hover,
  .nowcast-row .kv .v:hover{
    border-color:rgba(255,255,255,.23);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.34);
  }
}