:root {
  --ink: #011D3E;
  --navy: #011C3A;
  --yellow: #FEC604;
  --surface: #FEFEFE;
  --workspace: #F9FAFC;
  --muted: #7D8797;
  --line: #E3E7EC;
  --green: #247764;
  --mint: #DBF1EA;
  --font-ui: "Inter", "Aptos", "Segoe UI", sans-serif;
  --shadow: 0 4px 16px rgba(1, 28, 58, .055);
}

html, body { min-height: 100%; background: var(--workspace); color: var(--ink); font-family: var(--font-ui); }
body { font-size: 14px; line-height: 1.45; }
button, input, select, textarea { font-family: var(--font-ui); }
.app { grid-template-columns: 304px minmax(0, 1fr); background: var(--workspace); }
.sidebar {
  position: sticky; height: 100vh; min-height: 620px; padding: 28px 17px 20px;
  background: var(--navy); border: 0; color: #fff;
}
.brand { flex-direction: column; gap: 1px; margin: 0 auto 49px; color: #fff; }
.brand-mark { display: grid; place-items: center; width: 186px; height: 102px; border-radius: 0; background: transparent; color: #fff; }
.brand-mark svg { width: 170px; height: 94px; fill: none; stroke: none; transform: none; }
.brand-mark .logo-mountain { fill: currentColor; }
.brand-mark .logo-flag-pole { fill: none; stroke: var(--yellow); stroke-width: 4; stroke-linecap: round; }
.brand-mark .logo-flag { fill: var(--yellow); }
.auth-brand-mark { width: 180px; height: 112px; grid-template-rows: 76px 30px; margin: 0 auto 14px; }
.auth-brand-mark svg { width: 134px; height: 74px; }
.auth-brand-name { color: #fff; font-size: 25px; font-weight: 750; letter-spacing: -1px; }
.auth-brand-name span { color: var(--yellow); }
.brand-name { color: #fff; font-family: var(--font-ui); font-size: 36px; font-weight: 750; letter-spacing: -1.4px; }
.brand-name span { color: var(--yellow); }
.nav-caption { margin: 0 14px 12px; color: #8FA1B7; font-size: 10px; letter-spacing: 1.5px; }
.nav { gap: 7px; }
.nav button {
  min-height: 58px; padding: 12px 16px; gap: 14px; border-radius: 9px;
  color: #F5F7FA; font-size: 18px; font-weight: 650; transition: background-color .15s ease, color .15s ease;
}
.nav button:hover { background: #123354; color: #fff; }
.nav button.active { background: var(--yellow); color: var(--navy); }
.nav-ico { width: 22px; display: grid; place-items: center; color: currentColor; }
.nav-ico svg, .mobile-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-bottom { display: grid; gap: 9px; }
.privacy-mini { display: none; }
.privacy-mini strong { color: #fff; }
.user-mini { width: 100%; min-width: 0; border: 0; background: transparent; color: #fff; text-align: left; cursor: pointer; border-radius: 10px; }
.user-mini:hover { background: #123354; }
.user-mini .avatar { background: #E4ECF4; color: var(--navy); }
.user-mini .user-name { color: #fff; }
.user-mini .user-plan { color: #A8B6C7; }
.sidebar-bottom { margin-top: auto; padding-top: 13px; border-top: 1px solid #28425E; }

.main { min-width: 0; background: var(--workspace); }
.topbar { height: 55px; padding: 0 clamp(18px, 3.4vw, 48px); background: var(--workspace); border: 0; }
.breadcrumb { color: #8C96A5; font-size: 11px; }
.breadcrumb b { color: var(--ink); font-size: 12px; }
.top-actions { gap: 16px; }
.help-link { color: var(--muted); }
.profile-shortcut { border: 0; background: #E9EEF4; color: var(--navy); }
.content { max-width: 1600px; padding: 18px clamp(20px, 1.8vw, 28px) 50px; }
.app-screen { max-width: 1400px; gap: 0; animation: screen-in .18s ease-out; }
.app-screen[hidden] { display: none !important; }
.app-screen h1, .app-screen h2, .app-screen h3 { font-family: var(--font-ui) !important; }
.screen-home { margin-top: -18px; }
.screen-home > .welcome { display: none; }
.screen-heading { margin: 5px 0 22px; }
.screen-heading .eyebrow { color: #6E7E91; letter-spacing: 1.2px; }
.screen-heading h1 { color: var(--ink); font-family: var(--font-ui); font-size: clamp(27px, 3vw, 36px); font-weight: 750; letter-spacing: -1.2px; }
.screen-heading p { color: var(--muted); font-size: 13px; }

.home-focus {
  position: relative; height: 228px; min-height: 228px; margin: 0 0 16px; padding: 0 32px;
  display: grid; grid-template-columns: minmax(460px, .85fr) minmax(380px, 1.2fr); align-items: start;
  overflow: hidden; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.care-home .care-hero { height: 228px; min-height: 228px; margin: 0 0 16px; padding: 0 32px; display: grid; grid-template-columns: minmax(460px, .85fr) minmax(380px, 1.2fr); align-items: start; border: 0; border-radius: 0; background: transparent; color: var(--ink); box-shadow: none; }
.care-home .care-choice-hero { padding: 0 32px; }
.care-home .care-choice-hero > div:first-child { width: auto; max-width: 570px; }
.care-home .care-hero::after { display: none; }
.care-home .care-hero .home-kicker { color: var(--navy); font-size: 10px; }
.care-home .care-hero h2 { color: var(--ink); font-size: clamp(28px, 3.1vw, 43px); line-height: 1.05; }
.care-home .care-hero p { max-width: 380px; color: #617184; font-size: 13px; }
.home-focus-copy { position: relative; z-index: 2; align-self: start; max-width: 570px; padding: 0; }
.home-kicker { color: var(--navy); font-size: 10px; font-weight: 800; letter-spacing: 1.65px; }
.home-focus h1 { max-width: 570px; margin: 18px 0 8px; color: var(--ink); font-family: var(--font-ui); font-size: clamp(42px, 3.8vw, 58px); font-weight: 800; line-height: 1.02; letter-spacing: -1.9px; }
.home-focus-copy > p { max-width: 380px; margin: 0; color: #617184; font-size: 13px; }
.climb-rank { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.climb-rank-mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); color: var(--navy); font-size: 17px; font-weight: 800; }
.climb-rank small { display: block; color: #7D8797; font-size: 8px; font-weight: 750; letter-spacing: 1px; }
.climb-rank strong { display: block; color: var(--navy); font-size: 13px; }
.climb-step { margin-left: auto; color: var(--muted); font-size: 10px; font-weight: 650; }
.mountain-scene { position: absolute; inset: 0 0 0 40%; height: 100%; overflow: hidden; }
.mountain-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #F6F8FA 1%, rgba(246,248,250,.8) 17%, transparent 48%); pointer-events: none; }
.mountain-scene svg { position: absolute; right: -1%; bottom: 0; width: 100%; min-width: 620px; height: 100%; }
.peak-sky { fill: url(#peakSky); }
.peak-far { fill: #D7E0E9; opacity: .95; }
.peak-main { fill: url(#peakRock); }
.peak-snow { fill: #EDF3F7; opacity: .97; }
.climb-route-muted, .climb-route-progress { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 7; }
.climb-route-muted { stroke: #8A9BAE; opacity: .34; }
.climb-route-progress { stroke: var(--yellow); transition: stroke-dasharray .45s ease; }
.climb-checkpoints circle { fill: #F9FAFC; stroke: var(--navy); stroke-width: 5; }
.climb-marker { fill: var(--yellow); stroke: #fff; stroke-width: 4; filter: drop-shadow(0 2px 3px rgba(1,28,58,.3)); transition: cx .4s ease, cy .4s ease; }
.peak-flag { fill: none; stroke: var(--yellow); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

.home-goal-row { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(285px, .72fr); gap: 15px; margin-bottom: 42px; }
.home-goal { min-width: 0; min-height: 110px; padding: 12px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; border-radius: 11px; border-color: #E8EBEF; background: var(--surface); box-shadow: var(--shadow); }
.home-goal-main { display: grid; gap: 3px; }
.home-goal-main strong { color: var(--ink); font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -.6px; }
.home-goal-main > span:last-child { color: var(--muted); font-size: 12px; line-height: 1.4; }
.home-goal-progress { display: flex; align-items: center; gap: 11px; }
.goal-progress-ring { width: 82px; height: 82px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--yellow) var(--goal-fill, 0deg), #E6E9ED 0); position: relative; }
.goal-progress-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.goal-progress-ring strong { z-index: 1; color: var(--ink); font-size: 17px; }
.goal-progress-label { max-width: 76px; color: var(--muted); font-size: 9px; font-weight: 750; line-height: 1.3; letter-spacing: .7px; }
.home-upload { justify-self: start; min-height: 24px; border: 0; padding: 3px 0; background: none; color: #53677F; font-size: 11px; font-weight: 700; }
.home-upload:hover { color: var(--ink); text-decoration: underline; }
.home-start { min-height: 110px; padding: 18px 25px; display: flex; align-items: center; gap: 16px; border: 0; border-radius: 11px; background: var(--yellow); color: var(--navy); font-size: 27px; font-weight: 800; box-shadow: none; transition: background-color .14s ease, transform .14s ease; }
.home-start:hover { background: #F4BA00; transform: translateY(-1px); }
.home-start-play { font-size: 24px; }
.home-start-arrow { margin-left: auto; font-size: 26px; }

.home-dashboard { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.home-today-plan { min-height: 405px; padding: 22px 21px 18px; display: flex; flex-direction: column; border-radius: 13px; background: var(--navy); color: #fff; }
.home-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(220,232,245,.17); }
.home-panel-head h2 { margin: 0; color: #fff; font-size: 35px; letter-spacing: -1.1px; }
.home-panel-head span { color: #B8C6D5; font-size: 11px; }
.home-today-body { display: flex; align-items: flex-start; gap: 13px; padding: 20px 0 13px; }
.today-plan-step { min-width: 50px; padding: 5px 6px; border-radius: 4px; background: #123554; color: #FFDA4F; text-align: center; font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.home-today-body strong { display: block; color: #fff; font-size: 19px; }
.home-today-body p { margin: 5px 0 0; color: #B8C6D5; font-size: 13px; line-height: 1.5; }
.home-plan-note { color: #D3DCE7; font-size: 12px; line-height: 1.55; }
.home-plan-notice-slot { margin-top: 12px; }
.home-today-plan .notice { margin: 0; padding: 10px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 7px; background: #0B2948; color: #D9E1EA; font-size: 10px; }
.home-today-plan .notice strong { color: #fff; }
.home-today-plan .notice-icon { display: none; }
.home-plan-link { display: flex; justify-content: space-between; width: 100%; margin-top: auto; padding: 14px 0 0; border: 0; border-top: 1px solid rgba(220,232,245,.17); background: transparent; color: var(--yellow); text-align: left; font-size: 13px; font-weight: 750; }
.home-side-panels { min-width: 0; display: grid; grid-template-rows: 1.12fr .88fr; gap: 14px; }
.home-progress-mount, .home-last-mount { min-width: 0; padding: 16px 17px; border: 1px solid #E8EBEF; border-radius: 13px; background: var(--surface); box-shadow: var(--shadow); }
.home-progress-mount > h2, .home-last-mount > h2 { margin: 0 0 12px; color: var(--ink); font-size: 29px; letter-spacing: -.9px; }
.home-progress-mount .care-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; }
.home-progress-mount .care-stat { min-width: 0; padding: 6px 9px; border: 0; border-left: 1px solid #DCE2E8; border-radius: 0; background: transparent; box-shadow: none; }
.home-progress-mount .care-stat:first-child { padding-left: 0; border-left: 0; }
.home-progress-mount .care-stat strong { display: block; color: var(--ink); font-size: 28px; font-weight: 800; letter-spacing: -1px; }
.home-progress-mount .care-stat span { display: block; color: #526276; font-size: 11px; font-weight: 700; line-height: 1.3; }
.home-progress-mount .care-stat small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.home-last-mount #careHomeRecent { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.home-last-mount .care-section-head { margin-bottom: 8px; }
.home-last-mount .care-kicker { display: none; }
.home-last-mount .care-section-head h2 { margin: 0; color: var(--ink); font-size: 11px; font-weight: 600; }
.home-last-mount .care-latest { display: flex; align-items: center; gap: 10px; }
.home-last-mount .care-latest-count { flex: 0 0 auto; color: var(--ink); font-size: 22px; font-weight: 800; }
.home-last-mount .care-latest-count small { margin-left: 3px; color: var(--muted); font-size: 9px; font-weight: 500; }
.home-last-mount .care-latest h3 { margin: 0; color: var(--ink); font-size: 18px; }
.home-last-mount .care-latest p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.home-last-mount .care-latest .secondary { margin-left: auto; border-radius: 7px; padding: 7px 9px; font-size: 9px; }
.home-last-mount .care-muted { margin: 0; padding: 4px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.home-photos { margin-top: 16px; }
.home-photos > .card { border: 1px solid #E8EBEF; border-radius: 13px; background: var(--surface); box-shadow: var(--shadow); }
.home-links { display: flex; justify-content: flex-end; gap: 14px; margin-top: 13px; }
.home-link { padding: 6px 0; display: inline-flex; align-items: center; gap: 10px; border: 0; background: transparent; color: #53677F; font-size: 10px; font-weight: 700; }
.home-link:hover { color: var(--ink); }
.week-journal { margin-top: 16px; padding: 15px 18px; border: 1px solid #E8EBEF; border-radius: 12px; background: var(--surface); }

.practice-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr); gap: 16px; align-items: start; }
#movement { border: 1px solid #E5E9ED; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.card-head { padding: 18px 20px 12px; }
.card-title { color: var(--ink); font-size: 17px; }
.card-desc { color: var(--muted); font-size: 11px; }
.plan-chip { color: #6D7887; background: #EFF2F5; }
.live-state { border-radius: 7px; color: #66768A; }
.practice-choices { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 20px 13px; }
.practice-choices button { padding: 8px 12px; border: 1px solid #DCE2E8; border-radius: 7px; background: #fff; color: #536276; font-size: 11px; font-weight: 650; }
.practice-choices button[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #fff; }
.practice-choices button.is-prescribed { display: grid; justify-items: start; gap: 4px; border-color: #B4CFCA; background: #F1F7F5; color: var(--navy); }
.practice-choices button.is-prescribed[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #fff; }
.plan-choice-tag { color: #3F746A; font-size: 8px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.practice-choices button.is-prescribed[aria-pressed="true"] .plan-choice-tag { color: #E8D48A; }
.practice-plan-source { padding: 0 20px 8px; color: #486374; font-size: 11px; font-weight: 700; }
.other-practice-choices { margin: 0 20px 12px; color: #596A7F; font-size: 11px; }
.other-practice-choices summary { cursor: pointer; color: var(--navy); font-weight: 700; }
.other-practice-choices p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.other-practice-choices .practice-choices { padding: 8px 0 0; }
.stage { margin: 0 15px; max-height: 560px; border-radius: 8px; background: #101C2B; }
.stage-shade { background: #101C2B; }
.setup-message h3 { font-size: 16px; }
.setup-message p { font-size: 12px; }
.camera-controls { gap: 10px; }
.camera-controls label { color: #647386; font-size: 10px; }
.camera-device { min-height: 38px; border-radius: 7px; }
.camera-status-line { border-radius: 7px; font-size: 10px; }
.session-actions { gap: 8px; padding: 11px 16px; }
.session-actions .primary, .session-actions .secondary, .session-actions .quiet { min-height: 40px; border-radius: 7px; }
.primary { background: var(--navy); }
.primary:hover { background: #0B3155; }
.secondary { color: var(--navy); background: #EAF0F5; }
.secondary:hover { background: #DFE7EF; }
.quiet { color: #5D6E81; }
.practice-aside { display: grid; gap: 14px; }
.practice-aside .stats { grid-template-columns: 1fr; gap: 8px; margin: 0; }
.practice-aside .stat { border: 1px solid #E6EAEE; border-radius: 10px; background: #fff; box-shadow: none; }
.practice-aside .angle-card { margin-top: 0; }
.session-companion { margin-top: 0 !important; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
/* Keep the coaching guide inside its own padded surface. */
.pushup-coach {
  min-width: 0;
  margin: 12px clamp(12px, 1.5vw, 20px) 24px;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid #E5E9ED;
  border-radius: 12px;
  background: var(--surface);
}
.pushup-lesson { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pushup-lesson > *, .pushup-live > * { min-width: 0; }
@media (max-width: 600px) {
  .pushup-lesson { grid-template-columns: minmax(0, 1fr); }
}

.voice-controls-card .companion-heading { align-items: flex-start; }
.voice-controls-card .companion-name h2 { color: var(--ink); font-size: 15px; }
.voice-controls-card .companion-name p { color: var(--muted); font-size: 11px; }
.voice-controls-card .voice-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.voice-controls-card .voice-modes button { min-height: 55px; border-radius: 8px; }

.screen-plan > .progress-tools { display: grid; gap: 15px; }
.screen-plan .plan-form label { color: #55667A; font-size: 11px; }
.screen-plan .plan-form input, .screen-plan .plan-form textarea { border-color: #DCE2E8; border-radius: 7px; }
.screen-plan .plan-summary { border-radius: 7px; background: #EFF5F3; color: #315F55; }
.screen-plan .plan-upload-primary { margin: 15px 0; padding: 0 0 14px; border-bottom: 1px solid #E3E7EC; }
.screen-plan .plan-upload-primary .upload-button { min-height: 48px; padding: 12px 18px; font-size: 13px; }
.plan-exercise-review { display: grid; gap: 10px; padding: 14px; border: 1px solid #DCE5E7; border-radius: 9px; background: #F8FAFB; }
.plan-exercise-review h3 { margin: 0; color: var(--navy); font-size: 14px; }
.plan-exercise-review p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.plan-exercise-options { display: grid; gap: 6px; }
.plan-exercise-option { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 10px !important; padding: 9px 10px; border: 1px solid #E0E6EB; border-radius: 7px; background: #fff; cursor: pointer; }
.plan-exercise-option input { width: 18px !important; min-height: 18px !important; height: 18px; accent-color: var(--navy); }
.plan-exercise-option span { display: grid; gap: 2px; }
.plan-exercise-option strong { color: var(--ink); font-size: 12px; }
.plan-exercise-option small { color: var(--muted); font-size: 10px; font-weight: 450; }
.screen-plan .upload-button { background: var(--navy); color: #fff; }
.screen-reports .care-visit-layout { display: grid; gap: 15px; margin-top: 16px; }
.screen-reports .care-visit-layout .care-panel { border: 1px solid #E5E9ED; border-radius: 12px; background: #fff; }
.screen-reports .care-visit-layout > .care-ai-sharing { border: 1px solid #E5E9ED; border-radius: 12px; background: #fff; box-shadow: none; }
.screen-reports .gemini-intro h2 { color: var(--ink); }
.screen-reports .care-note-panel { margin-top: 0; }
.screen-progress .care-history, .screen-progress .care-panel { border-radius: 12px; }
.screen-progress .care-history-panel { margin: 0; }
.screen-progress .record-totals { margin-bottom: 12px; }
.screen-progress .progress-layout { display: block; }
.screen-progress .progress-main { display: grid; gap: 14px; }
.screen-progress #recentSessions { display: none; }
.screen-progress .progress-disclaimer { margin-top: 15px; color: var(--muted); font-size: 10px; }

.profile-card { max-width: 760px; overflow: hidden; border: 1px solid #E5E9ED; border-radius: 13px; background: #fff; box-shadow: var(--shadow); }
.profile-identity { display: flex; align-items: center; gap: 14px; padding: 22px; border-bottom: 1px solid var(--line); }
.profile-avatar { width: 48px; height: 48px; font-size: 17px; }
.profile-identity h2 { margin: 4px 0 2px; color: var(--ink); font-size: 18px; }
.profile-identity p { margin: 0; color: var(--muted); font-size: 11px; }
.profile-setting { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 21px 22px; border-bottom: 1px solid var(--line); }
.profile-setting h3 { margin: 0 0 4px; color: var(--ink); font-size: 13px; }
.profile-setting p { max-width: 470px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.profile-setting #profileHandControlsSlot { grid-column: 2; grid-row: 1; }
.profile-setting #handControlsToggle { min-height: 40px; border-radius: 7px; padding: 9px 13px; background: var(--navy); color: #fff; }
.profile-hand-status { grid-column: 1 / -1; color: #63758A; font-size: 10px; }
.profile-privacy { border-bottom: 0; }
.profile-signout-slot { padding: 16px 22px; border-top: 1px solid var(--line); background: #F8F9FB; }
.profile-signout { padding: 9px 12px; border: 1px solid #D7DEE6; border-radius: 7px; background: #fff; color: #5A6878; font-size: 11px; font-weight: 700; }
.profile-signout:hover { background: #F1F4F7; }

.mobile-nav { display: none; }
.dialog { border-radius: 12px; }
.toast { background: var(--navy); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: #426B8F; }

@media (max-width: 1120px) {
  .app { grid-template-columns: 78px minmax(0,1fr); }
  .sidebar { padding-inline: 10px; }
  .brand { justify-content: center; margin: 0 0 40px; }
  .brand-name, .nav-caption, .nav-label, .privacy-mini, .user-copy { display: none; }
  .nav button { justify-content: center; padding-inline: 8px; }
  .user-mini { justify-content: center; padding-inline: 0; }
  .practice-layout { grid-template-columns: 1fr; }
  .practice-aside { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .practice-aside .stats { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .app { display: block; }
  .sidebar { display: none; }
  .topbar { height: 48px; padding: 0 15px; }
  .content { padding: 13px 13px calc(88px + env(safe-area-inset-bottom)); }
  .screen-home { margin-top: 0; }
  .home-focus { height: auto; min-height: 230px; grid-template-columns: 1fr; padding: 23px 19px; }
  .care-home .care-hero { min-height: 230px; grid-template-columns: 1fr; padding: 23px 19px; }
  .care-home .care-choice-hero { padding: 23px 19px; }
  .care-home .care-hero h2 { font-size: 30px; }
  .care-home .care-hero p { font-size: 11px; }
  .home-focus-copy { max-width: 78%; }
  .home-focus h1 { font-size: 30px; }
  .home-focus-copy > p { font-size: 11px; }
  .mountain-scene { inset: 0 0 0 20%; opacity: .92; }
  .mountain-scene::after { background: linear-gradient(90deg, #F6F8FA 3%, rgba(246,248,250,.75) 25%, transparent 75%); }
  .mountain-scene svg { right: -56%; min-width: 590px; }
  .climb-rank { margin-top: 14px; }
  .home-goal-row { grid-template-columns: 1fr; gap: 9px; margin-bottom: 17px; }
  .home-goal { min-height: 104px; padding: 11px 14px; grid-template-columns: minmax(0,1fr) auto; gap: 4px 9px; }
  .home-goal-progress { gap: 7px; }
  .goal-progress-ring { width: 54px; height: 54px; }
  .home-goal-main strong { font-size: 15px; }
  .home-goal-main > span:last-child { font-size: 9px; }
  .home-start { min-height: 55px; font-size: 16px; }
  .home-dashboard { grid-template-columns: 1fr; gap: 10px; }
  .home-today-plan { min-height: 250px; padding: 17px 16px; }
  .home-panel-head h2 { font-size: 20px; }
  .home-side-panels { grid-template-rows: auto auto; gap: 10px; }
  .home-progress-mount, .home-last-mount { padding: 14px; }
  .home-progress-mount .care-stat { padding-inline: 6px; }
  .home-progress-mount .care-stat strong { font-size: 19px; }
  .home-photos { margin-top: 12px; }
  .home-links { justify-content: space-between; }
  .home-link { font-size: 9px; }
  .screen-heading { margin: 5px 1px 16px; }
  .screen-heading h1 { font-size: 28px; }
  .practice-layout { gap: 10px; }
  .practice-aside { grid-template-columns: 1fr; }
  .practice-aside .stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .stage { aspect-ratio: 4/3; min-height: 220px; margin-inline: 9px; }
  .card-head { padding: 14px 13px 10px; }
  .practice-choices { padding-inline: 12px; gap: 6px; }
  .practice-choices button { padding: 8px 9px; font-size: 10px; }
  .practice-plan-source { padding-inline: 12px; }
  .other-practice-choices { margin-inline: 12px; }
  .camera-controls { padding: 11px 12px; }
  .setup-row { grid-template-columns: 1fr; }
  .session-actions { padding: 10px; }
  .session-actions > * { flex: 1 1 auto; }
  .session-companion { padding: 14px; }
  .profile-card { width: 100%; }
  .profile-setting { grid-template-columns: 1fr; padding: 17px 15px; }
  .profile-setting #profileHandControlsSlot { grid-column: 1; grid-row: auto; }
  .profile-hand-status { grid-column: 1; }
  .profile-identity { padding: 17px 15px; }
  .mobile-nav { display: flex; position: fixed; z-index: 8; inset: auto 0 0; justify-content: space-around; gap: 0; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid #DDE3E9; background: #FEFEFE; }
  .mobile-nav button { width: 20%; min-height: 51px; max-width: none; display: grid; justify-items: center; align-content: center; gap: 3px; border: 0; border-radius: 7px; background: transparent; color: #718095; font-size: 8px; font-weight: 650; }
  .mobile-nav button.active { background: #FFF4C2; color: var(--navy); }
  .mobile-nav button span { display: grid; place-items: center; font-size: 16px; }
  .mobile-nav svg { width: 19px; height: 19px; }
  .week-journal { padding: 12px; }
  .angle-values { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 380px) {
  .home-goal { grid-template-columns: minmax(0,1fr) auto; }
  .home-goal-main { grid-column: 1; }
  .home-goal-progress { grid-column: 2; grid-row: 1; }
  .home-progress-mount .care-stat { padding-inline: 3px; }
  .home-progress-mount .care-stat strong { font-size: 17px; }
  .mobile-nav button { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* The introduction occupies one screen; the journal follows below it. */
.home-opening { min-height:calc(100svh - 40px); display:flex; flex-direction:column; gap:24px; padding-bottom:32px; }
.home-opening .home-focus.care-hero { height:auto; min-height:360px; flex:1; margin:0; align-items:center; }
.home-opening .home-focus-copy { align-self:center; padding-block:24px; }
.home-opening .home-goal-row { margin:0; }
.brand .official-logo { display:block; width:240px; max-width:100%; height:auto; }
.auth-brand-mark { width:200px; height:auto; display:block; margin:0 auto 20px; }
.auth-brand-mark .official-logo { display:block; width:100%; height:auto; border-radius:4px; }
.brand { margin-bottom:30px; }
.practice-layout { display:block; max-width:1040px; margin-inline:auto; }
.practice-aside, #movement .session-actions, #movement .practice-settings, #movement .setup-row,
#movement .hand-controls-legend, #handControlsStatus, #repGoal, #cameraStatus { display:none!important; }
#movement .stage:has(#cameraEmpty:not([style*="none"])) { display:none; }
#movement .stage-instructions, #movement[data-session-active="true"] .stage-instructions { margin:16px 20px 0; padding:16px 0; border:0; border-radius:0; background:transparent; color:var(--navy); }
#movement .stage-instructions strong { font-size:clamp(21px,2.1vw,30px); color:var(--navy); }
#movement .stage-instructions span, #movement[data-session-active="true"] .stage-instructions span { color:#65758a; font-size:15px; }
#handControlsHud { position:static!important; display:block; width:auto; max-width:none; margin:0 20px 20px; padding:0; transform:none; background:transparent; color:var(--navy); border:0; border-radius:0; box-shadow:none; pointer-events:auto; }
#handControlsHud .hand-controls-hud-message { font-size:13px; font-weight:500; color:#65758a; margin-bottom:12px; }
#handActionMenu { display:grid; gap:10px; margin:0; }
#handActionMenu .hand-action-option { min-height:64px; padding:14px 18px; border:1px solid #dde3eb; border-radius:8px; background:#fff; color:var(--navy); font-size:17px; box-shadow:none; }
#handActionMenu .hand-action-option:hover { background:#f4f7fa; border-color:#a3b2c4; }
#handActionMenu .hand-action-option[aria-current="true"] { border-color:var(--navy); box-shadow:inset 4px 0 var(--yellow); background:#f8fafc; }
#handActionMenu .hand-action-index { background:#edf1f6; color:var(--navy); border-radius:5px; }
#handActionMenu .hand-action-option[aria-current="true"] .hand-action-index { background:var(--yellow); color:var(--navy); }
#handActionMenu .hand-action-value { color:#65758a; font-size:12px; }
.practice-photos { margin-top:20px; border-top:1px solid var(--line); padding-top:16px; }
.practice-photos summary { cursor:pointer; min-height:36px; font-size:14px; font-weight:650; }
.practice-photos .photo-gallery { margin-top:10px; }
.practice-layout .session-companion { margin-top:20px!important; }
@media(max-width:900px) and (min-width:651px) { .brand .official-logo { width:64px; max-width:none; } }
@media(max-width:650px) {
 .home-opening { min-height:calc(100svh - 150px); gap:18px; padding-bottom:30px; }
 .home-opening .home-focus.care-hero { min-height:380px; padding:0 12px; }
 .home-opening .home-focus-copy { align-self:start; }
 .home-opening .mountain-scene { top:160px; left:15%; opacity:.7; }
 #handControlsHud { margin:0 12px 16px; }
 #handActionMenu .hand-action-option { padding:12px; font-size:16px; grid-template-columns:28px 1fr auto; gap:8px; }
 #handActionMenu .hand-action-value { max-width:100px; text-align:right; }
}

/* Frame the preview within the workspace, with its status heading still in view. */
#movement .stage, #movement[data-session-active="true"] .stage { height:min(67svh, calc(100svh - 180px)); max-height:680px; min-height:0; }
@media(max-width:650px) {
  #movement .stage, #movement[data-session-active="true"] .stage { height:min(58svh, calc(100svh - 210px)); }
}