/* Training and learning surfaces. Loaded after the legacy themes and craft CSS.
   Media geometry, camera layering, caption mode, and hidden states stay with their owners. */
:is(#screen-tutorial, #screen-round-setup, #screen-challenge, #screen-ai-menu,
    #screen-voice-setup, #screen-three-minute, #screen-gym-timer, #screen-result) {
  color: var(--p-ink); background: var(--p-bg); font-family: var(--p-font);
}
:is(#screen-round-setup, #screen-challenge, #screen-ai-menu, #screen-voice-setup, #screen-gym-timer) > .setup-content {
  max-width: 720px; padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));
}
:is(#screen-tutorial, #screen-round-setup, #screen-challenge, #screen-ai-menu,
    #screen-voice-setup, #screen-three-minute, #screen-gym-timer) .back-btn,
#screen-three-minute .three-topline .back-btn {
  border: 0; border-radius: 12px; background: transparent;
  box-shadow: none; color: var(--p-accent); min-width: 44px; min-height: 44px;
  padding: 10px 0; font: 500 14px/1.5 var(--p-font);
}
:is(#screen-round-setup, #screen-challenge, #screen-ai-menu, #screen-gym-timer) .setup-title,
#screen-voice-setup .vc-setup-heading h2, #screen-three-minute .three-heading h2,
#screen-result .result-title {
  font: 600 clamp(26px, 4.8vw, 34px)/1.4 var(--p-font); letter-spacing: -.025em;
  color: var(--p-ink); text-shadow: none;
}
:is(#screen-round-setup, #screen-challenge, #screen-ai-menu, #screen-gym-timer) .setup-subtitle,
#screen-voice-setup .vc-intro, #screen-three-minute .three-heading p {
  color: var(--p-muted); font: 400 14px/1.8 var(--p-font); max-width: 56ch;
}
:is(#screen-round-setup, #screen-challenge, #screen-ai-menu, #screen-gym-timer, #screen-result) :is(.primary-btn, .secondary-btn),
#screen-voice-setup .vc-start, #screen-three-minute .three-button,
#screen-tutorial .tutorial-footer .primary-btn {
  min-height: 50px; padding: 13px 18px; border: 1px solid var(--p-ink); border-radius: 14px;
  background: var(--interface-action, var(--p-ink)); color: var(--interface-on-action, var(--p-paper)); box-shadow: none; text-shadow: none;
  font: 600 15px/1.6 var(--p-font); letter-spacing: 0;
}
:is(#screen-round-setup, #screen-challenge, #screen-ai-menu, #screen-gym-timer, #screen-result) .secondary-btn,
#screen-three-minute .three-button.secondary {
  background: var(--p-paper); color: var(--p-ink); border-color: var(--p-line);
}
:is(#screen-tutorial, #screen-round-setup, #screen-challenge, #screen-ai-menu,
    #screen-voice-setup, #screen-three-minute, #screen-gym-timer, #screen-result)
    :is(button, a, input, summary):focus-visible {
  outline: 2px solid var(--p-accent); outline-offset: 3px;
}
:is(#screen-tutorial, #screen-round-setup, #screen-challenge, #screen-ai-menu,
    #screen-voice-setup, #screen-three-minute, #screen-gym-timer, #screen-result)
    :is(.primary-btn, .secondary-btn, .preset-btn, .step-btn, .goal-card, .three-button, .tut-cat, .tut-tab, .tut-ctrl):not(:disabled):active {
  transform: none; box-shadow: none;
}

/* Presets: label, timing, and a clear selection mark in one quiet list. */
:is(#screen-round-setup, #screen-gym-timer) .preset-group { gap: 10px; margin-block: 24px; }
:is(#screen-round-setup, #screen-gym-timer) .preset-btn {
  min-height: 78px; padding: 17px 48px 17px 18px; background: var(--p-paper);
  border: 1px solid var(--p-line); border-radius: 16px; box-shadow: none;
}
:is(#screen-round-setup, #screen-gym-timer) .preset-btn::after {
  right: 18px; width: 19px; height: 19px; border: 1px solid var(--p-line); background: var(--p-paper);
}
:is(#screen-round-setup, #screen-gym-timer) .preset-btn.active {
  background: color-mix(in srgb, var(--p-accent) 7%, var(--p-paper));
  border-color: var(--p-accent); box-shadow: none;
}
:is(#screen-round-setup, #screen-gym-timer) .preset-btn.active::after {
  background: var(--p-accent); border-color: var(--p-accent); box-shadow: inset 0 0 0 4px var(--p-paper);
}
:is(#screen-round-setup, #screen-gym-timer) .preset-label { color: var(--p-ink); font: 600 16px/1.5 var(--p-font); }
:is(#screen-round-setup, #screen-gym-timer) .preset-detail { margin-top: 4px; color: var(--p-muted); font: 400 13px/1.6 var(--p-font); }
:is(#screen-round-setup, #screen-gym-timer) .custom-settings {
  padding: 8px 18px; background: var(--p-paper); border: 1px solid var(--p-line); border-radius: 16px; box-shadow: none;
}
:is(#screen-round-setup, #screen-gym-timer) .setting-row { padding-block: 13px; gap: 12px; border-bottom: 1px solid var(--p-line); }
:is(#screen-round-setup, #screen-gym-timer) .setting-row:last-child { border-bottom: 0; }
:is(#screen-round-setup, #screen-gym-timer) .setting-row label { color: var(--p-ink); font: 500 14px/1.6 var(--p-font); }
:is(#screen-round-setup, #screen-gym-timer) .stepper { padding: 2px; gap: 4px; border-radius: 12px; background: var(--p-raised); }
:is(#screen-round-setup, #screen-gym-timer) .step-btn {
  width: 44px; height: 44px; border: 1px solid var(--p-line); border-radius: 10px;
  background: var(--p-paper); color: var(--p-ink); box-shadow: none; font: 400 23px/1 var(--p-font);
}
:is(#screen-round-setup, #screen-gym-timer) .stepper span { min-width: 50px; font: 600 16px/1.5 var(--p-font); font-variant-numeric: tabular-nums; }
#screen-gym-timer .gym-toggle-row { border: 1px solid var(--p-line); background: var(--p-paper); border-radius: 14px; }
#screen-gym-timer .gym-toggle-row input { accent-color: var(--p-accent); }
#screen-gym-timer .gym-sounds { padding: 18px; border: 1px solid var(--p-line); border-radius: 16px; background: var(--p-paper); }
#screen-gym-timer .gym-sound-heading h3 { color: var(--p-ink); font: 600 16px/1.5 var(--p-font); }
#screen-gym-timer .gym-sounds > p { color: var(--p-muted); font-size: 13px; line-height: 1.7; }
#screen-gym-timer .gym-sound-grid button, #screen-gym-timer #gym-sound-stop {
  min-height: 44px; border: 1px solid var(--p-line); border-radius: 12px; background: var(--p-raised);
  color: var(--p-ink); box-shadow: none; font: 500 13px/1.5 var(--p-font);
}
#screen-gym-timer .gym-volume-row { color: var(--p-muted); font: 400 13px/1.5 var(--p-font); }
#screen-gym-timer .gym-volume-row input { min-height: 44px; accent-color: var(--p-accent); }

/* Session timer: the time is the focus; phase colour remains meaningful. */
#screen-gym-timer .gym-run { background: var(--p-bg); }
#screen-gym-timer .gym-run-bg { background: none; }
#screen-gym-timer .gym-phase-tag {
  padding: 8px 16px; border: 1px solid currentColor; border-radius: 12px;
  font: 600 16px/1.4 var(--p-font); letter-spacing: .06em; text-shadow: none;
}
#screen-gym-timer .gym-ring-track { stroke: var(--p-line); stroke-width: 5; }
#screen-gym-timer .gym-ring-prog { stroke-width: 6; filter: none; }
#screen-gym-timer .gym-time { color: var(--p-ink); font-family: var(--p-font); font-weight: 600; letter-spacing: -.045em; text-shadow: none; }
#screen-gym-timer .gym-round { color: var(--p-muted); font: 500 13px/1.6 var(--p-font); letter-spacing: .06em; }
#screen-gym-timer .gym-pips .pip { background: var(--p-line); box-shadow: none; }
#screen-gym-timer .gym-pips .pip:is(.done, .current) { background: var(--gym-accent); }
#screen-gym-timer .gym-pips .pip.current { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gym-accent) 20%, transparent); }
#screen-gym-timer .gym-controls .ctrl-btn {
  width: 52px; height: 52px; border: 1px solid var(--p-line); border-radius: 16px;
  background: var(--p-paper); color: var(--p-ink); box-shadow: none;
}
#screen-gym-timer .gym-controls .stop-btn { background: #b83935; color: #fff; border-color: #b83935; }

/* A compact icon and a readable goal, rather than six competing illustrations. */
#screen-ai-menu .goal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#screen-ai-menu .goal-card {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 4px 12px; align-content: start;
  padding: 19px 16px; border: 1px solid var(--p-line); border-radius: 16px; background: var(--p-paper); box-shadow: none;
}
#screen-ai-menu .goal-card:nth-child(n) .goal-icon {
  grid-column: 1; grid-row: 1 / 3; width: 38px; height: 38px; margin: 0; border: 0;
  border-radius: 12px; background: var(--p-raised); color: var(--p-accent);
}
#screen-ai-menu .goal-label { align-self: center; color: var(--p-ink); font: 600 15px/1.55 var(--p-font); }
#screen-ai-menu .goal-desc { grid-column: 2; margin: 0; color: var(--p-muted); font: 400 13px/1.7 var(--p-font); }
#screen-ai-menu .goal-card.selected {
  border-color: var(--p-accent); background: color-mix(in srgb, var(--p-accent) 7%, var(--p-paper)); box-shadow: none;
}
#screen-challenge .ch-days { gap: 0; border: 1px solid var(--p-line); border-radius: 16px; overflow: hidden; background: var(--p-paper); }
#screen-challenge .ch-day-item { gap: 14px; padding: 16px; border: 0; border-bottom: 1px solid var(--p-line); border-radius: 0; background: transparent; }
#screen-challenge .ch-day-item:last-child { border-bottom: 0; }
#screen-challenge .ch-day-item.current { background: color-mix(in srgb, var(--p-accent) 7%, var(--p-paper)); box-shadow: none; }
#screen-challenge .ch-day-item-num { border: 1px solid var(--p-line); border-radius: 10px; background: var(--p-raised); font: 600 14px/1.5 var(--p-font); }
#screen-challenge .ch-day-item.current .ch-day-item-num { background: var(--p-ink); color: var(--p-paper); border-color: var(--p-ink); }
#screen-challenge .ch-day-item.done .ch-day-item-num { background: var(--p-raised); color: var(--p-accent); }
#screen-challenge .ch-day-item-name { color: var(--p-ink); font: 600 15px/1.6 var(--p-font); }
#screen-challenge .ch-day-item-desc { color: var(--p-muted); font: 400 13px/1.7 var(--p-font); }
#screen-challenge .ch-today { padding: 22px; border: 1px solid var(--p-line); border-radius: 16px; background: var(--p-paper); }
#screen-challenge .ch-day-name { font: 600 24px/1.5 var(--p-font); }
#screen-challenge .ch-day-label { font: 500 12px/1.5 var(--p-font); letter-spacing: .04em; }

/* Lesson hierarchy: category strip -> technique -> player -> observation. */
#screen-tutorial .tutorial-eyebrow { display: none; }
#screen-tutorial .tutorial-title { font: 600 clamp(25px, 4.8vw, 34px)/1.4 var(--p-font); letter-spacing: -.025em; }
#screen-tutorial :is(.tutorial-intro, .tut-stance-caption) { color: var(--p-muted); font-family: var(--p-font); font-weight: 400; }
#screen-tutorial .tut-stance { border: 1px solid var(--p-line); border-radius: 12px; background: var(--p-raised); padding: 3px; }
#screen-tutorial .tut-stance-btn { min-height: 44px; border-radius: 9px; font: 500 13px/1.5 var(--p-font); color: var(--p-muted); }
#screen-tutorial .tut-stance-btn.active { background: var(--p-paper); color: var(--p-ink); box-shadow: 0 1px 3px #0000000a; }
#screen-tutorial .tut-cats { gap: 4px; padding: 4px; margin-block: 14px 8px; border: 1px solid var(--p-line); border-radius: 14px; background: var(--p-raised); }
#screen-tutorial .tut-cat { min-height: 44px; padding: 9px 12px; border: 1px solid transparent; border-radius: 10px; color: var(--p-muted); background: transparent; box-shadow: none; font: 500 14px/1.5 var(--p-font); }
#screen-tutorial .tut-cat.active { background: var(--p-paper); color: var(--p-ink); border-color: var(--p-line); box-shadow: none; font-weight: 600; }
#screen-tutorial .tutorial-tabs { gap: 8px; padding-block: 6px 14px; }
#screen-tutorial .tut-tab { padding: 9px 14px; border: 1px solid var(--p-line); border-radius: 12px; box-shadow: none; color: var(--p-muted); background: var(--p-paper); font: 500 14px/1.5 var(--p-font); }
#screen-tutorial .tut-tab.active { color: var(--p-paper); background: var(--p-ink); border-color: var(--p-ink); }
#screen-tutorial .tutorial-player { border: 1px solid var(--p-line); border-radius: 18px; box-shadow: none; background: var(--p-paper); }
#screen-tutorial .tut-lesson-heading { padding: 18px 18px 0; gap: 12px; }
#screen-tutorial .tut-lesson-heading h3 { font: 600 24px/1.45 var(--p-font); color: var(--p-ink); }
#screen-tutorial .tut-lesson-position { color: var(--p-muted); font: 400 12px/1.5 var(--p-font); letter-spacing: 0; }
#screen-tutorial .tut-lesson-focus { margin: 8px 18px 16px; color: var(--p-muted); font: 400 13px/1.75 var(--p-font); }
#screen-tutorial .tutorial-controls { gap: 8px; padding-block: 14px; }
#screen-tutorial .tut-ctrl { min-width: 44px; min-height: 44px; border: 1px solid var(--p-line); border-radius: 12px; box-shadow: none; background: var(--p-paper); color: var(--p-ink); font: 500 14px/1.5 var(--p-font); }
#screen-tutorial .tut-ctrl.active { background: var(--p-ink); color: var(--p-paper); border-color: var(--p-ink); }
#screen-tutorial .tut-hand-btn { min-height: 44px; border-width: 1px; font-family: var(--p-font); font-weight: 500; }
#screen-tutorial .tut-3d-lesson { border: 1px solid var(--p-line); border-radius: 14px; background: var(--p-raised); color: var(--p-ink); box-shadow: none; }
#screen-tutorial .tut-3d-title { font: 600 15px/1.6 var(--p-font); }
#screen-tutorial .tut-3d-badge { font: 500 11px/1.5 var(--p-font); color: var(--p-accent); background: transparent; letter-spacing: 0; }
#screen-tutorial .tut-3d-desc { color: var(--p-muted); font: 400 12px/1.7 var(--p-font); }
#screen-tutorial .tut-keyframe-buttons { gap: 8px; }
#screen-tutorial .tut-keyframe-buttons button { min-height: 48px; border: 1px solid var(--p-line); border-radius: 12px; background: var(--p-paper); color: var(--p-ink); font: 500 13px/1.5 var(--p-font); }
#screen-tutorial .tut-keyframe-buttons button[aria-pressed="true"] { border-color: var(--p-accent); background: color-mix(in srgb, var(--p-accent) 7%, var(--p-paper)); box-shadow: none; }
#screen-tutorial .tut-study-controls { border-color: var(--p-line); }
#screen-tutorial .tut-study-controls input { min-height: 44px; accent-color: var(--p-accent); }
#screen-tutorial .tut-self-practice { border: 1px solid var(--p-line); border-radius: 16px; background: var(--p-paper); box-shadow: none; }
#screen-tutorial .tut-self-practice h4 { font: 600 19px/1.5 var(--p-font); }
#screen-tutorial #tut-practice-pause { min-height: 48px; border: 1px solid transparent; border-radius: 12px; background: var(--interface-action, var(--p-ink)); color: var(--interface-on-action, var(--p-paper)); font: 600 14px/1.5 var(--p-font); box-shadow: none; }
#screen-tutorial :is(.tut-observation, .tut-pro-study) { padding: 18px; border: 1px solid var(--p-line); border-radius: 16px; background: var(--p-paper); box-shadow: none; }
#screen-tutorial .tut-observation { border-left: 3px solid var(--p-accent); }
#screen-tutorial :is(.tut-points-label, .tut-pro-study h4) { color: var(--p-ink); font-family: var(--p-font); font-weight: 600; letter-spacing: 0; }
#screen-tutorial .tutorial-desc :is(p, li) { color: var(--p-muted); font: 400 14px/1.85 var(--p-font); }
#screen-tutorial .tut-reference { color: var(--p-accent); font: 500 13px/1.65 var(--p-font); border-color: var(--p-line); }

/* Voice setup uses a single numbered instruction list, leaving the start action distinct. */
#screen-voice-setup .vc-setup-portrait { border: 0; border-radius: 16px; background: var(--p-raised); box-shadow: none; }
#screen-voice-setup .vc-eyebrow { color: var(--p-muted); font: 500 12px/1.6 var(--p-font); letter-spacing: 0; }
#screen-voice-setup .vc-steps { gap: 0; margin-block: 26px; border: 1px solid var(--p-line); border-radius: 16px; background: var(--p-paper); overflow: hidden; }
#screen-voice-setup .vc-steps li { gap: 14px; padding: 19px 16px; border: 0; border-bottom: 1px solid var(--p-line); border-radius: 0; background: transparent; box-shadow: none; }
#screen-voice-setup .vc-steps li:last-child { border-bottom: 0; }
#screen-voice-setup .vc-step-number { border: 0; border-radius: 10px; background: var(--p-raised); color: var(--p-accent); font: 600 12px/1.5 var(--p-font); }
#screen-voice-setup .vc-steps h3 { font: 600 15px/1.6 var(--p-font); }
#screen-voice-setup .vc-steps p { font: 400 13px/1.8 var(--p-font); }
#screen-voice-setup .vc-scope { border-radius: 14px; background: var(--p-raised); }

/* Three-minute practice: clean clock, instruction, next move, then actions. */
#screen-three-minute .three-wordmark { display: none; }
#screen-three-minute .three-heading { padding-bottom: 22px; border-bottom: 1px solid var(--p-line); }
#screen-three-minute .three-clock { background: transparent; box-shadow: none; }
#screen-three-minute .three-clock svg { stroke-width: 2.4; }
#screen-three-minute .three-digits strong { font-family: var(--p-font); font-weight: 600; letter-spacing: -.055em; }
#screen-three-minute .three-step-label { font: 500 13px/1.5 var(--p-font); letter-spacing: 0; }
#screen-three-minute .three-current h3 { font: 600 clamp(23px, 4.7vw, 28px)/1.5 var(--p-font); letter-spacing: -.02em; }
#screen-three-minute .three-segments span { height: 4px; border: 0; border-radius: 3px; }
#screen-three-minute :is(.three-next, .three-plan, .three-result-next, .three-result-time) { border: 1px solid var(--p-line); border-radius: 14px; background: var(--p-paper); box-shadow: none; }
#screen-three-minute .three-next small { font-size: 12px; }
#screen-three-minute .three-next span { font-size: 14px; }
#screen-three-minute .three-plan summary { font: 500 14px/1.6 var(--p-font); }
#screen-three-minute .three-plan li { font: 400 13px/1.7 var(--p-font); }
#screen-three-minute .three-result-mark { width: 64px; height: 64px; border: 1px solid var(--p-line); background: var(--p-raised); color: var(--p-accent); box-shadow: none; font-weight: 400; }
#screen-three-minute .three-result h3 { font-family: var(--p-font); font-weight: 600; }
#screen-three-minute .three-result-time dd { font-family: var(--p-font); font-weight: 600; }

/* Permission card follows the app theme; all text over an active camera stays dark-backed. */
#screen-setup-guide .setup-cam-gate { background: var(--p-bg); }
#screen-setup-guide .setup-cam-gate-card { border: 1px solid var(--p-line); border-radius: 20px; background: var(--p-paper); color: var(--p-ink); box-shadow: 0 8px 30px #00000008; padding: 22px; }
#screen-setup-guide .setup-cam-gate-card .back-btn { min-height: 44px; padding: 8px 0; border: 0; border-radius: 12px; background: transparent; color: var(--p-accent); box-shadow: none; font: 500 14px/1.5 var(--p-font); }
#screen-setup-guide .setup-cam-gate-card .setup-guide-title { color: var(--p-ink); font: 600 22px/1.45 var(--p-font); letter-spacing: -.02em; text-shadow: none; }
#screen-setup-guide .setup-comfort-icon { border: 0; border-radius: 12px; color: var(--p-accent); background: var(--p-raised); }
#screen-setup-guide .setup-cam-gate-card :is(.setup-comfort-intro, .setup-comfort-list, .setup-comfort-note, .setup-ambient-pref) { color: var(--p-muted); text-shadow: none; font-family: var(--p-font); }
#screen-setup-guide .setup-comfort-list li { padding-block: 8px; border-color: var(--p-line); }
#screen-setup-guide .setup-cam-gate-card a { color: var(--p-accent); }
#screen-setup-guide .setup-cam-gate-card .primary-btn { min-height: 50px; padding: 13px 18px; border: 1px solid transparent; border-radius: 14px; background: var(--interface-action, var(--p-ink)); color: var(--interface-on-action, var(--p-paper)); box-shadow: none; font: 600 15px/1.6 var(--p-font); }
#screen-setup-guide .setup-guide-top .setup-guide-title { font: 600 21px/1.5 var(--p-font); letter-spacing: 0; color: #fff; text-shadow: 0 1px 5px #0008; }
#screen-setup-guide .setup-checklist li { border: 1px solid #ffffff26; border-radius: 12px; background: #142019dc; box-shadow: none; color: #fff; font: 500 14px/1.6 var(--p-font); }
#screen-setup-guide .setup-checklist .check-icon { color: #d4e6dd; }
#screen-setup-guide #setup-switch-camera { min-height: 44px; border-radius: 12px; font-family: var(--p-font); box-shadow: none; }

/* Live camera UI: retain geometry and the one-line/full/off caption protocol. */
#screen-training #round-display, #screen-training #timer-display,
#screen-training #round-label, #screen-training #transcription,
#screen-training .ctrl-btn, #screen-training #status { font-family: var(--p-font); text-shadow: none; }
#screen-training:not(.voice-only) #round-display { background: #142019e8; color: #fff; border: 1px solid #ffffff26; border-radius: 14px; box-shadow: none; }
#screen-training:not(.voice-only) #round-display::before, #screen-training:not(.voice-only) #round-display::after { display: none; }
#screen-training:not(.voice-only) #round-label { color: #d4e6dd; font-weight: 600; letter-spacing: .04em; }
#screen-training:not(.voice-only) #timer-display { color: #fff; font-weight: 600; letter-spacing: .015em; }
#screen-training:not(.voice-only) #transcription { border: 1px solid #ffffff30; border-radius: 14px; background: #142019f2; color: #fff; box-shadow: 0 3px 12px #0002; font-weight: 400; }
/* The 1px border uses 2px inside border-box. Reserve it in both themes so a
   compact caption still has one full line of text (the soft legacy cap had no border). */
#screen-training:not(.voice-only)[data-captions="line"] #transcription { max-height: calc(1.5em + 14px); }
#screen-training:not(.voice-only) #status { border: 1px solid #ffffff26; border-radius: 10px; background: #142019e8; color: #fff; }
#screen-training:not(.voice-only) #controls .ctrl-btn { border: 1px solid #ffffff38; border-radius: 14px; background: #142019ed; color: #fff; box-shadow: none; }
#screen-training:not(.voice-only) #controls .ctrl-btn.is-off { color: #ced6d1; background: #142019df; }
#screen-training #controls .ctrl-btn.stop-btn { border: 1px solid #c94b45; border-radius: 14px; background: #b83935; color: #fff; box-shadow: none; }
#screen-training #controls .ctrl-btn[aria-pressed="true"]:not(#mic-btn) { border-color: #b5d6c5; }
#screen-training .aha-quest-inner { border: 1px solid #ffffff30; background: #142019ed; border-radius: 16px; box-shadow: 0 4px 16px #0002; animation: none; }
#screen-training .aha-quest-kicker { display: none; }
#screen-training .aha-quest-title { font: 600 17px/1.5 var(--p-font); }
#screen-training.voice-only .vc-training-copy h2 { font-family: var(--p-font); font-weight: 600; letter-spacing: -.02em; }
#screen-training.voice-only #controls .ctrl-btn { border-width: 1px; border-radius: 14px; box-shadow: none; }
#screen-training.voice-only #transcription { font-weight: 400; border-radius: 14px; }

/* Results: make the saved practice and next action more prominent than ornamental badges. */
#screen-result .result-content { max-width: 720px; padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
#screen-result :is(.result-summary, .result-next, .result-challenge) { padding: 20px; border: 1px solid var(--p-line); border-radius: 18px; background: var(--p-paper); box-shadow: none; color: var(--p-ink); }
#screen-result .result-stat { color: var(--p-muted); font: 400 14px/1.75 var(--p-font); }
#screen-result .result-stat-big { color: var(--p-ink); font-family: var(--p-font); font-weight: 600; letter-spacing: -.035em; text-shadow: none; background: none; -webkit-text-fill-color: currentColor; }
#screen-result .result-rank { padding: 22px 18px; background: var(--p-raised); border: 1px solid var(--p-line); border-radius: 16px; box-shadow: none; }
#screen-result .result-rank::before, #screen-result .result-rank::after { display: none; }
#screen-result .rr-emoji { font-size: 42px; filter: none; }
#screen-result .rr-name { font: 600 26px/1.4 var(--p-font); letter-spacing: -.01em; color: var(--p-ink); background: none; -webkit-text-fill-color: currentColor; filter: none; animation: none; }
#screen-result .rr-label { color: var(--p-muted); font: 500 11px/1.5 var(--p-font); letter-spacing: .04em; }
#screen-result .rr-blurb { color: var(--p-muted); font: 400 13px/1.7 var(--p-font); }
#screen-result .rb-section { background: var(--p-paper); border: 1px solid var(--p-line); border-radius: 14px; box-shadow: none; padding: 16px; }
#screen-result :is(.rb-title, .coach-advice-label) { color: var(--p-muted); font: 500 12px/1.65 var(--p-font); letter-spacing: 0; text-shadow: none; }
#screen-result :is(.rb-stat, .rb-delta) { background: var(--p-raised); border: 0; border-radius: 12px; padding: 14px 10px; }
#screen-result :is(.rb-stat-label, .rb-delta-label) { color: var(--p-muted); font: 400 12px/1.6 var(--p-font); letter-spacing: 0; }
#screen-result :is(.rb-stat-value, .rb-delta-cur) { color: var(--p-ink); font: 600 22px/1.5 var(--p-font); letter-spacing: -.02em; text-shadow: none; }
#screen-result .rb-kind { background: var(--p-raised); border-radius: 10px; }
#screen-result .rb-k-name { color: var(--p-ink); font: 500 13px/1.5 var(--p-font); }
#screen-result .rb-k-count { font-family: var(--p-font); font-weight: 600; }
#screen-result .rb-feedback-list li { background: var(--p-raised); color: var(--p-ink); font: 400 13px/1.75 var(--p-font); }
#screen-result .rb-feedback-empty { color: var(--p-muted); font-style: normal; }
#screen-result .coach-advice { background: var(--p-raised); border: 1px solid var(--p-line); border-radius: 14px; box-shadow: none; padding: 16px; }
#screen-result .coach-advice-text { color: var(--p-ink); font: 400 14px/1.75 var(--p-font); }
#screen-result .coach-advice-text b, #screen-result .coach-advice-prev { color: var(--p-accent); font-family: var(--p-font); font-weight: 600; text-shadow: none; }
#screen-result .coach-advice-mascot { filter: none; }
#screen-result .rc-label { color: var(--p-muted); font: 500 11px/1.5 var(--p-font); letter-spacing: .03em; }
#screen-result .rc-line { color: var(--p-ink); font: 500 14px/1.6 var(--p-font); }
#screen-result .result-btn-row { gap: 10px; }
#screen-result .result-save-status { color: var(--p-muted); font: 400 13px/1.6 var(--p-font); }

@media (max-width: 479px) {
  #screen-ai-menu .goal-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #screen-ai-menu .goal-card { padding: 16px; }
  #screen-tutorial .tut-cat { padding: 8px 3px; font-size: 12px; }
  #screen-tutorial .tut-lesson-heading { padding-inline: 14px; }
  #screen-tutorial .tut-lesson-heading h3 { font-size: 22px; }
  #screen-tutorial .tut-lesson-focus { margin-inline: 14px; }
  #screen-tutorial .tut-keyframe-buttons button { font-size: 12px; }
  #screen-result .result-btn-row { flex-direction: column; }
}
@media (max-width: 359px) {
  :is(#screen-round-setup, #screen-challenge, #screen-ai-menu, #screen-voice-setup, #screen-gym-timer) > .setup-content,
  #screen-result .result-content { padding-inline: 16px; }
  #screen-setup-guide .setup-cam-gate { padding-inline: 12px; }
  #screen-setup-guide .setup-cam-gate-card { padding: 18px; }
  #screen-gym-timer .gym-ring-wrap { width: min(260px, 84vw); }
  #screen-result :is(.rb-section, .result-summary) { padding: 14px; }
  #screen-result .rb-kind { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#screen-tutorial, #screen-round-setup, #screen-challenge, #screen-ai-menu,
      #screen-voice-setup, #screen-three-minute, #screen-gym-timer, #screen-result)
      :is(button, a) { transition: none; }
}