/* Neutral base – inherit your theme */
.mid-wrap, .mid-grid { width: 100%; }
.mid-card {
  width: 100%;
  background: transparent;   /* <- let theme show through */
  color: inherit;            /* <- use theme text color */
  padding: 12px 0;           /* light spacing; theme can add its own card styles */
}

/* Head + meta */
.mid-head { margin-bottom: 8px; }
.mid-title { font-weight: 600; letter-spacing: .2px; }
.mid-meta {
  margin-top: 8px;
  display: flex; gap: 12px; flex-wrap: wrap;
  color: inherit; opacity: .85; font-size: 14px;
}
.mid-reading { font-size: 18px; font-weight: 700; }
.mid-error { color: #c11; }

/* ===== Vertical bar gauge ===== */
.mid-bar-svg { width: 100%; height: auto; display: block; }
.mid-bar-track { fill: none; stroke: currentColor; stroke-opacity: .25; stroke-width: 12; }
.mid-bar-marker { fill: currentColor; }
.mid-bar-axis text { fill: currentColor; opacity: .8; font-size: 13px; }  /* bigger labels */
.mid-bar-tick { stroke: currentColor; stroke-opacity: .6; }

/* ===== Charts ===== */
.mid-chart { margin-top: 8px; }
.mid-chart-svg { width: 100% !important; height: auto; display: block; }  /* fill parent */
.mid-chart-axis text { font-size: 13px; fill: currentColor; opacity: .8; } /* bigger, readable */
.mid-chart-grid { stroke: currentColor; stroke-opacity: .15; stroke-width: 1; }
.mid-line { fill: none; stroke: currentColor; stroke-width: 3; }          /* a bit thicker */
.mid-dot { fill: currentColor; r: 2.6; opacity: .9; }
.mid-current-hour { stroke: currentColor; stroke-dasharray: 5 4; stroke-width: 2; opacity: .7; }
.mid-legend { font-size: 12px; fill: currentColor; opacity: .7; text-anchor: end; }

/* ===== Compare grid =====
   Auto-fits; stacks when container is narrow (even on desktop). */
.mid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}