/* Mission Control follows Keyboarding Center's toolbar, list, and practice layout. */
body.mission-website-controls-hidden > .accessibility-panel,
body.mission-website-controls-hidden > .site-nav { display: none; }

.mission-center-page .mission-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  margin: 0 0 .75rem;
}
.mission-center-page .mission-toolbar :is(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .55rem .85rem;
  border: 2px solid #356da8;
  border-radius: .55rem;
  background: #fff;
  color: #102044;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.mission-center-page #missionVoiceToggle { margin-left: auto; }
.mission-center-page .mission-toolbar :focus-visible {
  outline: .2rem solid #f3a712;
  outline-offset: .15rem;
}
.mission-center-page .mission-center-panel {
  min-height: calc(100svh - 7rem);
  padding: clamp(1rem, 3vw, 2rem);
}
.mission-center-page .mission-center-panel h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1rem; }
/* Keep the launch notice readable on Mission Control's blue and black panels. */
.mission-center-page .mission-center-panel .mission-launch-notice :is(h2, p, a) {
  color: #fff;
}
.mission-center-page .mission-center-summary { font-size: 1rem; margin: .5rem auto 1rem; }
.mission-center-page .mission-center-menu { margin: 1rem auto; gap: .7rem; }
.mission-center-page .mission-center-menu--simple { grid-template-columns: minmax(0, 1fr); max-width: 58rem; }
.mission-center-page .mission-center-menu--simple .mission-center-option { min-height: 6.5rem; text-align: left; }
.mission-center-page .mission-center-menu--simple .mission-center-option strong { font-size: clamp(1.65rem, 4vw, 2.7rem); }
.mission-center-page .mission-topic-option {
  display: flex;
  min-height: 4.75rem;
  padding: .75rem 1.25rem;
  justify-content: flex-start;
  text-align: left;
}
.mission-center-page .mission-topic-option strong { font-size: clamp(1.3rem, 3vw, 2rem); line-height: 1.2; }
.mission-center-page .mission-selection-detail { max-width: 58rem; margin: .75rem auto; font-size: 1rem; text-align: center; }
.mission-center-page .mission-center-help { font-size: .95rem; line-height: 1.5; padding: .65rem; }
.mission-center-page .mission-setting-toggle { min-height: 5.25rem; padding: .75rem 1.25rem; }
.mission-center-page .mission-setting-value { font-size: clamp(1.25rem, 3vw, 2rem); }
.mission-center-page .mission-setting-hint { display: none; }
.mission-center-page .mission-center-back { margin-bottom: .5rem; }

/* Ready, practice, and results each occupy their own screen. Let enlarged text scroll. */
.mission-center-page .mission-ready-screen { display: grid; align-content: center; gap: 1rem; }
.mission-center-page .mission-ready-prompt { min-height: 12rem; padding: 1.5rem; margin: 0; font-size: clamp(2.25rem, 6vw, 4rem); }
.mission-center-page .mission-ready-screen > button { min-height: 3.5rem; width: auto; justify-self: center; font-size: 1.25rem; padding: .6rem 1.5rem; }
.mission-center-page #commandReadyStart { min-height: 4.5rem; max-width: 100%; font-size: clamp(1.5rem, 4vw, 2.5rem); }
.mission-center-page.mission-session-page .mission-training-panel:not([hidden]),
.mission-center-page.practice-session-page .mission-training-panel:not([hidden]) {
  min-height: calc(100svh - 7rem);
  height: auto;
  max-height: none;
  max-width: none;
  padding: .5rem;
  overflow: visible;
  border: 0;
  background: #06142d;
}
.mission-center-page:is(.mission-session-page, .practice-session-page) .training-stage .command-focus-area {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 0 .6rem;
  padding: 0;
  border: 0;
  border-radius: .55rem;
  background: transparent;
  box-shadow: none;
}
.mission-center-page:is(.mission-session-page, .practice-session-page) .training-stage .command-focus-area:focus {
  outline: 3px solid #ffe37a;
  outline-offset: 3px;
}
.mission-center-page:is(.mission-session-page, .practice-session-page) .training-stage .command-focus-area .training-stage__prompt {
  flex: 1 1 auto;
  display: grid;
  place-content: center;
  gap: .75rem;
  width: 100%;
  min-height: clamp(12rem, 45vh, 30rem);
  max-height: none;
  margin: 0;
  padding: clamp(1rem, 4vw, 2.5rem);
  border: 2px solid #65aef5;
  border-radius: .55rem;
  font-size: clamp(1.6rem, 3.5vw, 2.7rem);
  line-height: 1.3;
}
.mission-center-page .command-focus-area .training-stage__prompt h3 { margin: 0; font-size: clamp(2rem, 5vw, 3.75rem); }
.mission-center-page .command-focus-area .training-stage__prompt p { font-size: 1.25rem; margin: 0; }
.mission-center-page .mission-training-panel .mission-meta { padding: .3rem .5rem; font-size: .85rem; }
.mission-center-page .mission-training-progress,
.mission-center-page .mission-training-panel progress { width: 100%; height: .6rem; margin: .25rem 0; accent-color: #1681d8; }
.mission-center-page .mission-training-position { margin: .25rem 0; color: #d5e3f1; font-size: .9rem; text-align: center; }
html[data-theme="dark"] .mission-center-page .mission-training-panel progress { accent-color: #737373; }
html[data-theme="dark"] .mission-center-page .mission-training-panel progress::-webkit-progress-bar { background: #242424; }
html[data-theme="dark"] .mission-center-page .mission-training-panel progress::-webkit-progress-value { background: #737373; }
html[data-theme="dark"] .mission-center-page .mission-training-panel progress::-moz-progress-bar { background: #737373; }
.mission-center-page .training-stage .training-stage__feedback { padding: .5rem; font-size: 1rem; line-height: 1.4; }
.mission-center-page .mission-results-screen { padding: .75rem; }
.mission-center-page .mission-celebration h2 { font-size: clamp(2.4rem, 6vw, 4rem); }
.mission-center-page .mission-result { min-height: 8rem; }
.mission-center-page .mission-result-primary { min-height: 4.5rem; font-size: clamp(1.4rem, 3vw, 2rem); }

html[data-theme="dark"] .mission-center-page .mission-training-panel:not([hidden]),
html[data-contrast="high"] .mission-center-page .mission-training-panel:not([hidden]),
html[data-theme="dark"] .mission-center-page .mission-toolbar :is(a, button),
html[data-contrast="high"] .mission-center-page .mission-toolbar :is(a, button) {
  color: #fff;
  background: #000;
  border-color: #fff;
}
html[data-theme="dark"] .mission-center-page .command-focus-area .training-stage__prompt,
html[data-contrast="high"] .mission-center-page .command-focus-area .training-stage__prompt { color: #fff; background: #000; }
.mission-center-page .training-stage .command-focus-area.is-correct .training-stage__prompt { border-color: #16813a; }
.mission-center-page .training-stage .command-focus-area.is-incorrect .training-stage__prompt { border-color: #b51f2e; }
html[data-theme="dark"] .mission-center-page .command-focus-area.is-correct .training-stage__prompt,
html[data-contrast="high"] .mission-center-page .command-focus-area.is-correct .training-stage__prompt { border-color: #55e487; }
html[data-theme="dark"] .mission-center-page .command-focus-area.is-incorrect .training-stage__prompt,
html[data-contrast="high"] .mission-center-page .command-focus-area.is-incorrect .training-stage__prompt { border-color: #ff7a88; }
@media (max-width: 42rem) {
  .mission-center-page .mission-toolbar :is(a, button) { flex: 1 1 auto; }
  .mission-center-page #missionVoiceToggle { margin-left: 0; }
  .mission-center-page .mission-setting-toggle { grid-template-columns: 1fr; text-align: left; }
  .mission-center-page .mission-ready-prompt { min-height: 10rem; }
}
.mac-command-panel {
  text-align: left;
  margin: 1rem auto;
  width: 100%;
  max-width: 44rem;
  min-width: 0;
}
.mission-center-page .mac-command-panel :is(h2, p, a, summary, label, legend),
.mission-center-page .mac-practice-intro a,
.mission-center-page #macReadyHelp a { color: #fff; }
.mission-center-page .mac-command-panel form { color: #fff; background: transparent; border-color: #65aef5; }
.mac-command-panel p { font-size: 1rem; line-height: 1.6; }
.mac-command-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.mac-command-fields select { width: 100%; min-width: 0; min-height: 2.75rem; }
.mac-extra-keys { display: flex; flex-wrap: wrap; min-width: 0; gap: 1rem; margin: .5rem 0; padding: .75rem; }
.mac-extra-keys label { display: inline-flex; align-items: center; gap: .4rem; }
.mac-extra-keys input { width: 1.25rem; height: 1.25rem; }
.mac-command-panel button { margin: .5rem .5rem .5rem 0; min-height: 2.75rem; }
.mac-command-panel summary { cursor: pointer; padding: .75rem 0; }
.mission-center-page.practice-session-page[data-mac-practice="true"] .training-stage .command-focus-area .training-stage__prompt {
  min-height: 0;
  padding: 1rem;
}
.mission-center-page.practice-session-page[data-mac-practice="true"] .command-focus-area .training-stage__prompt h3 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

/* Full-topic command courses */
.mission-center-page #commandExplanationDetails { color: #fff; background: #06142d; border-color: #9bcfff; }
.mission-center-page #commandExplanationDetails :is(summary, p) { color: inherit; }
html[data-theme="dark"] .mission-center-page #commandExplanationDetails,
html[data-contrast="high"] .mission-center-page #commandExplanationDetails { background: #000; border-color: #fff; }
.command-level { font-weight:700; font-size:1.15rem; margin:.4rem 0; }
.course-builder { border:2px solid #9bcfff; border-radius:12px; padding:1rem; margin:1rem 0; }
.course-builder summary { font-weight:700; cursor:pointer; min-height:44px; }
.course-builder fieldset { display:flex; flex-wrap:wrap; gap:.5rem 1rem; }
.course-builder label { display:inline-flex; align-items:center; min-height:44px; gap:.5rem; }
.course-builder select, .course-builder button { min-height:44px; margin:.4rem; max-width:100%; }
.course-builder input { width:1.2rem; height:1.2rem; }
.course-builder a { color:inherit; text-decoration:underline; }
.mission-center-page .mission-support :is(summary, a) { color: #fff; }
.command-focus-area p { line-height:1.5; }

.mission-center-page .course-builder form { background:#0d2241; color:#fff; padding:.7rem; border:1px solid #9bcfff; }
.mission-center-page .course-builder fieldset { padding:.4rem .6rem; margin:0 0 .5rem; color:#fff; border-color:#9bcfff; }
.mission-center-page .course-builder label, .mission-center-page .course-builder legend, .mission-center-page .course-builder form p { color:#fff; }
.mission-center-page .course-builder select { background:#fff; color:#061831; }
.mission-center-page .course-builder label[hidden] { display:none; }
.mission-center-page .course-builder-cue { font-size:1.2rem; font-weight:700; margin:.5rem 0; }
html[data-theme="dark"] .mission-center-page .course-builder form, html[data-contrast="high"] .mission-center-page .course-builder form { background:#000; color:#fff; }

/* On small screens the stacked toolbar already uses vertical space. Let the
   mission fit its content so a short prompt does not push feedback off-screen. */
@media (max-width: 42rem), (max-height: 40rem) {
  .mission-center-page.mission-session-page .mission-training-panel:not([hidden]) {
    min-height: 0;
  }
  .mission-center-page.mission-session-page .training-stage .command-focus-area .training-stage__prompt {
    min-height: 12rem;
    flex-grow: 0;
  }
}