.performance-page {
	display: grid;
	width: 100%;
	max-width: 1280px;
	gap: 16px;
	margin-top: 24px;
}

.performance-screen .page-content { position: relative; isolation: isolate; }
.performance-screen .page-content > header,
.performance-screen .page-content > .performance-page,
.performance-screen .page-content > footer { position: relative; z-index: 1; }
.performance-screen .page-content > header { z-index: 40; }
.performance-light-lines { position: fixed; z-index: 0; inset: 0; width: 100vw; height: 100vh; overflow: visible; pointer-events: none; }
.performance-light-line { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: var(--line-dash, 0.12 0.88); opacity: 0; animation: performance-light-run var(--line-duration, 22s) linear var(--line-delay, 0s) infinite; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 52%, transparent)); }
.performance-light-line--one { --line-dash: 0.18 0.82; --line-duration: 24s; --line-delay: -9s; --line-peak: 0.24; }
.performance-light-line--two { --line-dash: 0.09 0.91; --line-duration: 31s; --line-delay: -18s; --line-peak: 0.18; stroke: color-mix(in srgb, var(--text) 58%, var(--accent)); animation-direction: reverse; }
.performance-light-line--three { --line-dash: 0.24 0.76; --line-duration: 28s; --line-delay: -4s; --line-peak: 0.19; stroke-width: 1.2; }
.performance-light-line--four { --line-dash: 0.11 0.89; --line-duration: 21s; --line-delay: -13s; --line-peak: 0.16; animation-direction: reverse; stroke-width: 1.3; }
.performance-light-line--five { --line-dash: 0.2 0.8; --line-duration: 34s; --line-delay: -23s; --line-peak: 0.2; stroke: color-mix(in srgb, var(--text) 46%, var(--accent)); stroke-width: 1.1; }
.performance-light-line--six { --line-dash: 0.07 0.93; --line-duration: 27s; --line-delay: -7s; --line-peak: 0.17; animation-direction: reverse; stroke-width: 1.2; }

@keyframes performance-light-run {
	0%, 100% { opacity: 0; stroke-dashoffset: 1; }
	14%, 76% { opacity: var(--line-peak, 0.18); }
	88% { opacity: 0; stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.performance-light-line { animation: none; opacity: 0.06; stroke-dasharray: 0.1 0.9; }
}

.performance-status,
.performance-note,
.performance-unit { color: var(--muted-text); font-size: 12px; line-height: 1.5; }
.performance-intro { max-width: 760px; color: var(--muted-text); font-size: 14px; line-height: 1.5; }
.performance-status:empty { display: none; }
.performance-status.is-error { color: #c33445; }
.performance-filter-bar { display: flex; align-items: center; gap: 12px; color: var(--muted-text); font-size: 12px; }
.performance-filter-bar > span { flex: 0 0 auto; font-weight: 600; }
.performance-period-control {
	--period-index: 0;
	position: relative;
	display: grid;
	width: min(100%, 520px);
	min-width: 0;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	padding: 3px;
	background: var(--soft-bg);
	border: 1px solid var(--border);
	border-radius: 6px;
}
.performance-period-indicator {
	position: absolute;
	z-index: 0;
	top: 3px;
	bottom: 3px;
	left: 3px;
	width: calc((100% - 6px) / 5);
	background: var(--accent);
	border-radius: 6px;
	transform: translateX(calc(var(--period-index) * 100%));
	transition: transform 240ms cubic-bezier(0.2, 0.75, 0.25, 1);
	pointer-events: none;
}
.performance-period-control button {
	position: relative;
	z-index: 1;
	min-width: 0;
	padding: 8px 4px;
	background: transparent;
	color: var(--muted-text);
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	font-size: 11px;
	white-space: nowrap;
}
.performance-period-control button[aria-pressed="true"] { color: var(--accent-ink); font-weight: 600; }
.performance-period-control button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.performance-period-control button:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) {
	.performance-period-indicator { transition: none; }
}
.performance-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }

.performance-metric,
.performance-panel {
	--surface-glow-position: 12% 0%;
	min-width: 0;
	padding: 16px;
	background: radial-gradient(ellipse at var(--surface-glow-position), color-mix(in srgb, var(--accent) 7%, transparent), transparent 68%), color-mix(in srgb, var(--panel-bg) 88%, transparent);
	border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent) 18%);
	border-radius: 8px;
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent), 0 12px 28px rgb(0 0 0 / 8%);
}

.performance-metric { display: grid; min-height: 118px; align-content: start; gap: 8px; }
.performance-metric:nth-child(3n + 2) { --surface-glow-position: 100% 0%; }
.performance-metric:nth-child(3n) { --surface-glow-position: 100% 100%; }
.performance-metric-label,
.performance-kicker { color: var(--muted-text); font-size: 12px; font-weight: 600; }
.performance-metric-value { color: var(--text); font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; }
.performance-metric-detail { color: var(--muted-text); font-size: 11px; line-height: 1.4; }
/* Side-by-side panels stretch to the same height, so their bottoms line up. */
.performance-main-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); gap: 16px; align-items: stretch; }
.performance-panel { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; }
.performance-side-column { display: grid; min-width: 0; grid-template-rows: auto 1fr; gap: 16px; }
.training-habits-panel .premium-lock-overlay { place-items: center; }

/* Weight progress chart beside the exercise table; the table scrolls inside the chart's height. */
.performance-history-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.exercise-breakdown-panel { grid-template-rows: auto minmax(0, 1fr); }
.exercise-breakdown-scroll { position: relative; min-height: 320px; }
.exercise-breakdown-scroll > div { position: absolute; inset: 0; overflow-y: auto; }
.exercise-breakdown-scroll .exercise-table-wrap { overflow: visible; }
.exercise-breakdown-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--panel-bg); }
.exercise-top-weight { white-space: nowrap; color: var(--text); }

/* Muscle map: front and back of a body; each muscle's green brightness follows --muscle-level (0–1). */
.muscle-map { display: grid; justify-items: center; gap: 12px; }
/* Title and period on the left, Front / Back switch in the top right corner. */
.muscle-map-heading { align-items: start; }
.muscle-map-heading .performance-unit { display: block; margin-top: 2px; font-size: 11px; }
.muscle-map-heading .muscle-map-toggle { width: 180px; }
.muscle-map-heading .muscle-map-toggle button { padding: 8px 14px; font-size: 13px; }
.muscle-map-toggle { position: relative; display: grid; width: min(100%, 200px); grid-template-columns: 1fr 1fr; padding: 3px; background: var(--soft-bg); border: 1px solid var(--border); border-radius: 999px; }
.muscle-map-toggle-indicator { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: var(--accent); border-radius: 999px; transition: transform 240ms cubic-bezier(0.2, 0.75, 0.25, 1); }
.muscle-map-toggle[data-active="back"] .muscle-map-toggle-indicator { transform: translateX(100%); }
.muscle-map-toggle button { position: relative; padding: 6px 12px; color: var(--muted-text); background: transparent; border: 0; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 600; transition: color 240ms ease; }
.muscle-map-toggle button[aria-pressed="true"] { color: var(--accent-ink); }
.muscle-map-toggle button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muscle-map-stage { width: min(100%, 250px); perspective: 900px; }
.muscle-map-card { position: relative; display: grid; transform-style: preserve-3d; transition: transform 600ms cubic-bezier(0.3, 0.7, 0.25, 1); }
.muscle-map-card.is-flipped { transform: rotateY(180deg); }
.muscle-map-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.muscle-map-face.is-back { transform: rotateY(180deg); }
.muscle-map-body { display: block; width: 100%; height: auto; overflow: visible; }
.muscle-map-silhouette { fill: color-mix(in srgb, var(--text) 5%, transparent); }
.muscle-map-base { fill: color-mix(in srgb, var(--text) 13%, var(--panel-bg)); }
.muscle-map-muscle { --muscle-level: 0; cursor: pointer; outline: none; }
.muscle-map-muscle path {
    fill: color-mix(in srgb, var(--text) 13%, var(--panel-bg));
    stroke: var(--panel-bg);
    stroke-width: 1.2;
    transition: fill 400ms ease, stroke 160ms ease;
}
.muscle-map-muscle.is-trained path { fill: color-mix(in srgb, var(--accent) calc(var(--muscle-level) * 100%), color-mix(in srgb, var(--text) 13%, var(--panel-bg))); }
.muscle-map-muscle:hover path,
.muscle-map-muscle:focus-visible path,
.muscle-map-muscle.is-selected path { stroke: var(--text); stroke-width: 1.6; }
.muscle-map-caption { min-height: 2.9em; max-width: 34ch; color: var(--muted-text); font-size: 12px; line-height: 1.45; text-align: center; }
.muscle-map-legend { display: flex; align-items: center; gap: 8px; color: var(--muted-text); font-size: 10px; }
.muscle-map-legend i { width: 90px; height: 7px; background: linear-gradient(90deg, color-mix(in srgb, var(--text) 13%, var(--panel-bg)), color-mix(in srgb, var(--accent) 25%, color-mix(in srgb, var(--text) 13%, var(--panel-bg))), var(--accent)); border-radius: 999px; }
@media (prefers-reduced-motion: reduce) {
    .muscle-map-card,
    .muscle-map-toggle-indicator,
    .muscle-map-toggle button,
    .muscle-map-muscle path { transition: none; }
}
.performance-section-heading { display: flex; min-width: 0; align-items: end; justify-content: space-between; gap: 12px; }
.performance-section-heading.muscle-volume-header { align-items: center; flex-direction: row; }
.performance-section-heading > div { min-width: 0; }
.performance-kicker { margin-bottom: 4px; color: var(--accent); }
.performance-section-heading h2 { color: var(--text); font-size: 16px; }
.performance-unit { flex: 0 0 auto; }
.performance-empty { color: var(--muted-text); font-size: 13px; }
.performance-skeleton-card { align-content: start; gap: 13px; }
.performance-skeleton-card .skeleton-line:first-child { width: 42%; }
.performance-skeleton-card .skeleton-line:nth-child(2) { width: 75%; height: 24px; }
.performance-skeleton-card .skeleton-line:last-child { width: 56%; }
.performance-skeleton-row { display: grid; gap: 7px; padding: 3px 0; }
.performance-skeleton-row .skeleton-line:first-child { width: 35%; height: 10px; }
.performance-skeleton-row .skeleton-line:last-child { width: 100%; height: 8px; }
.performance-skeleton-frequency { align-self: end; height: var(--skeleton-height); background: var(--soft-bg); border-radius: 4px 4px 0 0; }
.performance-skeleton-table-row { width: 100%; height: 18px; margin: 8px 0; }
.performance-skeleton-chart { width: 100%; height: 220px; border-radius: 6px; }
.habit-weekday-chart .performance-skeleton-day { align-self: end; width: 100%; height: var(--skeleton-height); background: var(--soft-bg); border-radius: 4px 4px 0 0; }
.performance-skeleton-habit-row { width: 100%; height: 18px; }
.performance-skeleton-duration { width: 100%; height: 52px; }

.muscle-volume-list { display: grid; gap: 12px; }
/* When the muscle map column is taller, the rows spread out instead of leaving a gap at the bottom. */
.muscle-volume-panel { grid-template-rows: auto auto minmax(0, 1fr); }
.muscle-volume-panel .muscle-volume-list { align-content: space-between; }
.muscle-volume-row { display: grid; min-width: 0; gap: 6px; }
.muscle-volume-heading { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 12px; }
.muscle-volume-heading strong { color: var(--text); font-size: 12px; }
.muscle-volume-heading span { color: var(--muted-text); font-size: 10px; text-align: right; }
.performance-bar-track { height: 8px; overflow: hidden; background: var(--soft-bg); border-radius: 999px; }
.performance-bar-fill { display: block; height: 100%; min-width: 2px; background: var(--accent); border-radius: inherit; }

.frequency-chart { display: grid; height: 150px; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: end; gap: 5px; padding-top: 8px; }
.frequency-week { display: flex; min-width: 0; height: 100%; flex-direction: column; align-items: center; justify-content: end; gap: 5px; }
.frequency-week strong { color: var(--text); font-size: 10px; }
.frequency-bar-track { display: flex; width: 100%; height: 100px; align-items: end; justify-content: center; background: var(--soft-bg); border-radius: 4px 4px 0 0; }
.frequency-bar-track span { display: block; width: 100%; min-height: 0; background: var(--accent); border-radius: 4px 4px 0 0; }
.frequency-week > span { color: var(--muted-text); font-size: 9px; white-space: nowrap; }

.performance-table-wrap {
	width: 100%;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x pan-y;
	scrollbar-width: thin;
	scrollbar-color: var(--accent) var(--soft-bg);
}

.performance-table-wrap:focus-visible,
.performance-table-wrap:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.performance-table-wrap::-webkit-scrollbar { height: 6px; }
.performance-table-wrap::-webkit-scrollbar-track { background: var(--soft-bg); border-radius: 999px; }
.performance-table-wrap::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }
.performance-table { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--muted-text); font-size: 12px; text-align: left; }
.performance-table th,
.performance-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.performance-table thead th { color: var(--muted-text); font-size: 10px; font-weight: bold; }
.performance-table tbody th { color: var(--text); font-weight: 600; }
.performance-table tbody th small { display: block; margin-top: 3px; color: var(--muted-text); font-size: 10px; font-weight: normal; text-transform: capitalize; }
.performance-table tbody tr:last-child th,
.performance-table tbody tr:last-child td { border-bottom: 0; }
/* Fills the panel on wide screens; scrolls sideways on narrow ones. */
.weekly-muscle-table { width: 100%; min-width: 620px; table-layout: fixed; }
.weekly-muscle-table th,
.weekly-muscle-table td { padding-inline: 6px; }
.weekly-muscle-table td { background: color-mix(in srgb, var(--accent) var(--cell-accent, 0%), transparent); text-align: center; }
.weekly-muscle-table th:first-child { position: sticky; left: 0; z-index: 2; width: 110px; padding-inline: 8px 4px; background: var(--panel-bg); box-shadow: 1px 0 var(--border); }
.weekly-muscle-table thead th:first-child { z-index: 3; }
.exercise-breakdown-table { min-width: 0; table-layout: fixed; }
.exercise-breakdown-table th:first-child { width: 36%; white-space: normal; overflow-wrap: anywhere; }
.exercise-breakdown-table th:nth-child(5) { width: 25%; }
.exercise-breakdown-table td { text-align: right; }

.weight-progress-controls { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.weight-progress-controls label { display: grid; width: min(280px, 100%); gap: 5px; color: var(--muted-text); font-size: 11px; }
.weight-progress-controls select { width: 100%; min-width: 0; padding: 9px 10px; background: var(--soft-bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }
.weight-progress-controls .performance-note { margin: 0 0 4px; text-align: right; }
.weight-progress-chart { width: 100%; min-width: 0; overflow: hidden; background: var(--muted-bg); border: 1px solid var(--border); border-radius: 6px; }
.weight-progress-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding: 9px 12px 0; color: var(--muted-text); font-size: 11px; }
.weight-progress-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.weight-progress-legend-swatch { width: 17px; height: 0; border-top: 3px solid; }
.weight-progress-legend-swatch--weight { border-color: var(--accent); }
.weight-progress-legend-swatch--reps { border-color: #377eb8; border-top-style: dashed; }
.weight-progress-svg { display: block; width: 100%; height: auto; min-height: 180px; }
.weight-progress-gridline { stroke: var(--border); stroke-width: 1; }
.weight-progress-axis-label { fill: var(--muted-text); font-family: inherit; font-size: 11px; }
.weight-progress-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.weight-progress-axis-label--reps { fill: #377eb8; }
.weight-progress-reps-line { fill: none; stroke: #377eb8; stroke-width: 2.5; stroke-dasharray: 6 4; stroke-linecap: round; stroke-linejoin: round; }
.weight-progress-point { fill: var(--panel-bg); stroke: var(--accent); stroke-width: 3; }
.weight-progress-point--reps { stroke: #377eb8; stroke-width: 2.5; }

.training-habits-panel { --surface-glow-position: 80% 0%; }
/* Unlocked for Premium members: crown beside the title and the shiny Premium surface. */
.training-habits-panel.premium-surface { background: var(--premium-surface-bg); border-color: var(--premium-surface-border); box-shadow: var(--premium-surface-shadow); }
.training-habits-title { display: flex; align-items: center; gap: 9px; }
.training-habits-title .premium-crown { width: 24px; height: 24px; }
.training-habits-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 26px; }
/* Running: summary numbers, then the pace chart beside best and average times per distance. */
.running-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.running-summary-item { display: grid; gap: 4px; padding: 11px 13px; background: var(--soft-bg); border: 1px solid var(--border); border-radius: 8px; }
.running-summary-item span { color: var(--muted-text); font-size: 12px; font-weight: 700; }
.running-summary-item strong { color: var(--text); font-size: 18px; }
.running-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px 26px; margin-top: 6px; }
.running-module { display: grid; min-width: 0; align-content: start; gap: 11px; }
.running-module h3 { color: var(--muted-text); font-size: 12px; font-weight: 700; }
.running-empty { padding: 40px 16px; text-align: center; }
.running-times { display: grid; }
.running-time-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 1.2fr)); align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.running-time-row:last-child { border-bottom: 0; }
.running-time-name { color: var(--text); font-size: 13px; }
.running-time-value { display: grid; gap: 1px; text-align: right; }
.running-time-value small { color: var(--muted-text); font-size: 10px; }
.running-time-value b { color: var(--text); font-size: 16px; }
.running-time-value:first-of-type b { color: var(--accent); }
.running-time-empty { grid-column: 2 / -1; color: var(--muted-text); font-size: 11px; text-align: right; }
.running-time-row.is-empty .running-time-name { color: var(--muted-text); }

.training-habit-module { display: grid; min-width: 0; align-content: start; gap: 11px; }
.training-habit-module h3 { color: var(--muted-text); font-size: 12px; font-weight: 700; }
.training-habit-module h3 span { font-weight: 400; }
.habit-weekday-chart { display: grid; height: 110px; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: 7px; }
.habit-weekday-column { display: flex; min-width: 0; height: 100%; flex-direction: column; align-items: center; justify-content: end; gap: 5px; }
.habit-weekday-column strong { color: var(--muted-text); font-size: 9px; font-weight: 500; }
.habit-weekday-track { display: flex; width: 100%; height: 78px; align-items: end; background: var(--soft-bg); border-radius: 4px 4px 0 0; }
.habit-weekday-track span { display: block; width: 100%; background: color-mix(in srgb, #35c978 66%, var(--accent)); border-radius: 4px 4px 0 0; }
.habit-weekday-column > span { color: var(--muted-text); font-size: 9px; }
.habit-time-list,.habit-month-list { display: grid; gap: 8px; }
.habit-bar-row { display: grid; min-width: 0; grid-template-columns: 84px minmax(0, 1fr) 32px; align-items: center; gap: 9px; }
.habit-bar-label,.habit-bar-value { color: var(--muted-text); font-size: 10px; }
.habit-bar-value { text-align: right; font-variant-numeric: tabular-nums; }
.habit-bar-track { height: 10px; overflow: hidden; background: var(--soft-bg); border-radius: 999px; }
.habit-bar-track span { display: block; height: 100%; background: color-mix(in srgb, #35c978 66%, var(--accent)); border-radius: inherit; }
.habit-duration-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.habit-duration-stat { display: grid; min-width: 0; gap: 7px; padding: 10px 0; border-top: 1px solid var(--border); }
.habit-duration-stat span { color: var(--muted-text); font-size: 10px; }
.habit-duration-stat strong { color: var(--text); font-size: 15px; overflow-wrap: anywhere; }

@media (max-width: 1000px) {
	.performance-main-grid,
	.performance-history-grid,
	.running-grid { grid-template-columns: minmax(0, 1fr); }
	/* Stacked: the table has no chart beside it to match, so it gets its own scroll height. */
	.exercise-breakdown-scroll { min-height: 0; max-height: 440px; overflow-y: auto; }
	.exercise-breakdown-scroll > div { position: static; overflow: visible; }
}

@media (max-width: 700px) {
	.running-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.running-time-value b { font-size: 14px; }
	.performance-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.performance-section-heading { align-items: flex-start; flex-direction: column; }
	.performance-section-heading.muscle-volume-header { align-items: stretch; flex-direction: column; }
	.performance-section-heading.progress-heading { align-items: stretch; }
	/* The Front / Back switch stays in the top right corner on phones too. */
	.performance-section-heading.muscle-map-heading { align-items: start; flex-direction: row; }
	.muscle-map-heading .muscle-map-toggle { width: 128px; }
	.muscle-map-heading .muscle-map-toggle button { padding: 5px 8px; font-size: 11px; }
	.performance-filter-bar { align-items: stretch; flex-direction: column; gap: 7px; }
	.performance-period-control { width: 100%; }
	.performance-period-control button { padding-inline: 3px; }
	.weight-progress-controls { align-items: stretch; flex-direction: column; }
	.weight-progress-controls label { width: 100%; }
	.weight-progress-controls .performance-note { text-align: left; }
	.frequency-chart { gap: 3px; }
	.frequency-week > span { font-size: 8px; }
	.performance-panel { padding: 13px; }
	.training-habits-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.exercise-breakdown-table { font-size: 10px; }
	.weekly-muscle-table { min-width: 428px; font-size: 11px; }
	.weekly-muscle-table th,
	.weekly-muscle-table td { padding: 8px 3px; }
	.weekly-muscle-table thead th { font-size: 9px; }
	.weekly-muscle-table th:first-child { width: 100px; padding-inline: 6px 4px; }
	.exercise-breakdown-table th,
	.exercise-breakdown-table td { padding: 8px 5px; }
	.exercise-breakdown-table th:first-child { width: 32%; }
	.exercise-breakdown-table th:nth-child(5) { width: 28%; }
}

@media (max-width: 380px) {
	.performance-overview { grid-template-columns: minmax(0, 1fr); }
	.performance-metric { min-height: auto; }
	.performance-period-control button { padding-inline: 1px; font-size: 10px; }
}