:root {
  --base-size: 20px;
  --bg: #f5f7f9;
  --paper: #ffffff;
  --text: #13202c;
  --muted: #526170;
  --brand: #17324d;
  --brand-2: #245276;
  --accent: #8b3f67;
  --line: #cbd4dc;
  --soft: #edf2f6;
  --good: #146c43;
  --danger: #9c2d2d;
  --focus: #f4b400;
  --shadow: 0 8px 28px rgba(20, 37, 52, .10);
}

* { box-sizing: border-box; }
html { font-size: var(--base-size); scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: Arial, Helvetica, system-ui, sans-serif;
  font-size: 1rem; line-height: 1.72; letter-spacing: .01em;
}
button, input, textarea { font: inherit; }
button, a, input, textarea { outline-offset: 4px; }
:focus-visible { outline: 4px solid var(--focus); }

.skip-link { position: absolute; left: 1rem; top: -5rem; background:#fff; color:#000; padding:.75rem 1rem; z-index:999; border:2px solid #000; }
.skip-link:focus { top: 1rem; }
.site-header {
  min-height: 118px; background: var(--brand); color: #fff; display:flex; gap:1.5rem; align-items:center; justify-content:space-between;
  padding: 1.35rem 2rem; position: sticky; top:0; z-index:30; box-shadow:var(--shadow);
}
.brand-wrap h1 { margin:.1rem 0 .15rem; font-size:1.45rem; line-height:1.22; }
.brand-wrap p { margin:0; opacity:.92; font-size:.9rem; }
.eyebrow { text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:800; margin:0 0 .35rem; }
.header-actions { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; }
.control, .tab, .text-button { border:2px solid currentColor; background:transparent; color:inherit; border-radius:.55rem; padding:.55rem .8rem; cursor:pointer; font-weight:700; }
.control:hover, .control:focus-visible { background:#fff; color:var(--brand); }

.app-shell { display:grid; grid-template-columns: 300px minmax(0, 1fr); max-width: 1600px; margin:0 auto; }
.sidebar { padding:1.25rem; border-right:1px solid var(--line); min-height:calc(100vh - 118px); background:#fbfcfd; position:sticky; top:118px; align-self:start; max-height:calc(100vh - 118px); overflow:auto; }
.progress-panel { margin-bottom:1rem; }
.progress-track { height:.7rem; background:#dbe3e9; border-radius:99px; overflow:hidden; margin-top:.4rem; }
.progress-bar { height:100%; width:0%; background:var(--good); transition:width .25s ease; }
.day-nav { display:grid; gap:.45rem; }
.day-button { width:100%; text-align:left; border:1px solid var(--line); background:#fff; color:var(--text); border-radius:.55rem; padding:.7rem .75rem; cursor:pointer; line-height:1.35; }
.day-button strong { display:block; font-size:.9rem; }
.day-button span { font-size:.73rem; color:var(--muted); }
.day-button.active { border:3px solid var(--brand-2); background:#eef6fc; }
.day-button.complete strong::after { content:" ✓"; color:var(--good); }
.sidebar-actions { display:grid; gap:.6rem; border-top:1px solid var(--line); margin-top:1rem; padding-top:1rem; }
.download-link { display:block; color:var(--brand); font-weight:700; }
.text-button { color:var(--brand); }

.course-main { padding:2rem clamp(1rem, 4vw, 3.5rem) 5rem; min-width:0; }
.course-hero, .section-card { max-width: 900px; margin-inline:auto; }
.course-hero { margin-bottom:1.5rem; }
.course-hero h2 { font-size:2rem; line-height:1.18; margin:.25rem 0 .55rem; }
.mission { font-size:1.08rem; background:#eaf1f7; border-left:8px solid var(--brand-2); padding:1rem 1.15rem; border-radius:.4rem; }
.mode-tabs { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }
.tab { color:var(--brand); background:#fff; }
.tab.active { background:var(--brand); color:#fff; }

.section-card { background:var(--paper); border:1px solid var(--line); border-radius:.8rem; padding:1.4rem; margin-bottom:1.3rem; box-shadow:0 3px 14px rgba(20,37,52,.06); }
.section-card h3 { font-size:1.4rem; line-height:1.25; margin:.05rem 0 .9rem; }
.section-card h4 { font-size:1.05rem; line-height:1.35; margin:1rem 0 .35rem; }
.code { display:inline-block; background:var(--brand); color:#fff; border-radius:.35rem; padding:.18rem .42rem; font-size:.7rem; font-weight:800; letter-spacing:.04em; }
.lesson-text p { margin:.6rem 0; max-width:78ch; }
.prompt-box, .answer-box, .coach-box, .career-box, .disclaimer-box { border-radius:.55rem; padding:1rem; margin-top:1rem; }
.prompt-box { background:#f5f8fb; border:2px solid #b8c9d7; }
.answer-box { background:#eff8f3; border:2px solid #8fc7a8; }
.coach-box { background:#fff7e8; border:2px solid #e4b968; }
.career-box { background:#eef4fb; border-left:8px solid var(--brand-2); }
.disclaimer-box { background:#f5f5f5; border:2px solid #bdbdbd; }
.prompt-lines { margin:.5rem 0 0; padding-left:1.35rem; }
.prompt-lines li { margin:.45rem 0; }
label { display:block; font-weight:800; margin:.8rem 0 .35rem; }
textarea { width:100%; min-height:150px; resize:vertical; padding:.8rem; border:2px solid #8292a1; border-radius:.5rem; background:#fff; color:#111; line-height:1.55; }
input[type=password] { width:100%; padding:.75rem; border:2px solid #8292a1; border-radius:.5rem; }
.activity-actions { display:flex; gap:.65rem; flex-wrap:wrap; margin-top:.75rem; align-items:center; }
.primary, .secondary, .complete-button, .answer-link-button { border-radius:.5rem; border:2px solid var(--brand); padding:.55rem .85rem; font-weight:800; cursor:pointer; }
.primary, .complete-button { background:var(--brand); color:#fff; }
.secondary, .answer-link-button { background:#fff; color:var(--brand); }
.complete-button.done { background:var(--good); border-color:var(--good); }
.score-pill { display:inline-block; background:#e8eef3; border-radius:99px; padding:.2rem .6rem; font-size:.75rem; font-weight:800; }

.login-shell { min-height:calc(100vh - 118px); display:grid; place-items:center; padding:2rem 1rem; }
.login-card { width:min(680px, 100%); background:#fff; border:1px solid var(--line); border-radius:1rem; padding:2rem; box-shadow:var(--shadow); }
.login-card h2 { font-size:1.7rem; line-height:1.25; }
.login-card .primary { width:100%; margin-top:1rem; padding:.75rem; }
.error { color:var(--danger); font-weight:700; }
.toast { position:fixed; right:1rem; bottom:1rem; background:#111; color:#fff; padding:.75rem 1rem; border-radius:.5rem; opacity:0; pointer-events:none; transition:opacity .2s; z-index:99; max-width:420px; }
.toast.show { opacity:1; }

body.high-contrast { --bg:#fff; --paper:#fff; --text:#000; --muted:#222; --brand:#000; --brand-2:#000; --accent:#000; --line:#000; --soft:#fff; --good:#004d00; --danger:#7a0000; }
body.high-contrast .section-card, body.high-contrast .prompt-box, body.high-contrast .answer-box, body.high-contrast .coach-box { border-width:3px; }

@media (max-width: 950px) {
  .site-header { position:relative; top:auto; flex-direction:column; align-items:flex-start; padding:1rem; }
  .header-actions { justify-content:flex-start; }
  .app-shell { display:block; }
  .sidebar { position:relative; top:auto; min-height:auto; max-height:none; border-right:0; border-bottom:1px solid var(--line); }
  .day-nav { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .course-main { padding-top:1.25rem; }
}
@media (max-width: 620px) {
  :root { --base-size: 19px; }
  .brand-wrap h1 { font-size:1.2rem; }
  .day-nav { grid-template-columns:1fr; }
  .course-hero h2 { font-size:1.6rem; }
  .section-card { padding:1rem; border-radius:.55rem; }
  .control { padding:.5rem .65rem; }
}

@media print {
  .site-header, .sidebar, .mode-tabs, .activity-actions, .toast, .skip-link { display:none !important; }
  body { background:#fff; color:#000; font-size:14pt; }
  .app-shell { display:block; }
  .course-main { padding:0; }
  .section-card { box-shadow:none; break-inside:avoid; border:1px solid #777; max-width:none; }
  textarea { border:1px solid #777; min-height:90px; }
  .course-hero, .section-card { max-width:none; }
}

.reference-list { padding-left: 1.4rem; }
.reference-list li { margin: .7rem 0; overflow-wrap: anywhere; }


/* Interactive assessment upgrade — v1.1 */
.score-summary { margin-top:.25rem; color:var(--muted); font-size:.72rem; font-weight:700; line-height:1.35; }
.guide-lock-note { margin:.15rem 0 .5rem; padding:.65rem; background:#f4f1f6; border:1px solid #cbb9c6; border-radius:.45rem; color:var(--text); font-size:.72rem; line-height:1.45; }
.interactive-note { border-left:8px solid var(--accent); }
.choice-group, .classification-item { border:0; padding:0; margin:1rem 0 0; min-width:0; }
.choice-group legend, .classification-item legend { font-weight:800; margin-bottom:.55rem; line-height:1.45; }
.choice-option { display:flex; gap:.7rem; align-items:flex-start; padding:.72rem .8rem; margin:.45rem 0; border:2px solid var(--line); border-radius:.55rem; background:#fff; cursor:pointer; font-weight:600; }
.choice-option:hover { border-color:var(--brand-2); background:#f8fbfd; }
.choice-option input { width:1.15rem; height:1.15rem; margin:.22rem 0 0; flex:0 0 auto; accent-color:var(--brand); }
.classification-grid { display:grid; gap:.9rem; margin-top:1rem; }
.classification-item { border:2px solid #c9d3dc; border-radius:.6rem; padding:1rem; background:#fff; }
.matching-grid { display:grid; gap:.85rem; margin-top:1rem; }
.matching-item { display:grid; gap:.35rem; border:2px solid #c9d3dc; border-radius:.6rem; padding:.85rem; background:#fff; }
.matching-item label { margin:0; }
.matching-item select { width:100%; padding:.65rem; border:2px solid #8292a1; border-radius:.45rem; background:#fff; color:#111; }
.item-status { display:inline-block; margin-top:.45rem; padding:.18rem .48rem; border-radius:99px; font-size:.72rem; font-weight:800; }
.item-status.correct { background:#dff2e8; color:#0c5b35; }
.item-status.incorrect { background:#f8e4e4; color:#832222; }
.feedback-slot { min-height:.25rem; }
.feedback-box { border-radius:.55rem; padding:1rem; margin-top:.85rem; border:2px solid var(--line); }
.feedback-box p { margin:.35rem 0 0; }
.feedback-box.correct { background:#eff8f3; border-color:#76b896; }
.feedback-box.incorrect { background:#fff0f0; border-color:#d19797; }
.feedback-box.neutral { background:#eef4fb; border-color:#9ab5cf; }
.check-button { border-radius:.5rem; border:2px solid var(--brand); padding:.55rem .85rem; font-weight:800; cursor:pointer; background:var(--brand); color:#fff; }
.check-button.done { background:var(--good); border-color:var(--good); }
.locked-card { border-style:dashed; }
.locked-box { background:#f3f3f3; border:2px dashed #a3a3a3; border-radius:.55rem; padding:1rem; margin-top:.8rem; }
.inline-lock { margin:1rem 0; }
.quiz-item { margin-bottom:1rem; }
body.high-contrast .choice-option, body.high-contrast .classification-item, body.high-contrast .matching-item, body.high-contrast .feedback-box, body.high-contrast .locked-box { border-width:3px; }
@media (max-width:620px) {
  .choice-option { padding:.8rem .7rem; }
  .activity-actions > button { width:100%; }
}
@media print {
  .check-button, .feedback-box, .guide-lock-note, .score-summary { display:none !important; }
}

/* Respect native hidden state even when component classes set display values. */
[hidden] { display: none !important; }

/* Visual training asset upgrade — Web App v1.2 */
.login-hero-image { width:100%; height:auto; display:block; border-radius:.75rem; margin-bottom:1.25rem; border:1px solid var(--line); }
.day-header-link { display:block; margin-bottom:1rem; border-radius:.8rem; overflow:hidden; }
.day-header-image { width:100%; height:auto; display:block; border-radius:.8rem; border:1px solid var(--line); }
.visual-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.visual-card { border:1px solid var(--line); border-radius:.7rem; overflow:hidden; background:#fff; box-shadow:0 2px 10px rgba(20,37,52,.05); }
.visual-card a { display:block; color:inherit; text-decoration:none; }
.visual-card img { width:100%; height:220px; object-fit:cover; object-position:top; display:block; background:#eef4fa; }
.visual-card .visual-copy { padding:.85rem; }
.visual-card h4 { margin:0 0 .3rem; }
.visual-card p { margin:0; color:var(--muted); font-size:.82rem; line-height:1.45; }
.visual-note { background:#eef4fb; border-left:7px solid var(--brand-2); padding:.9rem 1rem; border-radius:.5rem; }
body.high-contrast .visual-card, body.high-contrast .day-header-image, body.high-contrast .login-hero-image { border:3px solid #000; }
@media (max-width:700px) { .visual-grid { grid-template-columns:1fr; } .visual-card img { height:auto; } }
@media print { .login-hero-image { display:none !important; } .visual-card { break-inside:avoid; } .visual-card img { max-height:400px; object-fit:contain; } }