/* ===== Header layout (unchanged from before) ===== */
.header-row {
  display:flex; flex-wrap:wrap; gap:12px; align-items:stretch; justify-content:space-between;
}
.header-left   { order:1; flex: 1 1 520px; min-width:300px; }
.header-solar  { order:2; flex: 0 1 300px; min-width:220px; }
.header-weather{ order:3; flex: 0 1 240px; min-width:200px; }

/* Mobile: two small cards side-by-side right after the buttons */
@media (max-width: 640px) {
  .header-left    { order: 1; flex: 1 1 100%; }
  .header-solar   { order: 2; flex: 1 1 calc(50% - 6px); min-width: 0; }
  .header-weather { order: 3; flex: 1 1 calc(50% - 6px); min-width: 0; }
}

/* ===== Generic compact card look ===== */
.compact-card {
  background:#fff;
  border-radius:10px;
  padding:10px 12px;
  margin:16px 0;
  font-size:16px;
}

/* Solar uses red/green/etc via inline style you already set.
   Weather gets a blue frame like Solar. */
.wx-card {
  border:4px solid #2563eb;            /* blue */
  border-left:6px solid #2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,0.12);
}

/* Tighten small-screen padding a bit */
@media (max-width: 640px) {
  .compact-card { padding:5px 8px; font-size:15px; }
}

/* Keep the weather card a few pixels off the edges */
.header-weather .wx-card { 
  margin-inline: 5px;          /* desktop/tablet */
}

/* On small screens, keep a slightly smaller offset */
@media (max-width: 640px) {
  .header-weather .wx-card {
    margin-inline: 3px;        /* mobile */
  }
}
/* Nudge Solar card in from the edges */
#solar-card > div {
  margin-inline: 5px;     /* desktop/tablet */
}

@media (max-width: 640px) {
  #solar-card > div {
    margin-inline: 3px;   /* mobile */
  }
}

/* prevent wraps inside metric values and timestamps */
.nowrap { white-space: nowrap; }

.metric-value {
  white-space: nowrap;
  hyphens: none;
}