/* Shared chart language; series retain real values and explicit units. */
.progress-history .metric-tabs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); padding:4px; gap:2px; }
.progress-history .metric-tab { min-width:0; min-height:44px; padding:7px 3px; font-size:12px; font-weight:600; }
.progress-history .chart-legend { justify-content:center; gap:12px 18px; margin:18px 0 12px; }
.progress-history .chart-insight-row { gap:12px; margin-top:18px; align-items:start; }
.progress-history #chartSummary { font-size:14px; font-weight:600; line-height:1.5; }
.progress-history .coverage-pill { flex:none; }
.progress-history .chart-wrap { margin-top:10px; }
.progress-history .trend-chart { height:auto; min-height:230px; display:block; }
.progress-history .chart-scale-note, .progress-history .chart-history-hint { margin:12px 0 0; color:#5f7368; font-size:12px; line-height:1.5; }
.progress-history .chart-history-hint { margin-top:6px; }
.progress-history .overview-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin:16px 0 14px; }
.overview-key { display:grid; justify-items:center; gap:5px; min-width:65px; }
.overview-key-label { display:flex; align-items:center; gap:6px; font-size:12px; color:#52695c; }
.overview-key strong { font-size:16px; font-weight:600; color:var(--series-color); font-variant-numeric:tabular-nums; }
.metric-protein { --series-color:#8057b3; }
.metric-calories { --series-color:#9e621e; }
.metric-activity { --series-color:#13776d; }
.overview-key .legend-swatch { background:var(--series-color); width:16px; height:3px; border-radius:4px; }
.overview-line { fill:none; stroke:var(--series-color); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; }
.overview-line.metric-calories { stroke-dasharray:7 3; }
.overview-line.metric-protein { stroke-dasharray:2 3; }
.overview-dot { fill:var(--series-color); stroke:#fff; stroke-width:1.5; }
.overview-leader { stroke:var(--series-color); stroke-width:.8; opacity:.5; }
.overview-value { font-size:12px; font-weight:600; fill:var(--series-color); paint-order:stroke; stroke:#fff; stroke-width:4px; stroke-linejoin:round; }
.chart-data-value { font-size:12px; font-weight:600; fill:#365f4b; paint-order:stroke; stroke:#fff; stroke-width:3px; }
.chart-unit-label { fill:#61796a; font-size:11px; }
.trend-card[data-metric="calories"] { --chart-color:#9e621e; --chart-range:#f1dec3; }
.trend-card[data-metric="protein"] { --chart-color:#8057b3; --chart-range:#e6dbf3; }
.trend-card:is([data-metric="calories"],[data-metric="protein"]) .chart-line { stroke:var(--chart-color); }
.trend-card:is([data-metric="calories"],[data-metric="protein"]) :is(.chart-point,.chart-data-value) { fill:var(--chart-color); }
.trend-card:is([data-metric="calories"],[data-metric="protein"]) .chart-range { fill:var(--chart-range); }
.trend-card:is([data-metric="calories"],[data-metric="protein"]) .legend-swatch:not(.range):not(.target) { background:var(--chart-color); }
.trend-card:is([data-metric="calories"],[data-metric="protein"]) .legend-swatch.range { background:var(--chart-range); }
.trend-card[data-metric="activity"] .chart-stack-weights { fill:#13776d; }
.trend-card[data-metric="activity"] .legend-swatch:not(.cardio) { background:#13776d; }
.progress-history .chart-axis-label, .progress-history .chart-date-label { font-size:11px; }
.progress-history .chart-tooltip { font-size:12px; line-height:1.6; max-width:min(320px,calc(100% - 16px)); }
.progress-history .chart-hit:focus { outline:none; stroke:#347d5a; stroke-width:1.5; stroke-dasharray:3 3; fill:#347d5a08; }
@media(max-width:560px) {
  .progress-history .metric-tab { font-size:11px; }
}
@media(max-width:380px) {
  .progress-history .metric-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .progress-history .overview-legend { gap:10px 14px; }
  .overview-key strong { font-size:14px; }
}

/* SVG does not implement the HTMLElement.hidden property. */
.progress-history .chart-wrap:has(.trend-chart[hidden]) { display:none; }
.progress-history .trend-card:has(#chartEmpty:not([hidden])) :is(.chart-scale-note,.chart-history-hint) { display:none; }
@media(max-width:560px) {
  .progress-history .metric-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .progress-history .metric-tab { font-size:13px; min-height:44px; }
}
/* Large real values remain visible while a point is inspected. */
.progress-history .overview-legend { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:12px 6px; background:#f5f9f6; border:1px solid #e0eae3; border-radius:14px; }
.overview-key { min-width:0; gap:5px; }
.overview-key strong { font-size:21px; font-weight:750; line-height:1.3; text-align:center; }
.overview-key-label { font-size:12px; gap:4px; }
.overview-date { font-size:11px; color:#64766b; }
.overview-value,.chart-data-value { font-size:14px; font-weight:750; stroke-width:5px; }
.overview-line { stroke-width:2.8; }
.chart-value-readout { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 14px; margin:16px 0 4px; }
.chart-value-readout > strong { color:var(--chart-color,#226a49); font-size:32px; font-weight:750; letter-spacing:-.8px; font-variant-numeric:tabular-nums; }
.chart-value-readout > span { font-size:12px; color:#526b5c; }
.progress-history .chart-tooltip { background:#fff; border:1px solid #b9d4c4; color:#224332; box-shadow:0 6px 20px #153e2924; font-size:13px; }
@media(max-width:380px) { .overview-key strong { font-size:18px; } .overview-key-label { font-size:11px; } .overview-key .legend-swatch { width:10px; } }

.chart-selection-line { stroke:#496658; stroke-width:1; stroke-dasharray:4 4; pointer-events:none; }
.chart-inspection-actions { display:flex; align-items:start; gap:8px; margin-top:8px; }
.chart-inspection-actions > button { min-height:44px; font-size:13px; padding:8px 12px; }
.chart-method { margin-left:auto; max-width:100%; color:#476351; }
.chart-method > summary { display:grid; place-items:center; min-width:44px; min-height:44px; cursor:pointer; list-style:none; font-size:20px; }
.chart-method[open] { flex:1; background:#f5f9f6; padding:0 10px 10px; border-radius:12px; }
.chart-method p { font-size:14px; line-height:1.5; margin:8px 0; }
.progress-history .chart-axis-label,.progress-history .chart-date-label { font-size:12px; }
.progress-history .chart-scale-note,.progress-history .chart-history-hint { font-size:13px; }

.overview-line.overview-partial { stroke-dasharray:5 5; opacity:.8; }

#trendChart .chart-date-label[text-anchor="end"] { text-anchor:end; }
#trendChart .chart-date-label[text-anchor="start"] { text-anchor:start; }

.chart-compare-toggle{display:flex;align-items:center;gap:8px;min-height:44px;font-size:13px;color:#456252;width:fit-content;margin:4px 0}.chart-compare-toggle input{width:18px;height:18px;accent-color:#287147}.progress-history .coverage-pill{white-space:normal;font-size:11px;text-align:right}.progress-history .chart-hit{fill:transparent}

/* A compact empty view; preserve controls when another period or metric has data. */
.progress-history .trend-header { display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:8px 12px; }
.progress-history .trend-header > div:first-child { flex:1; min-width:100px; }
.progress-history .trend-header h2 { margin:0; font-size:19px; }
.progress-history .trend-header .segmented { width:auto; margin:0; }
.progress-history .trend-header .segment-button { padding:8px; min-height:44px; font-size:12px; }
.progress-history .metric-tabs { margin-top:12px; }
.progress-history .chart-insight-row { margin-top:12px; gap:8px; align-items:center; }
.progress-history .chart-legend { margin:12px 0 8px; }
.progress-history .chart-inspection-actions { flex-wrap:wrap; align-items:center; margin-top:4px; }
.progress-history .chart-history-hint { flex:1; margin:0; font-size:12px; }
.progress-history .chart-method > summary { font-size:13px; padding:0 8px; }
.progress-history .chart-method[open] { flex-basis:100%; }
.progress-history .chart-method[open] > summary { justify-content:start; }
.progress-history .trend-card:has(#chartEmpty:not([hidden])) :is(.chart-legend,.chart-insight-row,.chart-history-hint) { display:none; }
.progress-history .trend-card[data-has-history='false'] :is(.metric-tabs,.segmented,.chart-inspection-actions) { display:none; }
.progress-history .trend-card:has(#chartEmpty:not([hidden])) { min-height:0; }
.progress-history #chartEmpty { margin:12px 0 0; padding:0; min-height:0; font-size:14px; line-height:1.5; text-align:left; }