/* =========================================================================
   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; }
}

/* Question legends carry the prompt directly — a heading nested inside a
   <legend> gets announced twice by several screen readers. */
.question legend {
  font-size: 1.25rem; font-weight: 700; color: var(--navy);
  margin-bottom: calc(var(--step) * 2); padding: 0; float: left; width: 100%;
}
.question legend .q-num { color: var(--ink-soft); }
.question fieldset { border: 0; }

/* The visible focus ring must never be clipped by a card's overflow. */
.card, .lesson, .rung-body { overflow: visible; }

/* ======================================================== icons ==========
   Sized in em so they scale with the text-size setting rather than fighting
   it, and coloured with currentColor so the contrast themes pick them up for
   free. An icon is never the only carrier of meaning — see includes/icons.php.
   ======================================================================== */
.icon {
  width: 1.35em; height: 1.35em;
  flex: 0 0 auto;
  vertical-align: -0.25em;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icon-lg { width: 2em; height: 2em; }

.icon-label { display: inline-flex; align-items: center; gap: 0.5em; }
.icon-head  { align-items: center; }

.brand { display: inline-flex; align-items: center; gap: var(--step); }

/* --------------------------------------------------- the teaching spine --
   Picture over word, arrow between. The one thing a learner should carry out
   of the level, so it is shown rather than written.                        */
.spine {
  list-style: none; display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: calc(var(--step) * 2); margin: 0 0 calc(var(--step) * 2); padding: 0;
}
.spine li {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; min-width: 4.5rem; color: var(--navy); font-weight: 700;
  position: relative;
}
.spine li + li::before {
  content: "→"; position: absolute; left: calc(-1 * var(--step) * 2 + 1px);
  top: 0.7em; transform: translateX(-50%); color: var(--ink-soft);
  font-weight: 400;
}
.spine li span { font-size: 0.9375rem; }
.spine-lg li { min-width: 5.5rem; }
.spine-lg li span { font-size: 1.0625rem; }

/* ------------------------------------------------------- easy-read rows --
   Picture left, words right — the same shape on every screen, so the pattern
   is learned once.                                                          */
.easy-row {
  display: flex; gap: calc(var(--step) * 2); align-items: flex-start;
  padding: calc(var(--step) * 2) 0;
  border-bottom: 1px solid var(--line);
}
.easy-row:last-child { border-bottom: 0; }
.easy-row-icon {
  flex: 0 0 auto; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--sky-pale); border-radius: 50%; color: var(--navy);
}
.easy-row-icon .icon { width: 30px; height: 30px; vertical-align: 0; }
.easy-row-text h3 { margin-bottom: 4px; }
.easy-row-text p { margin: 0; }
.easy-row-urgent .easy-row-icon { background: #FDECEA; color: var(--red); }

/* --------------------------------------------------------- status lines -- */
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--step); font-weight: 700; }
.status-done   { color: var(--green); }
.status-locked { color: var(--ink-soft); }
.status-line span:not(.icon-label) { font-weight: 400; }

/* --------------------------------------------------------- unit headings -- */
.unit-head { display: flex; align-items: flex-start; gap: calc(var(--step) * 1.5); }
.unit-head .icon-lg { color: var(--navy); margin-top: 2px; }
.unit-no { color: var(--ink-soft); }

.screen-list a { gap: calc(var(--step) * 1.5); }
.screen-icon { color: var(--navy); }
.screen-list li.is-done .screen-icon { color: var(--green); }
.tick { display: inline-flex; color: var(--green); }

.note-remember { border-left-color: var(--yellow); display: flex; gap: var(--step); align-items: flex-start; }
.remember h3 .icon { color: var(--navy); }

/* Icons must survive the high-contrast and forced-colours modes. */
@media (forced-colors: active) {
  .icon { stroke: CanvasText; }
  .easy-row-icon { background: Canvas; border: 1px solid CanvasText; }
}

.lesson-title { display: flex; align-items: flex-start; gap: calc(var(--step) * 1.5); }
.lesson-title .icon-lg { color: var(--navy); margin-top: 0.1em; flex: 0 0 auto; }
.player-label { display: flex; align-items: center; gap: var(--step); }

/* Credits: term and definition rather than a bare list, because who did what
   is the information, not just who was involved. */
dl.credits { margin: 0 0 calc(var(--step) * 2); }
dl.credits dt { font-weight: 700; color: var(--navy); margin-top: var(--step); }
dl.credits dd { margin: 0 0 var(--step); }

/* =========================================================================
   WIDGETS

   Level-coloured throughout, so a widget in Level 2 is green and the same
   widget in Level 1 is teal without any per-level CSS.

   Every interactive element is at least --tap (56px). These are thumbs on a
   shared phone, often in poor light.
   ========================================================================= */

.widget { margin: 20px 0 8px; }

/* ---------------------------------------------------------- do / don't -- */
.w-pair {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
}
.w-pair > .w-half { padding: 14px 16px; }
.w-half p { margin: 0; max-width: none; }
.w-tag {
  display: inline-block; font-size: .8125rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px;
}
body.lang-hi .w-tag { text-transform: none; letter-spacing: .01em; }

.w-do   { background: var(--level-tint); }
.w-do   .w-tag { color: var(--level-strong); }
.w-dont { background: var(--quiz-retry-bg); border-top: 1px solid var(--line); }
.w-dont .w-tag { color: var(--quiz-retry); }

/* Amber, never red. Red means "refer now" elsewhere in the course, and a
   learner who sees the danger colour on a listening exercise learns to
   discount it. */

.w-why > summary {
  min-height: var(--tap);
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px; cursor: pointer;
  font-weight: 600; color: var(--level-strong);
  border-top: 1px solid var(--line);
  background: #fff;
}
.w-why > summary::marker { content: ''; }
.w-why > summary::before { content: '▸'; transition: transform .15s; }
.w-why[open] > summary::before { transform: rotate(90deg); }
.w-why > p { margin: 0; padding: 0 16px 16px; max-width: none; color: var(--ink-soft); }

@media (min-width: 40rem) {
  /* Side by side once there is room. Below that they stack, because two
     narrow columns of Devanagari are unreadable. */
  .w-pair { display: grid; grid-template-columns: 1fr 1fr; }
  .w-dont { border-top: 0; border-left: 1px solid var(--line); }
  .w-why  { grid-column: 1 / -1; }
}

/* -------------------------------------------------------- word picker -- */
.w-sit {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 16px; margin-bottom: 16px;
}
.w-sit-head {
  font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--level-strong); margin: 0 0 6px;
}
body.lang-hi .w-sit-head { text-transform: none; letter-spacing: .01em; }
.w-sit-text { font-weight: 600; margin: 0 0 14px; max-width: none; }

.w-options { list-style: none; margin: 0; padding: 0; }
.w-option { margin-bottom: 10px; }
.w-opt-btn {
  width: 100%; min-height: var(--tap);
  text-align: start; padding: 12px 16px;
  background: #fff; border: 2px solid var(--line-strong);
  border-radius: var(--radius); font: inherit; color: var(--ink);
  cursor: pointer;
}
.w-opt-btn:hover { border-color: var(--level-strong); }

.w-option.is-chosen .w-opt-btn { border-width: 3px; }
.w-option.is-best   .w-opt-btn { border-color: var(--quiz-correct); background: #EDF7F0; }
.w-option.is-other  .w-opt-btn { border-color: var(--quiz-retry);   background: var(--quiz-retry-bg); }

.w-fb {
  margin: 8px 0 0; padding: 10px 14px; max-width: none;
  border-inline-start: 4px solid var(--line-strong);
  background: var(--cloud); color: var(--ink);
}
.w-option.is-best  .w-fb { border-inline-start-color: var(--quiz-correct); }
.w-option.is-other .w-fb { border-inline-start-color: var(--quiz-retry); }

/* ---------------------------------------------------------- step flow -- */
.w-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.w-step  { counter-increment: step; margin-bottom: 12px; }
.w-step > details {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
}
.w-step > details[open] { border-color: var(--level-strong); border-width: 2px; }
.w-step summary {
  min-height: var(--tap);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; cursor: pointer; font-weight: 700;
}
.w-step summary::marker { content: ''; }
.w-step summary::before {
  content: counter(step);
  flex: 0 0 auto;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--level-strong); color: #fff;
  font-size: .9375rem;
}
.w-step > details > p { margin: 0; padding: 0 16px 16px 4rem; max-width: none; }

/* The number is a real counter, not drawn into the markup, so it renumbers
   correctly if a step is added and is not read aloud twice. */

@media (forced-colors: active) {
  .w-opt-btn, .w-pair, .w-sit, .w-step > details { border: 1px solid CanvasText; }
  .w-step summary::before { border: 1px solid CanvasText; }
}

/* ------------------------------------------------------------ scroll story -- */
.w-story { list-style: none; margin: 0; padding: 0; counter-reset: panel; }
.w-panel {
  counter-increment: panel;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 14px; background: #fff;
}
.w-panel-img { display: block; width: 100%; height: auto; }
.w-panel-body { display: flex; gap: 12px; padding: 14px 16px; }
.w-panel-no {
  flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--level-strong); color: #fff; font-weight: 700; font-size: .875rem;
}
.w-panel-body p { margin: 0; max-width: none; }

.w-story-card {
  border: 2px solid var(--level-strong); border-radius: var(--radius);
  background: var(--level-tint); padding: 18px 20px; margin-top: 6px;
}
.w-story-card p {
  margin: 0 0 10px; max-width: none;
  font-size: 1.125rem; font-weight: 700; text-align: center;
}
.w-story-card p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------- sort -- */
.w-trays { display: grid; gap: 12px; margin-bottom: 16px; }
@media (min-width: 34rem) { .w-trays { grid-template-columns: 1fr 1fr; } }
.w-tray {
  border: 2px dashed var(--line-strong); border-radius: var(--radius);
  padding: 12px 14px; min-height: 6rem;
}
.w-sort.has-picked .w-tray { border-color: var(--level-strong); background: var(--level-tint); }
.w-tray h3 { margin: 0 0 8px; font-size: 1rem; color: var(--level-strong); }
.w-tray-items { list-style: none; margin: 0; padding: 0; }

.w-cards { list-style: none; margin: 0; padding: 0; }
.w-card { margin-bottom: 10px; }
.w-card-btn {
  width: 100%; min-height: var(--tap); text-align: start;
  padding: 12px 16px; font: inherit; color: var(--ink); cursor: pointer;
  background: #fff; border: 2px solid var(--line-strong); border-radius: var(--radius);
}
.w-card.is-picked .w-card-btn { border-color: var(--level-strong); border-width: 3px; background: var(--level-tint); }
.w-card.is-placed .w-card-btn { border-color: var(--quiz-correct); background: #EDF7F0; cursor: default; }
.w-card.is-returned .w-card-btn { border-color: var(--quiz-retry); background: var(--quiz-retry-bg); }
.w-card-answer { display: block; margin-top: 4px; font-size: .875rem; color: var(--ink-soft); }

/* A card in the wrong tray is handed back, not marked wrong. */
@media (prefers-reduced-motion: no-preference) {
  .w-card.is-returned { animation: w-nudge .3s; }
  @keyframes w-nudge { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
}

/* --------------------------------------------------------------- branching -- */
.w-branch-step { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 16px; }
.w-branch-text { font-weight: 600; margin: 0 0 14px; max-width: none; }
.w-branch-choices { list-style: none; margin: 0; padding: 0; }
.w-choice { margin-bottom: 10px; }
.w-choice-btn {
  width: 100%; min-height: var(--tap); text-align: start;
  padding: 12px 16px; font: inherit; color: var(--ink); cursor: pointer;
  background: #fff; border: 2px solid var(--line-strong); border-radius: var(--radius);
}
.w-choice.is-good  .w-choice-btn { border-color: var(--quiz-correct); background: #EDF7F0; }
.w-choice.is-other .w-choice-btn { border-color: var(--quiz-retry);   background: var(--quiz-retry-bg); }
.w-outcome {
  margin: 8px 0 0; padding: 10px 14px; max-width: none;
  background: var(--cloud); border-inline-start: 4px solid var(--line-strong);
}
.w-choice.is-good  .w-outcome { border-inline-start-color: var(--quiz-correct); }
.w-choice.is-other .w-outcome { border-inline-start-color: var(--quiz-retry); }

/* --------------------------------------------------------- self-care wheel -- */
.w-wheel { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 34rem) { .w-wheel { grid-template-columns: 1fr 1fr; } }
.w-way > details {
  border: 2px solid var(--line-strong); border-radius: var(--radius); background: #fff;
}
.w-way > details[open] { border-color: var(--level-strong); }
.w-way summary {
  min-height: var(--tap); display: flex; align-items: center;
  padding: 10px 16px; cursor: pointer; font-weight: 700; color: var(--level-strong);
}
.w-way summary::marker { content: ''; }
.w-way > details > p { margin: 0; padding: 0 16px 14px; max-width: none; }

@media (forced-colors: active) {
  .w-tray, .w-card-btn, .w-choice-btn, .w-panel, .w-way > details { border: 1px solid CanvasText; }
}

/* --------------------------------------------------------------- rate scale -- */
.w-rate-scene {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 16px; margin-bottom: 16px;
}
.w-rate-text { font-weight: 600; margin: 0 0 14px; max-width: none; }
.w-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
           grid-template-columns: repeat(4, 1fr); }
.w-chip-btn {
  width: 100%; min-height: var(--tap);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 8px 4px; font: inherit; cursor: pointer;
  background: #fff; border: 2px solid var(--line-strong); border-radius: var(--radius);
}
.w-chip-no  { font-size: 1.375rem; font-weight: 800; line-height: 1; }
.w-chip-lab { font-size: .75rem; color: var(--ink-soft); text-align: center; }

/* Green, amber, orange, red — matching the illustration on screen 4-1, so a
   learner meets the same four colours in the same order twice. */
.w-chip-0 .w-chip-btn { border-color: #237A46; }
.w-chip-1 .w-chip-btn { border-color: #8A5A00; }
.w-chip-2 .w-chip-btn { border-color: #C64E24; }
.w-chip-3 .w-chip-btn { border-color: #A5000A; }
.w-chip.is-picked .w-chip-btn { border-width: 4px; }
.w-chip.is-answer .w-chip-btn { background: #EDF7F0; }

.w-rate-fb {
  margin: 12px 0 0; padding: 10px 14px; max-width: none;
  background: var(--cloud); border-inline-start: 4px solid var(--line-strong);
}
.w-rate-fb.is-right { border-inline-start-color: var(--quiz-correct); background: #EDF7F0; }
.w-rate-fb.is-other { border-inline-start-color: var(--quiz-retry);   background: var(--quiz-retry-bg); }

/* ------------------------------------------------------------------- commit -- */
.w-commit-group { border: 0; padding: 0; margin: 0 0 18px; }
.w-commit-group legend {
  padding: 0; margin-bottom: 8px;
  font-weight: 700; color: var(--level-strong);
}
.w-commit-opts { list-style: none; margin: 0; padding: 0; }
.w-commit-opts li { margin-bottom: 8px; }
.w-commit-btn {
  width: 100%; min-height: var(--tap); text-align: start;
  padding: 12px 16px; font: inherit; color: var(--ink); cursor: pointer;
  background: #fff; border: 2px solid var(--line-strong); border-radius: var(--radius);
}
.w-commit-btn.is-chosen {
  border-color: var(--level-strong); border-width: 3px; background: var(--level-tint);
}
.w-commit-done {
  margin: 4px 0 0; padding: 14px 16px; max-width: none;
  background: var(--level-tint); border-radius: var(--radius);
  font-weight: 700; text-align: center; color: var(--level-strong);
}

/* ------------------------------------------------- three trays, not two -- */
/* Screen 1-2 sorts into three people rather than two categories. */
@media (min-width: 34rem) {
  .w-sort[data-trays="3"] .w-trays,
  .w-trays:has(.w-tray:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
}

@media (forced-colors: active) {
  .w-chip-btn, .w-commit-btn { border: 1px solid CanvasText; }
}

/* =========================================================================
   FORMS — Level 3 instruments
   ========================================================================= */
.form-page main { max-width: 46rem; }
.f-form { margin-top: 18px; }

.f-meta { border: 1px solid var(--line-strong); border-radius: var(--radius);
          padding: 14px 16px; margin-bottom: 20px; }
.f-meta label { display: block; font-weight: 700; margin-bottom: 6px; }
.f-meta .muted { margin: 6px 0 0; font-size: .875rem; }

.f-section { margin-bottom: 26px; }
.f-section > h2 { font-size: 1.25rem; margin: 0 0 6px; }
.f-guidance { color: var(--ink-soft); margin: 0 0 14px; }

/* The risk section is visibly a different kind of thing. Not decoration —
   a Volunteer should know when she has moved into it. */
.f-section.is-risk {
  border-inline-start: 5px solid var(--danger);
  padding-inline-start: 14px;
}

.f-item { border: 0; padding: 0; margin: 0 0 20px; }
.f-item legend { padding: 0; font-weight: 700; margin-bottom: 6px; }
.f-help > summary {
  min-height: 2.5rem; display: flex; align-items: center;
  cursor: pointer; color: var(--level-strong); font-size: .9375rem;
}
.f-help > summary::marker { content: ''; }
.f-help > p { margin: 0 0 10px; color: var(--ink-soft); }

/* --------------------------------------------------------- the 0–3 scale -- */
.f-scale { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 40rem) { .f-scale { grid-template-columns: repeat(4, 1fr); } }

.f-chip label {
  display: flex; flex-direction: column; gap: 2px;
  min-height: var(--tap); padding: 10px 12px; cursor: pointer;
  border: 2px solid var(--line-strong); border-radius: var(--radius);
  background: #fff;
}
.f-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.f-chip-no   { font-size: 1.25rem; font-weight: 800; line-height: 1; }
.f-chip-mean { font-weight: 600; font-size: .9375rem; }
.f-chip-act  { font-size: .8125rem; color: var(--ink-soft); }

.f-chip-0 label { border-color: #237A46; }
.f-chip-1 label { border-color: #8A5A00; }
.f-chip-2 label { border-color: #C64E24; }
.f-chip-3 label { border-color: #A5000A; }
.f-chip.is-on label,
.f-chip label:has(input:checked) { border-width: 4px; background: var(--cloud); }
.f-chip label:has(input:focus-visible) { outline: 3px solid var(--navy-dark); outline-offset: 2px; }

/* ------------------------------------------------------------- other types -- */
.f-yesno { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.f-pill {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 8px 20px; cursor: pointer;
  border: 2px solid var(--line-strong); border-radius: 999px; background: #fff;
}
.f-pill:has(input:checked) { border-color: var(--level-strong); border-width: 3px; background: var(--level-tint); }
.f-pill input { position: absolute; opacity: 0; width: 0; height: 0; }

.f-input, .f-text {
  width: 100%; min-height: var(--tap); padding: 10px 14px;
  font: inherit; color: var(--ink);
  border: 2px solid var(--line-strong); border-radius: var(--radius); background: #fff;
}
.f-text { min-height: 6rem; resize: vertical; }

/* ------------------------------------------------------------- escalation -- */
.f-escalate {
  border: 3px solid var(--danger); border-radius: var(--radius);
  background: #FDECEE; padding: 16px 18px; margin: 18px 0;
}
.f-escalate h2 { margin: 0 0 8px; color: var(--danger); font-size: 1.125rem; }
.f-escalate p  { margin: 0 0 8px; }
.f-escalate ul { margin: 0; padding-inline-start: 1.2rem; }
.f-escalate li { margin-bottom: 4px; }

.f-missing { border-inline-start: 4px solid var(--quiz-retry);
             background: var(--quiz-retry-bg); padding: 10px 14px; }
.f-done    { border-inline-start: 4px solid var(--quiz-correct);
             background: #EDF7F0; padding: 12px 16px; margin: 16px 0; font-weight: 600; }

.f-nototal { font-size: .875rem; margin: 0 0 18px; }
.f-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

@media (forced-colors: active) {
  .f-chip label, .f-pill, .f-input, .f-text { border: 1px solid CanvasText; }
  .f-escalate { border: 3px solid CanvasText; }
}

/* The clinical anchor, under the plain one. Smaller and quieter — a
   Volunteer needs it, a co-worker reading the same scale does not. */
.f-chip-clin {
  display: block; margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--line);
  font-size: .75rem; color: var(--ink-soft); font-style: italic;
}

/* ============================================================ CASE ATTEMPT == */
.case-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.case-card, .case-head {
  border: 2px solid var(--line-strong); border-radius: var(--radius);
  padding: 18px 20px; background: #fff;
}
.case-card h2, .case-head h2 { margin: 0 0 8px; font-size: 1.25rem; }
.case-card p, .case-head p { max-width: none; }
.case-caution {
  border-inline-start: 4px solid var(--quiz-retry);
  background: var(--quiz-retry-bg); padding: 10px 14px; margin: 12px 0 16px;
}
.case-count { font-weight: 700; color: var(--level-strong); margin: 18px 0 10px; }

.case-steps { list-style: none; counter-reset: cs; margin: 0; padding: 0; }
.case-step {
  counter-increment: cs;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px; background: #fff;
}
.case-step.is-started { border-color: var(--quiz-retry); border-width: 2px; }
.case-step.is-done    { border-color: var(--quiz-correct); border-width: 2px; background: #F7FCF9; }
.case-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.case-step-head h3 { margin: 0; font-size: 1.0625rem; }
.case-step-no {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700;
  background: var(--line-strong); color: #fff;
}
.case-step.is-done .case-step-no { background: var(--quiz-correct); }

.case-checks { list-style: none; margin: 0 0 12px; padding: 0; font-size: .9375rem; }
.case-checks li { padding: 4px 0 4px 1.5rem; position: relative; }
.case-checks li::before { position: absolute; left: 0; font-weight: 700; }
.case-checks .is-ok::before   { content: '✓'; color: var(--quiz-correct); }
.case-checks .is-note::before { content: '·'; color: var(--quiz-retry); font-size: 1.4em; line-height: 1; }
.case-checks .is-note { color: var(--ink-soft); }

@media (forced-colors: active) {
  .case-card, .case-step { border: 1px solid CanvasText; }
}