/* ===== Weekly Garden + streak ===== */
.goal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.streak-pill { background: rgba(245,158,11,0.15); color: var(--warning); font-weight: 800; padding: 5px 12px; border-radius: 20px; font-size: 13px; }
.garden-row { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; }
.garden-plot { text-align: center; min-width: 0; }
.garden-plot .dow-label { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 14px; color: #ffffff; font-weight: 800; margin-bottom: 4px; letter-spacing: 0.2px; }
.garden-plot .hrs-label { font-size: 11px; color: var(--muted); margin-top: 4px; }
.garden-plot .freeze-badge { font-size: 12px; line-height: 1; display: inline-flex; align-items: center; }
.garden-plot.is-today svg { filter: drop-shadow(0 0 6px rgba(56,189,248,0.5)); }

/* ===== 12-month heatmap ===== */
.heatmap-scroll { overflow-x: auto; padding-bottom: 6px; display: flex; justify-content: center; }
.heatmap-legend { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); margin-top: 8px; justify-content: center; }
.heatmap-legend .heatmap-swatch-group { display: flex; gap: 10px; }
.heatmap-legend .heatmap-swatch-item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 30px; }
.heatmap-legend .sq { width: 11px; height: 11px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
/* The swatch centers itself over the full label text by default (including
   the trailing "+"), which visually reads as off-center since the "+" adds
   width the eye doesn't weigh the same as the digits. Nudge just the last
   ("10h+") swatch left so it centers over "10h" instead. Adjust the -3px if
   it still looks off on your screen. */
.heatmap-legend .heatmap-swatch-item:last-child .sq { position: relative; left: -3px; }
.heatmap-legend .sq-label { font-size: 10px; color: var(--muted); white-space: nowrap; text-align: center; width: 100%; }

/* NOTE: the Subject-Breakdown pie chart and the Weekly Trend line chart are
   both drawn as inline SVG generated directly by charts.js (renderTrendChart)
   and as <canvas> by reports.js (buildShareCanvas/buildReportCanvas) — their
   colors come from the SUBJECT_COLORS map in JS, not from CSS classes here,
   so there's nothing further to style for those two beyond what's above. */