:root {
  --blue-950: #061a3a;
  --blue-900: #0a2858;
  --blue-800: #123f87;
  --blue-700: #1558b0;
  --blue-600: #1672d4;
  --blue-500: #168bea;
  --cyan-400: #25c8f5;
  --ink: #10213d;
  --muted: #53657e;
  --surface: #ffffff;
  --surface-soft: #eef6ff;
  --border: #b7d4f4;
  --focus: #ffbf47;
  --shadow: 0 18px 44px rgba(6, 42, 93, 0.14);
  --radius: 1rem;
}

* {
  box-sizing: border-box;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background-color: #ffffff;
  background-image: none;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.75rem 1rem;
  color: #061a3a;
  background: #ffffff;
  border: 3px solid var(--focus);
  border-radius: 0.5rem;
  font-weight: 800;
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

a {
  color: #064fa8;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: #003775;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 3px;
}

.accessibility-panel {
  color: #ffffff;
  background: var(--blue-950);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.accessibility-panel__inner,
.site-nav__inner {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
}

 .accessibility-panel__inner {
  padding: 0.35rem 0;
}

.accessibility-menu summary {
  width: fit-content;
  min-height: 2.5rem;
  padding: 0.45rem 0.7rem;
  color: #ffffff;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  font-weight: 800;
  cursor: pointer;
}

.accessibility-menu summary:hover {
  background: #123f87;
  border-color: #7dcfff;
}

.accessibility-menu summary:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 2px;
}

.accessibility-menu__content {
  padding: 0.55rem 0 0.35rem;
}

.accessibility-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.accessibility-controls button {
  min-height: 2.65rem;
  padding: 0.55rem 0.8rem;
  color: #ffffff;
  background: #123f87;
  border: 2px solid #7dcfff;
  border-radius: 0.6rem;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 750;
  cursor: pointer;
}

.accessibility-controls button:hover,
.accessibility-controls button[aria-pressed="true"] {
  color: #061a3a;
  background: #9de5ff;
  border-color: #ffffff;
}

.accessibility-note {
  max-width: 72ch;
  margin: 0 0 0.55rem;
  color: #cdeeff;
  font-size: 0.9rem;
}

.accessibility-status {
  margin: 0.4rem 0 0;
  color: #d9f3ff;
  font-size: 0.9rem;
}

.site-nav {
  color: #ffffff;
  background: linear-gradient(90deg, var(--blue-900), var(--blue-700));
  box-shadow: 0 7px 20px rgba(5, 37, 82, 0.16);
}

.site-nav__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.65rem 0;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.8rem;
  color: #ffffff;
  background: transparent;
  border: 2px solid #7dcfff;
  border-radius: 0.55rem;
  font-weight: 750;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--blue-950);
  background: #ffffff;
}

body > header,
body > main,
body > footer {
  width: min(72rem, calc(100% - 2rem));
  margin-inline: auto;
}

body > header {
  margin-top: 1.5rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue-950), var(--blue-700));
  border: 1px solid #4d9ee7;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

body > header h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #ffffff;
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1.08;
}

body > header p {
  max-width: 52rem;
  margin-bottom: 0;
  color: #e5f4ff;
  font-size: 1.1rem;
}

body > main {
  margin-top: 1.25rem;
  margin-bottom: 2rem;
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

body > footer {
  padding: 1.5rem 0 2.5rem;
  color: var(--muted);
  text-align: center;
}

h1,
h2,
h3 {
  color: var(--blue-950);
  line-height: 1.2;
  text-wrap: balance;
}

h2 {
  margin-top: 2rem;
  font-size: clamp(1.45rem, 3vw, 2rem);
}

h3 {
  font-size: 1.25rem;
}

p,
li {
  max-width: 78ch;
}

li + li {
  margin-top: 0.55rem;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
input[type="submit"] {
  min-height: 3rem;
}

button,
input[type="submit"] {
  padding: 0.65rem 1rem;
  color: #ffffff;
  background: var(--blue-700);
  border: 2px solid var(--blue-700);
  border-radius: 0.65rem;
  font-weight: 800;
  cursor: pointer;
}

button:hover,
input[type="submit"]:hover {
  background: var(--blue-900);
  border-color: var(--blue-900);
}

button:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

input[type="text"],
input[type="file"],
select,
textarea {
  width: min(100%, 38rem);
  min-height: 3rem;
  padding: 0.65rem;
  color: var(--ink);
  background: #ffffff;
  border: 2px solid #7da9d8;
  border-radius: 0.65rem;
}

input[type="file"] {
  padding: 0.45rem;
}

form,
section,
main > nav {
  margin-block: 1.25rem;
}

main > section,
main > nav,
form {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 0.8rem;
}

main > section h2:first-child,
main > nav h2:first-child {
  margin-top: 0;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(18rem, 1.05fr);
  gap: clamp(1.2rem, 4vw, 3rem);
  align-items: center;
  overflow: hidden;
}

.home-hero__art {
  width: 100%;
  height: auto;
  border: 1px solid rgba(142, 222, 255, 0.7);
  border-radius: 0.9rem;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
}

.eyebrow {
  margin: 0 0 0.65rem;
  color: #9de5ff;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.card-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 0;
  list-style: none;
}

.manual-catalog .manual-kind {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted-text, #334e68);
  font-size: 0.95rem;
  font-weight: 600;
}

/* Keep each catalog card and its description in separate grid rows.
   This prevents the 100%-height link from covering the description. */
.manual-catalog li {
  display: grid;
  grid-template-rows: 1fr auto;
}

.manual-catalog a {
  min-height: 0;
}

body.high-contrast .manual-catalog .manual-kind,
body.dark-mode .manual-catalog .manual-kind {
  color: inherit;
}

.card-list li {
  margin: 0;
}

.card-list a {
  display: block;
  min-height: 100%;
  padding: 1.1rem;
  color: var(--blue-950);
  background: #ffffff;
  border: 2px solid #9bc5ed;
  border-radius: 0.8rem;
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(6, 54, 111, 0.08);
}

.card-list a:hover {
  background: #dff2ff;
  border-color: var(--blue-600);
  transform: translateY(-2px);
}

.learning-path-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 0;
  list-style: none;
  counter-reset: learning-path;
}

.learning-path-list li {
  margin: 0;
  padding: 1.15rem;
  background: #ffffff;
  border: 2px solid #9bc5ed;
  border-left: .45rem solid var(--blue-600);
  border-radius: .8rem;
  box-shadow: 0 8px 20px rgba(6, 54, 111, 0.08);
}

.learning-path-list h3 {
  margin-top: 0;
}

.learning-path-list p:last-child {
  margin-bottom: 0;
}

.learning-path-list .path-order {
  color: var(--muted-text, #334e68);
}

html[data-theme="dark"] .learning-path-list li {
  color: #ffffff;
  background: #000000;
  border-color: #8dd1ff;
}

html[data-theme="dark"] .learning-path-list .path-order {
  color: #dceeff;
}

html[data-contrast="high"] .learning-path-list li {
  color: #000000;
  background: #ffffff;
  border-color: #000000;
  box-shadow: none;
}

#progressList li {
  padding: 0.85rem;
  background: #f5faff;
  border-left: 0.35rem solid var(--blue-600);
  border-radius: 0.35rem;
}

[role="status"]:not(:empty) {
  padding: 0.75rem 1rem;
  background: #e3f5ff;
  border-left: 0.35rem solid var(--blue-600);
  border-radius: 0.4rem;
  font-weight: 650;
}

html:not([data-reduce-motion="true"]) body,
html:not([data-reduce-motion="true"]) body > header,
html:not([data-reduce-motion="true"]) body > main,
html:not([data-reduce-motion="true"]) .site-nav,
html:not([data-reduce-motion="true"]) .accessibility-panel,
html:not([data-reduce-motion="true"]) main > section,
html:not([data-reduce-motion="true"]) main > nav,
html:not([data-reduce-motion="true"]) form,
html:not([data-reduce-motion="true"]) button,
html:not([data-reduce-motion="true"]) input,
html:not([data-reduce-motion="true"]) select,
html:not([data-reduce-motion="true"]) textarea,
html:not([data-reduce-motion="true"]) a,
html:not([data-reduce-motion="true"]) table,
html:not([data-reduce-motion="true"]) th,
html:not([data-reduce-motion="true"]) td,
html:not([data-reduce-motion="true"]) .course-lesson-list li,
html:not([data-reduce-motion="true"]) .progress-list li,
html:not([data-reduce-motion="true"]) .lesson-status,
html:not([data-reduce-motion="true"]) .submission-history,
html:not([data-reduce-motion="true"]) .tip {
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

html[data-theme="dark"] {
  --blue-950: #e9f5ff;
  --blue-900: #c8e7ff;
  --blue-800: #8acaff;
  --blue-700: #58b0f5;
  --blue-600: #3397e8;
  --blue-500: #5fc6ff;
  --ink: #edf6ff;
  --muted: #b8cce0;
  --surface: #000000;
  --surface-soft: #080808;
  --border: #8dd1ff;
  --focus: #ffd166;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}

html[data-theme="dark"] body {
  color: #ffffff;
  background: #000000;
}

html[data-theme="dark"] a {
  color: #8dd1ff;
}

html[data-theme="dark"] a:hover {
  color: #c7eaff;
}

html[data-theme="dark"] body > header,
html[data-theme="dark"] .site-nav,
html[data-theme="dark"] .accessibility-panel {
  color: #ffffff;
  background: #000000;
  border-color: #8dd1ff;
}

html[data-theme="dark"] body > header h1,
html[data-theme="dark"] body > header p,
html[data-theme="dark"] .accessibility-menu summary {
  color: #ffffff;
}

html[data-theme="dark"] main > section,
html[data-theme="dark"] main > nav,
html[data-theme="dark"] form,
html[data-theme="dark"] .lesson-nav,
html[data-theme="dark"] .course-lesson-list li,
html[data-theme="dark"] .progress-list li,
html[data-theme="dark"] .submission-history,
html[data-theme="dark"] .tip,
html[data-theme="dark"] table {
  color: #ffffff;
  background: #080808;
  border-color: #8dd1ff;
}

html[data-theme="dark"] .accessibility-controls button,
html[data-theme="dark"] button,
html[data-theme="dark"] input[type="submit"] {
  color: #ffffff;
  background: #000000;
  border: 2px solid #8dd1ff;
}

html[data-theme="dark"] .accessibility-controls button:hover,
html[data-theme="dark"] .accessibility-controls button[aria-pressed="true"],
html[data-theme="dark"] button:hover,
html[data-theme="dark"] input[type="submit"]:hover {
  color: #ffffff;
  background: #101010;
  border-color: #ffffff;
}

html[data-theme="dark"] .accessibility-controls button[aria-pressed="true"] {
  border-width: 4px;
  box-shadow: inset 0 0 0 2px #3397e8;
}

html[data-theme="dark"] .site-nav a,
html[data-theme="dark"] .site-nav a:hover,
html[data-theme="dark"] .site-nav a[aria-current="page"] {
  color: #ffffff;
  background: #000000;
  border: 2px solid #8dd1ff;
}

html[data-theme="dark"] .site-nav a:hover,
html[data-theme="dark"] .site-nav a[aria-current="page"] {
  border-color: #ffffff;
  box-shadow: inset 0 0 0 2px #3397e8;
}

html[data-theme="dark"] .card-list a {
  color: #ffffff;
  background: #000000;
  border-color: #8dd1ff;
  box-shadow: none;
}

html[data-theme="dark"] .card-list a:hover {
  color: #ffffff;
  background: #101010;
  border-color: #ffffff;
}

html[data-theme="dark"] [role="status"]:not(:empty) {
  color: #ffffff;
  background: #000000;
  border: 2px solid #8dd1ff;
}

html[data-theme="dark"] .lesson-nav a,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  color: #eef7ff;
  background: #0c1b2b;
  border-color: #5c8db7;
}

html[data-theme="dark"] th {
  color: #ffffff;
  background: #174c78;
  border-color: #6fa2cc;
}

html[data-theme="dark"] td {
  color: #edf6ff;
  background: #102337;
  border-color: #5b84a7;
}

html[data-theme="dark"] .lesson-status {
  color: #eaf5ff;
  background: #29425d;
}

html[data-theme="dark"] .lesson-status--submitted,
html[data-theme="dark"] .lesson-status--completed {
  color: #dfffee;
  background: #17563b;
}

.lesson-completion {
  border-left: .45rem solid #18864b;
}

.lesson-completion button:disabled {
  color: #173d28;
  background: #d9f5e5;
  border-color: #18864b;
  opacity: 1;
}

html[data-theme="dark"] .lesson-completion button:disabled {
  color: #e9fff1;
  background: #174b32;
  border-color: #72dfa4;
}

html[data-theme="dark"] .skip-link {
  color: #07111f;
  background: #ffffff;
}

html[data-contrast="high"] {
  --ink: #000000;
  --muted: #000000;
  --surface: #ffffff;
  --surface-soft: #ffffff;
  --border: #000000;
  --focus: #ffde00;
}

html[data-contrast="high"] body {
  color: #000000;
  background: #ffffff;
  background-image: none;
}

html[data-contrast="high"] body > header,
html[data-contrast="high"] .site-nav,
html[data-contrast="high"] .accessibility-panel {
  color: #ffffff;
  background: #000000;
  border-color: #ffffff;
}

html[data-contrast="high"] a {
  color: #0000cc;
}

html[data-contrast="high"] main,
html[data-contrast="high"] main > section,
html[data-contrast="high"] main > nav,
html[data-contrast="high"] form {
  color: #000000;
  background: #ffffff;
  border: 2px solid #000000;
  box-shadow: none;
}

html[data-reduce-motion="true"] *,
html[data-reduce-motion="true"] *::before,
html[data-reduce-motion="true"] *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 48rem) {
  .home-hero {
    grid-template-columns: 1fr;
  }

  .home-hero__art {
    order: -1;
  }

  .card-list {
    grid-template-columns: 1fr;
  }

  .learning-path-list {
    grid-template-columns: 1fr;
  }

  body > header,
  body > main,
  body > footer,
  .accessibility-panel__inner,
  .site-nav__inner {
    width: min(100% - 1rem, 72rem);
  }

  .accessibility-controls button {
    flex: 1 1 9rem;
  }
}

@media (max-width: 28rem) {
  .site-nav__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .site-nav a {
    justify-content: center;
    text-align: center;
  }
}


.progress-overview progress {
  width: min(100%, 36rem);
  height: 1.4rem;
  accent-color: var(--blue-600);
}

.progress-list {
  display: grid;
  gap: 0.75rem;
  padding-left: 1.75rem;
}

.progress-list li {
  padding: 0.9rem 1rem;
  background: #f5faff;
  border-left: 0.35rem solid var(--blue-600);
  border-radius: 0.45rem;
}

.progress-list a {
  display: block;
  font-weight: 800;
}

.lesson-status {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.25rem 0.55rem;
  color: #2f4059;
  background: #e4edf7;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 750;
}

.lesson-status--submitted,
.lesson-status--completed {
  color: #073d24;
  background: #c9f1dc;
}

.submission-history {
  padding: 0.75rem 1rem;
  color: #263b55;
  background: #fff7d6;
  border-left: 0.35rem solid #c28a00;
  border-radius: 0.4rem;
}

.coming-soon-list {
  columns: 2 18rem;
  column-gap: 2.5rem;
}

.coming-soon-list li {
  break-inside: avoid;
}

html[data-contrast="high"] .lesson-status,
html[data-contrast="high"] .lesson-status--submitted,
html[data-contrast="high"] .lesson-status--completed,
html[data-contrast="high"] .submission-history {
  color: #000000;
  background: #ffffff;
  border: 2px solid #000000;
}

@media print {
  .skip-link,
  .accessibility-panel,
  .site-nav,
  .home-hero__art {
    display: none !important;
  }

  body,
  body > header,
  body > main {
    width: 100%;
    color: #000000;
    background: #ffffff;
    background-image: none;
    border: 0;
    box-shadow: none;
  }

  a {
    color: #000000;
  }
}

.lesson-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-block: 1rem 1.5rem;
  padding: 0.85rem;
  background: #e7f4ff;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}

.lesson-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  color: var(--blue-950);
  background: #ffffff;
  border: 2px solid #8dbce9;
  border-radius: 0.55rem;
  font-weight: 800;
  text-decoration: none;
}

.lesson-nav a:hover {
  background: #d2efff;
  border-color: var(--blue-700);
}

.course-lesson-list {
  display: grid;
  gap: 0.7rem;
  padding-left: 2rem;
}

.course-lesson-list li {
  padding: 0.65rem 0.8rem;
  background: #ffffff;
  border-left: 0.3rem solid var(--blue-600);
  border-radius: 0.4rem;
}

.tip {
  padding: 0.8rem 1rem;
  color: #183451;
  background: #ddf5ff;
  border-left: 0.35rem solid #087eac;
  border-radius: 0.4rem;
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
}

caption {
  padding: 0.8rem;
  color: var(--blue-950);
  font-weight: 800;
  text-align: left;
}

th,
td {
  padding: 0.7rem;
  border: 1px solid #8eb6dc;
  text-align: left;
  vertical-align: top;
}

th {
  color: #ffffff;
  background: var(--blue-800);
}

.course-progress-sections {
  display: grid;
  gap: 1.25rem;
  margin-block: 1.25rem;
}

.course-progress {
  margin: 0;
}

.course-progress progress {
  width: min(100%, 36rem);
  height: 1.4rem;
  accent-color: var(--blue-600);
}

html[data-contrast="high"] .lesson-nav,
html[data-contrast="high"] .lesson-nav a,
html[data-contrast="high"] .tip,
html[data-contrast="high"] table,
html[data-contrast="high"] th,
html[data-contrast="high"] td {
  color: #000000;
  background: #ffffff;
  border-color: #000000;
}

@media (max-width: 32rem) {
  .lesson-nav {
    display: grid;
  }

  .lesson-nav a {
    width: 100%;
  }
}

/* Simple, single-task training stage inspired by accessible typing tutors. */
.practice-session-page,
.mission-session-page {
  min-height: 100vh;
  background: #edf6ff;
}

.training-header {
  width: min(100% - 1rem, 56rem);
  margin-inline: auto;
  padding: .8rem 1rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.training-header h1 {
  margin: 0;
  color: var(--blue-950);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
}

.practice-session-page > main,
.mission-session-page > main {
  display: grid;
  width: min(100% - 1rem, 56rem);
  min-height: calc(100vh - 5rem);
  margin-inline: auto;
  padding-block: 0 .5rem;
}

.training-stage {
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: #ffffff;
  border: 3px solid var(--blue-700);
  border-radius: 1rem;
  box-shadow: 0 .75rem 2rem rgba(6, 50, 97, .12);
}

.training-stage__topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .35rem 1rem;
  padding: .8rem 1.15rem;
  background: #eaf5ff;
  border-bottom: 2px solid #b8d8f3;
}

.training-stage__topbar h2,
.training-stage__topbar p {
  margin: 0;
  font-size: 1rem;
}

.training-stage__prompt,
.mission-session-page .training-stage__prompt {
  display: grid;
  place-content: center;
  min-height: clamp(11rem, 34vh, 19rem);
  margin: 0;
  padding: clamp(1.25rem, 6vw, 3.5rem);
  color: var(--blue-950);
  background: #ffffff;
  border: 0;
  border-radius: 0;
  text-align: center;
}

.training-stage__prompt h3 {
  margin: 0 0 .7rem;
  color: var(--blue-950);
  font-size: clamp(1.8rem, 6vw, 3.4rem);
  line-height: 1.15;
}

.training-stage__prompt p,
.mission-session-page .training-stage__prompt {
  max-width: 42rem;
  margin-inline: auto;
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  line-height: 1.55;
}

.training-stage__input,
.mission-session-page .training-stage__input {
  display: grid;
  place-content: center;
  min-height: 7rem;
  margin: 0 1rem;
  padding: 1rem;
  color: #ffffff;
  background: var(--blue-900);
  border: 4px solid #7fd0ff;
  border-radius: .75rem;
  box-shadow: inset 0 0 0 2px #ffffff;
  text-align: center;
}

.training-stage__input:focus,
.training-stage__input:focus-visible {
  outline: 5px solid var(--focus);
  outline-offset: 3px;
}

.training-stage__detected {
  display: grid;
  gap: .25rem;
  margin: 0;
}

.training-stage__input-label {
  font-size: .95rem;
  font-weight: 750;
}

.training-stage__detected strong {
  color: #ffffff;
  font-size: clamp(1.35rem, 4vw, 2rem);
}

.training-stage__feedback,
.mission-session-page .training-stage__feedback {
  min-height: 5rem;
  margin: 0;
  padding: 1rem 1.25rem;
  color: var(--ink);
  background: #ffffff;
  border: 0;
  text-align: center;
}

.training-stage__feedback:not(:empty),
.training-stage__feedback .scenario-feedback:not(:empty) {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.training-stage__shortcuts {
  margin: 0;
  padding: .8rem 1rem;
  color: #183b60;
  background: #eaf5ff;
  border: 0;
  border-top: 2px solid #b8d8f3;
  text-align: center;
}

.training-stage .practice-actions,
.training-stage .simulator-actions {
  justify-content: center;
  margin: 0;
  padding: 1rem;
}

.training-stage__briefing {
  margin: 0;
  padding: 0;
  border: 0;
}

.training-stage__briefing .mission-meta {
  margin: 0;
  padding: .7rem 1rem .45rem;
  background: #eaf5ff;
}

.training-stage__briefing progress {
  display: block;
  width: calc(100% - 2rem);
  height: .85rem;
  margin: 0 1rem;
}

.training-stage__briefing h2 {
  margin: 0;
  padding: .65rem 1rem 0;
  color: var(--blue-950);
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  text-align: center;
}

.training-stage .mission-log-panel {
  margin: 0;
  padding: .75rem 1rem;
  border: 0;
  border-top: 1px solid #b8d8f3;
}

.training-stage .mission-log-panel > summary {
  text-align: center;
}

html[data-theme="dark"]:not([data-contrast="high"]) .practice-session-page,
html[data-theme="dark"]:not([data-contrast="high"]) .mission-session-page,
html[data-theme="dark"]:not([data-contrast="high"]) .training-header,
html[data-theme="dark"]:not([data-contrast="high"]) .training-stage,
html[data-theme="dark"]:not([data-contrast="high"]) .training-stage__topbar,
html[data-theme="dark"]:not([data-contrast="high"]) .training-stage__prompt,
html[data-theme="dark"]:not([data-contrast="high"]) .mission-session-page .training-stage__prompt,
html[data-theme="dark"]:not([data-contrast="high"]) .training-stage__feedback,
html[data-theme="dark"]:not([data-contrast="high"]) .mission-session-page .training-stage__feedback,
html[data-theme="dark"]:not([data-contrast="high"]) .training-stage__shortcuts,
html[data-theme="dark"]:not([data-contrast="high"]) .training-stage__briefing .mission-meta {
  color: #ffffff;
  background: #000000;
  border-color: #8dd1ff;
}

html[data-theme="dark"]:not([data-contrast="high"]) .training-header h1,
html[data-theme="dark"]:not([data-contrast="high"]) .training-stage__prompt,
html[data-theme="dark"]:not([data-contrast="high"]) .training-stage__prompt h3,
html[data-theme="dark"]:not([data-contrast="high"]) .training-stage__briefing h2 {
  color: #ffffff;
}

html[data-contrast="high"] .training-stage,
html[data-contrast="high"] .training-stage__topbar,
html[data-contrast="high"] .training-stage__prompt,
html[data-contrast="high"] .training-stage__feedback,
html[data-contrast="high"] .training-stage__shortcuts {
  color: #000000;
  background: #ffffff;
  border-color: #000000;
  box-shadow: none;
}

html[data-contrast="high"] .training-stage__input {
  color: #ffffff;
  background: #000000;
  border-color: #ffffff;
  box-shadow: 0 0 0 3px #000000;
}

@media (max-width: 32rem) {
  .training-header {
    padding-inline: .5rem;
  }

  .practice-session-page > main,
  .mission-session-page > main {
    width: calc(100% - .5rem);
  }

  .training-stage {
    border-radius: .65rem;
  }

  .training-stage__prompt,
  .mission-session-page .training-stage__prompt {
    min-height: 10rem;
    padding: 1.25rem .9rem;
  }

  .training-stage__input,
  .mission-session-page .training-stage__input {
    margin-inline: .5rem;
  }

  .training-stage__shortcuts {
    font-size: .95rem;
  }
}

.traffic-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin-block: 1rem 1.5rem;
}

.traffic-summary > div {
  padding: 1rem;
  background: var(--surface-soft);
  border: 2px solid var(--border);
  border-radius: 0.75rem;
}

.traffic-summary dt {
  font-weight: 800;
}

.traffic-summary dd {
  margin: 0.25rem 0 0;
  font-size: 2rem;
  font-weight: 850;
}

html[data-theme="dark"] .traffic-summary > div {
  color: #ffffff;
  background: #102846;
  border-color: #69baf3;
}

html[data-contrast="high"] .traffic-summary > div {
  color: #000000;
  background: #ffffff;
  border: 3px solid #000000;
}

/* Full step-by-step manual pages converted from the original Word guides. */
.manual-page main {
  max-width: 72rem;
}

.manual-tools {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-block: 1rem 2rem;
  padding: .85rem;
  border: 2px solid var(--blue-700);
  border-radius: .7rem;
}

.manual-tools a {
  display: inline-block;
  padding: .55rem .75rem;
  font-weight: 800;
  border: 2px solid currentColor;
  border-radius: .45rem;
}

.manual-page h2 {
  margin-top: 2.5rem;
  padding-top: .75rem;
  border-top: 2px solid var(--blue-600);
}

.manual-page h3 {
  margin-top: 2rem;
}

.manual-page h4 {
  margin-top: 1.25rem;
}

.manual-page ol > li,
.manual-page ul > li {
  margin-block: .35rem;
}

.manual-page .table-scroll {
  margin-block: 1rem 1.5rem;
}

.manual-page .back-link {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 2px solid currentColor;
}

.manual-contents {
  margin-block: 1.5rem;
  padding: 1rem 1.25rem;
  background: #eef8ff;
  border: 2px solid var(--blue-700);
  border-radius: .7rem;
}

.manual-procedure {
  margin-block: 1.5rem;
  padding: 1rem 1.25rem;
  border-inline-start: .4rem solid var(--blue-700);
}

.procedure-level {
  font-weight: 800;
}

html[data-theme="dark"]:not([data-contrast="high"]) .manual-tools {
  color: #fff;
  background: #000;
  border-color: #8dd1ff;
}

html[data-theme="dark"]:not([data-contrast="high"]) .manual-tools a {
  color: #fff;
  background: #000;
}

html[data-theme="dark"]:not([data-contrast="high"]) .manual-contents,
html[data-theme="dark"]:not([data-contrast="high"]) .manual-procedure {
  color: #fff;
  background: #000;
  border-color: #8dd1ff;
}

@media (max-width: 32rem) {
  .manual-tools {
    display: grid;
  }
}

.table-scroll:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 3px;
}

.resource-search{display:grid;gap:.85rem;margin-block:1rem;padding:clamp(1rem,3vw,1.5rem);background:#edf7ff;border:2px solid #73afe4;border-radius:.85rem}.resource-search p{margin:0}.resource-search label{display:block;margin-bottom:.35rem;font-weight:850}.resource-search input,.resource-search select{width:min(100%,48rem);min-height:3rem;padding:.65rem .75rem;color:#11243d;background:#fff;border:2px solid #527da8;border-radius:.5rem;font:inherit}.resource-search__actions{display:flex;flex-wrap:wrap;gap:.75rem}.search-results{display:grid;gap:.85rem;padding-left:1.8rem}.search-results article{padding:1rem;background:#fff;border:1px solid #8dbce9;border-left:.4rem solid var(--blue-600);border-radius:.6rem}.search-results h3,.search-results p{margin-block:0 .4rem}.search-result__meta{color:#395776;font-weight:750}.resource-directory{display:grid;gap:.8rem;padding:0;list-style:none}.resource-directory li{display:grid;gap:.3rem;padding:1rem;background:#fff;border:1px solid #9dc6ea;border-radius:.65rem}.resource-directory a{font-weight:850}.resource-directory span{color:#304d6c}html[data-theme="dark"] .resource-search,html[data-theme="dark"] .search-results article,html[data-theme="dark"] .resource-directory li{color:var(--text);background:#102846;border-color:#69baf3}html[data-theme="dark"] .resource-search input,html[data-theme="dark"] .resource-search select{color:#fff;background:#071a31;border-color:#8bd0ff}html[data-theme="dark"] .search-result__meta,html[data-theme="dark"] .resource-directory span{color:#c6e6ff}html[data-contrast="high"] .resource-search,html[data-contrast="high"] .resource-search input,html[data-contrast="high"] .resource-search select,html[data-contrast="high"] .search-results article,html[data-contrast="high"] .resource-directory li{color:#000;background:#fff;border:2px solid #000}@media(max-width:32rem){.resource-search__actions{display:grid}.resource-search__actions button{width:100%}}


/* Final quizzes and locally generated certificates */
.quiz-readiness{margin-block:1rem;padding:1rem;background:#eef8ff;border:2px solid #75addc;border-left-width:.45rem;border-radius:.55rem}.quiz-readiness p{margin-block:.25rem}.quiz-answered{font-weight:800}.quiz-question:has(input:disabled){opacity:.68}.quiz-review li{border:2px solid transparent}.quiz-review--correct{border-left-color:#247344!important}.quiz-review--incorrect{border-left-color:#a5342c!important}.certificate__name{overflow-wrap:anywhere}@media(max-width:32rem){.certificate__details{display:block}.certificate{padding:1rem;border-width:.35rem}.quiz-question{padding:.8rem}}html[data-theme="dark"] .quiz-readiness{color:var(--text);background:#102846;border-color:#69baf3}html[data-contrast="high"] .quiz-readiness{color:#000;background:#fff;border:3px solid #000}
.quiz-question{margin-block:1rem;padding:1rem;background:#fff;border:2px solid #8dbce9;border-radius:.7rem}.quiz-question legend{padding-inline:.35rem;color:var(--blue-950);font-weight:850}.quiz-question label{display:block;margin:.5rem 0;padding:.55rem .65rem;border-radius:.4rem}.quiz-question label:has(input:focus-visible){outline:4px solid var(--focus);outline-offset:2px}.quiz-question input{inline-size:1.2rem;block-size:1.2rem;margin-right:.45rem}.quiz-status,.quiz-review{margin-block:1rem}.quiz-status:not(:empty){padding:1rem;background:#e6f6ff;border-left:.4rem solid var(--blue-700);border-radius:.5rem}.quiz-review li{margin-block:.8rem;padding:.8rem;background:#f5faff;border-radius:.5rem}.certificate{margin-block:2rem;padding:clamp(1.5rem,5vw,3.5rem);text-align:center;background:linear-gradient(145deg,#fff 0%,#eaf6ff 100%);border:.65rem double var(--blue-800);border-radius:1rem;box-shadow:0 1rem 2.5rem rgba(6,50,97,.18)}.certificate__eyebrow{text-transform:uppercase;letter-spacing:.16em;font-weight:900}.certificate__name{margin-block:1rem;padding-bottom:.35rem;color:var(--blue-950);border-bottom:2px solid var(--blue-700);font-family:Georgia,serif;font-size:clamp(2rem,7vw,4rem);font-weight:700}.certificate__course{color:var(--blue-900);font-size:clamp(1.5rem,4vw,2.5rem);font-weight:900}.certificate__details{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2.5rem;margin-block:1.5rem}html[data-theme="dark"] .quiz-question,html[data-theme="dark"] .quiz-review li,html[data-theme="dark"] .certificate{color:var(--text);background:#102846;border-color:#69baf3}html[data-theme="dark"] .quiz-question legend,html[data-theme="dark"] .certificate__name,html[data-theme="dark"] .certificate__course{color:#eaf7ff}html[data-contrast="high"] .quiz-question,html[data-contrast="high"] .quiz-status,html[data-contrast="high"] .quiz-review li,html[data-contrast="high"] .certificate{color:#000;background:#fff;border:3px solid #000;box-shadow:none}@media print{@page{size:landscape;margin:.5in}body.print-certificate>header,body.print-certificate>.accessibility-panel,body.print-certificate>.site-nav,body.print-certificate>.skip-link,body.print-certificate main>*:not(#certificateSection){display:none!important}body.print-certificate main{width:100%;margin:0;padding:0;border:0;box-shadow:none}body.print-certificate #certificateSection{display:block!important;min-height:7in;margin:0;color:#000;background:#fff;border:.55rem double #0b4078;box-shadow:none}body.print-certificate #printCertificate{display:none!important}}


/* Keyboard command practice lab */
.practice-safety{background:#fff4d6;border-left:.45rem solid #b97800}.practice-settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.8rem}.practice-settings p{margin:0}.practice-settings label:not(:has(input)){display:block;margin-bottom:.35rem;font-weight:850}.practice-settings select{width:100%;min-height:3rem;padding:.6rem;color:#10253d;background:#fff;border:2px solid #527da8;border-radius:.5rem;font:inherit}.practice-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-block:1rem}.command-prompt{padding:1rem;background:#e6f6ff;border-left:.45rem solid var(--blue-700);border-radius:.55rem}.key-capture{margin-block:1rem;padding:clamp(1rem,4vw,2rem);background:#073d78;color:#fff;border:4px solid #7fd0ff;border-radius:.85rem;box-shadow:inset 0 0 0 2px #fff}.key-capture:focus-visible{outline:5px solid var(--focus);outline-offset:4px}.practice-status:not(:empty){margin-block:1rem;padding:1rem;background:#eef8ff;border:2px solid #75addc;border-radius:.55rem;font-weight:800}.learn-only-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:.85rem}.learn-only-list article{padding:1rem;background:#f5faff;border:1px solid #9dc6ea;border-radius:.65rem}.learn-only-list h3{margin-top:0}html[data-theme="dark"] .practice-safety,html[data-theme="dark"] .command-prompt,html[data-theme="dark"] .practice-status,html[data-theme="dark"] .learn-only-list article{color:var(--text);background:#102846;border-color:#69baf3}html[data-theme="dark"] .practice-settings select{color:#fff;background:#071a31;border-color:#8bd0ff}html[data-contrast="high"] .practice-safety,html[data-contrast="high"] .command-prompt,html[data-contrast="high"] .key-capture,html[data-contrast="high"] .practice-status,html[data-contrast="high"] .learn-only-list article,html[data-contrast="high"] .practice-settings select{color:#000;background:#fff;border:3px solid #000;box-shadow:none}@media(max-width:32rem){.practice-actions{display:grid}.practice-actions button{width:100%}}

/* Keep standard dark mode strictly black, white, and outlined. */
html[data-theme="dark"]:not([data-contrast="high"]) body > main,
html[data-theme="dark"]:not([data-contrast="high"]) main > section,
html[data-theme="dark"]:not([data-contrast="high"]) main > nav,
html[data-theme="dark"]:not([data-contrast="high"]) form,
html[data-theme="dark"]:not([data-contrast="high"]) .lesson-nav,
html[data-theme="dark"]:not([data-contrast="high"]) .course-lesson-list li,
html[data-theme="dark"]:not([data-contrast="high"]) .progress-list li,
html[data-theme="dark"]:not([data-contrast="high"]) .resource-search,
html[data-theme="dark"]:not([data-contrast="high"]) .search-results article,
html[data-theme="dark"]:not([data-contrast="high"]) .resource-directory li,
html[data-theme="dark"]:not([data-contrast="high"]) .quiz-readiness,
html[data-theme="dark"]:not([data-contrast="high"]) .quiz-question,
html[data-theme="dark"]:not([data-contrast="high"]) .quiz-review li,
html[data-theme="dark"]:not([data-contrast="high"]) .certificate,
html[data-theme="dark"]:not([data-contrast="high"]) .practice-safety,
html[data-theme="dark"]:not([data-contrast="high"]) .command-prompt,
html[data-theme="dark"]:not([data-contrast="high"]) .practice-status,
html[data-theme="dark"]:not([data-contrast="high"]) .learn-only-list article {
  color: #ffffff;
  background: #000000;
  border-color: #8dd1ff;
  box-shadow: none;
}

html[data-theme="dark"]:not([data-contrast="high"]) h1,
html[data-theme="dark"]:not([data-contrast="high"]) h2,
html[data-theme="dark"]:not([data-contrast="high"]) h3,
html[data-theme="dark"]:not([data-contrast="high"]) .quiz-question legend,
html[data-theme="dark"]:not([data-contrast="high"]) .certificate__name,
html[data-theme="dark"]:not([data-contrast="high"]) .certificate__course {
  color: #ffffff;
}

html[data-theme="dark"]:not([data-contrast="high"]) input,
html[data-theme="dark"]:not([data-contrast="high"]) select,
html[data-theme="dark"]:not([data-contrast="high"]) textarea,
html[data-theme="dark"]:not([data-contrast="high"]) .practice-settings select,
html[data-theme="dark"]:not([data-contrast="high"]) .resource-search input,
html[data-theme="dark"]:not([data-contrast="high"]) .resource-search select {
  color: #ffffff;
  background: #000000;
  border: 2px solid #8dd1ff;
}

html[data-theme="dark"]:not([data-contrast="high"]) .lesson-completion button:disabled {
  color: #ffffff;
  background: #000000;
  border-color: #72dfa4;
}

/* Searchable, collapsible course catalogs */
.catalog-tools input[type="search"] {
  width: min(100%, 38rem);
  min-height: 3rem;
  padding: .65rem;
  color: var(--ink);
  background: #ffffff;
  border: 2px solid #7da9d8;
  border-radius: .65rem;
  font: inherit;
}

.catalog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

.catalog-shortcuts,
.course-progress details,
main > section[id$="-lessons"] > details {
  margin-block: 1rem;
  border: 2px solid var(--border);
  border-radius: .65rem;
}

.catalog-shortcuts > summary,
.course-progress details > summary,
main > section[id$="-lessons"] > details > summary {
  padding: .8rem 1rem;
  color: var(--blue-950);
  font-weight: 850;
  cursor: pointer;
}

.catalog-shortcuts[open] > summary,
.course-progress details[open] > summary,
main > section[id$="-lessons"] > details[open] > summary {
  border-bottom: 2px solid var(--border);
}

.catalog-shortcuts > nav,
.course-progress details > :not(summary),
main > section[id$="-lessons"] > details > :not(summary) {
  margin-inline: 1rem;
}

html[data-theme="dark"]:not([data-contrast="high"]) .catalog-shortcuts,
html[data-theme="dark"]:not([data-contrast="high"]) .course-progress details,
html[data-theme="dark"]:not([data-contrast="high"]) main > section[id$="-lessons"] > details {
  color: #ffffff;
  background: #000000;
  border-color: #8dd1ff;
}

html[data-theme="dark"]:not([data-contrast="high"]) .catalog-shortcuts > summary,
html[data-theme="dark"]:not([data-contrast="high"]) .course-progress details > summary,
html[data-theme="dark"]:not([data-contrast="high"]) main > section[id$="-lessons"] > details > summary {
  color: #ffffff;
}

.manual-review-date {
  padding-top: .75rem;
  border-top: 1px solid currentColor;
  font-size: .95rem;
}

.simulator-setup,
.simulator {
  max-width: 56rem;
  margin-inline: auto;
}

.mission-mode-picker {
  max-width: 56rem;
  margin-inline: auto;
  border-left: .45rem solid var(--blue-600);
}

.mission-mode-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}

.mission-mode-actions a {
  display: block;
  min-height: 7rem;
  padding: 1rem;
  color: #ffffff;
  background: var(--blue-700);
  border: 2px solid var(--blue-950);
  border-radius: .65rem;
  text-align: left;
  text-decoration: none;
}

.mission-mode-actions a:hover,
.mission-mode-actions a:focus-visible {
  color: #ffffff;
  background: var(--blue-950);
}

html[data-theme="dark"]:not([data-contrast="high"]) .mission-mode-actions a {
  color: #ffffff;
  background: #073d78;
  border-color: #8dd1ff;
}

html[data-theme="dark"]:not([data-contrast="high"]) .mission-mode-actions a:hover,
html[data-theme="dark"]:not([data-contrast="high"]) .mission-mode-actions a:focus-visible {
  color: #ffffff;
  background: #0d5ca8;
}

html[data-contrast="high"] .mission-mode-actions a {
  color: #ffffff;
  background: #000000;
  border-color: #000000;
}

html[data-contrast="high"] .mission-mode-actions a:hover,
html[data-contrast="high"] .mission-mode-actions a:focus-visible {
  color: #000000;
  background: #ffde00;
}

.mission-mode-actions a strong,
.mission-mode-actions a span {
  display: block;
}

.mission-mode-actions a strong {
  margin-bottom: .45rem;
  font-size: 1.15em;
}

.mission-mode-actions a span {
  font-weight: 600;
  line-height: 1.45;
}

.mission-mode {
  margin-block: 1rem;
}

.practice-session-page > header {
  padding-block: 1.25rem;
}

.practice-session-page > main {
  width: min(100% - 1rem, 56rem);
}

.practice-session-shell {
  margin-inline: auto;
}

.practice-session-shortcuts {
  padding: .8rem 1rem;
  background: var(--surface-soft);
  border-left: .35rem solid var(--blue-600);
}

.command-setup-page > header,
.mission-setup-page > header,
.mission-session-page > header {
  padding-block: 1.25rem;
}

.command-setup-page > main,
.mission-setup-page > main,
.mission-session-page > main {
  width: min(100% - 1rem, 56rem);
}

.mission-keyboard-setup {
  margin-inline: auto;
}

.mission-settings-menu {
  display: grid;
  gap: 1rem;
}

.mission-setting-toggle,
.mission-start-option {
  display: grid;
  gap: .25rem;
  width: 100%;
  min-height: 5rem;
  padding: 1rem;
  text-align: left;
}

.mission-setting-label,
.mission-setting-value,
.mission-setting-hint {
  display: block;
}

.mission-setting-label {
  font-size: .95rem;
}

.mission-setting-value {
  font-size: 1.1rem;
}

.mission-setting-hint {
  font-size: .9rem;
  font-weight: 650;
}

.mission-setting-toggle:focus-visible,
.mission-start-option:focus-visible {
  outline: 5px solid var(--focus);
  outline-offset: 3px;
  border-left-width: .65rem;
}

.mission-start-option {
  color: #ffffff;
  background: #0b6b3a;
  border-color: #064b29;
  font-size: 1.1rem;
}

html[data-theme="dark"]:not([data-contrast="high"]) .mission-setting-toggle {
  color: #ffffff;
  background: #000000;
  border-color: #8dd1ff;
}

.mission-support {
  max-width: 56rem;
  margin: 1rem auto;
  border: 2px solid var(--border);
  border-radius: .7rem;
}

.mission-support > summary {
  padding: .9rem 1rem;
  color: var(--blue-950);
  font-weight: 850;
  cursor: pointer;
}

.mission-support[open] > summary {
  border-bottom: 2px solid var(--border);
}

.mission-support > div {
  padding: 0 1rem 1rem;
}

.mission-topic-list {
  columns: 2 16rem;
  padding-left: 1.4rem;
}

html[data-theme="dark"] .mission-support {
  color: #ffffff;
  background: #000000;
  border-color: #8dd1ff;
}

html[data-theme="dark"] .mission-support > summary {
  color: #ffffff;
}

html[data-contrast="high"] .mission-support {
  color: #000000;
  background: #ffffff;
  border-color: #000000;
}

.simulator {
  border: 0.2rem solid var(--border-color, #27638f);
}

.simulator-progress progress {
  width: 100%;
  min-height: 1.5rem;
}

.scenario-problem {
  font-size: 1.15em;
  font-weight: 700;
}

.screen-reader-transcript {
  margin-block: 1rem;
  padding: 1rem;
  border-inline-start: 0.4rem solid #1875b8;
  background: #eef8ff;
}

.scenario-choices {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.scenario-choices button {
  width: 100%;
  text-align: start;
}

.scenario-feedback:not(:empty) {
  margin-block: 1rem;
  padding: 1rem;
  border: 0.2rem solid currentColor;
}

.scenario-feedback.is-correct { color: #075f2c; }
.scenario-feedback.is-incorrect { color: #8a2600; }
.simulator-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

html[data-theme="dark"] .screen-reader-transcript {
  color: #ffffff;
  background: #071d2c;
  border-color: #7fd0ff;
}

html[data-theme="dark"] .scenario-feedback.is-correct { color: #9dffc4; }
html[data-theme="dark"] .scenario-feedback.is-incorrect { color: #ffc0a8; }

.mission-control-station {
  margin-block: 1.25rem;
  padding: 1.25rem;
  color: #ffffff;
  background: #071a2f;
  border: 4px solid #69baf3;
  border-radius: 0.8rem;
  box-shadow: inset 0 0 0 2px #ffffff;
}

.mission-control-station:focus {
  outline: 5px solid var(--focus);
  outline-offset: 4px;
}

.mission-control-station h3 {
  color: #ffffff;
}

.mission-session-page .focused-mission {
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--border);
}

.mission-briefing,
.mission-response,
.mission-log-panel,
.mission-session-page .simulator-actions,
.mission-session-page .focused-mission > p {
  margin: 0;
  padding: 1rem;
}

.mission-briefing {
  border-left: .45rem solid var(--blue-600);
}

.mission-briefing progress {
  width: 100%;
}

.mission-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .35rem 1rem;
  margin-top: 0;
  font-weight: 800;
}

.mission-session-page .mission-control-station {
  margin: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.mission-response {
  background: #eef8ff;
}

.mission-response h3 {
  margin-top: 0;
}

.mission-response .scenario-feedback:not(:empty) {
  margin-bottom: 0;
}

.mission-log-panel {
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
}

.mission-log-panel > summary {
  font-weight: 850;
  cursor: pointer;
}

html[data-theme="dark"]:not([data-contrast="high"]) .mission-session-page .focused-mission,
html[data-theme="dark"]:not([data-contrast="high"]) .mission-briefing,
html[data-theme="dark"]:not([data-contrast="high"]) .mission-log-panel {
  color: #ffffff;
  background: #000000;
  border-color: #8dd1ff;
}

html[data-theme="dark"]:not([data-contrast="high"]) .mission-response {
  color: #ffffff;
  background: #071d2c;
}

.mission-log {
  padding-left: 1.75rem;
}

.mission-log li {
  margin-block: 0.65rem;
  padding: 0.65rem;
  background: #eef8ff;
  border-left: 0.35rem solid var(--blue-700);
}

html[data-theme="dark"] .mission-log li {
  color: #ffffff;
  background: #102846;
  border-color: #69baf3;
}

@media (max-width: 32rem) {
  .mission-mode-actions {
    grid-template-columns: 1fr;
  }

  .catalog-actions {
    display: grid;
  }

  .catalog-actions button {
    width: 100%;
  }
}

/* Keep the training stage above older simulator and practice component rules. */
.practice-session-page > header.training-header,
.mission-session-page > header.training-header {
  padding-block: .8rem;
}

.practice-session-page .training-stage,
.mission-session-page .training-stage.focused-mission {
  padding: 0;
  background: #ffffff;
  border: 3px solid var(--blue-700);
  border-radius: 1rem;
}

.practice-session-page .training-stage .training-stage__prompt,
.mission-session-page .training-stage .training-stage__prompt {
  min-height: clamp(11rem, 34vh, 19rem);
  margin: 0;
  padding: clamp(1.25rem, 6vw, 3.5rem);
  color: var(--blue-950);
  background: #ffffff;
  border: 0;
  border-radius: 0;
  text-align: center;
}

.practice-session-page .training-stage .training-stage__input,
.mission-session-page .training-stage .training-stage__input {
  min-height: 7rem;
  margin: 0 1rem;
  padding: 1rem;
  color: #ffffff;
  background: var(--blue-900);
  border: 4px solid #7fd0ff;
  border-radius: .75rem;
  box-shadow: inset 0 0 0 2px #ffffff;
}

.practice-session-page .training-stage .training-stage__feedback,
.practice-session-page .training-stage .training-stage__feedback:not(:empty),
.mission-session-page .training-stage .training-stage__feedback,
.mission-session-page .training-stage .training-stage__feedback:not(:empty) {
  min-height: 5rem;
  margin: 0;
  padding: 1rem 1.25rem;
  color: var(--ink);
  background: #ffffff;
  border: 0;
  text-align: center;
}

.mission-session-page .training-stage .training-stage__briefing {
  margin: 0;
  padding: 0;
  border: 0;
}

.practice-session-page .training-stage .training-stage__shortcuts,
.mission-session-page .training-stage .training-stage__shortcuts {
  margin: 0;
  padding: .8rem 1rem;
  color: #183b60;
  background: #eaf5ff;
  border: 0;
  border-top: 2px solid #b8d8f3;
  text-align: center;
}

html[data-theme="dark"]:not([data-contrast="high"]) .practice-session-page .training-stage,
html[data-theme="dark"]:not([data-contrast="high"]) .mission-session-page .training-stage.focused-mission,
html[data-theme="dark"]:not([data-contrast="high"]) .practice-session-page .training-stage .training-stage__prompt,
html[data-theme="dark"]:not([data-contrast="high"]) .mission-session-page .training-stage .training-stage__prompt,
html[data-theme="dark"]:not([data-contrast="high"]) .practice-session-page .training-stage .training-stage__feedback,
html[data-theme="dark"]:not([data-contrast="high"]) .mission-session-page .training-stage .training-stage__feedback {
  color: #ffffff;
  background: #000000;
  border-color: #8dd1ff;
}

html[data-theme="dark"]:not([data-contrast="high"]) .practice-session-page .training-stage .training-stage__shortcuts,
html[data-theme="dark"]:not([data-contrast="high"]) .mission-session-page .training-stage .training-stage__shortcuts {
  color: #ffffff;
  background: #000000;
  border-color: #8dd1ff;
}

@media (max-width: 32rem) {
  .practice-session-page .training-stage .training-stage__prompt,
  .mission-session-page .training-stage .training-stage__prompt {
    min-height: 10rem;
    padding: 1.25rem .9rem;
  }

  .practice-session-page .training-stage .training-stage__input,
  .mission-session-page .training-stage .training-stage__input {
    margin-inline: .5rem;
  }
}

.practice-session-page .training-stage .practice-actions button,
.practice-session-page .training-stage .practice-actions .button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .65rem 1rem;
  color: #ffffff;
  background: var(--blue-700);
  border: 2px solid var(--blue-700);
  border-radius: .65rem;
  font: inherit;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}

.practice-session-page .training-stage .practice-actions button:hover,
.practice-session-page .training-stage .practice-actions .button-link:hover {
  color: #ffffff;
  background: var(--blue-900);
  border-color: var(--blue-900);
}

html[data-theme="dark"]:not([data-contrast="high"]) .practice-session-page .training-stage .practice-actions button,
html[data-theme="dark"]:not([data-contrast="high"]) .practice-session-page .training-stage .practice-actions .button-link {
  color: #ffffff;
  background: #000000;
  border-color: #8dd1ff;
}

html[data-contrast="high"] .practice-session-page .training-stage .practice-actions button,
html[data-contrast="high"] .practice-session-page .training-stage .practice-actions .button-link {
  color: #ffffff;
  background: #000000;
  border-color: #000000;
}

@media (max-width: 32rem) {
  .practice-session-page .training-stage .practice-actions button,
  .practice-session-page .training-stage .practice-actions .button-link {
    width: 100%;
  }
}

.practice-session-page .training-stage .training-stage__input.is-correct {
  color: #ffffff;
  background: #086b38;
  border-color: #72eba6;
  box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 3px #086b38;
}

.practice-session-page .training-stage .training-stage__input.is-incorrect {
  color: #ffffff;
  background: #8f211c;
  border-color: #ffaaa4;
  box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 3px #8f211c;
}

.practice-session-page .training-stage .training-stage__input.is-correct strong,
.practice-session-page .training-stage .training-stage__input.is-incorrect strong {
  color: #ffffff;
}

html[data-contrast="high"] .practice-session-page .training-stage .training-stage__input.is-correct {
  background: #086b38;
  border-color: #ffffff;
}

html[data-contrast="high"] .practice-session-page .training-stage .training-stage__input.is-incorrect {
  background: #8f211c;
  border-color: #ffffff;
}

.training-results {
  width: 100%;
  padding: clamp(1.25rem, 5vw, 2.5rem);
  color: var(--ink);
  background: #ffffff;
}

.training-results h2 {
  margin-top: 0;
  color: var(--blue-950);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
}

.training-results h3 {
  margin-bottom: .35rem;
  color: var(--blue-950);
}

.training-results ul {
  margin-top: .35rem;
}

.training-results__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.25rem;
}

.training-results__actions button,
.training-results__actions .button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .65rem 1rem;
  color: #ffffff;
  background: var(--blue-700);
  border: 2px solid var(--blue-700);
  border-radius: .65rem;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
}

html[data-theme="dark"] .training-results {
  color: #ffffff;
  background: #000000;
}

html[data-theme="dark"] .training-results h2,
html[data-theme="dark"] .training-results h3 {
  color: #ffffff;
}

html[data-contrast="high"] .training-results {
  color: #000000;
  background: #ffffff;
}

html[data-contrast="high"] .training-results h2,
html[data-contrast="high"] .training-results h3 {
  color: #000000;
}

@media (max-width: 32rem) {
  .training-results__actions {
    display: grid;
  }

  .training-results__actions button,
  .training-results__actions .button-link {
    width: 100%;
  }
}