/* =========================================================
   Guimbal Weather Demo by Andrew Tunnera
   ========================================================= */
/* =========================================================
   Fonts
   ========================================================= */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  src:url('fonts/Inter-Regular.woff2') format('woff2');
  font-display:swap;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  src:url('fonts/Inter-SemiBold.woff2') format('woff2');
  font-display:swap;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:800;
  src:url('fonts/Inter-ExtraBold.woff2') format('woff2');
  font-display:swap;
}
/* Map 900 to ExtraBold if Black is unavailable */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:900;
  src:url('fonts/Inter-ExtraBold.woff2') format('woff2');
  font-display:swap;
}

/* =========================================================
   Root Variables
   ========================================================= */
:root{
  --bg:#131315;
  --panel:#1a1a1d;
  --ink:#f4f2ee;
  --muted:#a3a3a3;

  --accent:#b91c1c;
  --ring:#e87979;

  --shadow:0 16px 36px rgba(0,0,0,.32);
  --radius:14px;

  /* Bubbles (Indoor Temp/Hum) + Pressure */
  --c-temp:#7dd3fc;
  --c-hum:#b45309;
  --c-press:#22c55e;

  /* Tubes */
  --rain:#38bdf8;
  --uv:#9333ea;
  --solar:#facc15;

  /* Validation */
  --err:#ef4444;
  --err-ring:#fca5a5;
  --err-bg:#7f1d1d33;

  /* Title bar gradient */
  --bar-start:#0ea5e9; /* blue */
  --bar-end:#facc15;   /* yellow */
  --bar-sheen:rgba(255,255,255,.12);

  /* Global dual glow colors */
  --glow-outer-a: rgba(14,165,233,0.40); /* blue */
  --glow-outer-b: rgba(250,204,21,0.28); /* amber */

  /* Unified glow tokens */
  --dual-glow-md:    0 0 16px 5px var(--glow-outer-a), 0 0 28px 10px var(--glow-outer-b);
  --dual-glow-sm22:  0 0 12px 4px var(--glow-outer-a), 0 0 22px 8px  var(--glow-outer-b);
  --dual-glow-sm20:  0 0 12px 4px var(--glow-outer-a), 0 0 20px 8px  var(--glow-outer-b);
  --dual-glow-sidebar:0 0 14px 4px var(--glow-outer-a), 0 0 24px 9px var(--glow-outer-b);

  /* Footer glass */
  --glass:#111827cc;
}

/* Global glow utility */
.glow-outer{ box-shadow: var(--shadow), var(--dual-glow-md); }

/* =========================================================
   Resets & Layout
   ========================================================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
}
.container{ width:95%; margin:0 auto; padding:0 12px; }

.ico{ margin-right:.45rem; display:inline-block; transform:translateY(1px); }
h4 .ico{ transform:none; }
.tiny{ font-size:.9rem; }
.muted{ color:var(--muted); }

/* =========================================================
   Buttons / Pills / Busy
   ========================================================= */
.pill{
  padding:.28rem .56rem;
  border-radius:999px;
  border:1px solid #ffffff33;
  color:#ffb4b4;
  background:#ffffff14;
  font-weight:600;
  line-height:1;
}
.pill--sm{ padding:.18rem .48rem; font-size:.8rem; }
.pill.units.metric{ background:#3b82f6cc; color:#fff; }
.pill.units.imperial{ background:#ef4444cc; color:#fff; }
.pill.transparent{ background:#ffffff10; border:1px solid #ffffff25; color:#e2e8f0; font-weight:700; }

.pill--demo{
  background: linear-gradient(135deg,#7c4dff 0%,#9b7bff 100%) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 6px 16px rgba(124,77,255,.35) !important;
}

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.54rem .8rem; border-radius:12px;
  border:1px solid #ffffff24; background:transparent; color:var(--ink);
  cursor:pointer;
}
.btn.primary{ background:linear-gradient(135deg,var(--accent),#ef4444); color:#fff; border:0; }
.btn:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }

.btn.busy{ position:relative; pointer-events:none; opacity:.7; }
.btn.busy .spinner{
  width:16px; height:16px; border:2px solid rgba(255,255,255,0.4);
  border-top-color:#fff; border-radius:50%; display:inline-block; animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* =========================================================
   Title Bar + Status ribbon
   ========================================================= */
.title3d{ position:relative; margin:10px 0 6px; perspective:1200px; }
.title3d-inner{
  transform-style:preserve-3d;
  padding:10px 12px;
  border-radius:14px;
  background:
    linear-gradient(180deg, var(--bar-sheen), transparent 55%),
    linear-gradient(135deg,
      color-mix(in oklab, var(--bar-start) 80%, #fff 12%),
      color-mix(in oklab, var(--bar-end) 85%, #fff 8%));
  border:1px solid color-mix(in oklab, var(--ink) 18%, transparent);
  box-shadow:
    0 16px 32px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.18) inset,
    var(--dual-glow-md);
}
.title3d h1{ margin:0; line-height:1.08; text-align:center; font-size: clamp(1.10rem, 2.4vw, 1.7rem); letter-spacing:.3px; }
.title3d h1 .t-sun{ margin:0 .45ch; font-size:1em; line-height:0; transform:translateY(2px); filter: drop-shadow(0 0 6px rgba(250,204,21,.45)) drop-shadow(0 0 10px rgba(14,165,233,.30)); }
.title3d .sub{ text-align:center; margin-top:4px; color:#04121f; opacity:.9; font-weight:700; letter-spacing:.2px; font-size: clamp(.88rem, 1.9vw, 1.02rem); }
.title3d .gloss{ position:absolute; inset:0; pointer-events:none; border-radius:inherit; background: radial-gradient(120% 60% at 50% -20%, rgba(255,255,255,.55), transparent 55%); transform: translateZ(2px); }
.title3d h1 .t-brand{ color:#facc15; 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,.85); -webkit-text-stroke: .4px rgba(17,24,39,.75); }
.title3d h1 .t-title{ color:#0ea5e9; font-weight:900; text-shadow:0 0 8px rgba(31,41,55,.55), 0 0 2px rgba(31,41,55,.85); -webkit-text-stroke: .4px rgba(17,24,39,.75); }
.title3d .title-meta{ display:none !important; }

.status-bar{
  margin-top:8px; border-radius:10px; position:relative; isolation:isolate;
  background:
    linear-gradient(180deg, var(--bar-sheen), transparent 35%),
    linear-gradient(135deg, color-mix(in oklab, var(--bar-end) 88%, #fff 8%), color-mix(in oklab, var(--uv) 88%, #fff 6%));
  border:1px solid #ffffff1a;
  box-shadow: 0 12px 24px rgba(0,0,0,.22), var(--dual-glow-sm22);
  backdrop-filter: blur(6px);
  padding:6px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.status-bar::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background: linear-gradient(to right, var(--bar-start), var(--bar-end));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  pointer-events:none; z-index:0;
}
.status-bar > *{ position:relative; z-index:1; }
.status-left{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.status-right{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.top-clock--sm{ color:#FDE047; font-variant-numeric:tabular-nums; font-weight:700; font-size:.82rem; }

/* =========================================================
   Bubble Stage & Bubbles
   ========================================================= */
.bubble-wrap{ display:grid; grid-template-rows:minmax(480px,60vh) auto; gap:8px; margin-top:4px; }
.stage{
  position:relative; border-radius:var(--radius); background:#1a1a1d center/cover no-repeat;
  border:1px solid #ffffff1a; overflow:hidden;
  box-shadow: var(--shadow), var(--dual-glow-md);
}
.stage::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(120% 100% at 50% -10%, rgba(0,0,0,.40), transparent 45%), linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.10));
  pointer-events:none;
}

/* Bubbles (animated) */
.bubble{ position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:999px; text-align:center; padding:14px 12px; border:2px solid transparent; overflow:hidden; filter:saturate(1.1); container-type:inline-size; }
.bubble-inner{ width:86%; height:86%; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6px 8px; margin:auto; text-align:center; }
.bubble .value{ max-width:92%; color:#fff; font-weight:900; font-size:clamp(26px, 18cqw, 60px); line-height:1.02; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 2px 10px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.35); }
.bubble .unit{ color:#e8e9ee; font-weight:700; opacity:.95; font-size:clamp(12px, 7cqw, 20px); text-shadow:0 1px 4px rgba(0,0,0,.35); }
.bubble .label{ margin-top:4px; font-weight:800; font-size:clamp(11px, 7cqw, 16px); letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* =========================================================
   Ribbon Panels (base)
   ========================================================= */
.ribbon{
  position:relative; border-radius:10px; padding:10px 12px 8px;
  display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:minmax(0,auto); gap:8px 24px;
  background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255,255,255,0.25);
  box-shadow: var(--dual-glow-sm22); backdrop-filter: blur(6px);
}
/* We moved headings outside; hide any stray inner titles if present */
.ribbon--panel .ribbon-title{ display:none !important; }

/* Keep the original two groups (left/right) */
.ribbon .ribbon-left{ grid-column:1; display:grid; gap:6px; }
.ribbon .ribbon-right{ grid-column:2; display:grid; gap:6px; }

/* Item & text styling (original look) */
.ribbon-item{ display:flex; align-items:baseline; gap:10px; }
.ribbon-label{ font-weight:800; letter-spacing:.2px; color:#d9efff; font-size: clamp(1.0rem, 2.0vw, 1.15rem); line-height:1.2; }
.ribbon-value{ font-weight:900; color:var(--ink); font-variant-numeric:tabular-nums; font-size: clamp(1.15rem, 2.4vw, 1.50rem); line-height:1.15; }
.ribbon-unit{ font-size:.92em; margin-left:4px; opacity:.9; }

/* Outdoor value colors */
#outdoorReadingsRibbon #outTempVal{ color:#ef4444 !important; font-weight:900; }
#outdoorReadingsRibbon #outHumVal{  color:#f59e0b !important; font-weight:900; }

/* Outdoor accent (derived) */
#dewVal{ color:#FFD54F; font-weight:700; }
#feelsVal{ color:#4FC3F7; font-weight:700; }

/* =========================================================
   Centered Card Container + Headings (outer)
   ========================================================= */
.card-center{
  grid-column: auto; /* three side-by-side on wide screens */
  display:grid; place-items:center;
  position:relative; isolation:isolate;
  padding:10px; margin-bottom:6px; border-radius:16px;
  background: rgba(0,0,0,0.30); border:1px solid rgba(255,255,255,0.18);
  box-shadow: var(--shadow), 0 0 12px 4px var(--glow-outer-a), 0 0 22px 9px var(--glow-outer-b), inset 0 0 0 1px rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
}
.card-center::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background: linear-gradient(135deg, var(--bar-start), var(--bar-end));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  pointer-events:none; z-index:0;
}
.card-center > *{ position:relative; z-index:1; }

/* Heading in the outer card */
.card-heading{ text-align:center; width:100%; margin:6px 0 10px; }
.card-heading .title-text{
  display:inline-block; font-weight:900; letter-spacing:.2px; font-size: clamp(1.05rem, 2.1vw, 1.25rem);
  background: linear-gradient(90deg, var(--c1, #0ea5e9), var(--c2, #facc15));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.card-heading::after{
  content:""; display:block; height:1.5px; width:min(520px, 88%);
  margin:6px auto 0; border-radius:2px;
  background: linear-gradient(90deg, var(--c1, #0ea5e9), var(--c2, #facc15));
  opacity:.9;
}

/* Provide per-card hues via custom properties */
.card--outdoor{ --c1:#0ea5e9; --c2:#facc15; }
.card--calc   { --c1:#0ea5e9; --c2:#facc15; }
.card--rain   { --c1:#facc15; --c2:#0ea5e9; }

/* Inner ribbon sizing inside the outer card + INNER SHADOWS */
.card-center > #outdoorReadingsRibbon,
.card-center > #outdoorRibbon,
.card-center > #rainRibbon{
  width:100%; max-width:840px; margin:0 auto;
  /* Inner shadow added here (in addition to existing subtle glows) */
  box-shadow:
    var(--dual-glow-sm22),
    inset 0 0 0 1px rgba(255,255,255,0.10),
    inset 0 10px 24px rgba(0,0,0,0.28),
    inset 0 -8px 22px rgba(0,0,0,0.22);
}

/* Restore the vertical-panel formatting for label/value rows (as before) */
.ribbon--panel{
  display:grid;
  grid-template-columns: 1fr;           /* vertical panel */
  grid-auto-rows: min-content;
  align-content: start;
  min-height: 190px;
  text-align: left;
  --label-col: clamp(16ch, 46%, 28ch);
}
.ribbon--panel .ribbon-left,
.ribbon--panel .ribbon-right{
  grid-column: 1;
  width: clamp(260px, 88%, 520px);
  margin-inline: auto;
  display: grid;
  gap: 8px;
  padding: 4px 0;
}
.ribbon--panel .ribbon-left{
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 6px;
}
.ribbon--panel .ribbon-item{
  display: grid !important;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  align-items: baseline;
  column-gap: 12px;
}
.ribbon--panel .ribbon-label{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ribbon--panel .ribbon-value{
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: .5ch;
  min-width: 4.2ch;
}

/* Ultra narrow: stack gracefully */
@media (max-width: 360px){
  .ribbon--panel .ribbon-item{
    grid-template-columns: 1fr !important;
    row-gap: 4px;
  }
  .ribbon--panel{ --label-col: auto; }
  .ribbon--panel .ribbon-label,
  .ribbon--panel .ribbon-value{ white-space: normal; }
}

/* Kill any legacy center divider line intended for inner titles */
#outdoorReadingsRibbon::before,
#outdoorRibbon::before,
#rainRibbon::before{ display:none !important; content:none !important; }

/* Wrapper grid for the three cards (unchanged) */
.ribbon-panels{
  display:grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px; align-items:stretch;
}
@media (max-width:1200px){ .ribbon-panels{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width:760px){ .ribbon-panels{ grid-template-columns: 1fr; } }

/* =========================================================
   Gauges Panel
   ========================================================= */
.sidebar{
  background:var(--panel); border:1px solid #ffffff1a; border-radius:var(--radius);
  box-shadow: var(--shadow), var(--dual-glow-sidebar);
  padding:10px;
}
.gauges-grid{ display:grid; grid-template-columns:300px repeat(4,minmax(140px,1fr)); gap:8px; }
@media (max-width:1280px){ .gauges-grid{ grid-template-columns:300px repeat(3,minmax(140px,1fr)); } }
@media (max-width:1024px){ .gauges-grid{ grid-template-columns:1fr; } }

/* Wind gauge card */
.gauge-card{
  display:grid; grid-template-rows:auto auto auto; gap:8px; align-items:center; justify-items:center;
  padding:10px; border-radius:12px;
  background: linear-gradient(180deg, rgba(239,68,68,0.10), rgba(239,68,68,0.05)), #161616;
  border:1px solid #ef4444; /* bright red */
  box-shadow: var(--shadow), 0 0 14px 3px rgba(239, 68, 68, .45), 0 0 0 1px rgba(239, 68, 68, .35) inset, var(--dual-glow-sm20);
}
.gauge-title{ font-weight:800; margin-bottom:2px; color:#fca5a5; font-size:.95rem; }
.gauge-rows{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; justify-content:center; }
.kv{ display:grid; grid-template-columns:max-content max-content; gap:6px; align-items:baseline; }
.kv .k{ color:var(--muted); font-weight:600; }
.kv .v{ font-weight:800; font-variant-numeric:tabular-nums; }

/* Tube cards */
.tube-card{
  padding:10px; border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)), #161616;
  border:1px solid #ffffff1a;
  display:grid; grid-template-rows:auto 1fr auto; justify-items:center; align-items:center; text-align:center; gap:0;
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.22) inset, var(--dual-glow-sm20);
}
.tube-title{ font-weight:800; font-size:.95rem; color:#f9fafb; }
.tube{
  --height:220px; position:relative; width:44px; height:var(--height);
  border-radius:10px; background:linear-gradient(90deg, #ffffff33, #ffffff10 50%, #ffffff33);
  border:1px solid #ffffff70; box-shadow: inset 0 -10px 18px rgba(0,0,0,.28), 0 10px 22px rgba(0,0,0,.18);
  overflow:hidden; margin:6px auto;
}
.fill{ position:absolute; left:0; right:0; bottom:0; height:0%; transition:height .6s cubic-bezier(.25,.9,.25,1); border-top:1px solid #ffffffcc; }
.fill.rain  { background:linear-gradient(180deg, var(--rain),  transparent); }
.fill.uv    { background:linear-gradient(180deg, var(--uv),    transparent); }
.fill.solar { background:linear-gradient(180deg, var(--solar), transparent); }
.tube-value{ font-weight:800; font-size:.95rem; }

/* Accent variants */
.gauges-grid .tube-card.rain{
  border-color:#38bdf8 !important;
  box-shadow: var(--shadow), 0 0 14px 3px rgba(56,189,248,.35), 0 0 0 1px rgba(56,189,248,.30) inset, var(--dual-glow-sm20) !important;
}
.tube-card.uv{
  border-color:#9333ea !important;
  box-shadow: var(--shadow), 0 0 14px 3px rgba(147,51,234,.35), 0 0 0 1px rgba(147,51,234,.30) inset, var(--dual-glow-sm20) !important;
}
.tube-card.solar{
  border-color:#facc15 !important;
  box-shadow: var(--shadow), 0 0 14px 3px rgba(250,204,21,.35), 0 0 0 1px rgba(250,204,21,.30) inset, var(--dual-glow-sm20) !important;
}

/* Lightning card */
.gauges-grid .bubble-card{
  padding:10px; border-radius:12px; border:1px solid #f97316 !important;  /* bright orange */
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background: linear-gradient(180deg, rgba(249,115,22,0.10), rgba(249,115,22,0.05)), #161616 !important;
  box-shadow: var(--shadow), 0 0 14px 3px rgba(249,115,22,.45), 0 0 0 1px rgba(249,115,22,.35) inset, var(--dual-glow-sm20) !important;
}
.bubble-title{ font-weight:800; color:#e5e7eb; font-size:.95rem; }
.bubble-gauge{ display:flex; align-items:center; justify-content:center; width:100%; min-height:190px; }

/* =========================================================
   Lightning Cloud
   ========================================================= */
#ltgBubble{ width:230px; height:160px; position:relative; display:block; overflow:visible; }
.cloud{
  position:absolute; border-radius:50%;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.96), rgba(255,255,255,.90) 35%, rgba(255,255,255,.78) 60%, rgba(255,255,255,.58) 80%, rgba(255,255,255,.40) 100%),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.10));
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.70) inset, 0 0 28px 6px rgba(255,255,255,.18);
}
.cloud.c1{ width:56%; height:56%; left:22%; top:22%; }
.cloud.c2{ width:44%; height:44%; left:8%;  top:34%; }
.cloud.c3{ width:48%; height:48%; right:6%; top:34%; }
.cloud.c-anvil { width:68%; height:46%; left:16%; top:6%;  z-index:1; }
.cloud.c-tower { width:54%; height:50%; left:24%; top:20%; z-index:1; }
.cloud.c-left  { width:46%; height:40%; left:6%;  top:44%; z-index:1; }
.cloud.c-right { width:48%; height:42%; right:4%; top:42%; z-index:1; }
.cloud.c-shelf { width:72%; height:30%; left:14%; top:58%; z-index:1; }

#ltg-bolts, .bolt-wrap{
  position:absolute; left:50%; transform:translateX(-50%); bottom:4%;
  width:44%; height:40%; display:flex; align-items:flex-end; justify-content:center; gap:10%;
  pointer-events:none; opacity:0;
}
.bolt{ width:min(40%, 90px); aspect-ratio:40 / 60; position:relative; filter: drop-shadow(0 8px 18px rgba(255,255,255,.35)); }
.bolt svg{ width:100%; height:100%; display:block; }
@keyframes boltFlash{
  0%{opacity:0; transform:translateY(0) scale(.95); filter:drop-shadow(0 0 0 rgba(255,255,255,0));}
  10%{opacity:1; transform:translateY(-3px) scale(1.02); filter:drop-shadow(0 0 14px rgba(255,255,255,.9));}
  25%{opacity:.20; transform:translateY(0) scale(.98); filter:drop-shadow(0 0 4px rgba(255,255,255,.4));}
  40%{opacity:.80; transform:translateY(-1px) scale(1.00); filter:drop-shadow(0 0 10px rgba(255,255,255,.7));}
  60%{opacity:.10; transform:translateY(0) scale(.98);}
  100%{opacity:0; transform:translateY(0) scale(.98);}
}
#ltg-bolts.flash{ opacity:1; }
#ltg-bolts .bolt.flash{ animation: boltFlash 900ms ease-out both; }

/* =========================================================
   Drawers, Inputs, Toast
   ========================================================= */
.drawer{ position:fixed; top:0; right:0; bottom:0; left:auto; width:min(520px, 95vw); height:100vh; transform:translateX(100%); transition:transform .25s ease; z-index:50; }
.drawer.open{ transform:none; }
.drawer-panel{ height:100%; display:grid; grid-template-rows:auto 1fr auto; border-top-left-radius:16px; background:#141416; border:1px solid #ffffff24; padding:16px; gap:12px; }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 2px; }
.drawer-body{ overflow:auto; padding:6px 4px; }
.drawer-foot{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px 2px 4px; }

.drawer-foot .btn{ flex:1; text-align:center; padding:.64rem .8rem; font-size:0.9rem; font-weight:700; border-radius:10px; border:1px solid #ffffff24; background:#2d2d2d; color:#f1f5f9; }
.drawer-foot .btn.primary{ background:#22c55e; border:1px solid #16a34a; color:#fff; }
.drawer-foot .btn.secondary{ background:#374151; border:1px solid #4b5563; color:#e5e7eb; }

#closeDrawer,#closeAbout,#closeContact{ background:#fef3c7 !important; color:#111827 !important; border-color:#f59e0b !important; }
#closeDrawer:hover,#closeAbout:hover,#closeContact:hover{ background:#fde68a !important; border-color:#f59e0b !important; }
#closeDrawer:active,#closeAbout:active,#closeContact:active{ background:#fcd34d !important; border-color:#d97706 !important; }

.backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:40; }
.backdrop.show{ opacity:1; pointer-events:auto; }

.input, select{ background:var(--panel); border:1px solid #ffffff24; color:var(--ink); padding:.64rem .74rem; border-radius:12px; }
.field{ display:grid; gap:6px; margin-bottom:10px; }
.pre{ white-space:pre-wrap; overflow:auto; font-size:.86rem; line-height:1.3; padding:10px; }

.toast{ position:fixed; left:50%; bottom:16px; transform:translateX(-50%); background:#111827; color:#fff; padding:.6rem .8rem; border-radius:10px; display:none; }
.toast.show{ display:block; }

/* Sliders (kept minimal; drawer references removed in JS) */
input[type="range"]{ width:80% !important; }
.range-row label, .drawer .field > label{ font-size:0.85rem; font-weight:600; color:var(--muted); }
.range-row output{ font-size:0.85rem; font-weight:700; color:var(--ink); }

/* Validation */
.input.invalid, select.invalid, .input[aria-invalid="true"], select[aria-invalid="true"]{
  border-color:var(--err);
  box-shadow: 0 0 0 1px rgba(239,68,68,.32) inset, 0 0 0 3px rgba(239,68,68,.18), 0 10px 24px rgba(0,0,0,.24);
  background: linear-gradient(180deg, var(--err-bg), transparent);
}
.input.invalid:focus-visible, select.invalid:focus-visible,
.input[aria-invalid="true"]:focus-visible, select[aria-invalid="true"]:focus-visible{
  outline:3px solid var(--err-ring); outline-offset:2px;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  position:relative; margin-top:12px; border-top:1px solid #ffffff1a;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)), var(--glass);
  backdrop-filter: blur(10px) saturate(140%); color:#e5e7eb; box-shadow: 0 -8px 26px rgba(0,0,0,.22);
}
.site-footer .foot-wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 12px; }
.foot-left{ display:flex; flex-direction:column; gap:2px; }
.foot-title{ font-weight:800; letter-spacing:.3px; color:#f8fafc; font-size:.96rem; }
.foot-sub{ color:#aeb7c2; font-size:.88rem; }
.foot-right{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.foot-link{ color:#e2e8f0; text-decoration:none; font-weight:700; position:relative; }
.foot-link::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background: linear-gradient(90deg, var(--bar-start), var(--bar-end)); transform: scaleX(0); transform-origin:left; transition: transform .18s ease-out; }
.foot-link:hover::after{ transform: scaleX(1); }
.foot-sep{ opacity:.25; }

@media (max-width:720px){ .site-footer .foot-wrap{ flex-direction:column; align-items:flex-start; gap:8px; } }
.site-footer::before{
  content:""; position:absolute; left:0; right:0; top:-2px; height:2px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--bar-start) 75%, transparent), color-mix(in oklab, var(--bar-end) 75%, transparent));
  opacity:.75; filter: blur(.5px);
}

/* =========================================================
   Fallbacks & Accessibility
   ========================================================= */
@supports not (background: color-mix(in oklab, red 50%, white)){
  .title3d-inner{
    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);
  }
  .status-bar{
    background: linear-gradient(180deg, var(--bar-sheen), transparent 55%), linear-gradient(135deg, var(--bar-end), var(--uv));
  }
}

@media (forced-colors:active){
  .card-heading .title-text{
    -webkit-background-clip:border; background-clip:border; -webkit-text-fill-color: ButtonText; color: ButtonText;
    text-shadow:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .title3d-inner, .fill, .foot-link::after{ transition:none !important; }
  #ltg-bolts .bolt.flash{ animation:none !important; }
}

/* Tiny screens tweaks */
@media (max-width:480px){
  .pill.pill--sm{ padding:.14rem .40rem; font-size:.76rem; }
  .top-clock--sm{ font-size:.76rem; }
}
/* =========================================================
   Uniform cards & panels — match Rain (most content-heavy)
   - Align all headings to the same vertical start
   - Make inner panels equal height across the row
   - Remove inner (left/right) dividers
   ========================================================= */

/* Let grid tracks stretch all children equally */
.ribbon-panels{
  align-items: stretch !important;
}

/* Outer card becomes a 2-row grid: (1) heading  (2) inner ribbon fills */
.card-center{
  display: grid !important;
  grid-template-rows: var(--head-h, 52px) 1fr !important;
  gap: 6px 0 !important;
}

/* Same heading block height across all three cards */
.card-center .card-heading{
  display: grid !important;
  place-items: center !important;
  min-height: var(--head-h, 52px) !important;
  margin: 0 !important;
  padding-top: 4px !important;
}

/* Inner ribbons fill the remaining space and share a common min-height.
   This min-height is sized for the Rain panel (most items), so others match it. */
.card-center > #outdoorReadingsRibbon,
.card-center > #outdoorRibbon,
.card-center > #rainRibbon{
  width: 100% !important;
  max-width: 840px !important;
  margin: 0 auto !important;

  /* Equal height behavior */
  height: 100% !important;
  min-height: var(--inner-min, 260px) !important;

  /* Subtle inner shadow for depth, consistent across cards */
  box-shadow:
    var(--dual-glow-sm22),
    inset 0 0 0 1px rgba(255,255,255,0.10),
    inset 0 10px 24px rgba(0,0,0,0.28),
    inset 0 -8px 22px rgba(0,0,0,0.22) !important;
}

/* Let the parent control height (prevents the inner panel from enforcing its own) */
.ribbon--panel{
  min-height: 0 !important;
}

/* Remove ALL inner dividers from the panels */
.ribbon--panel .ribbon-left{
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* (Already off earlier, but ensure the old center line never appears) */
#outdoorReadingsRibbon::before,
#outdoorRibbon::before,
#rainRibbon::before{
  display: none !important; content: none !important;
}

/* Responsive tuning: reduce inner min-height on narrower screens */
@media (max-width: 1200px){
  .card-center > #outdoorReadingsRibbon,
  .card-center > #outdoorRibbon,
  .card-center > #rainRibbon{
    min-height: 220px !important;
  }
}
@media (max-width: 760px){
  .card-center > #outdoorReadingsRibbon,
  .card-center > #outdoorRibbon,
  .card-center > #rainRibbon{
    min-height: 200px !important;
  }
}
/* =========================================================
   Softer inner glows (≈40% lighter) + Status ribbon blue fade
   ========================================================= */

/* Outdoor Readings — BLUE inner glow (lighter) */
.card-center > #outdoorReadingsRibbon{
  box-shadow:
    var(--dual-glow-sm22),
    inset 0 0 0 1px rgba(255,255,255,0.10),
    /* was 0.28 → 0.168 (−40%) */
    inset 0 0 44px 14px rgba(14,165,233,0.168),
    /* was 0.16 → 0.096 (−40%) */
    inset 0 0 72px 24px rgba(14,165,233,0.096),
    inset 0 10px 24px rgba(0,0,0,0.24),
    inset 0 -8px 22px rgba(0,0,0,0.20) !important;
}

/* Calculated Variables — YELLOW inner glow (lighter) */
.card-center > #outdoorRibbon{
  box-shadow:
    var(--dual-glow-sm22),
    inset 0 0 0 1px rgba(255,255,255,0.10),
    /* was 0.30 → 0.18 (−40%) */
    inset 0 0 44px 14px rgba(250,204,21,0.18),
    /* was 0.18 → 0.108 (−40%) */
    inset 0 0 72px 24px rgba(250,204,21,0.108),
    inset 0 10px 24px rgba(0,0,0,0.24),
    inset 0 -8px 22px rgba(0,0,0,0.20) !important;
}

/* Rain Event — GREEN inner glow (lighter) */
.card-center > #rainRibbon{
  box-shadow:
    var(--dual-glow-sm22),
    inset 0 0 0 1px rgba(255,255,255,0.10),
    /* was 0.30 → 0.18 (−40%) */
    inset 0 0 44px 14px rgba(34,197,94,0.18),
    /* was 0.18 → 0.108 (−40%) */
    inset 0 0 72px 24px rgba(34,197,94,0.108),
    inset 0 10px 24px rgba(0,0,0,0.24),
    inset 0 -8px 22px rgba(0,0,0,0.20) !important;
}

/* Status/clock ribbon: fade to BLUE (not purple) */
.status-bar{
  background:
    linear-gradient(180deg, var(--bar-sheen), transparent 35%),
    /* yellow → blue */
    linear-gradient(135deg,
      color-mix(in oklab, var(--bar-end) 88%, #fff 8%),
      color-mix(in oklab, var(--bar-start) 88%, #fff 6%)) !important;
}

/* Fallback (no color-mix): yellow → blue */
@supports not (background: color-mix(in oklab, red 50%, white)){
  .status-bar{
    background:
      linear-gradient(180deg, var(--bar-sheen), transparent 35%),
      linear-gradient(135deg, var(--bar-end), var(--bar-start)) !important;
  }
}
/* Battery row: force to last line & full width */
#ltg-battery-row{
  order: 999;              /* always last in flex order */
  flex-basis: 100%;        /* take a whole line */
  width: 100%;
  display: flex;
  justify-content: center; /* center the kv pair */
  gap: 6px;
  margin-top: 4px;
}
#ltg-battery-row .k{ color: var(--muted); font-weight: 600; }
#ltg-battery-row .v{ font-weight: 800; font-variant-numeric: tabular-nums; }
/* Stronger contrast for the status-bar clock on yellow */
.status-bar .top-clock--sm{
  color: #0f172a !important;                 /* deep slate/navy */
  text-shadow:
    0 1px 2px rgba(0,0,0,0.45),              /* soft dark lift */
    0 0 6px rgba(0,0,0,0.25);
  -webkit-text-stroke: 0.4px rgba(255,255,255,0.25); /* subtle halo for dark patches */
}

/* =========================================================
   Better contrast for "Live-look Demo • Camangahan, Guimbal, Iloilo"
   - Header (light/gradient background): deep slate text
   - Footer (dark glass background): light text
   ========================================================= */

/* Header subline under the title */
.title3d .sub{
  color: #0f172a !important;                 /* deep slate/navy for bright bg */
  text-shadow:
    0 1px 2px rgba(0,0,0,0.45),
    0 0 6px rgba(0,0,0,0.25);
  -webkit-text-stroke: 0.4px rgba(255,255,255,0.25); /* subtle halo over yellow */
}

/* Footer subline */
.site-footer .foot-sub{
  color: #f9fafb !important;                 /* near-white for dark glass */
  text-shadow:
    0 1px 2px rgba(0,0,0,0.55),
    0 0 6px rgba(0,0,0,0.35);
  -webkit-text-stroke: 0.35px rgba(0,0,0,0.28);      /* faint edge for clarity */
}