/* finesse · register=product · shell=responsive-training-desk
 * A=forest+sage · B=system-sans+tabular · C=cover+log · D=state-transitions
 * E=training-journal · SOUL=6 SPECTACLE=3 DENSITY=5 */
:root {
  --ui-page: #f3f6f3;
  --ui-surface: #ffffff;
  --ui-inset: #f7f9f6;
  --ui-ink: #20382c;
  --ui-muted: #63756a;
  --ui-green: #2f7d5a;
  --ui-strong: #215c41;
  --ui-mint: #e4f1e8;
  --ui-line: #dfe8e1;
  --ui-rule: rgb(32 56 44 / .09);
  --ui-danger: #a34343;
  --ui-danger-soft: #fbefed;
  --ui-on-dark: #f6faf5;
  --ui-on-dark-muted: #d7e8dc;
  --ui-shadow: 0 2px 4px rgb(32 56 44 / .025), 0 10px 28px -20px rgb(32 56 44 / .14);
  --ui-shadow-float: 0 6px 24px -8px rgb(32 56 44 / .18);
  --ui-ring: 0 0 0 3px rgb(47 125 90 / .13);
  --ui-ease: cubic-bezier(.22, 1, .36, 1);
  --ui-fast: 160ms;
  --ui-duration: 240ms;
  --ui-nav-clearance: calc(110px + env(safe-area-inset-bottom, 0px));
  --color-green: var(--ui-green);
  --color-green-deep: var(--ui-strong);
  --color-green-soft: var(--ui-mint);
  --color-paper: var(--ui-page);
  --color-paper-2: var(--ui-inset);
  --color-paper-3: var(--ui-line);
  --color-ink: var(--ui-ink);
  --color-ink-2: var(--ui-ink);
  --color-neutral: var(--ui-muted);
  --color-muted: var(--ui-muted);
  --color-rule: var(--ui-line);
  --color-error: var(--ui-danger);
  --color-accent: var(--ui-mint);
  --ios-background: var(--ui-page);
  --ios-secondary-background: var(--ui-surface);
  --ios-system-green-soft: var(--ui-mint);
  --ios-radius-card: 20px;
  --ios-radius-control: 12px;
  --ios-shadow-card: var(--ui-shadow);
  --green: var(--ui-green);
  --green-dark: var(--ui-strong);
  --ink: var(--ui-ink);
  --muted: var(--ui-muted);
  --bg: var(--ui-page);
  --paper: var(--ui-surface);
  --line: var(--ui-line);
  --mint: var(--ui-mint);
  --danger: var(--ui-danger);
}

html, body { overflow-x: clip; }
body { background: var(--ui-page); color: var(--ui-ink); }
button, a, label, summary, select { -webkit-tap-highlight-color: transparent; }
button, a, summary, input, select, textarea { touch-action: manipulation; }
[hidden] { display: none !important; }
h1, h2, h3 { min-width: 0; overflow-wrap: anywhere; text-wrap: pretty; }
h1 { letter-spacing: -.035em; line-height: 1.25; }
.page-title h1, .detail-top h1 { font-size: 30px; }
.panel h2, .section-heading h2 { font-size: 21px; font-weight: 650; line-height: 1.4; }
.subtle { color: var(--ui-muted); line-height: 1.65; }
.page-title .eyebrow, .form-header .eyebrow, .detail-top .eyebrow { display: none; }
.page-title { margin: 4px 0 28px; gap: 16px; }
.page-title .subtle { margin: 8px 0 0; font-size: 14px; }
.settings-page-title { display: block; }
.section-heading { gap: 12px; align-items: center; }
.section-heading .subtle { margin: 4px 0 0; font-size: 13px; }
.skip-link { position: fixed; z-index: 1000; top: -80px; left: 16px; padding: 12px 18px; border-radius: 12px; background: var(--ui-strong); color: var(--ui-on-dark); }
.skip-link:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

/* One surface language, with compact supporting cards. */
.panel, .stat-card, .record-card, .app-disclosure {
  border: 1px solid var(--ui-rule);
  background: var(--ui-surface);
  border-radius: 20px;
  box-shadow: var(--ui-shadow);
}
.panel { padding: 24px; }
.main-content { width: 100%; max-width: 1056px; margin-inline: auto; }
.topbar { border-color: var(--ui-rule); box-shadow: none; }
.brand { gap: 10px; font-size: 21px; letter-spacing: -.035em; }
.brand-logo { width: 34px; height: 34px; border-radius: 11px; }
.storage-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--ui-rule); border-radius: 999px; background: var(--ui-inset); color: var(--ui-muted); font-size: 11px; line-height: 1.3; }
.storage-status i { width: 5px; height: 5px; flex: 0 0 5px; background: var(--ui-green); box-shadow: none; }
.btn {
  min-height: 46px;
  padding: 11px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  white-space: nowrap;
  transition: transform var(--ui-fast) var(--ui-ease), background-color var(--ui-fast), color var(--ui-fast), border-color var(--ui-fast);
}
.btn-primary { background: var(--ui-green); color: var(--ui-on-dark); box-shadow: none; }
.btn-secondary { background: var(--ui-mint); color: var(--ui-strong); box-shadow: none; }
.btn-ghost { color: var(--ui-strong); background: transparent; box-shadow: none; }
.btn-danger { background: var(--ui-danger-soft); color: var(--ui-danger); box-shadow: none; }
.btn:active:not(:disabled), .icon-btn:active:not(:disabled), .bottom-nav a:active { transform: scale(.97); }
.btn:disabled, .icon-btn:disabled { opacity: .46; cursor: not-allowed; }
.section-heading > .btn, .page-title > .btn, .workout-form-panel .form-header > .btn { min-height: 44px; }
.btn:focus-visible, .icon-btn:focus-visible, summary:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--ui-green); outline-offset: 3px; }
.icon-btn { display: inline-flex; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; align-items: center; justify-content: center; border-radius: 12px; color: var(--ui-muted); transition: transform var(--ui-fast) var(--ui-ease), background-color var(--ui-fast); }
.ios-icon { stroke-width: 1.8; }
.tag { padding: 5px 10px; border: 0; border-radius: 8px; background: var(--ui-mint); color: var(--ui-strong); font-size: 12px; line-height: 20px; }

/* The home cover is a photograph already owned by the project. */
.home-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 2px 0 20px; }
.home-date { margin: 0 0 5px; color: var(--ui-muted); font-size: 12px; }
.home-intro h2 { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.5; letter-spacing: -.025em; }
.home-symbol { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border: 1px solid var(--ui-rule); border-radius: 50%; color: var(--ui-green); background: var(--ui-mint); }
.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 300px;
  margin: 0 0 24px;
  padding: 32px;
  align-items: center;
  border: 0 !important;
  border-radius: 24px !important;
  background-color: var(--ui-strong);
  background-image: linear-gradient(90deg, rgb(14 43 29 / .92), rgb(14 43 29 / .55) 58%, rgb(14 43 29 / .08)), url('hero-training.png');
  background-position: center;
  background-size: cover;
}
.dashboard-hero-copy { width: 100%; max-width: 32rem; align-self: center; }
.dashboard-hero::before, .dashboard-hero::after { content: none; }
.dashboard-hero h1 { max-width: none; margin: 0; color: var(--ui-on-dark); font-size: 40px; font-weight: 700; letter-spacing: -.04em; line-height: 1.26; }
.dashboard-hero h1 span { display: block; }
.dashboard-hero .eyebrow { margin: 0 0 14px; font-size: 11px; color: var(--ui-on-dark-muted); letter-spacing: .08em; }
.dashboard-hero .subtle { margin: 14px 0 24px; color: var(--ui-on-dark-muted); font-size: 14px; }
.dashboard-hero .btn-primary { width: fit-content; min-width: 0; max-width: 100%; background: var(--ui-mint); color: var(--ui-strong); box-shadow: none; }
.dashboard-hero .btn-primary .ios-icon:last-child { margin-left: 12px; }
.dashboard-hero-quote { display: none; }
.dashboard-stat-wrap { margin: 0 0 28px; }
.stats-caption { display: flex; justify-content: space-between; margin: 0 0 12px; font-size: 13px; color: var(--ui-ink); }
.stats-caption span:last-child { font-size: 11px; color: var(--ui-muted); }
.dashboard-stat-strip, #app:has(.summary-page-title) .summary-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.dashboard-stat-strip .stat-card, #app:has(.summary-page-title) .summary-stats .stat-card { padding: 16px 12px; border: 1px solid var(--ui-rule); border-radius: 16px; background: var(--ui-surface); box-shadow: var(--ui-shadow); text-align: left; }
.dashboard-stat-strip .stat-card + .stat-card::before, #app:has(.summary-page-title) .summary-stats .stat-card + .stat-card::before { content: none; }
.stat-card::before, .stat-card::after { content: none !important; }
.dashboard-stat-strip .stat-label, #app:has(.summary-page-title) .summary-stats .stat-label { display: block; font-size: 11px; color: var(--ui-muted); }
.dashboard-stat-strip .stat-card strong, #app:has(.summary-page-title) .summary-stats .stat-card strong { display: block; margin: 9px 0 0; color: var(--ui-ink); font-size: 29px; line-height: 1.15; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.dashboard-stat-strip .stat-card strong small, #app:has(.summary-page-title) .summary-stats .stat-card strong small { display: inline; margin: 0 0 0 4px; color: var(--ui-muted); font-size: 11px; font-weight: 400; letter-spacing: 0; }
.dashboard-recent-heading { margin-bottom: 16px; }
.dashboard-recent-heading .btn { padding-inline: 10px; }
.dashboard-recent-list { gap: 12px; border: 0; }
.dashboard-recent-list .record-card, #app:has(.page-history-title) #history-list .record-card { padding: 18px 16px; border: 1px solid var(--ui-rule); border-radius: 18px; background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.record-card { gap: 8px; align-items: center; }
.record-main { display: block; min-width: 0; flex: 1; }
.record-date { margin-bottom: 6px; color: var(--ui-muted); font-size: 12px; }
.record-title { margin-bottom: 8px; font-size: 17px; font-weight: 650; line-height: 1.5; }
.record-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; line-height: 1.6; }
.record-meta .meta-item { min-width: 0; overflow-wrap: anywhere; }
.record-meta .ios-icon { width: 14px; height: 14px; }
.record-actions, .dashboard-recent-list .record-actions, #app:has(.page-history-title) #history-list .record-actions { flex-direction: column; gap: 0; }
.record-actions .icon-btn { color: var(--ui-muted); }
.empty, .dashboard-recent-list .empty, #app:has(.page-history-title) #history-list .empty { display: grid; justify-items: center; gap: 12px; padding: 32px 20px; border: 1px dashed var(--ui-line); border-radius: 20px; color: var(--ui-muted); background: var(--ui-surface); text-align: center; }
.empty .empty-icon { display: grid; width: 64px; height: 64px; margin: 0 0 4px; place-items: center; border-radius: 22px; background: var(--ui-mint); color: var(--ui-green); }
.empty h3 { margin: 0; color: var(--ui-ink); font-size: 17px; font-weight: 600; }
.empty p { margin: 0; font-size: 13px; line-height: 1.8; }
.empty .btn { margin-top: 4px; }

/* A date-grouped training journal, still backed by the existing records. */
.page-history-title { flex-direction: row; justify-content: space-between; }
.history-filter { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--ui-rule); border-radius: 16px; background: var(--ui-surface); }
.history-filter > label { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-muted); font-size: 13px; }
.history-filter > div { display: flex; min-width: 0; align-items: center; gap: 4px; }
.history-filter input { flex: 1; min-width: 0; }
.history-filter [data-clear-filter] { padding-inline: 8px; }
.history-count { margin: 18px 0; color: var(--ui-muted); font-size: 12px; }
#app:has(.page-history-title) #history-list { gap: 26px; border: 0; }
.history-day { min-width: 0; }
.history-day-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.history-day-heading h2 { margin: 0; font-size: 14px; line-height: 1.6; font-weight: 600; }
.history-day-heading > span { color: var(--ui-muted); font-size: 11px; white-space: nowrap; }
.history-day-records { display: grid; gap: 10px; }
.history-day .record-date { display: none; }

/* Entry: calm control surfaces and clear active action / set. */
input:not([type="checkbox"]):not([type="hidden"]):not([type="file"]), select, textarea, .weight-form #weight-date {
  width: 100%; min-width: 0; max-width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid var(--ui-line); border-radius: 12px; background-color: var(--ui-inset); color: var(--ui-ink); font-size: 16px; line-height: 24px; box-sizing: border-box;
}
input[type="date"], input[type="time"], .weight-form #weight-date { display: block; height: 48px; min-inline-size: 0; }
input::-webkit-date-and-time-value { min-width: 0; text-align: left; }
textarea { min-height: 88px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ui-muted); opacity: 1; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--ui-green); background-color: var(--ui-surface); box-shadow: var(--ui-ring); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--ui-danger); }
.field > label, .cardio-field > span { color: var(--ui-ink); font-size: 13px; font-weight: 550; }
.field { min-width: 0; gap: 8px; }
.error { min-height: 0; color: var(--ui-danger); font-size: 12px; line-height: 1.6; }
.error:empty { display: none; }
.workout-form-panel { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.form-header { flex-direction: row; align-items: flex-start; gap: 10px; margin: 2px 0 18px; }
.form-header > div { flex: 1; min-width: 0; }
.form-header h2 { margin: 0; font-size: 28px; line-height: 1.35; letter-spacing: -.03em; }
.form-header .subtle { margin: 8px 0 0; font-size: 13px; }
.form-header > .btn { flex: 0 0 auto; padding-inline: 8px; }
.draft-status { margin: 0 0 20px; padding: 10px 12px; border: 1px solid var(--ui-rule); border-radius: 10px; background: var(--ui-mint); color: var(--ui-strong); font-size: 11px; line-height: 1.7; }
.draft-status button { display: inline-flex; align-items: center; min-height: 44px; margin-block: -8px; color: var(--ui-strong); white-space: nowrap; }
.workout-type-field { display: block; padding: 0; margin: 0 0 22px; border: 0; background: transparent; }
.workout-type-field > div:first-child { display: none; }
.workout-type-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: 100%; padding: 4px; border: 1px solid var(--ui-rule); border-radius: 14px; background: var(--ui-line); }
.workout-type-switch button { min-width: 0; min-height: 44px; padding: 8px 12px; border-radius: 10px; color: var(--ui-muted); font-size: 14px; font-weight: 600; transition: background-color var(--ui-fast), color var(--ui-fast), transform var(--ui-fast); }
.workout-type-switch button.is-selected { background: var(--ui-surface); color: var(--ui-strong); box-shadow: var(--ui-shadow); }
#training-type-content > .form-grid { gap: 20px; padding: 20px; border: 1px solid var(--ui-rule); border-radius: 20px; background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.time-range-fields { display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); gap: 8px; }
.time-range-fields > span { display: block; text-align: center; font-size: 12px; }
.duration-preview { color: var(--ui-muted); font-size: 11px; line-height: 1.6; }
.body-parts { display: flex; flex-wrap: wrap; gap: 8px; }
.part-chip label { display: flex; min-height: 44px; align-items: center; padding: 9px 14px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-inset); color: var(--ui-muted); font-size: 14px; }
.part-chip input:checked + label { border-color: var(--ui-green); background: var(--ui-mint); color: var(--ui-strong); }
.part-chip input:focus-visible + label { outline: 2px solid var(--ui-green); outline-offset: 2px; }
.exercise-block { margin-top: 28px; padding-top: 0; border: 0; }
.exercise-block > .section-heading { align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.exercise-block > .section-heading h3 { font-size: 19px; }
.exercise-block > .section-heading .toolbar { display: flex; flex-wrap: wrap; gap: 8px; width: auto; }
.exercise-block > .section-heading .toolbar .btn { min-height: 44px; font-size: 12px; padding: 8px 12px; }
#exercise-list { display: grid; gap: 16px; }
.exercise-card { margin: 0; min-width: 0; padding: 16px; border: 1px solid var(--ui-rule); border-radius: 20px; background: var(--ui-surface); box-shadow: var(--ui-shadow); scroll-margin-block: 24px; }
.exercise-card:focus-within { border-color: var(--ui-green); }
.exercise-card-head { display: flex; min-width: 0; align-items: flex-start; gap: 8px; }
.exercise-name-fields { flex: 1; min-width: 0; }
.exercise-name-fields > label { display: block; margin-bottom: 8px; color: var(--ui-muted); font-size: 11px; }
.exercise-name-fields > label::before { content: attr(data-number); }
.exercise-card[data-exercise-number] .exercise-name-fields > label::before { content: '动作 ' attr(data-number); }
.exercise-name-fields select { width: 100%; min-width: 0; padding-right: 24px; font-size: 15px; font-weight: 600; }
.exercise-name-fields .custom-exercise-name { margin-top: 8px; }
.exercise-card-actions { display: flex; flex-direction: column; gap: 0; flex: 0 0 44px; }
.exercise-card.is-collapsed .exercise-card-actions { flex-direction: row; flex-basis: 88px; }
.previous-hint { margin-top: 8px; font-size: 11px; color: var(--ui-muted); line-height: 1.7; overflow-wrap: anywhere; }
.exercise-collapsed-summary { display: grid; min-width: 0; gap: 4px; }
.exercise-collapsed-summary strong, .exercise-collapsed-summary span { white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; }
.exercise-collapsed-summary strong { font-size: 15px; line-height: 1.6; }
.exercise-collapsed-summary span { font-size: 12px; }
.exercise-card .set-table { margin-top: 16px; overflow: visible; }
.set-header { display: none; }
.set-row { display: grid; min-width: 0; grid-template-columns: 36px 68px minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-areas: 'number warmup weight reps remove'; align-items: end; gap: 10px; margin: 0; padding: 12px 0; border: 0; border-top: 1px solid var(--ui-rule); border-radius: 0; background: transparent; }
.set-row:nth-child(even) { background: transparent; }
.set-row.is-filled { background: color-mix(in srgb, var(--ui-mint) 35%, transparent); }
.set-row:focus-within { background: var(--ui-mint); }
.set-row .set-number { grid-area: number; align-self: center; color: var(--ui-muted); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.set-row .set-number::before, .set-row .set-number::after { content: none; }
.set-row .warmup-toggle { grid-area: warmup; display: flex; align-self: center; min-height: 44px; gap: 6px; color: var(--ui-muted); font-size: 12px; }
.set-row .warmup-toggle span { color: var(--ui-muted); }
.warmup-toggle input { width: 18px; height: 18px; min-height: 18px; margin: 0; accent-color: var(--ui-green); }
.set-row .set-value { display: grid; min-width: 0; gap: 6px; }
.set-row .set-value > span { color: var(--ui-muted); font-size: 10px; font-weight: 500; line-height: 16px; }
.set-row .set-weight { grid-area: weight; }
.set-row .set-reps { grid-area: reps; }
.set-row input:not([type="checkbox"]):not([type="hidden"]) { grid-area: auto; grid-column: auto; grid-row: auto; padding: 10px 8px; background: var(--ui-inset); text-align: center; font-variant-numeric: tabular-nums; }
.set-row .remove-set { grid-area: remove; align-self: end; justify-self: end; }
.exercise-card .add-set { margin-top: 10px; min-height: 44px; width: 100%; background: var(--ui-inset); color: var(--ui-strong); border-color: var(--ui-rule); }
.form-footer { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding: 20px 0 calc(20px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ui-line); background: transparent; }
.form-footer .btn { width: auto; }
.form-footer .btn-primary { min-width: 180px; margin: 0; }
.cardio-type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cardio-type-option { min-width: 0; min-height: 76px; padding: 12px 6px; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-inset); color: var(--ui-muted); font-size: 12px; }
.cardio-type-option.is-selected { border-color: var(--ui-green); background: var(--ui-mint); color: var(--ui-strong); box-shadow: none; }
.cardio-field-grid { gap: 16px; }
.cardio-time-details > summary, .cardio-more-fields > summary { display: flex; min-height: 44px; align-items: center; }
.cardio-computed { padding: 14px; border-radius: 12px; background: var(--ui-mint); color: var(--ui-strong); }

/* Summary and settings: clear sections, quiet chart grids, real selection. */
#app:has(.summary-page-title) .summary-stats { margin-bottom: 24px; }
#app:has(.summary-page-title) > .calendar-panel, #app:has(.summary-page-title) > .summary-day-panel { margin: 0 0 20px; padding: 20px; border: 1px solid var(--ui-rule); border-radius: 20px; background: var(--ui-surface); box-shadow: var(--ui-shadow); }
.calendar-header { margin-bottom: 12px; gap: 8px; }
.calendar-header h2 { font-size: 18px; }
.weekday-row { margin-bottom: 8px; font-size: 11px; color: var(--ui-muted); }
.calendar-grid { gap: 4px; }
#app:has(.summary-page-title) .calendar-day { display: flex; min-width: 0; min-height: 48px; gap: 3px; align-items: center; justify-content: center; padding: 7px 1px; border: 1px solid transparent; border-radius: 10px; background: var(--ui-inset); color: var(--ui-ink); font-size: 13px; }
#app:has(.summary-page-title) .calendar-day.has-workout { border-color: transparent; background: var(--ui-mint); color: var(--ui-strong); }
#app:has(.summary-page-title) .calendar-day.has-workout > span, #app:has(.summary-page-title) .calendar-day.has-workout small { color: var(--ui-strong); }
#app:has(.summary-page-title) .calendar-day small { font-size: 9px; line-height: 12px; }
#app:has(.summary-page-title) .calendar-day.is-selected { background: var(--ui-strong); color: var(--ui-on-dark); }
#app:has(.summary-page-title) .calendar-day.is-selected > span, #app:has(.summary-page-title) .calendar-day.is-selected small { color: var(--ui-on-dark); }
#app:has(.summary-page-title) .calendar-day.is-empty { background: transparent; }
.calendar-legend { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 16px; font-size: 10px; }
.summary-day-title { font-size: 14px; line-height: 1.6; }
.summary-session { gap: 8px; padding-block: 14px; font-size: 14px; }
.summary-session > span { white-space: normal; overflow-wrap: anywhere; }
.progress-panel { margin-bottom: 20px; }
.progress-stats { gap: 10px; }
.progress-stat-card { border: 1px solid var(--ui-rule); border-radius: 14px; background: var(--ui-inset); box-shadow: none; }
.progress-stat-card strong { color: var(--ui-strong); font-variant-numeric: tabular-nums; }
.progress-flame { animation: none; color: var(--ui-green); }
.progress-flame .ios-icon { width: 14px; height: 14px; }
.metric-change, .progress-stat-top, .progress-stats-heading small { color: var(--ui-muted); }
.chart-grid line { stroke: var(--ui-line); stroke-opacity: .7; }
.chart-grid text, .chart-labels text { fill: var(--ui-muted); }
.weight-line { stroke: var(--ui-green); stroke-width: 3; }
.weight-dot { fill: var(--ui-surface); stroke: var(--ui-green); }
.weight-chart, .progress-chart { display: block; width: 100%; max-width: 100%; height: auto; }
.progress-record-values { padding: 12px; border-radius: 12px; background: var(--ui-inset); }
.progress-record-values b { color: var(--ui-strong); font-variant-numeric: tabular-nums; }
.muscle-bar { border-radius: 999px; background: var(--ui-mint); }
.muscle-bar i { background: var(--ui-green); }
#app:has(.summary-page-title) .app-disclosure, #app:has(.settings-page-title) .app-disclosure { margin: 0 0 12px; border: 1px solid var(--ui-rule); border-radius: 18px; background: var(--ui-surface); box-shadow: var(--ui-shadow); }
#app:has(.summary-page-title) .app-disclosure > summary, #app:has(.settings-page-title) .app-disclosure > summary { min-height: 80px; padding: 18px; gap: 16px; border-radius: 18px; background: transparent; }
.app-disclosure > summary strong { font-size: 15px; font-weight: 600; line-height: 1.5; }
.app-disclosure > summary small { margin-top: 5px; color: var(--ui-muted); font-size: 11px; line-height: 1.6; }
.app-disclosure > .panel > .section-heading h2, .app-disclosure > .panel > h2 { display: none; }
#app .app-disclosure > summary::after { content: ''; width: 16px; height: 16px; flex: 0 0 16px; background-color: var(--ui-muted); border-radius: 0; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(0); transition: transform var(--ui-duration) var(--ui-ease); }
#app .app-disclosure[open] > summary::after { transform: rotate(180deg); }
#app:has(.summary-page-title) .app-disclosure > .panel, #app:has(.settings-page-title) .app-disclosure > .panel { margin: 0; padding: 18px; border: 0; border-top: 1px solid var(--ui-rule); border-radius: 0 0 18px 18px; background: transparent; box-shadow: none; }
#app:has(.settings-page-title) .settings-row { min-width: 0; gap: 16px; padding-block: 20px; border-color: var(--ui-rule); }
.settings-row h3 { font-size: 15px; }
.settings-row p { color: var(--ui-muted); font-size: 12px; line-height: 1.7; }
.weight-panel > .weight-form { margin-top: 24px; }
.weight-panel > .app-disclosure, #app:has(.settings-page-title) .weight-history { margin-top: 28px; }
.detail-top { margin: 4px 0 24px; }
.detail-exercise { padding: 20px 0; }
.detail-exercise-title { gap: 12px; align-items: flex-start; }
.detail-exercise-title strong { font-size: 16px; overflow-wrap: anywhere; }
.detail-set-row { gap: 10px; margin-top: 8px; padding: 12px; border-radius: 10px; background: var(--ui-inset); font-size: 13px; }
.detail-note { padding: 16px; border-radius: 12px; background: var(--ui-inset); color: var(--ui-muted); line-height: 1.8; overflow-wrap: anywhere; }

/* Feedback stays away from the bottom bar and never intercepts touches. */
.toast { z-index: 1000; display: flex; align-items: center; gap: 9px; max-width: calc(100vw - 32px); width: max-content; padding: 13px 16px; border: 1px solid var(--ui-rule); border-radius: 14px; background: var(--ui-ink); color: var(--ui-on-dark); box-shadow: var(--ui-shadow-float); font-size: 13px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; pointer-events: none; transition: opacity 180ms, transform 240ms var(--ui-ease); }
.toast::before { content: ''; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--ui-mint); }
.completion-overlay { z-index: 900; background: rgb(32 56 44 / .22); backdrop-filter: blur(5px); }
.completion-card { width: min(320px, calc(100vw - 40px)); padding: 32px 24px; border: 1px solid var(--ui-rule); border-radius: 28px; background: var(--ui-surface); box-shadow: var(--ui-shadow-float); }
.completion-card h2 { font-size: 20px; line-height: 1.5; color: var(--ui-ink); }
.completion-card p { color: var(--ui-muted); font-size: 13px; }
.completion-check { display: block; width: 76px; height: 76px; margin: 0 auto 20px; padding: 0; border: 0; background: transparent; box-shadow: none; animation: none; }
.completion-check svg { width: 76px; height: 76px; fill: none; stroke-width: 2; }
.completion-check::before, .completion-check::after { content: none; }
.completion-check svg { animation: none; }
.completion-check .completion-track { stroke: var(--ui-mint); }
.completion-check .completion-ring { stroke: var(--ui-green); stroke-dasharray: 170; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: center; }
.completion-check .completion-tick { stroke: var(--ui-green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 0; }
.import-modal { z-index: 800; padding: 20px; background: rgb(32 56 44 / .28); }
.import-dialog { max-height: calc(100dvh - 40px); overflow-y: auto; padding: 24px; border: 1px solid var(--ui-rule); border-radius: 24px; background: var(--ui-surface); color: var(--ui-ink); box-shadow: var(--ui-shadow-float); }
.import-dialog-head h2 { font-size: 23px; }
.import-dialog .eyebrow { display: none; }
.import-file-picker { display: flex; min-height: 108px; align-items: center; justify-content: center; gap: 12px; border: 1px dashed var(--ui-green); border-radius: 16px; background: var(--ui-inset); }
.import-preview { padding: 16px; border-radius: 14px; background: var(--ui-mint); color: var(--ui-strong); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.has-import { overflow-y: hidden; }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--ui-strong); color: var(--ui-on-dark); }
  .btn-secondary:hover { background: var(--ui-line); color: var(--ui-strong); }
  .btn-ghost:hover, .icon-btn:hover { background: var(--ui-mint); color: var(--ui-strong); }
  .btn-danger:hover { background: var(--ui-danger); color: var(--ui-on-dark); }
  .record-card:hover, .dashboard-recent-list .record-card:hover, #app:has(.page-history-title) #history-list .record-card:hover { border-color: var(--ui-green); }
}

@media (max-width: 60rem) {
  :root { --page-gutter: 20px; }
  .app-shell { padding-bottom: 0; }
  .workspace { padding-bottom: var(--ui-nav-clearance); }
  body.is-recording-flow .workspace { padding-bottom: 0; }
  .topbar { position: relative; top: auto; width: auto; min-height: calc(68px + env(safe-area-inset-top, 0px)); height: auto; margin-inline: var(--page-gutter); padding: calc(12px + env(safe-area-inset-top, 0px)) 0 12px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .main-content { padding: 24px var(--page-gutter) 20px; }
  body.is-recording-flow .main-content { padding-bottom: 8px; }
  .panel { padding: 20px; }
  .home-intro { margin-bottom: 20px; }
  .home-intro h2 { font-size: 18px; }
  .dashboard-hero { min-height: 286px; margin: 0 0 24px; padding: 26px 24px; background-position: 48% center; }
  .dashboard-hero h1 { font-size: 34px; line-height: 1.28; }
  .dashboard-hero .subtle { font-size: 12px; }
  .dashboard-stat-wrap { margin: 0 0 28px; }
  .dashboard-stat-strip { padding: 0; margin: 0; }
  .dashboard-stat-strip .stat-card { padding: 16px 12px; }
  .bottom-nav {
    position: fixed; z-index: 200; left: 50%; right: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(440px, calc(100% - 32px)); max-width: calc(100% - 32px); height: 68px; min-height: 68px; margin: 0; padding: 5px; border: 1px solid var(--ui-rule); border-radius: 22px; background: var(--ui-surface); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--ui-shadow-float);
  }
  .bottom-nav a { min-width: 0; min-height: 56px; gap: 4px; padding: 6px 4px; border-radius: 17px; color: var(--ui-muted); font-size: 11px; font-weight: 500; line-height: 1.2; white-space: nowrap; transition: background-color var(--ui-duration), color var(--ui-duration), transform var(--ui-fast); }
  .bottom-nav a span { width: 22px; height: 22px; flex-basis: 22px; }
  .bottom-nav a svg { width: 22px; max-width: 22px; height: 22px; flex-basis: 22px; }
  .bottom-nav a.active { color: var(--ui-strong); background: var(--ui-mint); }
  .toast { bottom: calc(94px + env(safe-area-inset-bottom, 0px)); }
  body.is-recording-flow .toast { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid .full { grid-column: auto; }
  .form-header h2 { font-size: 27px; }
  .exercise-block > .section-heading { display: grid; grid-template-columns: minmax(0, 1fr); }
  .exercise-block .section-heading .toolbar { display: flex; justify-content: flex-end; }
  .exercise-block .section-heading .toolbar #copy-previous { min-width: 0; padding-inline: 12px; font-size: 12px; }
  .set-row { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-areas: 'number weight reps remove' 'warmup warmup warmup remove'; gap: 8px; padding: 12px 0 4px; }
  .set-row .set-number { font-size: 13px; }
  .set-row .warmup-toggle { min-height: 44px; }
  .set-row .set-value { display: grid; }
  .set-row .set-number { grid-area: number; }
  .set-row .warmup-toggle { grid-area: warmup; }
  .set-row .remove-set { grid-area: remove; }
  .set-row .remove-set { align-self: center; }
  .form-footer { gap: 16px; }
  .form-footer .btn-primary { flex: 1; min-width: 0; min-height: 50px; }
  .form-footer .btn-ghost { flex: 0 0 68px; }
  #app:has(.summary-page-title) .summary-stats .stat-card { padding: 14px 10px; }
  .progress-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .progress-stats > .progress-stat-card { padding: 14px 9px !important; }
  .progress-stat-top { gap: 3px; font-size: 10px; }
  .progress-stats-heading { gap: 4px; font-size: 12px; }
  .progress-stats-heading small { font-size: 10px; }
  .progress-stat-card strong { font-size: 26px; }
  .import-modal { padding: 16px; align-items: center; }
  .import-dialog { max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); padding: 20px; }
  .import-file-picker input { max-width: 100%; font-size: 12px; }
  .app-footline { display: none; }
}

@media (max-width: 360px) {
  :root { --page-gutter: 14px; }
  .home-intro h2 { font-size: 16px; }
  .home-symbol { width: 34px; height: 34px; flex-basis: 34px; }
  .dashboard-hero { min-height: 276px; padding: 24px 20px; }
  .dashboard-hero h1 { font-size: 31px; }
  .dashboard-stat-strip, #app:has(.summary-page-title) .summary-stats { gap: 8px; }
  .dashboard-stat-strip .stat-card, #app:has(.summary-page-title) .summary-stats .stat-card { padding: 14px 9px; }
  .dashboard-stat-strip .stat-card strong, #app:has(.summary-page-title) .summary-stats .stat-card strong { font-size: 25px; }
  .stat-card strong small { font-size: 10px !important; }
  .history-filter { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .history-day-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
  #training-type-content > .form-grid, .exercise-card, .panel { padding: 16px; }
  .time-range-fields { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .time-range-fields > span { display: none; }
  .set-row { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 6px; }
  .cardio-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .part-chip label { padding-inline: 12px; }
}

@media (prefers-reduced-motion: no-preference) {
  .item-added { animation: ui-added 700ms var(--ui-ease) both !important; }
  .completion-check .completion-ring { animation: ui-ring 520ms var(--ui-ease) both; }
  .completion-check .completion-tick { animation: ui-tick 260ms 280ms var(--ui-ease) both; }
  .import-dialog { animation: ui-dialog 240ms var(--ui-ease); }
}
@keyframes ui-added { from { outline: 3px solid var(--ui-green); outline-offset: 3px; } to { outline: 0 solid transparent; outline-offset: 0; } }
@keyframes ui-ring { from { stroke-dashoffset: 170; } to { stroke-dashoffset: 0; } }
@keyframes ui-tick { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
@keyframes ui-dialog { from { opacity: .3; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .motion-item, .motion-visible, .route-enter { opacity: 1 !important; transform: none !important; }
  .completion-check .completion-ring, .completion-check .completion-tick { stroke-dashoffset: 0; }
}