/* =========================================================================
   SOS MHP LMS

   Constraints driving every choice:
   · Learners are house mothers and co-workers reading slowly in Hindi.
   · Phones on weak village networks → NO web fonts. Devanagari renders from
     the device's own font; this whole sheet is ~10 KB.
   · WCAG 2.2 AA. Targets are 56px, well above the 24px minimum — thumbs.
   · SOS poster palette: navy, yellow, sky.
   ========================================================================= */

:root {
  --navy:      #1B3B6F;
  --navy-dark: #12294E;
  --yellow:    #FFD23F;
  --sky:       #BFE3EC;
  --sky-pale:  #EAF6F9;
  --ink:       #17202A;
  --ink-soft:  #4A5568;
  --paper:     #FFFFFF;
  --line:      #C9D2DE;
  --red:       #B3261E;
  --green:     #1E6B34;

  --step: 8px;
  --tap: 56px;
  --radius: 10px;
  --measure: 34rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sky-pale);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
}
/* Devanagari needs more vertical room than Latin at the same size. */
body.lang-hi {
  font-family: "Noto Sans Devanagari", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 1.1875rem;
  line-height: 1.85;
}

img { max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 calc(var(--step) * 2); color: var(--navy); }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
p { margin: 0 0 calc(var(--step) * 2); max-width: var(--measure); }
a { color: var(--navy); text-underline-offset: 3px; }

:focus-visible {
  outline: 4px solid var(--yellow);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--navy);
  border-radius: 4px;
}

.wrap { width: 100%; max-width: 60rem; margin: 0 auto; padding: 0 calc(var(--step) * 2); }
.muted { color: var(--ink-soft); }
.crumbs { margin-top: calc(var(--step) * 2); }

.skip { position: absolute; left: -9999px; background: var(--yellow); color: var(--navy);
        padding: var(--step) calc(var(--step) * 2); font-weight: 700; }
.skip:focus { left: var(--step); top: var(--step); z-index: 100; }

/* --------------------------------------------------------------- header -- */
.site-head { background: var(--navy); color: #fff; padding: var(--step) 0; }
.head-row { display: flex; align-items: center; justify-content: space-between;
            gap: var(--step); flex-wrap: wrap; }
.brand { color: #fff; text-decoration: none; font-weight: 700; }
.head-nav { display: flex; align-items: center; gap: var(--step); }
.lang-switch { display: flex; border: 2px solid rgba(255,255,255,.5);
               border-radius: var(--radius); overflow: hidden; }
.lang-btn { min-height: 44px; display: flex; align-items: center;
            padding: 0 calc(var(--step) * 1.75); color: #fff;
            text-decoration: none; font-weight: 600; }
.lang-btn.is-on { background: var(--yellow); color: var(--navy); }

/* -------------------------------------------------------------- buttons -- */
.btn { display: inline-flex; align-items: center; justify-content: center;
       min-height: var(--tap); min-width: var(--tap);
       padding: 0 calc(var(--step) * 3);
       border: 2px solid transparent; border-radius: var(--radius);
       font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
       background: var(--yellow); color: var(--navy);
       margin: 0 var(--step) var(--step) 0; }
.btn:hover { background: #F2C123; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-dark); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-quiet { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn[aria-disabled="true"] { background: #E2E8F0; color: var(--ink-soft); cursor: not-allowed; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------- forms -- */
.field { margin-bottom: calc(var(--step) * 3); max-width: var(--measure); }
.field label { display: block; font-weight: 700; margin-bottom: var(--step); }
.field .hint { display: block; color: var(--ink-soft); margin-bottom: var(--step); font-size: .9375rem; }
.field input[type="text"], .field input[type="password"] {
  width: 100%; min-height: var(--tap); padding: 0 calc(var(--step) * 1.5);
  font: inherit; border: 2px solid var(--navy); border-radius: var(--radius);
  background: var(--paper); color: var(--ink);
}
.field.has-error input { border-color: var(--red); border-width: 3px; }
.field-error { color: var(--red); font-weight: 700; margin-top: var(--step); }
.toggle-pw { background: none; border: 0; padding: var(--step) 0; min-height: 44px;
             color: var(--navy); font: inherit; font-weight: 600;
             text-decoration: underline; cursor: pointer; }

/* -------------------------------------------------------------- notices -- */
.note { border-left: 8px solid var(--navy); background: var(--paper);
        padding: calc(var(--step) * 2); margin: calc(var(--step) * 2) 0;
        border-radius: 0 var(--radius) var(--radius) 0; }
.note-success { border-left-color: var(--green); }
.note-error { border-left-color: var(--red); }
.error-summary { border: 4px solid var(--red); background: var(--paper);
                 padding: calc(var(--step) * 2); margin-bottom: calc(var(--step) * 3);
                 border-radius: var(--radius); }
.error-summary h2 { color: var(--red); font-size: 1.25rem; }
.error-summary a { color: var(--red); font-weight: 700; }

.card { background: var(--paper); border: 2px solid var(--line);
        border-radius: var(--radius); padding: calc(var(--step) * 3);
        margin-bottom: calc(var(--step) * 3); }
.card-narrow { max-width: 30rem; margin-inline: auto; }

.bar { height: 14px; background: var(--sky); border-radius: 7px;
       overflow: hidden; margin: var(--step) 0; max-width: var(--measure); }
.bar-thin { height: 8px; }
.bar > span { display: block; height: 100%; background: var(--navy); }

/* ------------------------------------------------------------ the ladder --
   The three levels drawn as a climb. The numbering is real information: you
   cannot take Level 2 before Level 1, so the sequence IS the interface.      */
.ladder { list-style: none; margin: 0; padding: 0; position: relative; }
.ladder::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px;
                  width: 6px; background: var(--sky); border-radius: 3px; }
.rung { position: relative; padding-left: 76px; margin-bottom: calc(var(--step) * 3); }
.rung-num { position: absolute; left: 0; top: 0; width: 60px; height: 60px;
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            font-size: 1.5rem; font-weight: 800; background: var(--paper);
            color: var(--navy); border: 6px solid var(--sky); }
.rung-body { background: var(--paper); border: 2px solid var(--line);
             border-radius: var(--radius); padding: calc(var(--step) * 2.5); }
.rung .spine { color: var(--ink-soft); font-weight: 600; }
.rung.is-open .rung-num { border-color: var(--yellow); }
.rung.is-open .rung-body { border-color: var(--navy); border-width: 3px; }
.rung.is-done .rung-num { background: var(--navy); color: #fff; border-color: var(--navy); }
.rung.is-locked .rung-num { color: var(--ink-soft); border-color: var(--line); }
.rung.is-locked .rung-body { background: #F7F9FB; }

/* --------------------------------------------------------- screen lists -- */
.screen-list { list-style: none; margin: 0 0 calc(var(--step) * 2); padding: 0; }
.screen-list li { border-bottom: 1px solid var(--line); }
.screen-list a { display: flex; align-items: center; gap: calc(var(--step) * 1.5);
                 min-height: var(--tap); padding: var(--step) 0;
                 text-decoration: none; color: var(--ink); }
.screen-list a:hover .screen-title { text-decoration: underline; }
.screen-ref { flex: 0 0 auto; min-width: 3.5rem; font-weight: 700; color: var(--navy); }
.screen-title { flex: 1 1 auto; }
.tick { color: var(--green); font-weight: 800; font-size: 1.25rem; }
.screen-list li.is-done .screen-ref { color: var(--green); }
.badge { display: inline-block; font-size: .8125rem; font-weight: 700;
         background: var(--sky); color: var(--navy); padding: 2px 8px;
         border-radius: 4px; margin-left: var(--step); }

.remember { background: var(--sky-pale); border: 2px dashed var(--navy);
            border-radius: var(--radius); padding: calc(var(--step) * 2);
            margin-top: calc(var(--step) * 2); }
.remember h2, .remember h3 { margin-bottom: var(--step); font-size: 1.125rem; }
.remember p { margin: 0; font-weight: 600; }

/* --------------------------------------------------------------- lesson -- */
.lesson { background: var(--paper); border: 2px solid var(--line);
          border-radius: var(--radius); padding: calc(var(--step) * 3);
          margin-top: calc(var(--step) * 2); }
.lesson-img, .lesson-video { display: block; width: 100%; border-radius: var(--radius);
                             margin-bottom: calc(var(--step) * 2); background: var(--sky-pale); }

/* Audio is the primary channel, so the player gets real presence rather than
   sitting as an afterthought under the text. */
.player { background: var(--sky-pale); border-radius: var(--radius);
          padding: calc(var(--step) * 2); margin-bottom: calc(var(--step) * 3); }
.player-label { font-size: 1rem; margin-bottom: var(--step); }
.player audio { width: 100%; min-height: 44px; }

/* On-screen text is keywords only — set large, spaced, scannable. */
.keywords { list-style: none; margin: 0 0 calc(var(--step) * 3); padding: 0; }
.keywords li { font-size: 1.375rem; font-weight: 700; color: var(--navy);
               padding: var(--step) 0 var(--step) calc(var(--step) * 3);
               position: relative; }
.keywords li::before { content: ""; position: absolute; left: 0; top: 1.05em;
                       width: 14px; height: 14px; border-radius: 50%;
                       background: var(--yellow); }
body.lang-hi .keywords li { font-size: 1.3125rem; }

.simple { font-size: 1.0625rem; }
.example { background: var(--sky-pale); border-left: 8px solid var(--sky);
           padding: calc(var(--step) * 2); border-radius: 0 var(--radius) var(--radius) 0;
           margin-bottom: calc(var(--step) * 2); }
.example h2 { font-size: 1.0625rem; margin-bottom: var(--step); }

.transcript { border: 2px solid var(--line); border-radius: var(--radius);
              padding: var(--step) calc(var(--step) * 2); margin-bottom: calc(var(--step) * 2); }
.transcript summary { min-height: 44px; display: flex; align-items: center;
                      font-weight: 700; color: var(--navy); cursor: pointer; }

.lesson-nav { display: flex; flex-wrap: wrap; gap: var(--step);
              margin-top: calc(var(--step) * 3); }
.lesson-nav .btn { margin: 0; }

/* ----------------------------------------------------------------- quiz -- */
.question legend { padding: 0; }
.question legend h2 { margin-bottom: calc(var(--step) * 2); }
fieldset.question { border: 2px solid var(--line); }

.option { display: flex; align-items: flex-start; gap: calc(var(--step) * 1.5);
          min-height: var(--tap); padding: var(--step) calc(var(--step) * 1.5);
          border: 2px solid var(--line); border-radius: var(--radius);
          margin-bottom: var(--step); cursor: pointer; background: var(--paper); }
.option:hover { border-color: var(--navy); background: var(--sky-pale); }
.option input { width: 28px; height: 28px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--navy); }
.option:has(input:checked) { border-color: var(--navy); border-width: 3px; background: var(--sky-pale); }

.verdict { font-weight: 800; }
.question.is-correct { border-left: 8px solid var(--green); }
.question.is-correct .verdict { color: var(--green); }
.question.is-wrong { border-left: 8px solid var(--red); }
.question.is-wrong .verdict { color: var(--red); }

.options-review { list-style: none; margin: 0 0 calc(var(--step) * 2); padding: 0; }
.options-review li { padding: var(--step) calc(var(--step) * 1.5); border-radius: var(--radius);
                     border: 2px solid var(--line); margin-bottom: var(--step); }
.options-review .opt-correct { border-color: var(--green); background: #F1F8F3; }
.options-review .opt-chosen { border-width: 3px; }
.options-review .feedback { display: block; margin-top: var(--step);
                            color: var(--ink-soft); font-size: .9375rem; }
.explain { background: var(--sky-pale); padding: calc(var(--step) * 2);
           border-radius: var(--radius); }

/* ---------------------------------------------------------- certificate -- */
.certificate { background: var(--paper); border: 10px solid var(--navy);
               border-radius: var(--radius); padding: calc(var(--step) * 5) calc(var(--step) * 4);
               text-align: center; position: relative; }
.certificate::after { content: ""; position: absolute; inset: 10px;
                      border: 2px solid var(--yellow); pointer-events: none; }
.cert-org { font-weight: 700; letter-spacing: .04em; color: var(--navy);
            margin: 0 auto var(--step); max-width: none; }
.certificate h1 { font-size: 1.5rem; margin-bottom: calc(var(--step) * 4); }
.cert-label { color: var(--ink-soft); margin: 0 auto var(--step); max-width: none; }
.cert-name { font-size: 2rem; font-weight: 800; color: var(--navy);
             margin: 0 auto calc(var(--step) * 2); max-width: none; }
.cert-village { margin: 0 auto calc(var(--step) * 3); max-width: none; }
.cert-course { font-size: 1.375rem; font-weight: 700;
               margin: 0 auto calc(var(--step) * 3); max-width: none; }
.cert-score { font-weight: 700; color: var(--green); margin: 0 auto calc(var(--step) * 3); max-width: none; }
.cert-foot { border-top: 2px solid var(--line); padding-top: calc(var(--step) * 2);
             margin-top: calc(var(--step) * 3); font-size: .9375rem; }
.cert-foot p { margin: 0 auto var(--step); max-width: none; }

/* --------------------------------------------------------------- footer -- */
.site-foot { margin-top: calc(var(--step) * 6); background: var(--navy);
             color: #fff; padding: calc(var(--step) * 3) 0; }
.site-foot a { color: var(--yellow); }
.site-foot .muted { color: rgba(255,255,255,.75); }

/* --------------------------------------------------------- small screens -- */
@media (max-width: 30rem) {
  h1 { font-size: 1.5rem; }
  .rung { padding-left: 0; }
  .ladder::before { display: none; }
  .rung-num { position: static; margin-bottom: var(--step); }
  .lesson, .card { padding: calc(var(--step) * 2); }
  .certificate { padding: calc(var(--step) * 3) calc(var(--step) * 2); border-width: 6px; }
  .cert-name { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .site-head, .site-foot, .skip, .no-print, .btn { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .certificate { border-color: #000; }
}