/* JPL course pages — shared styles */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #050a18; color: #f0f6ff; font-family: 'Helvetica Neue', Arial, sans-serif; min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; z-index: 0; background: radial-gradient(circle at 15% 20%, rgba(255,181,71,0.10) 0%, transparent 45%), radial-gradient(circle at 85% 25%, rgba(3,255,255,0.05) 0%, transparent 40%), radial-gradient(circle at 50% 100%, rgba(64,151,201,0.08) 0%, transparent 60%); pointer-events: none; }
body > * { position: relative; z-index: 2; }
.topbar { width: 100%; height: 60px; background: rgba(10,23,49,0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(3,255,255,0.12); display: flex; align-items: center; justify-content: space-between; padding: 0 18px; position: sticky; top: 0; }
.topbar a.back { color: #03ffff; text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }
.topbar .brand { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: #8895a8; font-weight: 800; }
.wrap { max-width: 760px; margin: 0 auto; padding: 26px 16px 60px; }
.hero { text-align: center; margin-bottom: 8px; }
.hero .eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #03ffff; font-weight: 800; }
.hero h1 { font-size: 28px; font-weight: 800; margin: 8px 0 6px; letter-spacing: -0.01em; }
.hero p { color: #aab3c4; font-size: 13px; line-height: 1.6; max-width: 580px; margin: 0 auto; }
.lang-toggle { display: inline-flex; gap: 4px; margin: 16px auto; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 999px; padding: 4px; }
.lang-toggle button { border: none; background: transparent; color: #aab3c4; font-size: 12px; font-weight: 700; padding: 6px 16px; border-radius: 999px; cursor: pointer; letter-spacing: 0.04em; }
.lang-toggle button.active { background: #03ffff; color: #042027; }
.banner { border-radius: 14px; padding: 14px 16px; margin: 14px 0 20px; font-size: 13px; line-height: 1.55; display: none; }
.banner.done { display: block; background: rgba(27,219,160,0.10); border: 1px solid rgba(27,219,160,0.4); color: #b9f5e0; }
.banner.done strong { color: #1bdba0; }
.card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; padding: 20px; margin-bottom: 14px; }
.card h2 { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 8px; letter-spacing: 0.01em; }
.card h2 .num { color: #03ffff; margin-inline-end: 8px; }
.card p { color: #cfd8e6; font-size: 13.5px; line-height: 1.65; margin-bottom: 8px; }
.card ul { list-style: none; margin: 6px 0 4px; }
.card ul li { position: relative; padding-inline-start: 18px; color: #cfd8e6; font-size: 13.5px; line-height: 1.6; margin-bottom: 6px; }
.card ul li::before { content: ''; position: absolute; inset-inline-start: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #03ffff; }
.callout { background: rgba(255,181,71,0.08); border: 1px solid rgba(255,181,71,0.28); border-radius: 12px; padding: 12px 14px; color: #ffd9a6; font-size: 12.5px; line-height: 1.6; margin-top: 6px; }
.contacts { display: grid; gap: 8px; margin-top: 8px; }
.contact { display: flex; align-items: baseline; gap: 10px; background: rgba(3,255,255,0.05); border: 1px solid rgba(3,255,255,0.18); border-radius: 10px; padding: 10px 12px; }
.contact b { color: #03ffff; font-size: 16px; min-width: 46px; }
.contact span { color: #cfd8e6; font-size: 12.5px; line-height: 1.5; }
/* quiz */
.quiz-intro { color: #aab3c4; font-size: 13px; line-height: 1.55; margin-bottom: 14px; }
.q { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.q h4 { font-size: 13.5px; font-weight: 700; color: #fff; margin-bottom: 10px; line-height: 1.5; }
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border: 1px solid rgba(255,255,255,0.1); border-radius: 9px; margin-bottom: 7px; cursor: pointer; color: #cfd8e6; font-size: 13px; line-height: 1.45; transition: border-color .15s, background .15s; }
.opt:hover { border-color: rgba(3,255,255,0.35); }
.opt input { margin-top: 2px; accent-color: #03ffff; flex: none; }
.opt.correct { border-color: rgba(27,219,160,0.6); background: rgba(27,219,160,0.08); }
.opt.wrong { border-color: rgba(232,52,78,0.6); background: rgba(232,52,78,0.08); }
.q-feedback { font-size: 12.5px; line-height: 1.5; margin-top: 8px; }
.q-feedback.ok { color: #1bdba0; }
.q-feedback.wrong { color: #ff9aa8; }
.quiz-result { margin-top: 12px; font-size: 13px; font-weight: 700; padding: 10px 12px; border-radius: 10px; display: none; }
.quiz-result.ok { display: block; color: #1bdba0; background: rgba(27,219,160,0.08); border: 1px solid rgba(27,219,160,0.35); }
.quiz-result.wrong { display: block; color: #ff9aa8; background: rgba(232,52,78,0.08); border: 1px solid rgba(232,52,78,0.35); }
.declare { background: rgba(3,255,255,0.05); border: 1px solid rgba(3,255,255,0.25); border-radius: 14px; padding: 18px; margin-top: 8px; display: none; }
.declare label { display: flex; gap: 10px; align-items: flex-start; color: #cfd8e6; font-size: 13px; line-height: 1.55; cursor: pointer; }
.declare input { margin-top: 3px; width: 17px; height: 17px; accent-color: #03ffff; flex: none; }
.btn { display: inline-block; border: none; border-radius: 10px; padding: 13px 22px; font-size: 14px; font-weight: 800; letter-spacing: 0.03em; cursor: pointer; margin-top: 14px; text-decoration: none; }
.btn-primary { background: #03ffff; color: #042027; }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-secondary { background: rgba(3,255,255,0.12); color: #03ffff; border: 1px solid rgba(3,255,255,0.4); }
.loading { text-align: center; color: #8895a8; padding: 40px; }
.prereq { text-align: center; font-size: 12px; color: #8fa0b5; margin-bottom: 6px; }
.prereq a { color: #03ffff; }
.note { text-align: center; color: #6b7588; font-size: 11px; line-height: 1.5; margin-top: 20px; }
[dir="rtl"] { font-family: 'Tajawal', sans-serif; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: #0a1731; border: 1px solid rgba(3,255,255,0.3); color: #fff; padding: 12px 18px; border-radius: 10px; font-size: 13px; opacity: 0; transition: opacity .25s; z-index: 50; }
.toast.show { opacity: 1; }
/* scenarios */
.scenario-head { font-size: 16px; font-weight: 800; color: #fff; margin: 18px 0 10px; letter-spacing: 0.01em; }
.scenario { border-color: rgba(255,181,71,0.30); }
.scenario h2 { color: #ffd9a6; }
.scenario .sit { background: rgba(255,181,71,0.07); border: 1px solid rgba(255,181,71,0.22); border-radius: 12px; padding: 12px 14px; color: #ffe6c2; font-size: 13.5px; line-height: 1.6; font-style: italic; margin-bottom: 12px; }
.scenario .step { border-inline-start: 2px solid rgba(3,255,255,0.5); padding: 4px 0 4px 12px; padding-inline-start: 12px; margin: 0 0 12px; animation: stepin .25s ease; }
.scenario .step h5 { color: #03ffff; font-size: 13px; font-weight: 800; margin-bottom: 4px; letter-spacing: 0.02em; }
.scenario .step p { color: #cfd8e6; font-size: 13.5px; line-height: 1.6; margin: 0; }
.scenario .walk-btn { margin-top: 4px; }
@keyframes stepin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* The JPL courses are internal inductions, not accredited qualifications.
   Stated on the completion banner as well as the subtitle, because the banner
   is the part someone would screenshot and send to a club as "evidence". */
.not-accredited {
  margin-top: 8px; font-size: 12px; line-height: 1.6; opacity: .85;
}


/* ============================================================================
   LIGHT VARIANT, for the parent lane only.
   A course page opts in with <html data-theme="light">. Every rule below is a
   colour or a size: nothing here moves the layout, so the dark course and the
   light course are the same page.
   ========================================================================== */
html[data-theme="light"], html[data-theme="light"] body {
  background: #f4f7fb; color: #0b1a33;
  font-family: 'Montserrat', -apple-system, system-ui, 'Segoe UI', sans-serif;
}
html[data-theme="light"] body::before { display: none; }

/* the bar stays navy, the way it does everywhere else on the parent lane */
html[data-theme="light"] .topbar {
  background: #0b1a33; border-bottom: 0; box-shadow: 0 2px 10px rgba(11,26,51,.10);
}
html[data-theme="light"] .topbar a.back { color: #03ffff; font-size: 14px; }
html[data-theme="light"] .topbar .brand { color: rgba(255,255,255,.75); }

html[data-theme="light"] .wrap { max-width: 700px; padding: 26px 16px 90px; }

html[data-theme="light"] .hero .eyebrow { color: #0a7c8a; font-size: 12px; }
html[data-theme="light"] .hero h1 { color: #0b1a33; font-size: clamp(26px, 6vw, 34px); line-height: 1.1; }
html[data-theme="light"] .hero p { color: #4d5b73; font-size: 16px; line-height: 1.65; max-width: 62ch; }

html[data-theme="light"] .lang-toggle { background: #fff; border: 1px solid #d9e1ec; }
html[data-theme="light"] .lang-toggle button { color: #4d5b73; font-size: 14px; padding: 9px 18px; }
html[data-theme="light"] .lang-toggle button.active { background: #0b1a33; color: #fff; }

html[data-theme="light"] .banner.done {
  background: #e9f8ef; border: 1px solid #bfe8cf; color: #14603a; font-size: 15px;
}
html[data-theme="light"] .banner.done strong { color: #0f8a4c; }

/* the reading card: white, one hairline, a shadow instead of a glow */
html[data-theme="light"] .card {
  background: #fff; border: 1px solid #d9e1ec; box-shadow: 0 8px 26px rgba(11,26,51,.05);
  padding: 22px 20px; margin-bottom: 16px;
}
html[data-theme="light"] .card h2 { color: #0b1a33; font-size: 19px; line-height: 1.25; margin-bottom: 12px; }
html[data-theme="light"] .card h2 .num { color: #0a7c8a; }
html[data-theme="light"] .card p { color: #22304a; font-size: 16px; line-height: 1.7; margin-bottom: 12px; }
html[data-theme="light"] .card ul li { color: #22304a; font-size: 16px; line-height: 1.65; margin-bottom: 9px; padding-inline-start: 20px; }
html[data-theme="light"] .card ul li::before { background: #0a7c8a; top: 10px; }
html[data-theme="light"] .card strong { color: #0b1a33; }

html[data-theme="light"] .callout {
  background: #fff5e5; border: 1px solid #f3dcb3; color: #7a4a00; font-size: 15px;
}

html[data-theme="light"] .contact { background: #e6fbfd; border: 1px solid #bfeff5; }
html[data-theme="light"] .contact b { color: #0a6f7c; font-size: 19px; }
html[data-theme="light"] .contact span { color: #22304a; font-size: 15px; }

/* quiz */
html[data-theme="light"] .quiz-intro { color: #4d5b73; font-size: 15.5px; }
html[data-theme="light"] .q { background: #fff; border: 1px solid #d9e1ec; padding: 18px; }
html[data-theme="light"] .q h4 { color: #0b1a33; font-size: 16px; line-height: 1.5; }
html[data-theme="light"] .opt {
  border: 1.5px solid #d9e1ec; color: #22304a; font-size: 15.5px; padding: 13px 14px; background: #fff;
}
html[data-theme="light"] .opt:hover { border-color: #0a7c8a; background: #f7fbfc; }
html[data-theme="light"] .opt.correct { border-color: #0f8a4c; background: #e9f8ef; }
html[data-theme="light"] .opt.wrong { border-color: #c0392b; background: #fdecea; }
html[data-theme="light"] .opt input { accent-color: #0b1a33; }
html[data-theme="light"] .q-feedback { font-size: 14.5px; }
html[data-theme="light"] .q-feedback.ok { color: #0f8a4c; }
html[data-theme="light"] .q-feedback.wrong { color: #c0392b; }
html[data-theme="light"] .quiz-result.ok { color: #0f8a4c; background: #e9f8ef; border-color: #bfe8cf; }
html[data-theme="light"] .quiz-result.wrong { color: #c0392b; background: #fdecea; border-color: #f5c6c1; }

html[data-theme="light"] .declare { background: #e6fbfd; border: 1px solid #bfeff5; padding: 20px; }
html[data-theme="light"] .declare label { color: #22304a; font-size: 15.5px; line-height: 1.65; }
html[data-theme="light"] .declare input { accent-color: #0b1a33; width: 20px; height: 20px; }

/* the parent lane's chunky button, same as the forms they came from */
html[data-theme="light"] .btn {
  border-radius: 16px; padding: 16px 26px; font-size: 17px; letter-spacing: 0;
  min-height: 58px; margin-top: 16px;
}
html[data-theme="light"] .btn-primary {
  background: #03ffff; color: #0b1a33; box-shadow: 0 8px 20px rgba(10,124,138,.22);
}
html[data-theme="light"] .btn-secondary { background: #fff; color: #0a7c8a; border: 2px solid #0a7c8a; }

html[data-theme="light"] .loading { color: #4d5b73; font-size: 15px; }
html[data-theme="light"] .prereq { color: #4d5b73; font-size: 14px; }
html[data-theme="light"] .prereq a { color: #0a7c8a; font-weight: 700; }
html[data-theme="light"] .note { color: #4d5b73; font-size: 13.5px; }
html[data-theme="light"] .toast { background: #0b1a33; border-color: #0b1a33; color: #fff; font-size: 15px; }

/* scenarios */
html[data-theme="light"] .scenario-head { color: #0b1a33; font-size: 20px; }
html[data-theme="light"] .scenario { border-color: #f3dcb3; }
html[data-theme="light"] .scenario h2 { color: #7a4a00; }
html[data-theme="light"] .scenario .sit {
  background: #fff5e5; border: 1px solid #f3dcb3; color: #5a3800; font-size: 16px;
}
html[data-theme="light"] .scenario .step { border-inline-start: 3px solid #0a7c8a; }
html[data-theme="light"] .scenario .step h5 { color: #0a7c8a; font-size: 15px; }
html[data-theme="light"] .scenario .step p { color: #22304a; font-size: 16px; }

html[data-theme="light"] .not-accredited { opacity: 1; color: #4d5b73; font-size: 13.5px; }

/* Arabic keeps its own face on this lane too */
html[data-theme="light"][dir="rtl"], html[data-theme="light"] [dir="rtl"] {
  font-family: 'Tajawal', 'Montserrat', sans-serif;
}