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

/* ========================== Instruments ========================== */
.gauges-grid{
  display:flex !important;
  flex-direction:column;
  gap:var(--gap);
  align-items:stretch;
  margin-bottom:var(--gap);
}

.gauges-bottom{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--gap);
  width:100%;
}

/* Small tube cards */
.tube-card{
  display:grid !important;
  grid-template-rows:auto 1fr auto;
  align-items:center;
  justify-items:center;
  gap:3px;
  min-height:var(--tube-card-h) !important;
  height:var(--tube-card-h) !important;
  max-height:var(--tube-card-h) !important;
  padding:6px !important;
}
.tube-title{ font-size:.78rem !important; line-height:1; padding:3px 8px !important; margin:0 auto 2px !important; }
.tube{
  --height:var(--tube-h);
  position:relative;
  width:var(--tube-w);
  height:var(--tube-h) !important;
  margin:0 auto !important;
  border-radius:8px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.58);
  background:linear-gradient(90deg, rgba(255,255,255,.20), rgba(255,255,255,.08) 52%, rgba(255,255,255,.20));
  box-shadow:inset 0 -10px 18px rgba(0,0,0,.28), 0 8px 18px rgba(0,0,0,.16);
}
.fill{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:0%;
  transition:height .45s cubic-bezier(.25,.9,.25,1);
  border-top:1px solid rgba(255,255,255,.80);
}
.fill.rain{ background:linear-gradient(180deg, #38bdf8, transparent); }
.fill.uv{ background:linear-gradient(180deg, #9333ea, transparent); }
.fill.solar{ background:linear-gradient(180deg, #facc15, transparent); }
.tube-value{ width:100%; margin:0 !important; padding:0 !important; text-align:center; font-size:.78rem !important; line-height:1; font-weight:900; }
.tube-card.rain{ border-color:rgba(56,189,248,.46) !important; box-shadow:var(--shadow-soft), 0 0 10px 3px rgba(56,189,248,.24), inset 0 0 28px 10px rgba(56,189,248,.18) !important; }
.tube-card.uv{ border-color:rgba(168,85,247,.46) !important; box-shadow:var(--shadow-soft), 0 0 10px 3px rgba(147,51,234,.24), inset 0 0 28px 10px rgba(147,51,234,.18) !important; }
.tube-card.solar{ border-color:rgba(253,224,71,.46) !important; box-shadow:var(--shadow-soft), 0 0 10px 3px rgba(250,204,21,.24), inset 0 0 28px 10px rgba(250,204,21,.18) !important; }
.tube-card.rain .tube-title{ --title-glow:rgba(59,130,246,.28); --title-border:rgba(59,130,246,.50); }
.tube-card.uv .tube-title{ --title-glow:rgba(168,85,247,.30); --title-border:rgba(168,85,247,.55); }
.tube-card.solar .tube-title{ --title-glow:rgba(245,158,11,.30); --title-border:rgba(245,158,11,.55); }