/* Copyright 2019-2026 John A Kline */
/* See LICENSE.txt for your rights */

/* The weewx-loopdata 6.0 instrument panel as styled for the gauges pages
   (gauges.inc); drawn by scripts/panel_gauges.js. */

.ldpanel {
  background: #10141c;
  border-radius: 10px;
  margin: 0 auto;
  padding: 32px 20px 40px;
  text-align: initial;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}
.ldp-gauges {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 36px 16px; justify-items: stretch; align-items: start;
}
@media (max-width: 1080px) { .ldp-gauges { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .ldp-gauges { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .ldp-gauges { grid-template-columns: 1fr; } }
.ldp-gauge {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; width: 100%;
}
.ldp-gauge h2 {
  font-size: clamp(11px, 0.9vw, 16px); font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase; margin: 0; border: 0; padding: 0;
  color: #8b96a8;
}
/* The gauges scale with the window: the engine draws in a 240-unit
   coordinate system stretched to the css size, so a wide desktop
   window gets big gauges, big fonts and all.  Squareness comes from the
   canvases' intrinsic dimensions (width/height attributes, and the JS
   backing store stays square) via height:auto. */
.ldpanel canvas {
  display: block; width: 100%; max-width: 480px;
  height: auto;
}
.ldp-legend {
  display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center;
  font-size: clamp(10.5px, 0.8vw, 15px); color: #8b96a8;
  max-width: 400px;
}
.ldp-legend span { display: flex; align-items: center; gap: 5px; }
.ldp-legend i {
  width: clamp(10px, 0.8vw, 15px); height: clamp(10px, 0.8vw, 15px);
  display: inline-block; border-radius: 2px;
}
/* The smartphone page renders at a fixed width=1124 viewport with
   large fonts; show the gauges two-up at ~520px.  The engine draws
   in a 240-unit coordinate system scaled to the css size, so
   geometry and canvas fonts scale together. */
.ldpanel-phone .ldp-gauges { grid-template-columns: repeat(2, 1fr); }
.ldpanel-phone canvas { max-width: 520px; }
.ldpanel-phone .ldp-gauge h2 { font-size: 24px; letter-spacing: 0.18em; }
.ldpanel-phone .ldp-legend {
  font-size: 21px; max-width: 520px; gap: 8px 20px;
}
.ldpanel-phone .ldp-legend i { width: 20px; height: 20px; }