/* MOBHOPE — accessible support and playful professional learning. */
:root {
  color-scheme: light;
  --canvas: #ffffff;
  --paper: #ffffff;
  --ink: #12345b;
  --body: #40536b;
  --muted: #5b6e82;
  --line: #dce5ec;
  --lime: #58cc02;
  --lime-light: #f1fbe7;
  --green-ink: #276915;
  --green-border: #a5dc82;
  --green-edge: #3d9705;
  --blue: #087ab4;
  --blue-light: #eef8ff;
  --blue-border: #8ac9ec;
  --coral: #a45022;
  --warm: #fff8e8;
  --radius: 16px;
  --shadow: none;
  --font-body: ui-rounded, "Trebuchet MS", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-display: var(--font-body);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; color: var(--body); background: var(--canvas); font-family: var(--font-body); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button, select, summary { cursor: pointer; }
button { touch-action: manipulation; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: .56; }
a { color: var(--ink); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { border-radius: 10px; }
:focus-visible { outline: 3px solid #b55944; outline-offset: 4px; }
main:focus { outline: none; }
img, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { color: var(--ink); margin-top: 0; }
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.045em; line-height: 1.12; }
h1 { font-size: clamp(38px, 4.1vw, 62px); }
h2 { font-size: clamp(28px, 2.7vw, 38px); }
h3 { font-size: 18px; letter-spacing: -.02em; line-height: 1.4; }
h4 { font-size: 15px; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 22px; }
li + li { margin-top: 7px; }
strong { color: var(--ink); font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 12px 18px; background: var(--ink); color: white; border-radius: 10px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.app-shell { display: grid; grid-template-columns: 240px minmax(0,1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; min-height: 620px; display: flex; flex-direction: column; padding: 31px 24px 25px; border-right: 1px solid var(--line); background: #f0f1e8; }
.brand { display: flex; flex-wrap: nowrap; align-items: center; column-gap: 10px; row-gap: 1px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; text-decoration: none; }
.brand > span:last-child { min-width: 0; }
.brand-symbol { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.brand-symbol svg { width: 34px; height: 34px; }
.brand-name { font-size: 22px; font-weight: 800; letter-spacing: -.7px; line-height: 1.15; }
.brand-note { display: block; width: 100%; margin-top: 4px; font-size: 11px; letter-spacing: .045em; line-height: 1.55; color: #697c70; }
.brand > div .brand-note { margin-top: 3px; }
.nav-label { margin: 52px 0 16px 10px; font-size: 10px; line-height: 1.5; font-weight: 750; text-transform: uppercase; letter-spacing: .15em; color: #7b877d; }
.journey { display: grid; gap: 9px; }
.step { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 66px; padding: 12px 10px; border: 1px solid transparent; border-radius: 12px; background: transparent; text-align: left; color: #788278; transition: background .16s ease, color .16s ease; }
.step:hover { background: #e8ecdf; color: var(--ink); }
.step.active { background: var(--ink); color: white; }
.step-num { display: flex; align-items: center; justify-content: center; flex: 0 0 29px; height: 29px; border: 1px solid #cbd3c4; border-radius: 50%; color: inherit; font-size: 12px; font-weight: 600; }
.step.active .step-num { border-color: #d9e7b769; background: #ffffff0d; color: var(--lime); }
.step.done .step-num { border-color: #c5d4b2; background: var(--lime); color: var(--ink); }
.step-copy { display: block; min-width: 0; color: inherit; font-size: 13px; line-height: 1.35; font-weight: 650; }
.step-copy small { display: block; margin-top: 4px; font-size: 10px; font-weight: 400; color: inherit; opacity: .8; }
.sidebar-bottom { margin-top: auto; padding: 25px 7px 0; font-size: 11px; color: #738171; line-height: 1.65; }
.sidebar-bottom p { margin-bottom: 9px; }
.sidebar-bottom a { color: #55745d; }
.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; background: #6c8b58; border-radius: 50%; vertical-align: middle; }
.workspace { min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 clamp(24px, 3.5vw, 58px); border-bottom: 1px solid var(--line); }
.breadcrumb { min-width: 0; font-size: 12px; color: #788278; }
.breadcrumb strong { font-weight: 500; color: var(--ink); }
.breadcrumb span { margin: 0 9px; opacity: .6; }
.top-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 15px; }
.top-actions > a, .top-actions > button { font-size: 12px; }
.language-switch { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #fbfbf6; }
.language-switch button { min-width: 44px; min-height: 44px; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; font-size: 11px; font-weight: 650; color: #64705f; }
.language-switch button.active, .language-switch button[aria-pressed="true"] { color: white; background: var(--ink); }
.language-switch button:hover:not(.active):not([aria-pressed="true"]) { background: var(--lime-light); color: var(--ink); }
main { flex: 1; width: 100%; }
.page { max-width: 1212px; width: 100%; margin: 0 auto; padding: 43px clamp(24px, 3.5vw, 58px) 52px; }
.workspace > footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 25px; margin: 0 clamp(24px, 3.5vw, 58px); padding: 21px 0 24px; border-top: 1px solid var(--line); color: #7d877c; font-size: 10px; }
.workspace > footer a { color: #657b6a; }
.workspace > footer p { margin: 0; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; color: #72805d; font-size: 10px; font-weight: 750; line-height: 1.5; letter-spacing: .17em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 19px; height: 1px; background: currentColor; }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(260px,.9fr); align-items: center; gap: 32px; margin-bottom: 42px; }
.hero-title { margin: 0 0 22px; max-width: 680px; }
.hero-title em { color: #758b55; font-weight: 400; }
.lead { max-width: 650px; color: #65756b; font-size: 16px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.hero-art { min-width: 0; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero-illustration { display: block; flex: 0 0 auto; width: 100%; height: auto; max-height: 365px; }
.hero-art > .pill { position: relative; flex: 0 0 auto; margin-top: -9px; padding: 9px 14px; background: #fcfcf7; box-shadow: 0 4px 14px #123f3b08; }
.badge, .pill { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 10px; border-radius: 999px; background: var(--lime-light); color: #506749; font-size: 10px; font-weight: 650; line-height: 1.5; letter-spacing: .015em; }
.badge { margin-bottom: 18px; }
.pill { background: transparent; border: 1px solid #dce3d3; }
.btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 19px; border: 1px solid transparent; border-radius: 9px; font-size: 13px; font-weight: 650; line-height: 1.5; text-decoration: none; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn.primary { color: white; background: var(--ink); }
.btn.primary:hover { background: #21584e; }
.btn.secondary { color: var(--ink); border-color: #cdd8c4; background: transparent; }
.btn.secondary:hover { background: #edf2e6; border-color: #afc09f; }
.btn.text { min-height: 44px; padding: 10px 7px; color: var(--ink); background: transparent; }
.btn.text:hover { background: #ebeee3; }
.btn.small { min-height: 44px; padding: 8px 13px; font-size: 12px; }
.btn svg { flex: 0 0 auto; width: 16px; height: 16px; }
.btn:disabled:hover { transform: none; }
.section-heading { margin: 0 0 10px; font-size: 30px; }
.section-heading h2 { margin: 0 0 8px; font-size: 30px; }
.section-heading p { font-size: 14px; }
.page > .lead { margin-bottom: 30px; }
.section-subtitle { max-width: 780px; margin: 0 0 27px; font-size: 14px; color: var(--muted); }
.overview-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; margin: 26px 0 32px; }
.overview-card { position: relative; padding: 25px 23px 24px; min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.overview-card h3 { margin: 16px 0 10px; font-family: var(--font-display); font-size: 23px; font-weight: 400; }
.overview-card p { color: #718075; font-size: 12px; line-height: 1.75; }
.card-icon { width: 41px; height: 41px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--lime-light); color: #678151; font-size: 21px; }
.overview-card:nth-child(2) .card-icon { background: #f9ece5; color: #bf6d56; }
.overview-card:nth-child(3) .card-icon { background: #eaf0ed; color: #567b72; }
.card-icon svg { width: 22px; height: 22px; }
.card-number { position: absolute; right: 24px; top: 26px; color: #bac3b4; font-size: 11px; letter-spacing: .05em; }
.panel { padding: 27px 29px; margin: 24px 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.panel > :last-child { margin-bottom: 0; }
.panel-title { margin: 0 0 12px; font-size: 19px; }
.muted { color: var(--muted); }
.small-text { font-size: 12px; line-height: 1.7; }
.small-text svg { vertical-align: -3px; margin-right: 4px; }
.hero-actions + .small-text { margin-top: 15px; font-size: 10px; }
.split-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; align-items: start; }
.split-grid > .panel { margin: 0; }
.info-box { display: flex; flex-direction: column; gap: 7px; padding: 19px 23px; border: 1px solid #dce5d1; border-radius: 13px; color: #5d7355; background: var(--lime-light); font-size: 12px; line-height: 1.75; }
.info-box.warm { background: #fbefe7; border-color: #f1dfd2; color: #926a53; }
.info-box.success { background: #eaf2e6; border-color: #d4e3ce; color: #456740; }
.info-box p { margin: 0; }
.info-box h3 { margin: 0 0 3px; font-size: 15px; }
.info-box + .info-box { margin-top: 17px; }
.split-grid + .info-box { margin-top: 24px; }
.info-box strong { color: inherit; }
.field { display: grid; gap: 8px; margin-bottom: 19px; min-width: 0; }
label.field { color: var(--ink); font-size: 12px; font-weight: 650; }
label.field small { font-weight: 400; }
.field > label, .field > span:first-child { color: var(--ink); font-size: 12px; font-weight: 650; }
.field small { color: var(--muted); font-size: 11px; line-height: 1.6; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea, .select { min-height: 46px; width: 100%; max-width: 100%; border: 1px solid #d5ddcd; padding: 11px 13px; color: var(--ink); background: #fcfcf8; font-size: 13px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #8b9589; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 18px; accent-color: var(--ink); cursor: pointer; }
textarea { resize: vertical; min-height: 100px; }
.check-row { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; font-size: 13px; line-height: 1.65; cursor: pointer; }
.check-row span { min-width: 0; }
.field-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.action-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; }
.action-row > div { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mode-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 17px 0 24px; }
.mode-card { position: relative; min-height: 100px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 13px; background: white; color: #70806f; font-size: 12px; line-height: 1.6; }
.mode-card strong { font-size: 14px; }
.mode-card h3 { margin: 3px 0 0; font-size: 17px; }
.mode-card p { margin: 0; font-size: 12px; }
.mode-card > .badge { margin-bottom: 2px; }
.mode-card > span:last-child { margin-top: auto; align-self: flex-end; color: #5b7751; line-height: 1; }
.mode-card.active { background: #eef3e4; border-color: #8ca873; box-shadow: inset 0 0 0 1px #8ca873; }
.mode-card:hover { border-color: #8ca873; }

.case-layout { display: grid; grid-template-columns: minmax(0,1fr) 238px; gap: 24px; align-items: start; }
.case-main { padding: 30px; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.case-main.panel { margin: 0; }
.case-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.case-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: var(--lime-light); border-radius: 6px; font-size: 10px; font-weight: 650; letter-spacing: .035em; color: #536d3c; }
.case-count { color: #8a9487; font-size: 11px; }
.case-main h2 { margin-bottom: 20px; font-size: clamp(28px, 3vw, 39px); }
.case-story { margin-bottom: 24px; padding: 22px 24px; border-radius: 13px; background: #f5f5ee; border-left: 3px solid #b8c99b; font-size: 15px; line-height: 1.8; color: #4c665b; }
.question-title { margin: 25px 0 15px; font-size: 15px; font-weight: 650; line-height: 1.55; letter-spacing: -.01em; }
.answer-options { display: grid; gap: 10px; }
.answer-option { display: flex; width: 100%; align-items: flex-start; gap: 13px; padding: 16px; min-height: 62px; border: 1px solid #e0e6d9; border-radius: 11px; text-align: left; background: #fff; color: #5e7064; font-size: 13px; line-height: 1.65; transition: border-color .15s ease, background .15s ease; }
.answer-option:hover:not(:disabled) { border-color: #9fb58b; background: #fafbf7; }
.option-letter { width: 26px; height: 26px; display: inline-flex; justify-content: center; align-items: center; flex: 0 0 26px; border: 1px solid #dce3d4; border-radius: 7px; font-size: 11px; line-height: 1; color: #7d8c76; background: #fbfcf9; }
.option-letter svg { display: block; width: 17px; height: 17px; flex: 0 0 17px; }
.answer-option > span:last-child { min-width: 0; }
.answer-option small { display: block; margin-top: 5px; color: #416737; font-size: 10px; font-weight: 700; }
.answer-option.chosen { border-color: #486c52; background: #f2f6e9; box-shadow: inset 0 0 0 1px #486c52; }
.answer-option.chosen .option-letter { color: white; background: var(--ink); border-color: var(--ink); }
.answer-option.recommended { border-color: #71925c; background: #eff5e8; color: #274c31; }
.answer-option.recommended .option-letter { color: #274c31; border-color: #9fb98a; background: #dcebcf; }
.answer-option:disabled { opacity: 1; color: #62705e; background: #fcfcf9; }
.answer-option.chosen:disabled { opacity: 1; color: #274c31; background: #edf4e5; }
.answer-option.recommended:disabled { opacity: 1; color: #274c31; background: #eff5e8; }
.answer-option.chosen:not(.recommended):disabled { color: #76513d; background: #fbefe6; border-color: #b77958; box-shadow: inset 0 0 0 1px #b77958; }
.answer-option.chosen:not(.recommended):disabled .option-letter { background: #875b42; border-color: #875b42; color: white; }
.feedback { margin-top: 20px; padding: 21px 23px; background: #eff4e6; border: 1px solid #d2dfc1; border-radius: 13px; font-size: 13px; line-height: 1.75; }
.feedback h3 { margin: 0 0 9px; font-size: 15px; }
.feedback.correct { background: #edf4e8; border-color: #d0e1c5; }
.feedback.reflect { background: #fbefe6; border-color: #f1d9c8; }
.feedback.reflect h3 { color: #925e43; }
.feedback p { margin-bottom: 9px; }
.source-note { margin-top: 17px; color: #82907c; font-size: 10px; line-height: 1.7; }
.source-note a { color: #657d5c; }
.source-link { line-height: 1.8; }
.source-link svg { display: inline-block; width: 12px; height: 12px; margin-left: 3px; vertical-align: -2px; }
.source-note .source-link { margin-right: 3px; }
.case-sidebar { display: grid; gap: 20px; }
.case-sidebar > .panel { margin: 0; padding: 22px 19px; }
.case-sidebar > .panel .case-progress { padding: 0; border: 0; border-radius: 0; background: transparent; }
.case-progress { padding: 23px 20px; border: 1px solid var(--line); border-radius: 17px; background: #f1f2e9; }
.case-progress h3 { margin: 0 0 6px; font-size: 14px; }
.case-progress > p { font-size: 11px; color: #7d8a74; }
.mini-case { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 8px; padding: 10px 11px; border: 1px solid transparent; border-radius: 9px; background: transparent; font-size: 11px; line-height: 1.5; color: #85907d; text-align: left; }
.mini-case.active { color: var(--ink); background: white; border-color: #e1e6d8; }
.mini-case.done { color: #64804f; }
.mini-case span:first-child { flex-shrink: 0; }
.progress-track { height: 5px; width: 100%; margin: 17px 0 14px; overflow: hidden; background: #e0e5d6; border-radius: 999px; }
.progress-track > span { display: block; height: 100%; background: #7d9a58; border-radius: inherit; transition: width .25s ease; }
.takeaway-card { padding: 23px 21px; border-radius: 17px; background: var(--ink); color: #ceddcf; font-size: 12px; line-height: 1.8; }
.takeaway-card h3 { margin: 0 0 11px; color: var(--lime); font-family: var(--font-display); font-size: 24px; font-weight: 400; }
.takeaway-card strong { color: white; }
.takeaway-card .eyebrow { color: #c6d4ac; }
.feedback .takeaway-card { display: flex; align-items: flex-start; gap: 11px; margin-top: 16px; padding: 16px; border-radius: 10px; }
.feedback .takeaway-card > svg { flex: 0 0 20px; margin-top: 2px; color: var(--lime); }
.resource-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin: 24px 0; }
.resource-card { display: flex; flex-direction: column; align-items: flex-start; padding: 27px; border-radius: var(--radius); background: white; border: 1px solid var(--line); min-width: 0; }
.resource-card h3 { margin: 14px 0 10px; font-family: var(--font-display); font-size: 27px; font-weight: 400; }
.resource-card p { color: var(--muted); font-size: 13px; }
.resource-card .btn { margin-top: auto; }
.resource-card .qr-wrap + .btn { margin-top: 18px; }
.qr-wrap { display: flex; align-items: center; justify-content: center; width: 158px; height: 158px; max-width: 100%; padding: 12px; margin: 16px 0; border: 1px solid var(--line); background: white; border-radius: 12px; }
.qr-wrap svg, .qr-wrap img, .qr-wrap canvas { display: block; width: 100%; height: auto; }
.resource-card.qr-wrap { align-items: center; width: 100%; height: auto; margin: 0; padding: 28px; text-align: center; }
.resource-card.qr-wrap h2 { margin: 0 0 17px; font-size: 31px; }
.resource-card.qr-wrap > img { width: 156px; height: 156px; margin: 0 0 20px; }
.resource-card.qr-wrap > .btn { width: 100%; margin-top: 6px; }
.principle-list { display: grid; gap: 12px; margin: 20px 0; }
.principle { display: flex; align-items: flex-start; gap: 13px; padding: 17px 19px; border-radius: 12px; background: #f0f3e8; font-size: 13px; line-height: 1.7; }
.principle > span:first-child { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lime); color: #5b7146; font-size: 11px; font-weight: 650; }
.principle strong { display: block; margin-bottom: 3px; }
.principle h3 { margin: 0 0 5px; font-size: 14px; }
.principle p { margin: 0; font-size: 12px; }
.check-question { margin: 23px 0; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.check-question:last-of-type { padding-bottom: 0; border-bottom: 0; }
.check-question h3, .check-question legend { margin: 0 0 13px; padding: 0; font-size: 14px; color: var(--ink); font-weight: 650; }
fieldset.check-question { min-width: 0; padding: 0 0 22px; border: 0; border-bottom: 1px solid var(--line); }
.check-question .answer-option { min-height: 48px; padding: 12px 15px; }
.summary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; margin: 26px 0; }
.stat { padding: 24px; background: white; border: 1px solid var(--line); border-radius: 17px; text-align: center; }
.stat strong { display: block; margin-bottom: 5px; font-family: var(--font-display); font-size: 35px; line-height: 1.2; font-weight: 400; }
.stat span, .stat p { font-size: 11px; color: #7a8873; }
.completion { max-width: 760px; margin: 0 auto; text-align: center; }
.completion > .eyebrow { justify-content: center; }
.completion > .lead { margin-left: auto; margin-right: auto; }
.completion > svg { width: 72px; height: 72px; margin-bottom: 22px; }
.completion .hero-actions, .completion .action-row { justify-content: center; }
.completion .panel, .completion .info-box { text-align: left; }
.empty-state { padding: 45px 25px; text-align: center; border: 1px dashed #cad6be; border-radius: 18px; background: #f3f5ed; }
.empty-state h3 { margin: 0 0 10px; }
.empty-state p { color: var(--muted); font-size: 13px; }
.source-list { display: grid; gap: 12px; margin: 24px 0; }
.source-item { padding: 20px 23px; border: 1px solid var(--line); border-radius: 13px; background: white; font-size: 12px; overflow-wrap: anywhere; }
.source-item h3 { margin: 0 0 7px; font-size: 15px; }
.source-item p { color: #7b8875; margin-bottom: 7px; }
.source-item a { font-weight: 550; }
details { padding: 17px 0; border-top: 1px solid var(--line); }
details > summary { min-height: 30px; color: var(--ink); font-size: 13px; font-weight: 600; }
details[open] > summary { margin-bottom: 14px; }
.modal { width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; color: var(--body); background: var(--canvas); border: 1px solid #e1e6db; border-radius: 23px; box-shadow: 0 25px 90px #123f3b38; }
.modal::backdrop { background: rgba(18,45,38,.48); backdrop-filter: blur(3px); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 25px 27px 18px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 30px; }
.modal-head button { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); font-size: 22px; }
.modal-body { padding: 25px 27px; }
.modal-body > p:first-child { color: var(--muted); font-size: 13px; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 18px 27px 25px; border-top: 1px solid var(--line); }
.toast { position: fixed; left: 50%; bottom: 25px; z-index: 50; width: max-content; max-width: calc(100vw - 32px); padding: 13px 21px; border-radius: 12px; transform: translateX(-50%); background: var(--ink); color: white; box-shadow: 0 7px 30px #123f3b2b; font-size: 12px; text-align: center; }
#print-sheet { display: none; }

@keyframes reveal { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1550px) { .page { padding-top: 55px; } .hero-grid { gap: 48px; margin-bottom: 52px; } }
@media (max-width: 1150px) {
  .app-shell { grid-template-columns: 210px minmax(0,1fr); }
  .sidebar { padding-left: 18px; padding-right: 18px; }
  .hero-grid { grid-template-columns: minmax(0,1.2fr) minmax(210px,.8fr); gap: 20px; }
  .hero-title { font-size: 47px; }
  .case-layout { grid-template-columns: minmax(0,1fr) 205px; gap: 18px; }
  .case-main { padding: 24px; }
  .overview-card { padding: 23px 19px; }
  .top-actions { gap: 10px; }
}
@media (max-width: 960px) {
  .app-shell { grid-template-columns: 185px minmax(0,1fr); }
  .sidebar { padding: 25px 13px 20px; }
  .brand-name { font-size: 20px; }
  .brand-symbol { width: 28px; }
  .brand-note { font-size: 10px; }
  .step { gap: 8px; padding-left: 8px; padding-right: 8px; }
  .step-copy { font-size: 12px; }
  .hero-grid { grid-template-columns: minmax(0,1fr) minmax(180px,.65fr); gap: 14px; }
  .hero-title { font-size: 42px; }
  .lead { font-size: 14px; }
  .hero-art { align-self: center; }
  .hero-actions { gap: 6px; }
  .overview-grid { gap: 11px; }
  .overview-card { padding: 20px 15px; border-radius: 16px; }
  .overview-card h3 { font-size: 21px; }
  .card-number { top: 23px; right: 16px; }
  .case-layout { grid-template-columns: minmax(0,1fr); }
  .case-sidebar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .topbar { padding-left: 24px; padding-right: 24px; }
  .topbar .breadcrumb { font-size: 11px; }
  .top-actions { gap: 5px; }
  .top-actions > .btn { padding-left: 8px; padding-right: 8px; }
  .panel { padding: 24px; }
}
@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: static; height: auto; min-height: 0; padding: 20px 22px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { column-gap: 8px; }
  .brand-name { font-size: 22px; }
  .brand-symbol { width: 30px; height: 30px; }
  .brand-note { width: auto; margin: 2px 0 0; font-size: 10px; }
  .brand > div .brand-note { margin-top: 2px; }
  .nav-label { display: none; }
  .journey { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin-top: 19px; }
  .step { justify-content: center; flex-direction: column; gap: 6px; min-height: 70px; padding: 9px 5px; border-radius: 10px; }
  .step-num { flex-basis: auto; width: 24px; height: 24px; font-size: 10px; }
  .step-copy { font-size: 10px; text-align: center; line-height: 1.35; }
  .step-copy small { display: none; }
  .sidebar-bottom { display: none; }
  .topbar { height: auto; min-height: 65px; gap: 8px; padding: 12px 22px; }
  .top-actions { flex-wrap: nowrap; gap: 8px; }
  .top-actions > .btn { min-height: 44px; min-width: 44px; font-size: 11px; }
  .breadcrumb { font-size: 11px; }
  .language-switch { flex-wrap: nowrap; }
  .language-switch button { min-height: 44px; min-width: 44px; padding: 5px; font-size: 10px; }
  .page { padding: 32px 22px 39px; }
  .hero-grid { grid-template-columns: minmax(0,1.15fr) minmax(170px,.85fr); gap: 16px; margin-bottom: 30px; }
  .hero-title { font-size: clamp(35px, 5.8vw, 46px); }
  .hero-actions { margin-top: 23px; }
  .hero-actions .btn { font-size: 12px; padding-left: 14px; padding-right: 14px; }
  .overview-grid { gap: 12px; margin-top: 23px; }
  .overview-card h3 { font-size: 22px; }
  .workspace > footer { margin-left: 22px; margin-right: 22px; }
  .resource-card { padding: 22px; }
  .split-grid { gap: 17px; }
  .summary-grid { gap: 12px; }
  .stat { padding: 22px 15px; }
}
@media (max-width: 680px) {
  .hero-grid { grid-template-columns: minmax(0,1fr); gap: 25px; }
  .hero-title { font-size: clamp(40px, 7.8vw, 49px); }
  .hero-art { width: 100%; max-width: 380px; margin: 0 auto; }
  .hero-illustration { max-height: 285px; }
  .hero-art > .pill { margin-top: -8px; }
}
@media (max-width: 540px) {
  .sidebar { padding: 18px 18px 13px; }
  .brand-note { font-size: 9px; }
  .topbar { padding: 11px 18px; flex-wrap: wrap; min-height: 65px; }
  .breadcrumb { flex: 1 1 110px; }
  .topbar .breadcrumb { font-size: 10px; }
  .top-actions { gap: 5px; }
  .top-actions > .btn { padding: 8px 5px; font-size: 10px; }
  .language-switch button { min-height: 44px; min-width: 44px; padding: 4px; }
  .page { padding: 29px 18px 35px; }
  .eyebrow { font-size: 9px; letter-spacing: .14em; margin-bottom: 16px; }
  .hero-grid { grid-template-columns: minmax(0,1fr); gap: 22px; margin-bottom: 27px; }
  .hero-title { font-size: 44px; margin-bottom: 20px; }
  .hero-art { max-width: 330px; width: 100%; margin: 0 auto; }
  .hero-illustration { max-height: 245px; }
  .lead { font-size: 14px; line-height: 1.8; }
  .hero-actions { gap: 8px; margin-top: 24px; }
  .hero-actions .btn { min-height: 47px; font-size: 12px; }
  .overview-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .overview-card { min-height: 0; padding: 22px; border-radius: 17px; }
  .overview-card h3 { margin: 15px 0 9px; font-size: 25px; }
  .overview-card p { font-size: 13px; }
  .card-number { top: 26px; right: 23px; }
  .section-heading { font-size: 29px; }
  .section-subtitle { font-size: 13px; }
  .split-grid, .resource-grid { grid-template-columns: minmax(0,1fr); gap: 17px; }
  .panel { padding: 23px 20px; border-radius: 17px; }
  .panel-title { font-size: 18px; }
  .info-box { padding: 18px; font-size: 12px; }
  .mode-options { gap: 9px; }
  .mode-card { padding: 15px 13px; min-height: 118px; font-size: 11px; }
  .mode-card strong { font-size: 13px; }
  .field-row { grid-template-columns: minmax(0,1fr); gap: 0; }
  .action-row { align-items: stretch; margin-top: 23px; }
  .action-row > .btn { flex: 1 1 auto; }
  .case-main { padding: 23px 18px; border-radius: 17px; }
  .case-main h2 { font-size: 32px; }
  .case-story { padding: 18px; font-size: 14px; }
  .question-title { font-size: 14px; }
  .answer-option { padding: 14px 12px; gap: 10px; font-size: 12px; }
  .option-letter { width: 24px; height: 24px; flex-basis: 24px; }
  .feedback { padding: 18px; font-size: 12px; }
  .case-sidebar { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .case-progress { padding: 21px; }
  .mini-case { min-height: 44px; margin-top: 4px; }
  .resource-grid { margin: 21px 0; }
  .resource-card { padding: 23px; }
  .resource-card h3 { font-size: 27px; }
  .summary-grid { gap: 9px; }
  .stat { padding: 20px 9px; border-radius: 13px; }
  .stat strong { font-size: 29px; }
  .stat span, .stat p { font-size: 10px; }
  .completion h1 { font-size: 40px; }
  .source-item { padding: 18px; }
  .workspace > footer { margin-left: 18px; margin-right: 18px; padding: 20px 0; gap: 8px; }
  .modal-head { padding: 21px 20px 17px; }
  .modal-head h2 { font-size: 27px; }
  .modal-body { padding: 21px 20px; }
  .modal-actions { padding: 17px 20px 21px; }
  .modal-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 360px) {
  .brand-note { max-width: 125px; text-align: left; }
  .hero-title { font-size: 39px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .topbar .breadcrumb { flex: 1 1 100%; }
  .top-actions { width: 100%; justify-content: space-between; }
  .mode-options { grid-template-columns: minmax(0,1fr); }
  .mode-card { min-height: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:hover { transform: none; }
}
@media print {
  @page { margin: 18mm; size: A4; }
  body { background: white; font-size: 11pt; line-height: 1.5; color: #183f38; }
  body > * { display: none !important; }
  #print-sheet { display: block !important; max-width: none; padding: 0; margin: 0; }
  #print-sheet h1 { font-size: 30pt; margin-bottom: 14pt; }
  #print-sheet h2 { font-size: 20pt; margin: 20pt 0 10pt; }
  #print-sheet h3 { font-size: 13pt; margin: 15pt 0 6pt; }
  #print-sheet p { margin-bottom: 9pt; }
  #print-sheet .print-qr, #print-sheet .qr-wrap { width: 36mm; height: 36mm; padding: 0; border: 0; }
  #print-sheet .principle, #print-sheet .info-box { break-inside: avoid; background: white; border: 1px solid #cdd8c4; padding: 10pt; margin: 9pt 0; }
  #print-sheet a { color: #183f38; }
  #print-sheet svg { max-width: 100%; }
  #print-sheet button { display: none; }
}
/* Version 2: clearly separated support and professional training pathways. */
h1 em {color:#6b8149;font-weight:400;}
.training-return{color:var(--ink);font-size:12px;font-weight:650;text-decoration:none;}
.training-return:hover{text-decoration:underline;}
.journey{gap:12px;}
.step{min-height:70px;}
.step-num{border:0;}
.audience-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:32px 0;}
.audience-card{display:flex;flex-direction:column;padding:30px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:var(--shadow);}
.audience-card.professional{background:#123f3b;color:#e3ece4;border-color:#123f3b;}
.audience-card.professional h2,.audience-card.professional strong{color:#fff;}
.audience-card h2{font-size:34px;line-height:1.15;letter-spacing:-.035em;margin:25px 0 20px;}
.audience-card p{font-size:14px;line-height:1.8;}
.audience-card .btn{margin-top:auto;align-self:flex-start;}
.audience-card.professional .btn{background:var(--lime);color:var(--ink);}
.audience-card.professional .btn:hover{background:#e8f2d0;}
.audience-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.audience-top .card-icon{flex-shrink:0;width:48px;height:48px;}
.audience-top .badge{margin:0;font-size:9px;padding:7px 10px;}
.audience-card.professional .card-icon{background:#2e5b50;color:#e2efcd;}
.audience-card.professional .badge{background:#2e5b50;color:#e2efcd;}
.path-list{margin:4px 0 25px;padding-left:20px;font-size:13px;}
.challenge-pills{display:flex;flex-wrap:wrap;gap:7px;margin:5px 0 20px;}
.challenge-pills span{padding:6px 10px;border:1px solid #66857b;border-radius:8px;font-size:12px;color:#e6efdc;}
.support-banner{display:flex;align-items:center;gap:15px;padding:22px 25px;margin:28px 0;background:var(--lime-light);border:1px solid #d5dfc6;border-radius:17px;font-size:14px;}
.support-banner svg{flex-shrink:0;}
.unit-select{max-width:540px;margin-top:26px;}
.support-steps{max-width:850px;}
.support-step{position:relative;padding-left:85px;}
.support-step .step-index{position:absolute;top:31px;left:27px;font-size:19px;color:#6b8149;font-weight:650;}
.support-step h2{font-size:30px;}
.support-step p{font-size:14px;line-height:1.8;}
.support-step .small-text{font-size:12px;margin-top:17px;}
.challenge-banner{display:grid;grid-template-columns:minmax(0,1fr) 180px;align-items:center;gap:28px;padding:32px;margin:32px 0 36px;border-radius:24px;background:#123f3b;color:#e7eee6;}
.challenge-banner h2{color:#fff;font-size:34px;}
.challenge-banner p{font-size:14px;}
.challenge-banner .small-text{color:#c4d2c2;font-size:12px;}
.challenge-emblem{width:180px;height:180px;border:1px solid #7e9b73;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:#234d40;color:#d9e7b7;}
.challenge-emblem svg{width:40px;height:40px;}
.challenge-emblem strong{font-family:var(--font-display);font-size:41px;line-height:1;color:#e4efcf;font-weight:400;}
.challenge-emblem strong span{font:15px var(--font-body);}
.challenge-emblem small{font-size:9px;letter-spacing:.15em;margin-top:5px;}
.briefing-heading{font-size:31px;margin-top:28px;}
.principle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0;}
.principle-card{position:relative;padding:24px 25px;background:white;border:1px solid var(--line);border-radius:18px;}
.principle-card:last-child{grid-column:1/-1;}
.principle-number{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--lime-light);color:#56723c;font-size:11px;margin-bottom:15px;}
.principle-card h3{font-size:18px;margin-bottom:10px;}
.principle-card p{font-size:13px;line-height:1.8;}
.start-panel{display:flex;align-items:center;justify-content:space-between;gap:25px;background:#edf3e3;}
.start-panel h2{font-size:28px;margin-bottom:10px;}
.start-panel p{font-size:13px;}
.start-panel .btn{flex-shrink:0;}
.case-page-header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px;}
.case-page-header h1{font-size:46px;margin-bottom:0;}
.case-page-header .eyebrow{margin-bottom:13px;}
.score-chip{display:flex;gap:7px;align-items:center;padding:12px 17px;background:#e9efd9;border:1px solid #cbd8b4;border-radius:14px;white-space:nowrap;color:var(--ink);}
.score-chip strong{font-size:24px;line-height:1;}
.score-chip>span{font-size:12px;}
.score-chip svg{color:#6a8149;}
.case-dots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:18px 0;}
.case-dot{position:relative;min-width:0;min-height:36px;padding:7px 2px;border:1px solid #d6dec9;background:white;color:#687761;border-radius:8px;font-size:12px;}
.case-dot.active{background:#123f3b;color:white;border-color:#123f3b;box-shadow:0 0 0 2px #b6c992;}
.case-dot.done:not(.active){background:#e6efda;color:#37512b;border-color:#b9cd9d;}
.case-dot span{font-size:8px;position:absolute;bottom:1px;right:3px;}
.case-sidebar .btn{width:100%;}
.case-story{font-size:16px;}
.question-title{font-size:17px;}
.takeaway-card{display:flex;align-items:flex-start;gap:12px;font-size:13px;padding:16px;border-top:1px solid #cddcc0;margin-top:14px;}
.takeaway-card svg{flex-shrink:0;margin-top:2px;}
.result-hero{text-align:center;max-width:800px;margin:0 auto;}
.result-hero h1{font-size:46px;}
.result-hero .lead{margin:0 auto 20px;}
.result-medal{display:flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;background:#e8edde;color:#66834e;margin:0 auto 22px;border:1px solid #cddab9;}
.result-hero.passed .result-medal{background:#e9d79a;color:#725b1b;border:6px double #baa65b;box-shadow:0 0 0 10px #f5eeda;}
.stat strong small{font:14px var(--font-body);color:#6c7a72;margin-left:3px;}
.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:25px 0;}
.earned-badge{display:flex;align-items:center;gap:15px;max-width:650px;margin:25px auto;padding:22px;border:1px solid #c1cf9d;border-radius:18px;background:#edf2df;}
.earned-badge svg{flex-shrink:0;}
.earned-badge span{display:block;font-size:12px;margin-top:5px;}
.review-item summary{display:flex;align-items:center;justify-content:space-between;gap:18px;list-style-position:outside;font-size:14px;}
.review-status{flex-shrink:0;padding:3px 9px;background:#edf2e4;border-radius:7px;font-size:11px;color:#52663e;}
.review-item p{font-size:13px;line-height:1.8;}
.source-note{font-size:11px;color:#60735b;}
@media(max-width:1150px){.audience-card{padding:25px;}.audience-card h2{font-size:30px;}.audience-top{align-items:flex-start;flex-direction:column;}.challenge-banner{grid-template-columns:minmax(0,1fr) 150px;padding:26px;}.challenge-emblem{width:150px;height:150px;}.start-panel{align-items:flex-start;flex-direction:column;}.case-dots{gap:5px;}}
@media(max-width:960px){.audience-grid{grid-template-columns:1fr;}.audience-top{flex-direction:row;align-items:center;}.audience-card .btn{margin-top:8px;}.principle-grid{grid-template-columns:1fr;}.case-dots{grid-template-columns:repeat(5,1fr);}.case-dot{min-height:44px;}.case-sidebar{grid-template-columns:1fr 1fr;}.challenge-banner h2{font-size:30px;}}
@media(max-width:760px){.journey{grid-template-columns:repeat(3,minmax(0,1fr));}.step{min-height:75px;}.step-copy{font-size:11px;}.topbar{flex-wrap:wrap;}.training-return{font-size:11px;}.case-page-header h1{font-size:36px;}.case-sidebar{grid-template-columns:1fr;}.case-dots{grid-template-columns:repeat(10,minmax(0,1fr));}}
@media(max-width:540px){.audience-card{padding:24px 21px;border-radius:20px;}.audience-card h2{font-size:32px;}.audience-top{align-items:flex-start;flex-direction:column;}.audience-top .badge{font-size:9px;}.audience-card .btn{width:100%;}.support-banner{padding:19px;align-items:flex-start;font-size:13px;}.support-step{padding:24px 20px;}.support-step .step-index{position:static;display:block;margin-bottom:15px;}.support-step h2{font-size:28px;}.challenge-banner{grid-template-columns:1fr;gap:24px;padding:25px 22px;}.challenge-emblem{width:140px;height:140px;margin:auto;}.challenge-banner h2{font-size:32px;}.principle-card{padding:23px 21px;}.case-page-header{align-items:flex-start;}.case-page-header h1{font-size:33px;}.case-page-header .eyebrow{font-size:8px;}.score-chip{padding:10px 11px;gap:5px;margin-top:7px;}.score-chip svg{display:none;}.score-chip strong{font-size:22px;}.case-story{font-size:15px;}.question-title{font-size:16px;}.answer-option{font-size:14px;}.case-dots{grid-template-columns:repeat(5,minmax(0,1fr));}.feedback{font-size:14px;}.result-hero h1{font-size:36px;}.earned-badge{padding:19px;}.review-item summary{font-size:13px;}.review-status{font-size:10px;}.top-actions{margin-left:auto;}.principle-card p,.support-step p{font-size:14px;}}

/* Professional attempts: explicit, accessible save status. */
.save-notice{display:flex;gap:.65rem;align-items:flex-start;padding:1rem;border-radius:12px;background:rgba(231,244,239,.75);font-size:.92rem;line-height:1.6}.save-notice svg{flex-shrink:0;margin-top:.2rem}.professional-save{margin:1.25rem 0;border-left:5px solid var(--teal,#176c5b)}.save-heading{display:flex;gap:.7rem;align-items:center}.save-heading svg{flex-shrink:0}.save-heading h2{margin:0;font-size:1.25rem}.professional-save p{line-height:1.6}.save-success{background:#edf8f1;border-left-color:#267547}.save-pending{background:#f0f6fa;border-left-color:#357c9c}.save-error{background:#fff7e9;border-left-color:#a56d1f}.case-sidebar .professional-save h2{font-size:1.08rem}.professional-save .btn{white-space:normal}@media print{.professional-save{display:none}}

/* Version 2.3: white canvas, clear routes and tactile learning controls.
   Kept at the end so the established layouts and print flow stay compatible. */
body { font-size: 16px; background: #fff; }
:focus-visible { outline-color: var(--blue); }
a { color: #086ba0; text-decoration-thickness: 1.5px; }
h1, h2 { font-weight: 800; letter-spacing: -.035em; line-height: 1.15; }
h1 { max-width: 950px; font-size: clamp(34px,3.8vw,54px); margin-bottom: 20px; }
h2 { font-size: clamp(26px,2.5vw,35px); }
h3 { font-weight: 800; }
strong { font-weight: 750; }
h1 em, .hero-title em { color: var(--green-ink); font-style: normal; font-weight: 800; }
.sidebar { background: white; border-right-width: 2px; padding-left: 20px; padding-right: 20px; }
.brand-name { color: var(--green-ink); font-weight: 900; }
.brand-symbol { color: var(--green-edge); }
.brand-note, .nav-label, .sidebar-bottom, .workspace > footer { color: var(--muted); }
.nav-label { margin-top: 44px; letter-spacing: .11em; }
.sidebar-bottom { font-size: 12px; }
.sidebar-bottom a, .workspace > footer a { color: #086ba0; }
.step { border: 2px solid transparent; border-radius: 12px; color: var(--muted); }
.step:hover { background: #f6f9fb; border-color: var(--line); }
.step.active { background: var(--lime-light); border-color: var(--green-border); color: var(--green-ink); }
.step[data-page="users"].active { background: var(--blue-light); border-color: var(--blue-border); color: #086ba0; }
.step-num { border: 0; border-radius: 10px; }
.step.active .step-num { background: white; color: inherit; }
.step-copy { font-weight: 800; }
.topbar { height: auto; min-height: 84px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; border-bottom-width: 2px; background: white; }
.top-actions { margin-left: auto; gap: 12px; }
.training-return { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 800; color: #086ba0; }
.language-switch { gap: 3px; border-width: 2px; border-radius: 12px; background: white; }
.language-switch button { border-radius: 8px; font-size: 12px; font-weight: 800; color: var(--muted); }
.language-switch button.active, .language-switch button[aria-pressed="true"] { color: var(--ink); background: var(--lime); }
.language-switch button:hover:not(.active):not([aria-pressed="true"]) { background: var(--blue-light); color: #086ba0; }
.workspace > footer { border-top-width: 2px; font-size: 12px; }
.eyebrow { color: var(--green-ink); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.eyebrow::before { width: 9px; height: 9px; border-radius: 3px; background: var(--lime); }
.lead { max-width: 800px; color: var(--body); font-size: 17px; line-height: 1.7; }
.hero-art > .pill { background: white; box-shadow: none; }
.badge, .pill { border: 1px solid var(--green-border); border-radius: 10px; color: var(--green-ink); background: var(--lime-light); font-size: 11px; font-weight: 800; }
.pill { background: white; }
.btn { min-height: 48px; border: 2px solid var(--line); border-bottom-width: 5px; border-radius: 12px; font-size: 14px; font-weight: 800; line-height: 1.45; text-align: center; background: white; box-shadow: none; }
.btn:hover { transform: none; background: #f6f9fb; }
.btn:active:not(:disabled), .answer-option:active:not(:disabled) { transform: translateY(2px); }
.btn.primary, .audience-card.professional .btn { color: var(--ink); background: var(--lime); border-color: var(--green-edge); }
.btn.primary:hover:not(:disabled), .audience-card.professional .btn:hover { background: #6fdb20; }
.btn.secondary { color: #086ba0; border-color: var(--blue-border); background: white; }
.btn.secondary:hover { background: var(--blue-light); border-color: #59b1df; }
.btn.text { min-height: 44px; border: 2px solid transparent; color: #086ba0; background: transparent; }
.btn.text:hover { background: var(--blue-light); }
.btn.small { min-height: 44px; }
.btn:disabled, .btn:disabled:hover { color: #667483; background: #edf1f4; border-color: #d4dce3; opacity: 1; transform: none; }
.panel, .overview-card, .resource-card, .principle-card, .case-main, .stat { border-width: 2px; border-radius: var(--radius); background: white; box-shadow: none; }
.overview-card h3, .resource-card h3, .stat strong, .takeaway-card h3 { font-weight: 800; }
.overview-card p, .resource-card p, .principle-card p, .support-step p, .source-item p { color: var(--body); }
.overview-card p, .principle-card p { font-size: 14px; }
.card-icon { width: 48px; height: 48px; border: 2px solid var(--green-border); background: var(--lime-light); color: var(--green-ink); }
.overview-card:nth-child(2) .card-icon, .overview-card:nth-child(3) .card-icon { background: var(--blue-light); border-color: var(--blue-border); color: #086ba0; }
.card-number, .source-note, .source-note a, .case-count, .case-progress > p, .stat span, .stat p, .stat strong small { color: var(--muted); }
.small-text, .stat span, .stat p { font-size: 13px; }
.info-box { border: 2px solid var(--blue-border); border-radius: 12px; color: #265673; background: var(--blue-light); font-size: 14px; }
.info-box.warm { background: var(--warm); border-color: #e3c575; color: #755017; }
.info-box.success { background: var(--lime-light); border-color: var(--green-border); color: var(--green-ink); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea, .select { min-height: 48px; border: 2px solid #c7d5e0; border-radius: 12px; color: var(--ink); background: white; font-size: 16px; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type="checkbox"], input[type="radio"] { accent-color: #368b12; }
.field, label.field, .field > label, .field > span:first-child { font-size: 14px; }
.field small, .check-row { font-size: 13px; }
.mode-card { border-width: 2px; border-radius: 12px; color: var(--body); }
.mode-card.active { background: var(--lime-light); border-color: var(--green-border); box-shadow: none; }
.mode-card:hover { border-color: var(--blue-border); }
.mode-card > span:last-child { color: var(--green-ink); }

/* The support route is blue; the professional challenge is green. */
.audience-grid { gap: 24px; margin: 30px 0; }
.audience-card { border: 2px solid var(--line); border-top-width: 7px; border-bottom-width: 5px; border-radius: var(--radius); padding: 29px; background: white; color: var(--body); box-shadow: none; }
.audience-card.community { border-color: var(--blue-border); }
.audience-card.professional { background: white; color: var(--body); border-color: var(--green-border); }
.audience-card.professional h2, .audience-card.professional strong { color: var(--ink); }
.audience-card h2 { font-size: clamp(28px,2.5vw,34px); font-weight: 800; margin: 24px 0 16px; }
.audience-card p { font-size: 15px; line-height: 1.7; }
.audience-top { flex-wrap: wrap; }
.audience-top .card-icon { width: 52px; height: 52px; }
.audience-top .badge { font-size: 10px; }
.audience-card.professional .card-icon, .audience-card.professional .badge { color: var(--green-ink); border-color: var(--green-border); background: var(--lime-light); }
.audience-card.community .card-icon, .audience-card.community .badge { color: #086ba0; border-color: var(--blue-border); background: var(--blue-light); }
.audience-card.community .btn { background: #e6f5ff; border-color: #75bfe6; color: #075b88; }
.audience-card.community .btn:hover { background: #d7eeff; }
.path-list { font-size: 14px; }
.path-list li::marker { color: #087ab4; }
.challenge-pills span { padding: 7px 10px; border: 2px solid var(--green-border); border-radius: 10px; font-size: 13px; font-weight: 800; color: var(--green-ink); background: white; }
.audience-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 8px 14px; margin: 0 0 28px; border: 2px solid var(--green-border); border-radius: 12px; background: var(--lime-light); }
.audience-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.5; font-weight: 800; color: var(--green-ink); }
.audience-label svg { flex-shrink: 0; }
.audience-switch.community { border-color: var(--blue-border); background: var(--blue-light); }
.audience-switch.community .audience-label { color: #086ba0; }
.audience-switch .btn { margin-left: auto; }
.support-banner { background: var(--blue-light); border: 2px solid var(--blue-border); border-radius: var(--radius); font-size: 15px; color: #265673; }
.support-step .step-index { display: grid; place-items: center; width: 40px; height: 40px; top: 28px; left: 24px; border: 2px solid var(--blue-border); border-radius: 12px; background: var(--blue-light); font-size: 18px; color: #086ba0; font-weight: 800; }
.support-step h2 { font-size: 29px; }
.support-step p { font-size: 15px; }
.challenge-banner { border: 2px solid var(--green-border); border-bottom-width: 5px; border-radius: var(--radius); background: white; color: var(--body); }
.challenge-banner h2 { color: var(--ink); }
.challenge-banner p { font-size: 15px; }
.challenge-banner .small-text { color: var(--muted); font-size: 13px; }
.challenge-emblem { border: 4px solid var(--green-border); border-bottom-width: 9px; background: var(--lime-light); color: var(--green-ink); }
.challenge-emblem strong { color: var(--green-ink); font-weight: 900; }
.challenge-emblem strong span, .challenge-emblem small { font-weight: 800; }
.principle-number { width: 38px; height: 38px; border: 2px solid var(--green-border); border-radius: 12px; background: var(--lime-light); color: var(--green-ink); font-size: 13px; font-weight: 800; }
.start-panel { border-color: var(--green-border); background: white; }
.start-panel p { font-size: 14px; }

/* The first answer stays locked; correct and review states also have text. */
.score-chip { border: 2px solid var(--green-border); border-bottom-width: 4px; border-radius: 12px; background: var(--lime-light); color: var(--green-ink); }
.score-chip strong, .score-chip svg { color: inherit; }
.score-chip strong { font-weight: 900; }
.case-tag { background: var(--blue-light); border: 1px solid var(--blue-border); border-radius: 8px; font-size: 11px; font-weight: 800; color: #086ba0; }
.case-count { font-size: 12px; font-weight: 800; }
.case-main h2 { font-size: clamp(26px,2.6vw,35px); }
.case-story { padding: 22px; border: 2px solid #cae5f5; border-left: 5px solid #44ace2; border-radius: 12px; background: #f6fbff; color: #344f69; line-height: 1.75; }
.question-title { font-size: 18px; font-weight: 800; }
.answer-options { gap: 12px; }
.answer-option { min-height: 66px; border: 2px solid var(--line); border-bottom-width: 5px; border-radius: 12px; color: var(--body); font-size: 15px; line-height: 1.6; box-shadow: none; }
.answer-option:hover:not(:disabled) { border-color: var(--blue-border); background: #f7fcff; }
.option-letter { width: 30px; height: 30px; flex-basis: 30px; border: 2px solid var(--line); border-radius: 8px; color: var(--muted); background: white; font-size: 12px; font-weight: 800; }
.answer-option small { color: inherit; font-size: 12px; font-weight: 800; }
.answer-option.chosen { border-color: var(--blue-border); background: var(--blue-light); color: #086ba0; box-shadow: none; }
.answer-option.chosen .option-letter { color: #086ba0; background: white; border-color: var(--blue-border); }
.answer-option.recommended, .answer-option.recommended:disabled { border-color: #83c258; background: var(--lime-light); color: var(--green-ink); }
.answer-option.recommended .option-letter { color: var(--green-ink); border-color: var(--green-border); background: white; }
.answer-option:disabled { color: var(--muted); background: #fafcfd; }
.answer-option.chosen:not(.recommended):disabled { color: #81451d; background: #fff8ed; border-color: #d8b07d; box-shadow: none; }
.answer-option.chosen:not(.recommended):disabled .option-letter { background: white; border-color: #d8b07d; color: #81451d; }
.feedback { border: 2px solid var(--green-border); border-radius: 12px; font-size: 15px; }
.feedback > strong { display: block; margin-bottom: 8px; font-size: 17px; color: var(--green-ink); }
.feedback.correct { background: var(--lime-light); border-color: var(--green-border); }
.feedback.reflect { background: #fff8ed; border-color: #d8b07d; }
.feedback.reflect h3, .feedback.reflect > strong { color: #81451d; }
.takeaway-card, .feedback .takeaway-card { border-top: 2px solid #cfe3bc; border-radius: 0; background: transparent; color: var(--body); padding: 16px 0 0; font-size: 14px; }
.takeaway-card strong, .takeaway-card h3 { color: var(--ink); }
.takeaway-card svg, .feedback .takeaway-card > svg { color: var(--green-ink); }
.feedback.reflect .takeaway-card { border-color: #e9d6b8; }
.source-note { font-size: 12px; }
.source-note a { color: #086ba0; }
.case-progress { background: white; border-width: 2px; border-radius: var(--radius); }
.progress-track { height: 15px; background: #e9eef2; border: 2px solid #e0e7ec; border-radius: 12px; }
.progress-track > span { background: var(--lime); }
.case-dot { min-height: 44px; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 10px; color: var(--muted); font-size: 13px; font-weight: 800; }
.case-dot.active { background: var(--blue-light); color: #086ba0; border-color: #75bfe6; box-shadow: none; }
.case-dot.done:not(.active) { background: var(--lime-light); color: var(--green-ink); border-color: var(--green-border); }
.mini-case { color: var(--muted); }
.mini-case.active { color: #086ba0; background: var(--blue-light); border-color: var(--blue-border); }
.mini-case.done { color: var(--green-ink); }
.result-medal { border: 3px solid var(--blue-border); border-bottom-width: 7px; border-radius: 24px; background: var(--blue-light); color: #086ba0; }
.result-hero.passed .result-medal { background: var(--lime); color: var(--ink); border: 3px solid var(--green-edge); border-bottom-width: 7px; box-shadow: none; transform: rotate(-5deg); }
.result-hero.passed .result-medal svg { transform: rotate(5deg); }
.stat { border-bottom-width: 5px; }
.stat:first-child { border-color: var(--green-border); }
.stat strong { font-weight: 900; }
.earned-badge { border: 2px solid var(--green-border); border-radius: var(--radius); background: var(--lime-light); color: var(--green-ink); }
.earned-badge strong { color: inherit; }
.earned-badge span { font-size: 13px; }
.review-item summary, .review-item p { font-size: 15px; }
.review-status { border: 1px solid var(--green-border); background: var(--lime-light); border-radius: 8px; color: var(--green-ink); font-size: 12px; }
.principle { background: white; border: 2px solid var(--line); }
.principle > span:first-child { background: var(--lime-light); color: var(--green-ink); }
.empty-state { border: 2px dashed var(--blue-border); background: var(--blue-light); }
.empty-state p { color: var(--muted); }
.source-item { border-width: 2px; font-size: 14px; }
details { border-top-width: 2px; }
details > summary { min-height: 44px; font-weight: 800; }
.modal { background: white; border: 3px solid #b9cedd; border-radius: var(--radius); box-shadow: none; }
.modal::backdrop { background: rgba(18,52,91,.5); backdrop-filter: none; }
.modal-head, .modal-actions { border-width: 2px; }
.modal-head h2 { font-size: 28px; }
.modal-head button { border-width: 2px; border-radius: 12px; background: white; }
.modal-body > p:first-child { color: var(--body); font-size: 15px; }
.toast { border: 2px solid var(--green-border); background: var(--lime-light); color: var(--green-ink); box-shadow: none; font-size: 14px; font-weight: 750; }
.save-notice { border: 1px solid var(--blue-border); background: var(--blue-light); }
.professional-save { border-left-color: var(--green-edge); }
.save-success { background: var(--lime-light); border-color: var(--green-border); border-left-color: var(--green-edge); }
.save-pending { background: var(--blue-light); border-color: var(--blue-border); border-left-color: var(--blue); }
.save-error { background: var(--warm); border-color: #e3c575; border-left-color: #a56d1f; }

@media (max-width: 1180px) {
  .sidebar { padding-left: 15px; padding-right: 15px; }
  .audience-card { padding: 23px; }
  .audience-card h2 { font-size: 29px; }
  .case-sidebar > .panel { padding: 19px 14px; }
}
@media (max-width: 760px) {
  .sidebar { border-right: 0; border-bottom-width: 2px; padding: 20px 22px 16px; }
  .step { min-height: 80px; padding: 10px 7px; }
  .step-copy { font-size: 12px; }
  .topbar { min-height: 74px; padding: 13px 22px; }
  .training-return { font-size: 12px; }
  .audience-switch { align-items: flex-start; }
  .audience-label { padding-top: 9px; }
}
@media (max-width: 540px) {
  .sidebar { padding: 18px 16px 13px; }
  .step { min-height: 84px; }
  .step-copy { font-size: 11px; }
  .topbar { padding: 12px 16px; }
  .top-actions { gap: 5px; }
  .page { padding: 28px 16px 36px; }
  h1 { font-size: 34px; }
  .eyebrow { font-size: 10px; letter-spacing: .07em; }
  .lead { font-size: 16px; }
  .audience-grid { gap: 20px; margin-top: 26px; }
  .audience-card { padding: 23px 20px; border-radius: var(--radius); }
  .audience-card h2 { font-size: 30px; }
  .audience-top .badge { font-size: 10px; }
  .audience-switch .btn { margin-left: 0; }
  .support-banner { padding: 19px; font-size: 14px; }
  .support-step .step-index { position: static; display: grid; margin-bottom: 15px; }
  .support-step h2 { font-size: 27px; }
  .challenge-banner h2 { font-size: 30px; }
  .case-page-header h1 { font-size: 32px; }
  .case-page-header .eyebrow { font-size: 9px; }
  .case-main { padding: 23px 16px; }
  .case-main h2 { font-size: 28px; }
  .case-story { padding: 17px; font-size: 15px; }
  .question-title { font-size: 17px; }
  .answer-option { padding: 14px 12px; gap: 10px; font-size: 15px; }
  .option-letter { width: 26px; height: 28px; flex-basis: 26px; }
  .feedback { padding: 18px; font-size: 15px; }
  .result-hero h1 { font-size: 34px; }
  .result-actions > .btn { flex: 1 1 auto; }
  .review-item summary { font-size: 14px; }
  .stat { padding: 20px 8px; }
  .stat strong small { font-size: 12px; }
  .stat span, .stat p { font-size: 12px; }
  .workspace > footer { margin-left: 16px; margin-right: 16px; }
  .modal-head h2 { font-size: 25px; }
}
@media (max-width: 360px) { .case-page-header { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) {
  .btn:active:not(:disabled), .answer-option:active:not(:disabled) { transform: none; }
}
@media print {
  body { font-size: 11pt; }
  #print-sheet h1 { font-size: 28pt; }
  .professional-save { display: none; }
}

/* Version 2.4: voluntary professional profile and learning awards. */
.brand { flex-direction: row; align-items: center; gap: 10px; }
.brand-logo-wrap { display: block; width: 52px; flex: 0 0 52px; }
.brand-logo { display: block; width: 100%; height: auto; object-fit: contain; }
.brand-name { display: block; color: var(--ink); font-size: 22px; font-weight: 900; }
.brand-note { max-width: 145px; font-size: 10px; letter-spacing: 0; }
.profile-panel { max-width: 860px; border-color: var(--green-border); }
.identity-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 0; margin: 0 0 25px; border: 0; }
.identity-options legend { margin-bottom: 14px; color: var(--ink); font-size: 17px; font-weight: 800; }
.identity-choice { display: flex; align-items: flex-start; gap: 12px; padding: 21px 18px; border: 2px solid var(--line); border-bottom-width: 5px; border-radius: 14px; cursor: pointer; }
.identity-choice.selected { border-color: var(--green-border); background: var(--lime-light); }
.identity-choice input { margin-top: 5px; }
.identity-choice strong { display: block; font-size: 17px; margin-bottom: 8px; }
.identity-choice small { display: block; font-size: 13px; line-height: 1.65; }
.named-details { margin: 24px 0; padding: 24px; border: 2px solid var(--blue-border); border-radius: 14px; background: var(--blue-light); }
.consent-row { font-size: 14px; }
.profile-summary { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; padding: 14px 18px; border: 2px solid var(--line); border-radius: 12px; background: #fafcfd; }
.profile-summary > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.profile-summary svg { flex: 0 0 20px; }
.profile-summary span { min-width: 0; overflow-wrap: anywhere; }
.profile-summary small { display: block; font-size: 13px; }
.award-panel { border-color: var(--green-border); border-bottom-width: 5px; background: white; }
.award-intro { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.award-intro > svg { flex: 0 0 42px; color: var(--green-ink); }
.award-intro h2 { margin-bottom: 12px; }
.award-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0; }
#profile-error, .award-error { color: #81451d; padding: 14px; border: 2px solid #d8b07d; border-radius: 12px; background: #fff8ed; }
@media(max-width:760px) { .brand { gap: 12px; } .brand-logo-wrap { width: 56px; flex-basis: 56px; } .brand-note { max-width: 180px; } }
@media(max-width:540px) { .identity-options { grid-template-columns: 1fr; } .named-details { padding: 18px 14px; } .profile-panel { padding: 23px 18px; } .award-actions > .btn { width: 100%; } .award-intro { gap: 12px; } .award-intro > svg { flex-basis: 32px; } }
/* Professional learning comparison: neutral answers until each assessment ends. */
.learning-phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:20px 0 28px}.learning-phases li{display:flex;align-items:center;gap:10px;padding:13px 15px;border:2px solid #e2e8e5;border-radius:18px;background:#fff;color:#62746b;font-weight:750;font-size:.9rem}.learning-phases li span{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;background:#f1f5f3}.learning-phases li.current{border-color:#65bb39;background:#f4fbe9;color:#265d1d}.learning-phases li.done{border-color:#c2dfb1;background:#fafdf7}.learning-language-note{font-size:.82rem;line-height:1.5;color:#617269;margin:16px 0}.learning-device-actions{display:flex;justify-content:flex-end;margin:18px 0}.learning-recorded{padding:14px 16px;border-radius:14px;background:#edf4ff;color:#2f527c;font-weight:650}.answer-option.learning-chosen,.answer-option.learning-chosen:disabled{background:#eef5ff;border-color:#73a4d9;color:#214d7d;opacity:1}.answer-option.learning-chosen .option-letter{background:#d4e6fc;color:#214d7d}.learning-review-list{display:grid;gap:18px;margin:24px 0}.learning-review-card.reviewed{border-color:#bedfae;background:#fbfff8}.learning-review-card .action-row{flex-wrap:wrap}.learning-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.learning-metrics .stat strong{font-size:clamp(1.6rem,3vw,2.8rem)}.learning-metrics .stat span{line-height:1.4}.learning-review-card p{max-width:75ch}.learning-review-card .badge{margin-bottom:12px}@media(max-width:800px){.learning-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.learning-phases{gap:6px}.learning-phases li{flex-direction:column;text-align:center;padding:10px 6px;font-size:.76rem;gap:6px}}@media(max-width:430px){.learning-phases li{font-size:.7rem}.learning-review-card .btn{width:100%}}

/* Show the earned badge using the same artwork as the download. */
.award-preview{max-width:240px;margin:0 auto 24px}.award-preview:empty{display:none}.award-preview svg{display:block;width:100%;height:auto}.award-next-step{border-color:var(--green-border);background:var(--lime-light)}