/* High-contrast answer choices: readable on iPad and in bright field conditions. */
.evidence button {
  background: linear-gradient(135deg, #182f47, #476b80);
  color: #ffffff;
}

.evidence button .small {
  display: block;
  margin-top: .3rem;
  color: #f7fbff;
  font-size: .92rem;
  line-height: 1.4;
  font-weight: 600;
}

/* The lesson is the primary learning surface; module navigation follows it. */
.learning-layout {
  max-width: 850px;
}

.learning-layout .lesson {
  margin-top: 1.5rem;
}

.lesson > p {
  max-width: 760px;
  font-size: 1.05rem;
  line-height: 1.75;
}

.module-nav {
  margin-top: 1.25rem;
}

.learning-feedback {
  margin-top: 1.25rem;
  padding: 1.25rem;
  border-radius: 10px;
  border-left: 5px solid #1a5fa8;
  background: #eef6ff;
  color: #0b1d34;
}

.learning-feedback.is-correct {
  border-left-color: #17745d;
  background: #e7f5ef;
}

.learning-feedback.needs-review {
  border-left-color: #a35520;
  background: #fff3e6;
}

.learning-feedback h3 { margin: .2rem 0 .8rem; }
.learning-feedback li { margin: .55rem 0; }

.reader-controls {
  display: flex;
  justify-content: flex-end;
  align-items: end;
  flex-wrap: wrap;
  gap: .65rem;
  margin-bottom: 1rem;
}

.reader-controls label {
  display: grid;
  gap: .2rem;
  color: #526174;
  font-size: .78rem;
  font-weight: 700;
}

.reader-controls select {
  min-height: 40px;
  max-width: 190px;
  border: 1px solid #b9c9da;
  border-radius: 7px;
  background: #fff;
  color: #0b1d34;
  padding: .35rem .5rem;
  font: inherit;
}

.reader-controls .reader { margin-left: .1rem; }

@media(max-width:520px) {
  .reader-controls { justify-content: stretch; }
  .reader-controls label { flex: 1 1 42%; }
  .reader-controls select { max-width: none; width: 100%; }
  .reader-controls .reader { flex: 1 1 100%; }
}

/* Course identity: the selected course carries its own DolaOS color family. */
.steps .step.on { background: var(--blue); }
.choice.selected { border-color: var(--blue); background: var(--course-soft); }
.module.done .module-num { background: var(--good); }
.learning-feedback { border-left-color: var(--blue); background: var(--course-soft); }
.learning-feedback.is-correct { border-left-color: var(--good); background: var(--course-soft); }
.reader-controls .reader,
.module-nav .button.secondary { border-color: color-mix(in srgb, var(--blue) 35%, #d9dfeb); }

/* The Flashcard Studio controls are primary learner actions, never disabled-looking. */
.grid .card .button.secondary {
  background: #123d6b;
  color: #fff;
  border: 1px solid #123d6b;
  box-shadow: 0 2px 0 #082847;
}

.grid .card .button.secondary:hover,
.grid .card .button.secondary:focus-visible {
  background: #0c2f54;
  border-color: #0c2f54;
  outline: 3px solid color-mix(in srgb, var(--blue) 35%, #fff);
  outline-offset: 2px;
}

/* Learner workspace: construction texture stays outside the reading surfaces. */
body {
  background:
    linear-gradient(115deg, rgba(6, 25, 48, .96), rgba(13, 73, 103, .82) 45%, rgba(114, 58, 103, .68)),
    url('training/house-construction-cutaway.png') center / cover fixed;
}

.wrap {
  position: relative;
}

.learner-hub {
  position: relative;
  isolation: isolate;
  padding: clamp(1.1rem, 3vw, 2.2rem);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 18px;
  background: rgba(247, 249, 252, .91);
  box-shadow: 0 18px 48px rgba(3, 17, 35, .24);
  overflow: hidden;
}

.learner-hub::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .24;
  background:
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(147, 91, 24, .22) 40px 42px),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(147, 91, 24, .16) 40px 42px);
  pointer-events: none;
}

/* Program colors stay consistent anywhere the three learning choices appear. */
.academy-open { background: #e8b94c !important; color: #172333 !important; }
.studio-open { background: #174a7c !important; color: #fff !important; border-color: #174a7c !important; }
.recognition-open { background: #117b72 !important; color: #fff !important; border-color: #117b72 !important; }

.academy-open:hover, .academy-open:focus-visible { background: #d5a53c !important; }
.studio-open:hover, .studio-open:focus-visible { background: #0d355c !important; border-color: #0d355c !important; }
.recognition-open:hover, .recognition-open:focus-visible { background: #0a5f58 !important; border-color: #0a5f58 !important; }

/* Each course carries its own color code, including Mold's green family. */
.course-card { --course:#1a5fa8; --course-deep:#0c467f; border-top: 6px solid var(--course); }
.course-card .eyebrow { color: var(--course-deep); }
.course-card .course-open { background: var(--course) !important; color: #fff !important; }
.course-card .course-open:hover, .course-card .course-open:focus-visible { background: var(--course-deep) !important; }
.course-hud { --course:#9b6d11; --course-deep:#6d4a08; }
.course-property { --course:#1a5fa8; --course-deep:#0c467f; }
.course-hvac { --course:#bd5a12; --course-deep:#863c09; }
.course-icc { --course:#6650a4; --course-deep:#463176; }
.course-mold { --course:#17745d; --course-deep:#0c533f; }
.course-termite { --course:#88572d; --course-deep:#5f381b; }
.course-gc { --course:#a63a35; --course-deep:#74231f; }

.course-actions { display: grid; gap: .55rem; margin-top: auto; }
.course-actions .button { width: 100%; text-align: center; }

.guide-panel {
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: var(--course-soft);
}
.guide-panel h3 { margin: .2rem 0 .4rem; }
.guide-panel p { margin: .35rem 0; }
.guide-panel ul { margin: .6rem 0 0; padding-left: 1.15rem; }
.guide-panel li { margin: .38rem 0; }
.guide-panel a { color: var(--course-deep); font-weight: 700; }
.practicum-path { margin-top: 1.5rem; }
.practicum-path h2 { margin: .25rem 0; }
.certificate { max-width: 850px; margin: 2rem auto; }
.onboarding, .training-unit { max-width: 980px; margin: 0 auto; }
.training-card.complete { border-top: 5px solid #17745d; }
.path-strip { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; margin:1.25rem 0 1.75rem; }
.path-step { padding:.45rem .75rem; border:1px solid #b8c9dc; border-radius:999px; background:#fff; color:#344960; font-size:.86rem; font-weight:700; }
.path-step.active { background:#0d5d87; border-color:#0d5d87; color:#fff; }
.path-arrow { color:#9a6b12; font-weight:800; }
.required-library, .optional-library { margin:1.5rem 0; padding:1.25rem; border:1px solid rgba(190,206,224,.92); border-radius:16px; background:rgba(255,255,255,.78); box-shadow:0 10px 26px rgba(7,26,49,.08); }
.optional-library { background:rgba(239,246,252,.83); border-left:5px solid #246797; }
.library-heading { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:1rem; }
.library-heading h2 { margin:.15rem 0 .35rem; }
.library-heading p { margin:.25rem 0; }
.library-badge { flex:0 0 auto; padding:.4rem .65rem; border-radius:999px; background:#e6eef7; color:#224568; font-size:.8rem; font-weight:800; }
.video-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.video-grid .training-card { display:flex; flex-direction:column; gap:.55rem; padding:18px; }
.video-grid .training-card h3, .video-card h3 { margin:.1rem 0; }
.video-grid .training-card .button, .resource-link { margin-top:auto; align-self:flex-start; }
.video-card { display:flex; flex-direction:column; gap:.55rem; padding:18px; border:1px solid #d2dfeb; border-radius:12px; background:rgba(255,255,255,.92); }
.video-card p { margin:0; color:#4c6076; }
.resource-link { text-decoration:none; }
.training-media { max-width:800px; }
.video-slot { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; min-height:126px; padding:1rem 1.25rem; border-radius:12px; color:#fff; background:linear-gradient(135deg,#071a31,#246797); }
.video-slot strong { display:block; font-size:1.05rem; }
.video-slot span { color: #d9e7f6; font-size: .9rem; }
.play-mark { display:grid; place-items:center; width:46px; height:46px; padding-left:3px; border-radius:50%; background:#e8b94c; color:#132a43 !important; font-size:1.05rem !important; }
.resource-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.8rem 0; border-bottom:1px solid #d9dfeb; font-size:.9rem; }
.resource-row a { color:#164e7b; }
.text-resource { padding:0; border:0; background:transparent; color:#164e7b; text-decoration:underline; cursor:pointer; font:inherit; text-align:left; }
.resource-row span { color:#66798d; }

/* Readiness intro remains readable over the photographic page background. */
.onboarding-intro { margin:0 0 1rem; padding:1rem 1.25rem; border:1px solid rgba(255,255,255,.38); border-radius:14px; background:rgba(7,24,44,.94); color:#f7fbff; box-shadow:0 12px 30px rgba(0,0,0,.2); }
.onboarding-intro .eyebrow { color:#f0c65c; }
.onboarding-intro h1 { margin:.25rem 0 .5rem; color:#fff; font-size:clamp(1.5rem,2.4vw,2rem); line-height:1.18; }
.onboarding-intro p:not(.eyebrow) { max-width:72ch; margin:.35rem 0 0; color:#e8f0f8; font-size:1.05rem; line-height:1.55; }
.path-step.complete { background:#17745d; border-color:#17745d; color:#fff; }
.path-step.ready { background:#e8b94c; border-color:#c59627; color:#11253d; box-shadow:0 0 0 3px rgba(232,185,76,.22); }
.readiness-continue { min-height:48px; padding:.8rem 1.15rem; font-weight:800; transition:background .18s ease, box-shadow .18s ease, transform .18s ease; }
.readiness-continue.locked:disabled { opacity:1; border:1px solid #b4c3d2; background:#dce4ec; color:#40556b; cursor:not-allowed; }
.readiness-continue.ready { border:1px solid #146b50; background:#17745d; color:#fff; box-shadow:0 0 0 3px rgba(23,116,93,.18),0 8px 20px rgba(16,91,66,.2); }
.readiness-continue.ready:hover { background:#105d48; transform:translateY(-1px); }
.readiness-tracking-note { color:#17324d; font-size:.95rem; line-height:1.5; }

@media print {
  header, .button, .env { display: none !important; }
  body { background: #fff !important; }
  .wrap { padding: 0 !important; }
  .certificate { border: 0 !important; box-shadow: none !important; }
}

@media (max-width:700px) {
  body { background-attachment: scroll; }
  .learner-hub { padding: 1rem; border-radius: 12px; }
  .video-grid { grid-template-columns:1fr; }
  .library-heading { display:block; }
  .library-badge { display:inline-block; margin-top:.7rem; }
  .video-slot { grid-template-columns:auto 1fr; }
  .video-slot .button { grid-column:1 / -1; width:100%; text-align:center; }
  .resource-row { display:block; }
  .resource-row span { display:block; margin-top:.25rem; }
}

@media (max-width:700px) {
  .onboarding-intro { padding:.9rem 1rem; }
  .onboarding-intro h1 { font-size:1.55rem; }
  .onboarding-intro p:not(.eyebrow) { font-size:1rem; }
  .readiness-continue { width:100%; text-align:center; }
}