:root {
    color-scheme: light dark;
    --bg: light-dark(#f7f7f8, #101114);
    --panel: light-dark(#ffffff, #1b1d22);
    --ink: light-dark(#17191e, #f5f7fa);
    --muted: light-dark(#5c626c, #a4a9b3);
    --line: light-dark(#d9dce2, #353840);
    --soft: var(--bg);
    --active: var(--line);
    --accent: var(--band-primary, #007aff);
    --accent-foreground: var(--band-on-primary, #ffffff);
    --highlight: var(--band-secondary, #ff7700);
    --danger: light-dark(#a9322d, #ef8580);
    --shadow: 0 18px 40px rgba(26, 35, 50, 0.1);
    --activity-zero: light-dark(#e6e7eb, #202228);
    --activity-low: light-dark(color-mix(in srgb, var(--accent) 45%, #ffffff), color-mix(in srgb, var(--accent) 55%, #101114));
    --activity-mid: var(--accent);
    --activity-pr: var(--highlight);
    --activity-high: light-dark(color-mix(in srgb, var(--accent) 70%, #000000), color-mix(in srgb, var(--accent) 72%, #ffffff));
    --button-radius: 10px;
    --card-radius: 18px;
    --page-gutter: 24px;
}

/* Classic uses the band's blue for activity and red for current records. */
:root[data-band-theme="classic"] {
    --activity-pr: var(--band-stripe-red);
    --activity-low: light-dark(color-mix(in srgb, var(--band-stripe-blue) 45%, #ffffff), color-mix(in srgb, var(--band-stripe-blue) 55%, #101114));
    --activity-mid: var(--band-stripe-blue);
    --activity-high: light-dark(color-mix(in srgb, var(--band-stripe-blue) 70%, #000000), color-mix(in srgb, var(--band-stripe-blue) 72%, #ffffff));
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
    touch-action: manipulation;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.52;
}

.kiosk-shell {
    width: 100%;
}

.auth-view {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 18px var(--page-gutter);
}

.auth-panel,
.launch-card,
.workout-panel,
.choice-modal,
.number-modal {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.auth-panel {
    width: min(520px, 100%);
    display: grid;
    gap: 18px;
    padding: 28px;
}

.kiosk-view {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.page-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    min-width: 0;
    margin-inline: auto;
    padding: 16px var(--page-gutter) 40px;
}

.top-bar {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 10px var(--page-gutter);
    border-bottom: 1px solid var(--line);
}

.top-controls {
    display: flex;
    gap: 10px;
}

.eyebrow,
label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

.eyebrow,
h1,
h2,
p {
    margin: 0;
}

h1,
h2 {
    line-height: 1.05;
}

h1 {
    font-size: clamp(2rem, 4vw, 3rem);
}

h2 {
    font-size: clamp(1.65rem, 3vw, 2.5rem);
}

label {
    display: grid;
    gap: 7px;
}

input,
select {
    min-height: 54px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 800;
    padding: 10px 12px;
}

button:focus-visible,
input:focus,
select:focus {
    outline: 3px solid var(--activity-mid);
    outline-offset: 2px;
}

.title-button {
    max-width: min(760px, calc(100vw - 32px));
    border: 1px solid var(--line);
    border-radius: var(--button-radius);
    background: var(--panel);
    color: var(--ink);
    padding: 10px 14px;
    text-align: left;
    box-shadow: 0 1px 0 rgba(26, 35, 29, 0.04);
}

.title-button span {
    display: block;
    overflow: hidden;
    font-size: clamp(2.15rem, 4vw, 3.35rem);
    font-weight: 900;
    line-height: 1.02;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workout-title {
    display: none;
}

.primary-action,
.ghost-action,
.plan-token,
.exercise-title,
.check-button,
.exercise-select-list button,
.choice-list button,
.keypad-grid button,
.unit-picker button,
.duration-picker button {
    border-radius: var(--button-radius);
    font-weight: 900;
}

.primary-action {
    min-height: 56px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--accent-foreground);
    padding: 0 18px;
}

.primary-action.compact {
    min-height: 48px;
}

.icon-action {
    width: 56px;
    min-height: 48px;
    padding: 0;
    font-size: 1.75rem;
    line-height: 1;
}

.ghost-action {
    min-height: 48px;
    border: 1px solid var(--line);
    background: var(--soft);
    color: var(--ink);
    padding: 0 16px;
}

.message {
    min-height: 22px;
    color: var(--muted);
    font-size: 0.98rem;
    font-weight: 800;
}

.modal-message {
    min-height: 22px;
    color: var(--muted);
    font-size: 0.98rem;
    font-weight: 900;
}

.modal-message.error {
    color: var(--danger);
}

.start-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stat-card {
    min-height: 118px;
    display: grid;
    align-content: start;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    padding: 18px;
    box-shadow: 0 1px 0 rgba(26, 35, 29, 0.04);
}

.stat-card strong {
    color: var(--ink);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1;
}

.stat-list {
    display: grid;
    gap: 4px;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 900;
}

.stat-list p {
    display: grid;
    align-items: baseline;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.stat-row-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stat-row-value {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.stats-panel {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.stats-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    padding: 14px 16px;
}

.stats-dashboard-body {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.segmented-control {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
    padding: 4px;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0;
}

.segmented-control legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.segmented-control label {
    display: block;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: none;
}

.segmented-control input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.segmented-control span {
    min-height: 38px;
    min-width: 86px;
    display: grid;
    place-items: center;
    border-radius: var(--button-radius);
    padding: 0 18px;
}

.segmented-control input:checked + span {
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 1px 4px rgba(26, 35, 29, 0.14);
}

.segmented-control input:focus-visible + span {
    outline: 4px solid color-mix(in srgb, var(--activity-mid) 30%, transparent);
    outline-offset: 2px;
}

.segmented-control input:disabled + span {
    cursor: not-allowed;
    opacity: 0.52;
}

.segmented-control input:not(:disabled) + span {
    cursor: pointer;
}

.stats-scope-toggle {
    flex: 0 0 auto;
    margin: 0;
}

.stats-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chart-panel {
    display: grid;
    gap: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    padding: 18px;
    box-shadow: 0 1px 0 rgba(26, 35, 29, 0.04);
}

.chart-panel h3 {
    margin: 0;
    font-size: 1.2rem;
}

.trend-panel {
    gap: 18px;
}

.trend-panel-header,
.trend-metric-header,
.exercise-trend-axis {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.exercise-trend-list {
    display: grid;
    gap: 16px;
}

.exercise-trend {
    display: grid;
    gap: 8px;
    border-top: 1px solid var(--line);
    padding-top: 16px;
}

.exercise-trend:first-child {
    border-top: 0;
    padding-top: 0;
}

.exercise-trend h4,
.exercise-trend p {
    margin: 0;
}

.exercise-trend h4,
.trend-metric-card h5 {
    overflow: hidden;
    margin: 0;
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exercise-trend p,
.trend-metric-card p,
.exercise-trend-axis {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 900;
}

.exercise-trend-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.trend-metric-card {
    display: grid;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
}

.trend-metric-card.weight h5 {
    color: var(--ink);
}

.trend-metric-card.volume h5 {
    color: var(--ink);
}

.trend-chart {
    width: 100%;
    min-height: 160px;
    display: block;
}

.trend-grid-line {
    stroke: var(--line);
    stroke-width: 1;
}

.trend-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 5;
}

.trend-line.weight,
.trend-point.weight {
    stroke: var(--accent);
}

.trend-line.volume,
.trend-point.volume {
    stroke: var(--highlight);
}

.trend-point {
    fill: var(--panel);
    stroke-width: 4;
}

.bar-chart {
    display: grid;
    gap: 10px;
}

.bar-row {
    display: grid;
    grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) minmax(110px, auto);
    align-items: center;
    gap: 12px;
}

.bar-label,
.bar-value {
    overflow: hidden;
    font-size: 0.92rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar-value {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.bar-track {
    height: 18px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--soft);
}

.bar-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

.workout-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.workout-section > h2 {
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.date-field {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.date-field input {
    width: min(280px, 100%);
    min-height: 54px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    color: var(--ink);
    font: inherit;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0;
    padding: 0 14px;
    text-transform: none;
}

.date-field input[data-suggested="true"] {
    color: var(--muted);
}

.preview-list {
    display: grid;
    align-content: start;
    gap: 12px;
}

.preview-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
    font-weight: 900;
}

.preview-row span {
    color: var(--muted);
}

.workout-panel {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto 1fr auto;
    gap: 0;
    overflow: hidden;
}

.workout-toolbar, .exercise-card, .workout-summary, .workout-footer {
    padding: 16px;
}

.workout-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line);
}

.workout-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.workout-status {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.workout-status .message {
    color: var(--ink);
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 950;
    line-height: 1.08;
}

.workout-timer {
    color: var(--muted);
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
    font-weight: 900;
}

.workout-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.dashboard-back-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dashboard-back-action::before {
    width: 0.48em;
    height: 0.48em;
    content: "";
    border-bottom: 0.16em solid currentColor;
    border-left: 0.16em solid currentColor;
    transform: rotate(45deg);
}

.workout-footer {
    border-top: 1px solid var(--line);
}

.workout-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid var(--line);
}

.workout-summary-title {
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.1;
}

.workout-summary-detail {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.workout-summary .exercise-row-stat-value {
    color: var(--ink);
}

.workout-footer-action {
    width: 100%;
    min-height: 56px;
}

.exercise-list {
    display: grid;
}

.exercise-card {
    position: relative;
    display: grid;
    gap: 14px;
    border-top: 1px solid var(--line);
}

.exercise-card[draggable="true"] {
    cursor: grab;
}

.exercise-card.dragging {
    opacity: 0.58;
}

.exercise-card.drag-over {
    box-shadow: inset 0 0 0 3px var(--accent);
}

.exercise-card:first-child {
    border-top: 0;
}

.exercise-card.active {
    background: var(--active);
}

.exercise-card.active::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 7px;
    background: var(--accent);
    pointer-events: none;
}

.exercise-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.exercise-title {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--button-radius);
    background: var(--panel);
    color: var(--ink);
    padding: 8px 12px;
    font-size: clamp(1.65rem, 4vw, 2.4rem);
    line-height: 1.05;
    text-align: left;
}

.exercise-title:focus-visible,
.exercise-title:hover {
    border-color: var(--accent);
    background: var(--panel);
}

.exercise-card.active .exercise-title {
    background: color-mix(in srgb, var(--panel) 72%, transparent);
}

.exercise-card-actions {
    align-self: flex-start;
    margin-left: auto;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
}

.exercise-card-action {
    flex: 0 0 auto;
}

.exercise-note-divider {
    width: 100%;
    border-top: 1px solid var(--line);
    margin-top: 4px;
}

.exercise-card.active .exercise-note-divider {
    border-color: color-mix(in srgb, var(--muted) 40%, var(--active));
}

.exercise-note-editor {
    display: grid;
    justify-items: end;
    gap: 10px;
}

.exercise-note-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 97px;
    resize: vertical;
    border: 1px solid var(--line);
    border-radius: var(--button-radius);
    background: color-mix(in srgb, var(--panel) 62%, transparent);
    color: var(--ink);
    padding: 11px 12px;
    font-size: .96rem;
    line-height: 1.45;
}

.exercise-note-input::placeholder { color: var(--muted); }
.exercise-note-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.exercise-note-save:not(:disabled) { border-color: var(--accent); background: var(--accent); color: var(--accent-foreground); }

.exercise-note-text {
    margin: 0;
    font-size: .96rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.exercise-row-stats {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 12px;
    color: var(--muted);
}

.exercise-row-stat {
    min-width: 118px;
    display: grid;
    justify-items: end;
    gap: 2px;
}

.exercise-row-stat-value {
    color: var(--muted);
    font-size: clamp(1.15rem, 2.7vw, 1.55rem);
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
}

.exercise-row-stat-label {
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.plan-list {
    display: grid;
    gap: 8px;
}
.plan-list:has(.plan-summary) { overflow-x: auto; }

/* Reading rows and editing controls intentionally use different layouts. */
.set-type-divider {
    height: 0;
    width: 100%;
    border-top: 2px dashed var(--muted);
    margin: 10px 0;
}

.plan-summary, .plan-expression { font-size: clamp(1.55rem, 4vw, 2.15rem); font-weight: 900; }

.plan-summary {
    display: grid;
    width: max-content;
    max-width: 100%;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    color: var(--muted);
}

.plan-summary-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: baseline;
    min-height: 44px;
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
}

.plan-summary-cell { white-space: nowrap; padding-left: .22em; }
.plan-summary-cell:first-child, .summary-fraction { padding-left: 0; }
.set-count-hidden { visibility: hidden; }
.summary-integer { text-align: right; }
.summary-fraction, .summary-unit { text-align: left; }
.summary-symbol { text-align: center; }
.summary-symbol, .plan-static { font-weight: 950; }

.plan-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 12px 16px;
    min-height: 44px;
}

.plan-row[draggable="true"] { cursor: grab; }
.plan-row.dragging { opacity: 0.58; }
.plan-row.drag-over { border-radius: 8px; box-shadow: inset 0 0 0 2px var(--accent); }

.plan-expression {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    line-height: 1.45;
}

.plan-section { display: flex; align-items: flex-end; gap: 12px; }
.plan-field { display: grid; gap: 6px; }
.plan-field-label { color: var(--muted); font-size: 13px; font-weight: 500; text-align: right; line-height: 1.45; }
.plan-measure-fields { display: flex; gap: 6px; }
.plan-duration-fields { display: flex; align-items: center; gap: 4px; }

.plan-token {
    display: block;
    box-sizing: border-box;
    width: var(--plan-value-width, 65px);
    min-width: var(--plan-value-width, 65px);
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--button-radius);
    background: color-mix(in srgb, var(--panel) 62%, transparent);
    color: var(--ink);
    padding: 4px;
    font: inherit;
    text-align: right;
}

.plan-token.unit-token, .plan-token.distanceUnit-token { width: max-content; min-width: 44px; }
.plan-token:hover, .plan-token:focus-visible { border-color: var(--accent); background: var(--panel); }
/* Match the field line height plus its padding and borders. */
.plan-static { display: flex; align-items: center; justify-content: center; min-height: max(44px, calc(1lh + 10px)); }
.plan-section > .plan-static { width: 16px; }

.check-list {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}
.plan-row.has-labels .check-list { padding-top: 25px; }

.check-button {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 0;
    background: var(--panel);
    color: transparent;
    box-shadow: inset 0 0 0 3px var(--accent);
    font-size: 1.65rem;
    line-height: 1;
}

.check-button.complete {
    background: var(--accent);
    color: var(--accent-foreground);
}

.empty-state {
    padding: 34px;
    color: var(--muted);
    font-size: 1.25rem;
    font-weight: 850;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(19, 23, 20, 0.45);
}

.choice-modal,
.number-modal {
    width: min(760px, 100%);
    display: grid;
    gap: 18px;
    padding: 22px;
}

#exercise-form {
    position: relative;
    height: min(750px, calc(100vh - 44px));
    display: flex;
    flex-direction: column;
}

.modal-saving-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel) 82%, transparent);
}

.modal-saving-overlay[hidden] {
    display: none;
}

.saving-indicator {
    min-width: 220px;
    min-height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--panel);
    color: var(--ink);
    padding: 16px 20px;
    font-weight: 950;
    box-shadow: var(--shadow);
}

.saving-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--line);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: saving-spin 0.8s linear infinite;
}

@keyframes saving-spin {
    to {
        transform: rotate(360deg);
    }
}

.number-modal {
    width: min(460px, 100%);
    max-height: calc(100dvh - 44px);
    overflow-y: auto;
}

#exercise-edit-modal .choice-modal { max-height: calc(100dvh - 44px); overflow-y: auto; }

.number-modal h2 {
    font-size: clamp(3rem, 10vw, 5rem);
    text-align: center;
}

.choice-list,
.exercise-select-list {
    display: grid;
    gap: 10px;
}

.exercise-select-list {
    grid-template-columns: 1fr;
    align-content: start;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 2px 4px 2px 0;
}

.choice-list button,
.exercise-select-list button {
    width: 100%;
    min-height: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: var(--button-radius);
    background: var(--panel);
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 950;
    padding: 0 16px;
    text-align: left;
    box-shadow: 0 1px 0 rgba(26, 35, 29, 0.04);
}

.choice-list button.active {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-foreground);
}

.exercise-select-list button.create-exercise-result {
    border-color: var(--accent);
    background: var(--soft);
    color: var(--ink);
}

.exercise-select-list button.create-exercise-result::after {
    content: "+";
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-foreground);
    font-size: 1.1rem;
    line-height: 1;
}

.exercise-select-list button.active {
    border-color: var(--accent);
    background: var(--active);
    color: var(--ink);
    cursor: grab;
    box-shadow: inset 6px 0 0 var(--accent), 0 1px 0 rgba(26, 35, 29, 0.04);
}

.exercise-select-list button.dragging {
    opacity: 0.55;
    cursor: grabbing;
}

.exercise-select-list button.drag-over {
    border-color: var(--accent);
    box-shadow: inset 6px 0 0 var(--accent), 0 0 0 3px color-mix(in srgb, var(--activity-mid) 25%, transparent);
}

.exercise-select-list button.active::after {
    content: "✓";
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-foreground);
    font-size: 1rem;
    line-height: 1;
}

.edit-set-list {
    display: grid;
    gap: 10px;
}

.edit-set-row {
    min-height: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    padding: 10px 12px 10px 16px;
}

.edit-set-row strong {
    color: var(--muted);
    font-size: 1.35rem;
    font-weight: 950;
}

.remove-set-action {
    width: 56px;
    min-height: 56px;
    padding: 0;
    text-align: center;
}

.danger-action {
    min-height: 48px;
    border: 1px solid #84241f;
    border-radius: var(--button-radius);
    background: var(--danger);
    color: light-dark(#ffffff, #101114);
    font-weight: 900;
    padding: 0 16px;
}

.modal-actions.split-actions {
    justify-content: space-between;
}

.right-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.unit-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--soft);
    padding: 4px;
}

.unit-picker button {
    min-height: 48px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
}

.unit-picker button.active {
    border-color: var(--line);
    background: var(--panel);
    color: var(--ink);
}

.unit-picker.distance-unit-picker {
    grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
}
.distance-unit-picker .metric-units { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.distance-unit-picker .imperial-units { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.distance-unit-picker button { min-width: 0; padding-inline: 2px; }

.keypad-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.keypad-grid button {
    min-height: 76px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    font-size: 1.55rem;
}

.keypad-clear {
    grid-column: 1 / -1;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

[hidden] {
    display: none !important;
}

@media (max-width: 760px) {
    :root {
        --page-gutter: 16px;
    }

    .workout-summary {
        flex-wrap: wrap;
    }

    .workout-summary .exercise-row-stats {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .workout-toolbar {
        display: grid;
        align-items: stretch;
    }

    .workout-heading {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .top-controls {
        display: flex;
        flex-wrap: wrap;
    }

    .stats-toolbar {
        display: grid;
        align-items: stretch;
    }

    .stats-scope-toggle {
        justify-content: center;
    }

    .trend-panel-header,
    .trend-metric-header {
        display: grid;
        align-items: start;
    }

    .exercise-trend-charts {
        grid-template-columns: 1fr;
    }

    .bar-row {
        grid-template-columns: 1fr;
    }

    .bar-value {
        text-align: left;
    }

    .exercise-title-row,
    .plan-row {
        grid-template-columns: 1fr;
    }

    .exercise-title-row {
        display: grid;
    }

    .exercise-card-actions,
    .exercise-row-stats,
    .workout-actions,
    .edit-set-row,
    .split-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .exercise-row-stat {
        justify-items: start;
    }

    .check-list {
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-left: 0;
    }
    .plan-row.has-labels .check-list { padding-top: 0; }

}

/* Shared loading feedback uses the active band theme. */
.busy-surface { position: relative; }
.busy-indicator { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.busy-inline { padding: 10px 0; }
.busy-inline .saving-spinner, button .saving-spinner { width: 18px; height: 18px; }
.busy-surface > .modal-saving-overlay { min-height: 72px; }
.page-content.busy-surface { min-height: 240px; }
@media (prefers-reduced-motion: reduce) {
    .saving-spinner { animation: none; }
}
button.busy-surface:disabled { opacity: 1; }

.content-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 0;
    color: var(--ink);
}
.content-error[hidden] { display: none; }
.initial-load-error { min-height: 240px; justify-content: center; text-align: center; }

.duration-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 4px 10px; }
.duration-picker button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 12px 4px; border: 1px solid var(--line); background: var(--soft); color: var(--ink); }
.duration-picker button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--panel); }
.duration-part-value { font-size: 2.4rem; font-variant-numeric: tabular-nums; }
.duration-field { display: grid; grid-row: 1 / span 2; grid-template-rows: subgrid; text-align: center; }
.duration-colon { grid-row: 1; align-self: center; color: var(--muted); font-size: 2.4rem; }
.duration-part-label { color: var(--muted); font-size: .9375rem; }

.refresh-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.refresh-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; flex: 0 0 48px; }
.refresh-icon .busy-indicator { font-size: 0; gap: 0; }
.refresh-icon .saving-spinner { width: 22px; height: 22px; }
.exercise-search-row { display: flex; align-items: flex-end; gap: 12px; }
.exercise-search-row > label { flex: 1; min-width: 0; }
#refresh-exercises { flex: 0 0 54px; width: 54px; height: 54px; }