/* Journal Monitor surface. ClickHouse tokens; no SVG-wide scaling rules. */
.progress-panel { min-width: 0; margin-top: 20px; }
.progress-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; padding: 0 0 8px; }
.progress-reading { display: grid; gap: 6px; }
.progress-kicker, .progress-best > span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.progress-reading > strong { display: flex; align-items: baseline; gap: 8px; color: var(--ink); font-size: 30px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.progress-reading > strong > span { font-size: 14px; font-weight: 400; color: var(--muted); }
.progress-best { display: grid; gap: 7px; padding-left: 24px; border-left: 1px solid var(--line); }
.progress-best b { font-size: 16px; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
#main-content .progress-reset { margin-left: auto; min-height: 40px; padding: 8px 12px; font-size: 12px; color: var(--muted); border-color: var(--line); background: transparent; }
.progress-plot { position: relative; width: 100%; height: 360px; min-width: 0; overflow: hidden; font-family: var(--font); }
.progress-loading { display: block; padding: 110px 20px; text-align: center; color: var(--muted); font-size: 13px; }
.progress-inspector { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 0; border-top: 1px solid var(--line); }
.progress-point-nav { display: flex; gap: 4px; flex: 0 0 auto; }
#main-content .progress-point-nav button { min-width: 40px; min-height: 40px; padding: 6px; color: var(--muted); background: transparent; border: 1px solid var(--line); font-size: 16px; }
.progress-point-detail { color: var(--muted); font-size: 12px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
/* Scope legacy .chart selectors away from Plotly's internal SVG. Plotly uses pixel text. */
.journal-refined .chart-toolbar { justify-content: flex-start; gap: 12px; margin: 16px 0 0; }
.journal-refined .chart-toolbar select { width: auto; max-width: min(100%, 260px); margin-left: auto; font-size: 13px; min-height: 40px; }
.journal-refined .chart-toolbar .segmented button { font-size: 13px; min-height: 40px; }
.journal-refined .exercise-heading { gap: 20px; flex-wrap: wrap; }
.journal-refined .exercise-heading h2 { font-size: clamp(23px, 1.7vw, 32px); line-height: 1.2; }
.journal-refined .exercise-heading .journal-muscles { font-size: 13px; gap: 4px 16px; margin-top: 9px; }
.journal-refined .tabs { margin-top: 24px; margin-bottom: 0; gap: 22px; }
.journal-refined .tabs button { font-size: 14px; min-height: 46px; }
.journal-refined .history-heading { margin-top: 20px; padding-top: 20px; }
@media (min-width: 1024px) {
 .journal-refined .journal-main { padding: 28px 32px; }
 .journal-grid.journal-refined { grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); gap: 28px; }
}
@media (min-width: 1900px) {
 .journal-grid.journal-refined { grid-template-columns: 380px minmax(0, 1fr); }
 .progress-panel { max-width: none; }
}
@media (max-width: 760px) {
 .journal-refined .journal-detail-shell.is-open { isolation: isolate; background: var(--ch-backdrop); }
 .journal-refined .journal-detail-shell .journal-main { position: relative; background: var(--surface); opacity: 1; border-radius: 8px; }
 .journal-refined .exercise-heading { gap: 12px; }
 .journal-refined .exercise-heading > div:first-child { flex-basis: 100%; }
 .exercise-heading-actions { width: 100%; justify-content: space-between; }
 .journal-refined .exercise-heading .journal-muscles { font-size: 12px; }
 .journal-refined .tabs { gap: 18px; margin-top: 12px; }
 .journal-refined .tabs button { font-size: 13px; }
 .journal-refined .chart-toolbar select { max-width: 100%; width: 100%; margin-left: 0; min-height: 44px; }
 .progress-summary { gap: 16px; }
 .progress-reading > strong { font-size: 27px; }
 .progress-best { padding-left: 16px; }
 #main-content .progress-reset { font-size: 11px; padding: 6px 8px; }
 .progress-point-detail { font-size: 11px; }
 #main-content .progress-point-nav button { min-width: 44px; min-height: 44px; }
}