.rainfall-dashboard {
  /* These defaults are overridden by the plugin's color settings when rendered. */
  --rfd-daily: #1d4ed8;
  --rfd-monthly: #0ea5a4;
  --rfd-yearly: #f59e0b;
  --rfd-text: #26435d;
  --rfd-muted: #567188;
  --rfd-shell-border: #9ec3df;
  --rfd-shell-start: #eef7ff;
  --rfd-shell-end: #d9ecfb;
  --rfd-notes-background: #ffffff;
  --rfd-notes-border: #d7e5f3;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  /* Lets the layout respond to the container's width instead of the viewport. */
  container-type: inline-size;
}

/* Keep padding and borders inside each component's declared width. */
.rainfall-dashboard *, .rainfall-dashboard *::before, .rainfall-dashboard *::after { box-sizing: border-box; }

/* Main dashboard: gauges on the left, explanatory notes and totals on the right. */
.rainfall-dashboard__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
/* Stacked: flatten the side column so the legend can sit directly under the gauges and notes last. */
.rainfall-dashboard__side { display: contents; }
.rainfall-dashboard__gauges { order: 1; }
.rainfall-dashboard__legend { order: 2; }
.rainfall-dashboard__notes { order: 3; }

/* Three equal gauge columns on wide screens. */
.rainfall-dashboard__gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.rainfall-dashboard__asof { grid-column: 1 / -1; width: 100%; margin: 0 0 .8rem; color: var(--rfd-text); font-size: .95rem; font-weight: 600; text-align: center; }
.rainfall-dashboard__gauge-unit { display: grid; justify-items: center; }
.rainfall-dashboard__gauge-wrap { display: grid; grid-template-columns: auto 76px; grid-template-rows: auto auto; gap: .35rem .75rem; align-items: end; }
.rainfall-dashboard__gauge-label { grid-column: 2; grid-row: 1; margin: 0; font-size: .95rem; font-weight: 700; text-align: center; }
.rainfall-dashboard__gauge-label--daily { color: var(--rfd-daily); }
.rainfall-dashboard__gauge-label--monthly { color: var(--rfd-monthly); }
.rainfall-dashboard__gauge-label--yearly { color: var(--rfd-yearly); }

/* Tick labels and the gauge shell share a height so each label lines up with a level. */
.rainfall-dashboard__ticks { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; justify-content: space-between; height: 230px; color: var(--rfd-muted); font-size: .72rem; font-weight: 700; }
.rainfall-dashboard__gauge-shell { grid-column: 2; grid-row: 2; position: relative; width: 76px; height: 230px; overflow: hidden; border: 4px solid var(--rfd-shell-border); border-radius: 42px; background: linear-gradient(180deg, var(--rfd-shell-start), var(--rfd-shell-end)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65); }

/* JavaScript animates fill height to the percentage provided by the shortcode. */
.rainfall-dashboard__gauge-fill { position: absolute; right: 0; bottom: 0; left: 0; height: 0; min-height: 2px; border-radius: 0 0 38px 38px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5); transition: height 1.2s cubic-bezier(.16, 1, .3, 1); }
.rainfall-dashboard__gauge-fill--daily, .rainfall-dashboard__dot--daily { background: var(--rfd-daily); }
.rainfall-dashboard__gauge-fill--monthly, .rainfall-dashboard__dot--monthly { background: var(--rfd-monthly); }
.rainfall-dashboard__gauge-fill--yearly, .rainfall-dashboard__dot--yearly { background: var(--rfd-yearly); }

/* Supporting explanation and color-keyed totals. */
.rainfall-dashboard__notes { padding: .95rem 1rem; color: var(--rfd-text); border: 1px solid var(--rfd-notes-border); border-radius: 8px; background: var(--rfd-notes-background); }
.rainfall-dashboard__notes h3 { margin: 0 0 .55rem; font-size: 1rem; line-height: 1.2; }
.rainfall-dashboard__notes p { margin: 0 0 .55rem; line-height: 1.5; }
.rainfall-dashboard__notes p:last-child { margin-bottom: 0; }
.rainfall-dashboard__legend { display: grid; width: 100%; gap: .5rem; }
.rainfall-dashboard__legend-row { display: grid; grid-template-columns: 12px 1fr auto; gap: .5rem; align-items: center; color: var(--rfd-text); font-size: .95rem; }
.rainfall-dashboard__dot { width: 10px; height: 10px; border-radius: 50%; }
.rainfall-dashboard__legend-name, .rainfall-dashboard__legend-value { font-weight: 700; }

/* Keep the fill transition disabled for visitors who request reduced motion. */
@media (prefers-reduced-motion: reduce) { .rainfall-dashboard__gauge-fill { transition: none; } }

/* Side-by-side only when the container is wide enough. */
@container (min-width: 820px) { .rainfall-dashboard__layout { grid-template-columns: minmax(0, 1fr) minmax(240px, 360px); gap: 1.2rem; } .rainfall-dashboard__side { display: grid; gap: .85rem; align-content: start; } .rainfall-dashboard__gauges, .rainfall-dashboard__legend, .rainfall-dashboard__notes { order: 0; } }

/* Narrow containers: tighter padding and shorter gauges; keep tick and shell heights in sync. */
@container (max-width: 520px) { .rainfall-dashboard__gauge-shell, .rainfall-dashboard__ticks { height: 200px; } .rainfall-dashboard__gauges { gap: .5rem; } }

/* Very narrow containers: stack the gauges. */
@container (max-width: 400px) { .rainfall-dashboard__gauges { grid-template-columns: 1fr; gap: 1rem; } }

@media (max-width: 640px) { .rainfall-dashboard { padding: 1rem; } }