/*
 * hud.css — overlay widgets on the 3D stage.
 *
 * The top-right metrics HUD (generation / load / net / battery cards), the
 * top-left clock+weather+status card, and the bottom-left orbit hint chip.
 * Responsive size tweaks live in base.css.
 */

/* ---------- metrics HUD (top-right) ---------- */
#hud{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;gap:10px;
  width:250px;pointer-events:none}
.card{background:var(--card);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1.5px solid var(--line);border-radius:.65rem;padding:12px 14px;
  box-shadow:0 6px 20px rgba(28,51,32,.12)}
.card .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.card .v{font-weight:800;font-size:25px;margin-top:3px;line-height:1;color:var(--ink-deep);
  font-variant-numeric:tabular-nums}
.card .u{font-size:12px;color:var(--muted);font-weight:600}
.card .sub{font-size:11px;color:var(--dim);margin-top:5px;font-variant-numeric:tabular-nums;font-weight:500}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid2 .card .v{font-size:19px}
.v.solar{color:var(--solar)} .v.compute{color:var(--compute)}
.v.batt{color:var(--batt)} .v.danger{color:var(--danger)} .v.warn{color:var(--warn)}

/* battery bar */
.bar{height:7px;border-radius:5px;background:#e2dcca;margin-top:9px;overflow:hidden}
.bar i{display:block;height:100%;width:50%;background:linear-gradient(90deg,#2f6e3a,#5cae66);
  border-radius:5px;transition:width .3s,background .3s}

/* ---------- clock chip (top-left) ---------- */
#clock{position:absolute;top:16px;left:16px;background:var(--card);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1.5px solid var(--line);border-radius:.65rem;padding:11px 16px;pointer-events:none;
  box-shadow:0 6px 20px rgba(28,51,32,.12)}
#clock .t{font-size:24px;font-weight:800;letter-spacing:.01em;color:var(--ink-deep);font-variant-numeric:tabular-nums}
#clock .d{font-size:11px;color:var(--muted);margin-top:2px;font-weight:500}
#clock .sun{font-size:10.5px;color:var(--dim);margin-top:4px;font-variant-numeric:tabular-nums;font-weight:500}
/* live status line, integrated into the clock / weather card */
#clock .cl-status{display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:9px;
  border-top:1px solid var(--line);font-size:12px;font-weight:700;color:var(--ink-deep);
  letter-spacing:.01em;white-space:nowrap}
#clock .cl-status .led{width:9px;height:9px;border-radius:50%;background:var(--batt);
  flex-shrink:0;box-shadow:0 0 9px var(--batt)}

/* ---------- orbit hint chip (bottom-left) ---------- */
#hint{position:absolute;left:16px;bottom:18px;background:var(--card);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1.5px solid var(--line);border-radius:30px;padding:7px 14px;
  font-size:11px;font-weight:600;color:var(--muted);pointer-events:none;letter-spacing:.01em;
  box-shadow:0 6px 20px rgba(28,51,32,.10)}
@media(max-width:820px){#hint{display:none}}