/* Shared presentation for the existing Muscle-ON pages and controls. */
@view-transition { navigation: auto; }

header { view-transition-name: site-header; }
.siteBody { view-transition-name: page-content; }
::view-transition-old(root), ::view-transition-new(root),
::view-transition-group(site-header), ::view-transition-new(site-header),
::view-transition-group(page-content) { animation: none; }
::view-transition-old(site-header) { display: none; }
::view-transition-old(page-content) { animation: page-out 160ms ease-in both; }
::view-transition-new(page-content) { animation: page-in 260ms cubic-bezier(.22, 1, .36, 1) both; }

@keyframes page-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes page-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-6px); }
}
@keyframes theme-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes theme-out { from { opacity: 1; } to { opacity: 0; } }

html.theme-snapshot header, html.theme-snapshot .siteBody { view-transition-name: none; }
html.theme-snapshot::view-transition-old(root) { animation: theme-out 320ms ease both; }
html.theme-snapshot::view-transition-new(root) { animation: theme-in 320ms ease both; }
html.theme-changing:not(.theme-snapshot),
html.theme-changing:not(.theme-snapshot) *,
html.theme-changing:not(.theme-snapshot) *::before,
html.theme-changing:not(.theme-snapshot) *::after {
  transition-property: background-color, color, border-color, box-shadow, fill, stroke !important;
  transition-duration: 320ms !important;
  transition-timing-function: ease !important;
}
html.motion-fallback .siteBody { animation: page-in 260ms cubic-bezier(.22, 1, .36, 1) both; }
html.motion-fallback.page-leaving .siteBody { animation: page-out 140ms ease-in both; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html.motion-fallback .siteBody { animation: none; }
  *, *::before, *::after { transition-duration: 0s !important; }
}

* { box-sizing: border-box; }
h2, h3, h4, h5, h6, strong, b, th, mark, optgroup { font-weight: 600; }

:root {
  color-scheme: light;
  --page-bg: #eaf6f6;
  --surface: #ffffff;
  --surface-soft: #f2faf9;
  --ink: #153145;
  --muted: #55717d;
  --line: #c9dfe0;
  --timeline-glow: rgba(8, 127, 145, .14);
  --notice-error-ink: #8c3229;
  --brand: #087f91;
  --brand-deep: #075a79;
  --button-bg: #087f91;
  --button-hover: #075a79;
  --button-ink: #fff;
  --table-head-bg: #075a79;
  --field-hover: #e8f5f4;
  --link-hover: #075a79;
  --accent: #f3ca2b;
  --shadow: 0 20px 55px rgba(8, 57, 77, .11);
  --backdrop-image: url("../images/background2.jpg");
  --backdrop-tint: rgba(234, 246, 246, .28);
}

html:has(#modeStylesheet[href$="dark.css"]) {
  color-scheme: dark;
  --page-bg: #0b1722;
  --surface: #142735;
  --surface-soft: #1b3443;
  --ink: #edf8f8;
  --muted: #b8d0d5;
  --line: #32515f;
  --timeline-glow: rgba(29, 171, 178, .18);
  --notice-error-ink: #ffc1b8;
  --brand: #1dabb2;
  --brand-deep: #75dadd;
  --button-bg: #237d87;
  --button-hover: #24808a;
  --button-ink: #fff;
  --table-head-bg: #0b5364;
  --field-hover: #264250;
  --link-hover: #a7e9e9;
  --accent: #f3ca2b;
  --shadow: 0 24px 60px rgba(0, 0, 0, .24);
  --backdrop-image: url("../images/background.jpg");
  --backdrop-tint: rgba(5, 16, 29, .42);
}
html { min-height: 100%; background: var(--page-bg) !important; }
body { position: relative; isolation: isolate; min-height: 100vh; font-family: "Segoe UI", Arial, sans-serif; line-height: 1.55; color: var(--ink); background: transparent !important; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--backdrop-tint); pointer-events: none; }
.background { display: block; position: fixed; inset: -40px; width: auto; height: auto; z-index: -2; background-image: var(--backdrop-image) !important; background-position: center; background-repeat: no-repeat; background-size: cover; filter: blur(28px) saturate(140%); -webkit-filter: blur(28px) saturate(140%); transform: none; pointer-events: none; }

header { background: linear-gradient(110deg, #0d7896, #10a9aa 55%, #10567f) !important; border-bottom: 3px solid var(--accent); box-shadow: 0 9px 28px rgba(0, 47, 69, .14); }
#actualHeaderHolder { width: min(1360px, calc(100% - 64px)); min-height: 82px; margin: auto; display: grid; grid-template-columns: 52px max-content minmax(0, 1fr) max-content; grid-template-areas: "logo title navigation account"; align-items: center; column-gap: 14px; }
#logoHolder { display: none; }
#menuLogo { grid-area: logo; width: 52px; margin: 0; padding: 0; border: 0; }
#menuLogo img { display: block; width: 52px; height: 52px; object-fit: contain; }
#title { grid-area: title; width: auto; margin: 0; white-space: nowrap; text-align: left; color: #fff; font-size: 1.45rem; font-weight: 700; letter-spacing: -.04em; }
a#title:hover { text-decoration: underline; text-underline-offset: 4px; }
#menuBar, #menuContainer { display: contents; }
#menuOptionBar { grid-area: navigation; width: auto; min-width: 0; justify-content: flex-start; align-items: center; gap: 6px; padding-left: clamp(18px, 4vw, 60px); }
.menuObject { border: 0 !important; color: #e9fcfc; }
.menuOption { min-height: 40px; padding: 9px 16px; justify-content: center; white-space: nowrap; font-size: .92rem; font-weight: 600; border-radius: 999px; transition: background .2s, color .2s, box-shadow .2s; }
.menuOption:hover, .menuOption:focus-visible { background: rgba(255,255,255,.16); color: #fff; }
.menuOption:has(.activeMenuText) { background: rgba(4, 48, 69, .34); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.menuOption:has(.activeMenuText):hover, .menuOption:has(.activeMenuText):focus-visible { background: rgba(4, 48, 69, .48); }
.activeMenuText { color: var(--accent) !important; }
#currentUser { grid-area: account; min-width: 0; padding: 0 0 0 20px; gap: 9px; border-left: 1px solid rgba(255,255,255,.24); }
#inlineUsernameDisplay { width: auto; max-width: 150px; height: auto; margin: 0; padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: .9rem; font-weight: 600; }
#inlineSignupButton, #inlineLoginButton, #logoutButton { width: auto; height: auto; margin: 0; padding: 10px 16px; font-size: .88rem; white-space: nowrap; }
#inlineLoginButton { background: rgba(255,255,255,.14) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.38) !important; }
#inlineLoginButton:hover, #inlineLoginButton:focus-visible { background: rgba(255,255,255,.26) !important; }
#inlineSignupButton { background: var(--accent) !important; color: #183649 !important; }
#inlineSignupButton:hover, #inlineSignupButton:focus-visible { background: #ffe175 !important; }

.siteBody { width: min(1160px, calc(100% - 48px)); margin: 42px auto 76px; padding: clamp(28px, 5vw, 70px); border: 1px solid var(--line); border-radius: 28px; background: var(--surface) !important; color: var(--ink) !important; box-shadow: var(--shadow); }
.siteBody h1, .siteBody h2, .siteBody h3, .siteBody h4 { color: var(--ink); text-align: left; line-height: 1.15; letter-spacing: -.035em; }
.siteBody h1 { font-size: clamp(2.3rem, 5vw, 4rem); margin: 0 0 26px; font-weight: 700; }
#settings-page > h1, #session-page .session-intro h1, #main-page > h1, #exercise-page > h1 { text-align: center; }
.siteBody h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0 0 20px; }
.siteBody h3 { font-size: 1.27rem; margin: 0 0 16px; font-weight: 600; }
.siteBody p { line-height: 1.75; }
.siteBody .text { max-width: 76ch; }
.siteBody a:not(.defaultButton) { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; }
.siteBody a:not(.defaultButton):hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--accent) !important; outline-offset: 3px; }
[hidden] { display: none !important; }

main#main-page { padding: 0; overflow: hidden; }
.home-hero { display: grid; grid-template-columns: 1.15fr .85fr; align-items: stretch; min-height: 430px; }
.home-copy { padding: clamp(32px, 6vw, 76px); align-self: center; }
.home-copy h1 { max-width: 10ch; margin-bottom: 22px; }
.home-copy p { max-width: 54ch; color: var(--muted); font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-art { position: relative; display: grid; place-items: center; min-height: 360px; overflow: hidden; background: linear-gradient(145deg, #063b60, #0b90a2 63%, #36d3ba); }
.hero-art::before, .hero-art::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; width: 440px; height: 440px; }
.hero-art::after { width: 310px; height: 310px; }
.hero-art img { position: relative; z-index: 1; width: min(55%, 230px); height: auto; filter: drop-shadow(0 24px 28px rgba(0, 29, 48, .3)); }
.home-section { padding: 42px clamp(32px, 6vw, 76px) 62px; border-top: 1px solid var(--line); }
.home-section > p { color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.feature-card { padding: 25px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-soft); }
.feature-card h3 { margin: 0 0 9px; }
.feature-card p { color: var(--muted); font-size: .93rem; }
.home-contact { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .93rem; }
#devLists { margin-top: 30px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; }

.defaultButton, .sessionCtrlButton, .linkButton, .tableButton { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 11px 18px; margin: 5px 0; border: 1px solid transparent; border-radius: 11px; background: var(--button-bg) !important; color: var(--button-ink) !important; font: inherit; font-size: .91rem; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; transition: transform .18s, background .18s, box-shadow .18s; }
.defaultButton:hover, .defaultButton:focus-visible, .sessionCtrlButton:hover, .sessionCtrlButton:focus-visible, .linkButton:hover, .linkButton:focus-visible, .tableButton:hover, .tableButton:focus-visible { background: var(--button-hover) !important; color: var(--button-ink) !important; box-shadow: 0 8px 18px rgba(4, 75, 100, .17); transform: translateY(-1px); }
.button-secondary { background: transparent !important; border-color: var(--line); color: var(--brand-deep) !important; }
.button-secondary:hover, .button-secondary:focus-visible { background: var(--surface-soft) !important; color: var(--link-hover) !important; box-shadow: inset 0 0 0 1px var(--line); }
.tableButton { width: 100%; height: auto; min-height: 48px; border-radius: 8px; }
#startStopSession, #startSkipExercise, #resumePauseSession { width: 100%; height: auto; min-height: 60px; }

input:not([type="checkbox"]), select, textarea { max-width: 100%; padding: 11px 13px !important; border: 1px solid var(--line) !important; border-radius: 9px !important; background: var(--surface-soft) !important; color: var(--ink) !important; font: inherit; text-align: left !important; transition: background .18s, border-color .18s, box-shadow .18s; }
input:not([type="checkbox"]):hover, select:hover, textarea:hover { background: var(--field-hover) !important; border-color: var(--brand) !important; }
input:not([type="checkbox"]):focus, select:focus, textarea:focus { background: var(--surface) !important; border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(29, 171, 178, .16); }
html:has(#modeStylesheet[href$="dark.css"]) input[type="date"],
html:has(#modeStylesheet[href$="dark.css"]) input[type="time"] { color-scheme: dark; }
input[type="checkbox"] { accent-color: var(--brand); width: 18px; height: 18px; vertical-align: middle; }
label { display: inline-block; margin: 6px 0; font-weight: 600; }
#login-page, #passwd-change-page { max-width: 620px; }
#signup-page { max-width: 1080px; }
#login-page > h1, #signup-page > h1 { margin-bottom: 20px; font-size: clamp(2rem, 3.2vw, 2.6rem); }
#login-page > label, #passwd-change-page > label, #signup-page > label:not([for="plan"]) { display: block; margin: 17px 0 7px; font-weight: 600; }
#login-page > input, #passwd-change-page > input, #signup-page > input:not([type="checkbox"]) { display: block; width: min(100%, 460px); }
#login-page > br, #passwd-change-page > br, #signup-page > br { display: none; }
#login-page > button, #passwd-change-page > button, #signup-page > button { margin: 24px 0 12px; }
#login-page > button, #signup-page > button { display: flex; }
.plan-toggle { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 30px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.plan-toggle label { margin: 0; cursor: pointer; }
.plan-toggle input { flex: none; margin: 0; cursor: pointer; }
#signup-page #plan-section { max-width: 100%; margin: 14px 0 0; padding: 22px; overflow: visible; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-soft); }
.plan-section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.plan-section-heading h2 { margin: 0; font-size: 1.55rem; font-weight: 600; }
.plan-section-heading .defaultButton { margin: 0; }
#signup-page #plan-table-table { min-width: 690px; width: 100%; margin: 0; table-layout: fixed; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
#signup-page #plan-table-table th { text-align: left; }
#signup-page #plan-table-table th:first-child { width: 15%; }
#signup-page #plan-table-table th:nth-child(2), #signup-page #plan-table-table th:nth-child(3) { width: 12%; }
#signup-page #plan-table-table th:nth-child(4) { width: 23%; }
#signup-page #plan-table-table td { background: var(--surface) !important; vertical-align: middle; }
#signup-page #plan-table-table tbody tr:nth-child(even) td { background: var(--surface-soft) !important; }
#signup-page #plan-table-table input, #signup-page #plan-table-table select { width: 100%; min-width: 0; }
#signup-page #plan-table-table .tableButton { min-height: 42px; padding: 8px 10px; font-size: .875rem; }
#signup-page #delete-day, #signup-page #delete-exercise { background: #aa4545 !important; color: #fff !important; }
#signup-page #delete-day:hover, #signup-page #delete-day:focus-visible,
#signup-page #delete-exercise:hover, #signup-page #delete-exercise:focus-visible { background: #8e3232 !important; color: #fff !important; }
#signup-page #exercise-tables { width: 100%; max-width: 100%; margin: 26px 0 0; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow-x: auto; }
#signup-page #exercise-tables h3 { margin: 0 0 14px; }
#signup-page #exercise-tables table { min-width: 700px; margin: 16px 0 0; }
#signup-page #exercise-tables table + table { margin-top: 28px; }
#loginLink, #signupLink, #returnLink { color: var(--brand-deep) !important; }
#loginLink:hover, #signupLink:hover, #returnLink:hover { color: var(--link-hover) !important; }

.about-team { max-width: 940px; }
.about-team > h3 { margin: 0 0 22px; }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.team-card { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); }
.team-card h4 { margin: 0 0 7px; font-size: 1.1rem; font-weight: 600; }
.team-card .role { margin: 0; color: var(--brand-deep); font-weight: 600; }
.team-card p + p { margin-top: 12px; }
.team-card-wide { grid-column: 1 / -1; }
.about-quote { margin: 30px 0 0; padding: 20px 24px; border-left: 4px solid var(--accent); color: var(--muted); font-size: 1.1rem; font-style: italic; }

#404-page > h4 { max-width: 60ch; margin: 0 0 32px !important; color: var(--muted); font-weight: 400; line-height: 1.6; text-align: left !important; }
#gameDiv { max-width: 900px; }

#settings-page #lockedFromLogin { line-height: 1.55; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.settings-panel { min-width: 0; padding: 26px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface-soft); }
.settings-panel h2 { margin: 0 0 16px; font-size: 1.45rem; font-weight: 600; }
.settings-panel-wide, .settings-danger { grid-column: 1 / -1; }
.settings-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 58px; padding: 10px 0; border-top: 1px solid var(--line); }
.settings-row > span { font-weight: 600; }
.settings-row > div { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-row .defaultButton { margin: 0; }
.settings-panel #viewSection { margin-top: 18px; background: var(--surface) !important; }
.settings-danger { display: flex; justify-content: flex-end; padding: 7px 0; }
.settings-danger .defaultButton { background: #aa4545 !important; color: #fff !important; }
.settings-danger .defaultButton:hover { background: #8e3232 !important; }
html:has(#modeStylesheet[href$="dark.css"]) .settings-danger .defaultButton { color: #fff !important; }
html:has(#modeStylesheet[href$="dark.css"]) .settings-danger .defaultButton:hover { background: #8e3232 !important; }
#profileSettingsList { display: grid; gap: 8px; padding: 0; margin: 15px 0 25px; list-style: none; }
#profileSettingsList li { padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
#viewSection { gap: 4px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
#viewSection span { margin: 0; display: flex; align-items: center; gap: 10px; }
#control { margin: 24px 0 32px; }
#sessionControlDiv { width: min(100%, 570px); background: var(--surface-soft) !important; border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
#sessionControlDiv * { margin: 5px 0; }
#sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.section { min-width: 0; }
.section > div:not([hidden]) { padding: 25px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); }
.section div h3, .section div div h3 { padding: 0 0 10px; margin: 20px 0 12px; border: 0; border-bottom: 1px solid var(--line); }
.section div h2 { margin: 0 0 14px; }
#liveGraph { max-width: 100%; overflow: hidden; }
#session-page .session-intro { margin-bottom: 30px; text-align: center; }
#session-page .session-intro h1 { margin: 4px 0 14px; }
#session-page .session-intro p:last-child { max-width: 70ch; margin: 0 auto; color: var(--muted); }
.session-card { min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-soft); }
.session-card h2 { margin: 0 0 8px; font-size: 1.5rem; }
.session-card-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.session-card-heading p { margin: 0; color: var(--muted); }
.signal-card { margin-bottom: 20px; background: var(--surface); }
.signal-card.signal-animating { overflow: hidden; pointer-events: none; }
.signal-connection { flex: none; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--brand-deep); font-size: .875rem; font-weight: 600; }
.session-note { color: var(--muted); font-size: .9rem; }
#session-page #liveGraph { display: block; width: 100%; height: 300px; margin: 10px 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
#signalCanvas { display: block; width: 100%; height: 100%; }
.workout-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr); gap: 28px; margin-top: 24px; align-items: start; }
.workout-controls { min-width: 0; }
.workout-timeline { min-width: 0; padding-left: 26px; border-left: 1px solid var(--line); }
.workout-timeline > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer; list-style: none; transition: background .2s, border-color .2s; }
.workout-timeline > summary::-webkit-details-marker { display: none; }
.workout-timeline > summary:hover { background: var(--field-hover); border-color: var(--brand); }
.timeline-summary-copy { display: grid; gap: 5px; min-width: 0; }
.timeline-title { font-size: 1rem; font-weight: 600; }
.timeline-current-label { color: var(--brand-deep); font-size: .875rem; overflow-wrap: anywhere; }
.timeline-chevron { flex: none; color: var(--brand-deep); transition: transform .2s; }
.workout-timeline summary[aria-expanded="true"] .timeline-chevron,
.workout-timeline[open] summary:not([aria-expanded]) .timeline-chevron { transform: rotate(180deg); }
.set-rules { margin: 24px 0 0; }
#session-page label { display: block; margin: 22px 0 7px; }
#sessionPlan { width: 100%; }
.session-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.session-actions .defaultButton { margin: 0; }
.session-progress { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.session-progress.progress-animating { overflow: hidden; }
.session-progress, .session-metrics > div, .session-metrics strong { transition: border-color .3s ease, background .3s ease, color .3s ease; }
.workout-content[data-session-state="paused"] .session-progress { border-top-style: dashed; }
.workout-content[data-session-state="paused"] .session-metrics > div { background: var(--surface-soft); }
.workout-content[data-session-state="paused"] .session-metrics strong { color: var(--muted); }
#sessionStatus::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--brand-deep); vertical-align: 1px; transition: background .3s, border-radius .3s; }
.workout-content[data-session-state="idle"] #sessionStatus::before { display: none; }
.workout-content[data-session-state="paused"] #sessionStatus::before { border-radius: 0; background: linear-gradient(to right, var(--muted) 0 35%, transparent 35% 65%, var(--muted) 65% 100%); }
.session-progress h3 { margin: 7px 0 5px; }
.session-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.session-metrics > div { padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.session-metrics strong { display: block; color: var(--brand-deep); font-size: 2rem; font-variant-numeric: tabular-nums; }
.session-metrics span { color: var(--muted); font-size: .875rem; }
.session-feedback { min-height: 1.5em; margin-bottom: 0; color: var(--brand-deep); font-weight: 600; }
.workout-shell { position: relative; isolation: isolate; }
.workout-content { transition: filter 220ms ease, opacity 220ms ease; }
.workout-content.workout-obscured { filter: blur(3px); opacity: .7; }
.session-notice { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; padding: 20px; border-radius: inherit; background: color-mix(in srgb, var(--surface) 45%, transparent); }
.session-notice-panel { position: relative; width: min(420px, 100%); padding: 24px 52px 24px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 10%, transparent); }
.session-notice[data-kind="error"] .session-notice-panel { border-color: color-mix(in srgb, var(--notice-error-ink) 40%, var(--line)); }
.session-notice-copy strong { display: block; margin: 0 0 8px; color: var(--brand-deep); font-size: 1.2rem; font-weight: 600; line-height: 1.3; }
.session-notice[data-kind="error"] .session-notice-copy strong { color: var(--notice-error-ink); }
.session-notice-copy p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.session-notice-dismiss { position: absolute; top: 16px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.session-notice-dismiss:hover { background: var(--field-hover); color: var(--ink); }
.notice-visible { animation: notice-backdrop-in 160ms ease both; }
.notice-visible .session-notice-panel { animation: notice-in 180ms ease-out both; }
.notice-leaving { animation: notice-backdrop-out 160ms ease both; }
.notice-leaving .session-notice-panel { animation: notice-out 160ms ease both; }
@keyframes notice-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes notice-backdrop-out { to { opacity: 0; } }
@keyframes notice-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes notice-out { to { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .session-notice, .session-notice-panel { animation: none !important; }
  .workout-content, .session-progress, .session-metrics > div, .session-metrics strong, .timeline-entry, .timeline-node, .timeline-chevron, #sessionStatus::before { transition: none !important; }
}
.exercise-sequence { max-height: min(480px, 65vh); overflow-y: auto; padding: 4px 5px 0; margin: 20px 0 0; list-style: none; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.exercise-sequence.timeline-animating { overflow: hidden; }
.exercise-sequence li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.exercise-sequence li:not(:last-child)::before { content: ""; position: absolute; top: 28px; bottom: 0; left: 13px; width: 2px; background: var(--line); }
.timeline-node { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 12px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); font-size: .875rem; font-weight: 600; transition: background .3s, color .3s, border-color .3s; }
.timeline-entry { display: grid; gap: 5px; min-width: 0; padding: 12px 14px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .3s, box-shadow .3s, background .3s; overflow-wrap: anywhere; }
.timeline-entry strong { font-weight: 600; }
.timeline-entry > span { color: var(--muted); font-size: .875rem; }
.timeline-entry .timeline-state { font-size: .875rem; }
.exercise-sequence li.current .timeline-entry { border-color: var(--brand); box-shadow: 0 0 0 3px var(--timeline-glow); }
.exercise-sequence li.current .timeline-node { border-color: var(--button-bg); background: var(--button-bg); color: var(--button-ink); }
.exercise-sequence li.current .timeline-state, .exercise-sequence li.done .timeline-node { color: var(--brand-deep); }
.workout-content[data-session-state="paused"] .exercise-sequence li.current .timeline-entry { border-color: var(--line); background: var(--surface-soft); box-shadow: 0 0 0 3px var(--line); }
.workout-content[data-session-state="paused"] .exercise-sequence li.current .timeline-node { border-color: var(--line); background: var(--surface); color: var(--muted); }
.workout-content[data-session-state="paused"] .exercise-sequence li.current .timeline-state { color: var(--muted); }
.exercise-sequence li.done .timeline-entry, .exercise-sequence li.skipped .timeline-entry { background: var(--surface-soft); }
.exercise-sequence li.timeline-empty { display: block; color: var(--muted); }
.session-login-notice { margin: 0; }
@media (max-width: 760px) {
  .session-card-heading { flex-direction: column; gap: 14px; }
  .workout-grid { grid-template-columns: 1fr; gap: 24px; }
  .workout-timeline { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .session-card { padding: 20px; }
}

#exercise-page > h1 { margin-bottom: 20px; }
#exercise-page > span { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; width: 100%; margin: 0 0 24px; padding: 13px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); color: var(--muted); font-weight: 600; }
#exerciseSwitch { margin: 0; }
#formContainer { margin: 0 0 24px; justify-content: stretch; }
#formContainer:has(#addExercise[hidden]) { display: none; }
#formContainer > .exerciseObject { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 20px; width: 100%; margin: 0; padding: 18px 22px; }
#formContainer > .exerciseObject > div:not(#exerciseForm) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#formContainer > .exerciseObject > div:not(#exerciseForm) .defaultButton { margin: 0; }
#formContainer > .exerciseObject > div:last-child { justify-content: flex-end; }
#exercises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: 20px; }
#exercises:has(> .exerciseObject:only-child) { grid-template-columns: minmax(0, 700px); justify-content: center; }
#exercises:empty { display: block; }
#exercises:empty::before { content: "No exercises to show in this view."; display: block; padding: 52px 24px; border: 1px dashed var(--line); border-radius: 18px; background: var(--surface-soft); color: var(--muted); text-align: center; }
.exerciseObject { width: 100%; margin: 0; padding: 25px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface-soft) !important; color: var(--ink); }
.exerciseTitle { color: var(--brand-deep) !important; text-align: left; font-size: 1.2rem; font-weight: 600; }
.exerciseObject div { flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
#exercises > .exerciseObject { min-width: 0; overflow: hidden; border-top: 3px solid var(--brand); background: var(--surface) !important; box-shadow: 0 10px 26px rgba(8, 57, 77, .06); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
#exercises > .exerciseObject:hover { background: var(--surface) !important; border-color: var(--brand-deep); box-shadow: 0 16px 32px rgba(8, 57, 77, .12); transform: translateY(-2px); }
#exercises > .exerciseObject:has(> span.exerciseTitle) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 10px; padding: 0; }
#exercises > .exerciseObject:has(> span.exerciseTitle) > br { display: none; }
#exercises > .exerciseObject > span.exerciseTitle { grid-column: 1 / -1; margin: 0; padding: 20px 22px 0; font-size: 1.32rem; line-height: 1.25; overflow-wrap: anywhere; }
#exercises > .exerciseObject > p { grid-column: 1 / -1; margin: 0; padding: 0 22px 2px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
#exercises > .exerciseObject > .exerciseCreatedBy { grid-column: 1 / -1; margin: 0 22px 3px; color: var(--muted); font-size: .875rem; }
#exercises > .exerciseObject > .exerciseEquipment,
#exercises > .exerciseObject > .exerciseWeight,
#exercises > .exerciseObject > .exercisePublic { min-width: 0; margin: 0 0 0 22px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); font-size: .875rem; line-height: 1.4; overflow-wrap: anywhere; }
#exercises > .exerciseObject > .exerciseWeight { margin: 0 22px 0 0; }
#exercises > .exerciseObject > .exercisePublic { grid-column: 1 / -1; width: fit-content; margin-right: 22px; }
#exercises > .exerciseObject > .muscleGroupList { grid-column: 1 / -1; display: flex; align-content: start; flex-wrap: wrap; gap: 7px; min-height: 0; margin: 4px 0 0; padding: 14px 22px 17px; border-top: 1px solid var(--line); }
#exercises > .exerciseObject > .muscleGroupList dt { flex-basis: 100%; margin: 0 0 3px; color: var(--muted); font-size: .875rem; font-weight: 600; }
#exercises > .exerciseObject > .muscleGroupList dd { margin: 0; padding: 5px 10px; border-radius: 999px; background: var(--surface-soft); color: var(--brand-deep); font-size: .875rem; font-weight: 500; }
#exercises > .exerciseObject > div:last-child { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: -10px 0 0; padding: 13px 22px; border-top: 1px solid var(--line); background: var(--surface-soft); }
#exercises > .exerciseObject > div:last-child .defaultButton { margin: 0; }
#exercises > .exerciseObject:has(> span.exerciseTitle) > div:last-child .defaultButton:last-child { background: #aa4545 !important; color: #fff !important; }
#exercises > .exerciseObject:has(> span.exerciseTitle) > div:last-child .defaultButton:last-child:hover,
#exercises > .exerciseObject:has(> span.exerciseTitle) > div:last-child .defaultButton:last-child:focus-visible { background: #8e3232 !important; color: #fff !important; }
.exerciseEditField { display: grid; gap: 6px; margin: 0 0 14px; font-weight: 600; }
.exerciseEditField .styledInput, .exerciseEditField .styledArea { width: 100%; min-width: 0; margin: 0; font-weight: 400; }
.exerciseEditField .styledArea { min-height: 100px; }
.exerciseEditOption, .exerciseEditMuscleGroups dd label { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 8px 10px; cursor: pointer; }
.exerciseEditOption input, .exerciseEditMuscleGroups dd input { flex: none; margin: 0; }
.exerciseEditMuscleGroups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.exerciseEditMuscleGroups dt { grid-column: 1 / -1; font-weight: 600; }
.exerciseEditMuscleGroups dd { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: 9px; overflow-wrap: anywhere; }
#exerciseForm { width: 100%; }
#formContainer #exerciseForm { grid-column: 1 / -1; margin-bottom: 10px; padding: 8px 4px 18px; border-bottom: 1px solid var(--line); }
#exerciseForm > br { display: none; }
#exerciseForm > label { margin: 13px 0 6px; }
#exerciseForm > label:empty { display: none; }
#exerciseForm > div { margin: 10px 0; }
#exerciseForm .styledInput, #exerciseForm .styledArea { width: 100%; }
#exerciseForm #exerciseDescription { width: 100%; max-width: none; min-height: 110px; }
#exerciseForm ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; padding: 0; list-style: none; }
#exerciseForm ul dt { grid-column: 1 / -1; margin: 0 0 4px; font-weight: 600; }
#exerciseForm ul dd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
#exerciseForm ul dd span { margin: 0; }
#exerciseForm ul dd input { flex: none; margin: 0; }
.table-wrapper { max-width: 100%; padding: 0; overflow-x: auto; }
table, #exercise-tables table { width: 100%; min-width: 650px; margin: 16px 0; border: 0; border-collapse: separate; border-spacing: 0; }
th, td { border: 0 !important; border-bottom: 1px solid var(--line) !important; padding: 12px !important; background: var(--surface-soft) !important; color: var(--ink); }
th { background: var(--table-head-bg) !important; color: #fff; font-size: .875rem; }
#exercise-tables { max-width: 100%; margin: 25px 0; border: 0; }
canvas { max-width: 100%; background: var(--surface-soft) !important; border-color: var(--line) !important; }

@media (max-width: 900px) {
  #actualHeaderHolder { width: min(100% - 32px, 720px); min-height: 0; padding: 12px 0 9px; grid-template-columns: 46px minmax(0, 1fr) max-content; grid-template-areas: "logo title account" "navigation navigation navigation"; gap: 10px; }
  #menuLogo, #menuLogo img { width: 46px; height: 46px; }
  #title { font-size: 1.35rem; }
  #menuOptionBar { width: 100%; padding: 8px 0 0; border-top: 1px solid rgba(255,255,255,.22); overflow-x: auto; scrollbar-width: none; }
  #menuOptionBar::-webkit-scrollbar { display: none; }
  .menuOption { flex: 1 0 auto; }
  #currentUser { justify-self: end; padding: 0; border: 0; }
  .home-hero { grid-template-columns: 1fr; }
  .hero-art { min-height: 250px; }
  .feature-grid { grid-template-columns: 1fr; }
  #sections { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-panel-wide, .settings-danger { grid-column: auto; }
  #formContainer > .exerciseObject { grid-template-columns: 1fr; }
  #formContainer > .exerciseObject > div:last-child { justify-content: flex-start; }
  #signup-page #plan-section { overflow-x: auto; }
}
@media (max-width: 600px) {
  #actualHeaderHolder { width: calc(100% - 24px); }
  #title { font-size: 1.22rem; }
  .menuOption { padding: 8px 11px; font-size: .875rem; }
  #inlineSignupButton, #inlineLoginButton, #logoutButton { padding: 8px 10px; font-size: .875rem; }
  .siteBody { width: calc(100% - 24px); margin: 20px auto 45px; padding: 26px 20px; border-radius: 18px; }
  main#main-page { padding: 0; }
  .home-copy, .home-section { padding: 30px 23px; }
  .home-copy h1 { font-size: 2.7rem; }
  #exercises { grid-template-columns: 1fr; }
  .exerciseObject { padding: 18px; }
  #exercise-page > span { padding: 12px 14px; }
  #exercises > .exerciseObject:has(> span.exerciseTitle) { gap: 10px; }
  #exercises > .exerciseObject > span.exerciseTitle { padding: 20px 18px 0; }
  #exercises > .exerciseObject > p { padding: 0 18px 6px; }
  #exercises > .exerciseObject > .exerciseCreatedBy { margin-right: 18px; margin-left: 18px; }
  #exercises > .exerciseObject > .exerciseEquipment,
  #exercises > .exerciseObject > .exerciseWeight,
  #exercises > .exerciseObject > .exercisePublic { margin-left: 18px; }
  #exercises > .exerciseObject > .exerciseWeight { margin-right: 18px; }
  #exercises > .exerciseObject > .muscleGroupList { padding: 16px 18px 20px; }
  #exercises > .exerciseObject > div:last-child { padding: 14px 18px; }
  #exerciseForm ul { grid-template-columns: 1fr; }
  .exerciseEditMuscleGroups { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .team-card-wide { grid-column: auto; }
  .plan-toggle { padding: 14px 16px; }
  #signup-page #plan-section { padding: 16px; overflow: visible; }
  #signup-page #plan-table-table { display: block; min-width: 0; border: 0; background: transparent; }
  #signup-page #plan-table-table thead { display: none; }
  #signup-page #plan-table-table tbody { display: grid; gap: 14px; }
  #signup-page #plan-table-table tbody tr { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
  #signup-page #plan-table-table tbody td { display: grid; grid-template-columns: 1fr; align-items: center; gap: 6px; padding: 10px 12px !important; border-bottom: 1px solid var(--line) !important; background: var(--surface) !important; }
  #signup-page #plan-table-table tbody td::before { color: var(--muted); font-size: .875rem; font-weight: 600; }
  #signup-page #plan-table-table tbody td:nth-child(1)::before { content: "Day"; }
  #signup-page #plan-table-table tbody td:nth-child(2)::before { content: "From"; }
  #signup-page #plan-table-table tbody td:nth-child(3)::before { content: "To"; }
  #signup-page #plan-table-table tbody td:nth-child(4)::before { content: "Muscle group"; }
  #signup-page #plan-table-table tbody td:nth-child(n+5) { display: block; }
  #signup-page #plan-table-table tbody td:last-child { border-bottom: 0 !important; }
  #signup-page #exercise-tables { padding: 15px; overflow: visible; }
  #signup-page #exercise-tables table { display: block; min-width: 0; width: 100%; margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  #signup-page #exercise-tables table thead, #signup-page #exercise-tables table tbody { display: block; }
  #signup-page #exercise-tables table thead tr:first-child { display: flex; flex-direction: column; align-items: stretch; }
  #signup-page #exercise-tables table thead tr:first-child th { display: block; width: 100%; min-width: 0; }
  #signup-page #exercise-tables table thead tr:first-child th:first-child { text-align: left; overflow-wrap: anywhere; }
  #signup-page #exercise-tables table thead tr:first-child .tableButton { width: 100%; min-height: 40px; padding: 8px; font-size: .875rem; }
  #signup-page #exercise-tables table thead tr:nth-child(2) { display: none; }
  #signup-page #exercise-tables table tbody tr { display: block; border-top: 1px solid var(--line); }
  #signup-page #exercise-tables table tbody td { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 10px 12px !important; background: var(--surface) !important; text-align: left; }
  #signup-page #exercise-tables table tbody td::before { color: var(--muted); font-size: .875rem; font-weight: 600; }
  #signup-page #exercise-tables table tbody td:nth-child(1)::before { content: "Exercise"; }
  #signup-page #exercise-tables table tbody td:nth-child(2)::before { content: "Equipment"; }
  #signup-page #exercise-tables table tbody td:nth-child(3)::before { content: "Reps"; }
  #signup-page #exercise-tables table tbody td:nth-child(4)::before { content: "Sets"; }
  #signup-page #exercise-tables table tbody td:nth-child(5)::before { content: "Weight"; }
  #signup-page #exercise-tables table tbody td:last-child { display: block; border-bottom: 0 !important; }
  #signup-page #exercise-tables table tbody input, #signup-page #exercise-tables table tbody select { width: 100%; }
  #signup-page #exercise-tables table tbody .tableButton { width: 100%; min-height: 42px; }
}
@media (max-width: 380px) {
  #actualHeaderHolder { grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "logo title" "account account" "navigation navigation"; }
  #currentUser { justify-self: end; }
}

/* Training exercises: compact forms with a full-width chooser when expanded. */
:is(#signup-page, #settings-page) #exercise-tables table tbody { gap: 10px; }
:is(#signup-page, #settings-page) #exercise-tables table tbody tr { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; padding: 18px; border-left: 3px solid var(--brand); background: var(--surface); box-shadow: 0 5px 14px rgba(8, 57, 77, .05); }
:is(#signup-page, #settings-page) #exercise-tables table tbody tr::before { grid-column: 1 / 6; grid-row: 1; justify-self: start; padding: 5px 11px; border-radius: 999px; background: var(--field-hover); color: var(--brand-deep); font-size: .875rem; }
:is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(1) { grid-column: 1 / 5; grid-row: 2; }
:is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(2) { grid-column: 5 / 7; grid-row: 2; min-width: 0; overflow-wrap: anywhere; }
:is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(3) { grid-column: 1 / 3; grid-row: 3; }
:is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(4) { grid-column: 3 / 5; grid-row: 3; }
:is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(5) { grid-column: 5 / 7; grid-row: 3; }
:is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(6) { grid-column: 6; grid-row: 1; align-items: flex-end; }
:is(#signup-page, #settings-page) #exercise-tables table tbody input { min-height: 46px; background: var(--surface-soft) !important; font-size: 1rem; font-weight: 600; }
.exercise-picker-trigger { font-weight: 600; }
.exercise-picker-panel { padding: 12px; box-shadow: none; }
.exercise-picker-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; max-height: 240px; scrollbar-color: var(--line) transparent; scrollbar-width: thin; }
.exercise-picker-group { grid-column: 1 / -1; margin-top: 4px; }
.exercise-picker-option { border: 1px solid transparent; background: var(--surface-soft); }
.exercise-picker-option.is-selected { border-color: var(--brand); background: var(--field-hover); }
:is(#signup-page, #settings-page) #exercise-tables table tfoot .add-exercise-button { width: 100%; min-height: 47px; background: transparent !important; color: var(--brand-deep) !important; border: 1px dashed var(--brand) !important; box-shadow: none; }
:is(#signup-page, #settings-page) #exercise-tables table tfoot .add-exercise-button:hover,
:is(#signup-page, #settings-page) #exercise-tables table tfoot .add-exercise-button:focus-visible { background: var(--field-hover) !important; color: var(--brand-deep) !important; }
@media (max-width: 740px) {
  :is(#signup-page, #settings-page) #exercise-tables table tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; padding: 14px; }
  :is(#signup-page, #settings-page) #exercise-tables table tbody tr::before { grid-column: 1 / 3; }
  :is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(1) { grid-column: 1 / -1; grid-row: 2; }
  :is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(2) { grid-column: 1 / -1; grid-row: 3; }
  :is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(3) { grid-column: 1; grid-row: 4; }
  :is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(4) { grid-column: 2; grid-row: 4; }
  :is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(5) { grid-column: 3; grid-row: 4; }
  :is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(6) { grid-column: 3; grid-row: 1; }
  .exercise-picker-results { grid-template-columns: 1fr; max-height: 220px; }
}

/* Training plan editor: the open states use the same card layout on both pages. */
:is(#signup-page, #settings-page) #plan-section { width: 100%; max-width: 100%; margin: 18px 0 0; padding: clamp(15px, 2.5vw, 24px); overflow: visible; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-soft); }
:is(#signup-page, #settings-page) #plan-table-table,
:is(#signup-page, #settings-page) #exercise-tables table { display: block; width: 100%; min-width: 0; margin: 0; border: 0; background: transparent; }
:is(#signup-page, #settings-page) #plan-table-table thead { display: none; }
:is(#signup-page, #settings-page) #plan-table-table tbody { display: grid; gap: 14px; }
:is(#signup-page, #settings-page) #plan-table-table tbody tr { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 5px 18px rgba(8, 57, 77, .05); overflow: visible; }
:is(#signup-page, #settings-page) #plan-table-table tbody td { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 0 !important; border: 0 !important; background: transparent !important; }
:is(#signup-page, #settings-page) #plan-table-table tbody td { text-align: left; }
:is(#signup-page, #settings-page) #plan-table-table tbody td::before,
:is(#signup-page, #settings-page) #exercise-tables table tbody td::before { display: block; color: var(--muted); font-size: .875rem; font-weight: 600; letter-spacing: .01em; }
:is(#signup-page, #settings-page) #plan-table-table tbody td:nth-child(1)::before { content: "Day"; }
:is(#signup-page, #settings-page) #plan-table-table tbody td:nth-child(2)::before { content: "From"; }
:is(#signup-page, #settings-page) #plan-table-table tbody td:nth-child(3)::before { content: "To"; }
:is(#signup-page, #settings-page) #plan-table-table tbody td:nth-child(4)::before { content: "Muscle group"; }
:is(#signup-page, #settings-page) #plan-table-table tbody td:nth-child(5) { grid-column: 1 / 3; }
:is(#signup-page, #settings-page) #plan-table-table tbody td:nth-child(6) { grid-column: 3 / 5; }
:is(#signup-page, #settings-page) #plan-table-table :is(input, select) { width: 100%; min-width: 0; height: 46px; }
:is(#signup-page, #settings-page) #plan-table-table .tableButton { width: 100%; min-height: 42px; margin: 0; }
:is(#signup-page, #settings-page) #exercise-controlButton.is-destructive { background: transparent !important; color: #a73838 !important; border: 1px solid #d6a4a4 !important; }
:is(#signup-page, #settings-page) #exercise-controlButton.is-destructive:hover { background: #a73838 !important; color: #fff !important; }
:is(#signup-page, #settings-page) #delete-day,
:is(#signup-page, #settings-page) #delete-exercise { background: transparent !important; color: #a73838 !important; border: 1px solid #d6a4a4 !important; }
:is(#signup-page, #settings-page) #delete-day:hover,
:is(#signup-page, #settings-page) #delete-exercise:hover { background: #a73838 !important; color: #fff !important; }
:is(#signup-page, #settings-page) #exercise-tables { width: 100%; max-width: 100%; margin: 22px 0 0; padding: 0; border: 0; background: transparent; overflow: visible; }
:is(#signup-page, #settings-page) #exercise-tables > h3 { margin: 0 0 12px; }
:is(#signup-page, #settings-page) #exercise-tables table { margin: 0 0 14px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: visible; }
:is(#signup-page, #settings-page) #exercise-tables table thead,
:is(#signup-page, #settings-page) #exercise-tables table tbody { display: block; }
:is(#signup-page, #settings-page) #exercise-tables table thead tr { width: 100%; border: 0; }
:is(#signup-page, #settings-page) #exercise-tables table thead tr:first-child { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
:is(#signup-page, #settings-page) #exercise-tables table thead tr:first-child th { display: block; width: auto; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--ink); font-size: 1.06rem; font-weight: 600; }
:is(#signup-page, #settings-page) #exercise-tables table thead tr:first-child th span { display: inline; }
:is(#signup-page, #settings-page) #exercise-tables table thead tr:first-child th:last-child { flex: none; }
:is(#signup-page, #settings-page) #exercise-tables table thead .tableButton { width: auto; min-height: 40px; margin: 0; }
:is(#signup-page, #settings-page) #exercise-tables table thead tr:nth-child(2) { display: none; }
:is(#signup-page, #settings-page) #exercise-tables table tbody tr { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(70px, .65fr) minmax(70px, .65fr) minmax(80px, .75fr); gap: 12px; align-items: end; padding: 15px 0; border: 0; border-top: 1px solid var(--line); overflow: visible; }
:is(#signup-page, #settings-page) #exercise-tables table tbody td { display: flex; flex-direction: column; justify-content: center; gap: 7px; min-width: 0; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--ink); text-align: left; }
:is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(1)::before { content: "Exercise"; }
:is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(2)::before { content: "Equipment"; }
:is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(3)::before { content: "Reps"; }
:is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(4)::before { content: "Sets"; }
:is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(5)::before { content: "Weight"; }
:is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(6) { grid-column: 1 / -1; align-items: flex-end; }
:is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(6) .tableButton { width: auto; min-height: 36px; margin: 0; padding: 7px 12px; font-size: .875rem; }
:is(#signup-page, #settings-page) #exercise-tables table tbody input { width: 100%; min-width: 0; height: 44px; }
.exercise-picker { position: relative; width: 100%; min-width: 0; }
.exercise-picker-value { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; opacity: 0; pointer-events: none; }
.exercise-picker-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.exercise-picker-trigger-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exercise-picker-chevron { flex: none; width: 18px; height: 18px; color: var(--brand-deep); transform: rotate(0); transition: transform .24s ease, color .2s ease; }
.exercise-picker-trigger[aria-expanded="true"] .exercise-picker-chevron { transform: rotate(180deg); }
.exercise-picker-trigger:hover .exercise-picker-chevron, .exercise-picker-trigger[aria-expanded="true"] .exercise-picker-chevron { color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .exercise-picker-chevron { transition: none; } }
.exercise-picker-trigger.is-placeholder { color: var(--muted); }
.exercise-picker-trigger:hover, .exercise-picker-trigger[aria-expanded="true"] { border-color: var(--brand); background: var(--field-hover); color: var(--ink); }
.exercise-picker-panel { position: static; width: 100%; margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 6px 18px rgba(8, 57, 77, .07); }
.exercise-picker-panel input { width: 100%; height: 42px !important; margin: 0 0 8px; }
.exercise-picker-panel input::placeholder { color: var(--muted); opacity: 1; }
.exercise-picker-results { max-height: 220px; overflow-y: auto; overscroll-behavior: contain; }
.exercise-picker-group { padding: 11px 9px 6px; color: var(--brand-deep); font-size: .875rem; font-weight: 600; }
.exercise-picker-option { display: flex; flex-direction: column; gap: 3px; width: 100%; margin: 0; padding: 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.exercise-picker-option:hover, .exercise-picker-option:focus-visible { background: var(--field-hover); color: var(--ink); }
.exercise-picker-option small { color: var(--muted); font-size: .875rem; line-height: 1.35; }
.exercise-picker-empty { margin: 10px; color: var(--muted); }
:is(#signup-page, #settings-page) #plan-section select { color-scheme: light; }
:is(#signup-page, #settings-page) #plan-section select option,
:is(#signup-page, #settings-page) #plan-section select optgroup { background: var(--surface); color: var(--ink); }
html:has(#modeStylesheet[href$="dark.css"]) :is(#signup-page, #settings-page) #plan-section select { color-scheme: dark; }
html:has(#modeStylesheet[href$="dark.css"]) :is(#signup-page, #settings-page) :is(#delete-day, #delete-exercise, #exercise-controlButton.is-destructive) { color: #ffb6b6 !important; border-color: #a87575 !important; }
html:has(#modeStylesheet[href$="dark.css"]) :is(#signup-page, #settings-page) :is(#delete-day, #delete-exercise, #exercise-controlButton.is-destructive):hover { color: #fff !important; }
@media (max-width: 740px) {
  :is(#signup-page, #settings-page) #plan-table-table tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  :is(#signup-page, #settings-page) #plan-table-table tbody td:first-child,
  :is(#signup-page, #settings-page) #plan-table-table tbody td:nth-child(4) { grid-column: 1 / -1; }
  :is(#signup-page, #settings-page) #plan-table-table tbody td:nth-child(5) { grid-column: 1; }
  :is(#signup-page, #settings-page) #plan-table-table tbody td:nth-child(6) { grid-column: 2; }
  :is(#signup-page, #settings-page) #exercise-tables table tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(#signup-page, #settings-page) #exercise-tables table tbody td:first-child,
  :is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(2) { grid-column: 1 / -1; }
  :is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(6) { grid-column: 1 / -1; }
  :is(#signup-page, #settings-page) #exercise-tables table thead tr:first-child { flex-wrap: wrap; }
}

/* Multiple exercises read as an ordered list of compact forms. */
:is(#signup-page, #settings-page) #exercise-tables table thead tr:first-child { margin-bottom: 14px; }
:is(#signup-page, #settings-page) #exercise-tables table thead tr:first-child th:first-child { flex: 1; text-align: left; }
:is(#signup-page, #settings-page) #exercise-tables table thead .clear-exercises-button { min-height: 34px; padding: 6px 11px; background: transparent !important; color: #a73838 !important; border: 1px solid #d6a4a4 !important; font-size: .875rem; white-space: nowrap; }
:is(#signup-page, #settings-page) #exercise-tables table thead .clear-exercises-button:hover { background: #a73838 !important; color: #fff !important; }
html:has(#modeStylesheet[href$="dark.css"]) :is(#signup-page, #settings-page) #exercise-tables table thead .clear-exercises-button { color: #ffb6b6 !important; border-color: #a87575 !important; }
html:has(#modeStylesheet[href$="dark.css"]) :is(#signup-page, #settings-page) #exercise-tables table thead .clear-exercises-button:hover { color: #fff !important; }
:is(#signup-page, #settings-page) #exercise-tables table tbody { display: grid; gap: 12px; }
:is(#signup-page, #settings-page) #exercise-tables table tbody tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; align-items: start; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
:is(#signup-page, #settings-page) #exercise-tables table tbody td { justify-content: flex-start; }
:is(#signup-page, #settings-page) #exercise-tables table tbody tr::before { content: "Exercise " attr(data-order); grid-column: 1 / 4; grid-row: 1; color: var(--ink); font-size: .96rem; font-weight: 600; text-align: left; }
:is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(1) { grid-column: 1 / 3; grid-row: 2; }
:is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(2) { grid-column: 3 / 5; grid-row: 2; }
:is(#signup-page, #settings-page) #exercise-tables .exercise-equipment-value { display: flex; align-items: center; min-height: 44px; width: 100%; min-width: 0; padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); overflow-wrap: anywhere; }
:is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(3) { grid-column: 1; grid-row: 3; }
:is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(4) { grid-column: 2; grid-row: 3; }
:is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(5) { grid-column: 3 / 5; grid-row: 3; }
:is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(6) { grid-column: 4; grid-row: 1; align-items: flex-end; }
:is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(6) .tableButton { min-height: 32px; padding: 6px 10px; white-space: nowrap; }
:is(#signup-page, #settings-page) #exercise-tables table tfoot,
:is(#signup-page, #settings-page) #exercise-tables table tfoot tr,
:is(#signup-page, #settings-page) #exercise-tables table tfoot td { display: block; width: 100%; border: 0 !important; background: transparent !important; }
:is(#signup-page, #settings-page) #exercise-tables table tfoot td { padding: 14px 0 0 !important; text-align: left; }
:is(#signup-page, #settings-page) #exercise-tables table tfoot .add-exercise-button { width: auto; min-height: 40px; margin: 0; }
@media (max-width: 740px) {
  :is(#signup-page, #settings-page) #exercise-tables table tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px; }
  :is(#signup-page, #settings-page) #exercise-tables table tbody tr::before { grid-column: 1 / 3; }
  :is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(1) { grid-column: 1 / -1; grid-row: 2; }
  :is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(2) { grid-column: 1 / -1; grid-row: 3; }
  :is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(3) { grid-column: 1; grid-row: 4; }
  :is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(4) { grid-column: 2; grid-row: 4; }
  :is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(5) { grid-column: 3; grid-row: 4; }
  :is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(6) { grid-column: 3; grid-row: 1; justify-self: end; }
  :is(#signup-page, #settings-page) #exercise-tables table tbody td:nth-child(6) .tableButton { padding: 5px 8px; font-size: .875rem; }
  :is(#signup-page, #settings-page) #exercise-tables table tfoot .add-exercise-button { width: 100%; }
  :is(#signup-page, #settings-page) #exercise-tables table thead tr:first-child { flex-direction: column; align-items: stretch; }
  :is(#signup-page, #settings-page) #exercise-tables table thead tr:first-child th:first-child { width: 100%; overflow-wrap: normal; }
  :is(#signup-page, #settings-page) #exercise-tables table thead tr:first-child th:last-child { align-self: flex-start; }
  :is(#signup-page, #settings-page) #exercise-tables table thead .clear-exercises-button { width: auto !important; }
  #settings-page .settings-panel-wide { padding: 16px; }
  #settings-page #plan-section { padding: 12px; }
  #settings-page #plan-table-table tbody tr { padding: 14px; }
  #settings-page #plan-table-table tbody td:nth-child(5),
  #settings-page #plan-table-table tbody td:nth-child(6) { grid-column: 1 / -1; }
  #settings-page #plan-table-table tbody td:nth-child(6) { order: 5; }
  #settings-page #plan-table-table tbody td:nth-child(5) { order: 6; }
  #settings-page #plan-table-table input[type="time"] { padding: 8px !important; font-size: .88rem; }
  #settings-page #exercise-tables table { padding: 12px; }
  #settings-page #exercise-tables table tbody tr { padding: 12px; }
}
@media (max-width: 600px) {
  #settings-page.siteBody { padding-right: 14px; padding-left: 14px; }
}
@media (max-width: 380px) {
  :is(#signup-page, #settings-page) #plan-table-table tbody td:nth-child(2),
  :is(#signup-page, #settings-page) #plan-table-table tbody td:nth-child(3),
  :is(#signup-page, #settings-page) #plan-table-table tbody td:nth-child(5),
  :is(#signup-page, #settings-page) #plan-table-table tbody td:nth-child(6) { grid-column: 1 / -1; }
  :is(#signup-page, #settings-page) #plan-table-table tbody td:nth-child(6) { order: 5; }
  :is(#signup-page, #settings-page) #plan-table-table tbody td:nth-child(5) { order: 6; }
}