/* =========================================================================
   SOS MHP — brand theme

   Implements the Branding Plan: SOS navy frame, yellow highlight, and one
   signature colour per level so a learner always knows which course they are
   in.

   THREE COLOURS ARE DARKENED FROM THE PLAN. The plan states white text is
   allowed on Teal, Green and Coral. Measured against white:

       Teal   #0F9BB5   3.29:1   fails WCAG 1.4.3 (needs 4.5:1)
       Green  #2E9E5B   3.41:1   fails
       Coral  #F26A3D   3.04:1   fails
       Navy   #1B3B6F  11.04:1   passes
       Indigo #6A4C93   6.85:1   passes

   All three sit in the 3:1 band, which is legal for large text only — so a
   button label would pass and a sentence of body copy would not. Rather than
   police that distinction on every screen, the strong versions below are
   darkened to the nearest value that clears 4.5:1. The published hues are
   kept as --l1-bright etc. for large display type and decorative rules, where
   they are compliant.
   ========================================================================= */

:root {
  /* SOS frame — unchanged from the plan */
  --navy:      #1B3B6F;
  --navy-dark: #12294E;
  --yellow:    #FFD23F;
  --sky:       #BFE3EC;
  --cloud:     #F4F6F8;
  --ink:       #1F2A37;

  /* Level signatures. -bright = the plan's published hue, for large text and
     rules. -strong = darkened to pass AA with white for normal text. */
  --l1-bright: #0F9BB5;  --l1-strong: #0C7E96;  --l1-tint: #E1F3F7;
  --l2-bright: #2E9E5B;  --l2-strong: #237A46;  --l2-tint: #E6F5EC;
  --l3-bright: #6A4C93;  --l3-strong: #6A4C93;  --l3-tint: #EEE9F5;

  --coral-bright: #F26A3D;  --coral: #C64E24;

  /* Quiz. Wrong answers are amber, never red — red is reserved for real
     danger content, so a learner never confuses "try again" with "escalate". */
  --quiz-correct: #237A46;
  --quiz-retry:   #8A5A00;
  --quiz-retry-bg:#FDF3E2;
  --danger:       #A5000A;

  /* Default theme is the SOS frame; a level page overrides these two. */
  --level-strong: var(--navy);
  --level-bright: var(--navy);
  --level-tint:   var(--sky);
}

body[data-level="1"] { --level-strong: var(--l1-strong); --level-bright: var(--l1-bright); --level-tint: var(--l1-tint); }
body[data-level="2"] { --level-strong: var(--l2-strong); --level-bright: var(--l2-bright); --level-tint: var(--l2-tint); }
body[data-level="3"] { --level-strong: var(--l3-strong); --level-bright: var(--l3-bright); --level-tint: var(--l3-tint); }

/* ------------------------------------------------------------ the header -- */
.site-head { background: var(--navy); }

.brand { gap: 12px; }
.brand-logo {
  height: 40px; width: auto; flex: 0 0 auto;
  background: #fff; padding: 4px 6px; border-radius: 6px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text .brand-name { font-size: 1rem; font-weight: 700; }
.brand-text .brand-sub  { font-size: .8125rem; font-weight: 400; opacity: .85; }

/* The level band: says which course you are in, in that course's colour. */
.level-band {
  background: var(--level-strong); color: #fff;
  padding: 10px 0; margin-bottom: calc(var(--step) * 2);
}
.level-band .wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.level-band .icon { color: #fff; }
.level-band strong { font-size: 1.0625rem; }
.level-band .band-sub { opacity: .9; font-size: .9375rem; }

/* -------------------------------------------------------- level colouring -- */
.rung.is-open .rung-num   { border-color: var(--level-bright); }
.rung.is-open .rung-body  { border-color: var(--level-strong); }
.bar > span               { background: var(--level-strong); }
.spine li                 { color: var(--level-strong); }
.unit-head .icon-lg       { color: var(--level-strong); }
.screen-icon              { color: var(--level-strong); }
.lesson-title .icon-lg    { color: var(--level-strong); }
.keywords li              { color: var(--level-strong); }
.keywords li::before      { background: var(--yellow); }
.remember                 { background: var(--level-tint); border-color: var(--level-strong); }
.example                  { background: var(--level-tint); border-left-color: var(--level-bright); }
.player                   { background: var(--level-tint); }
.easy-row-icon            { background: var(--level-tint); color: var(--level-strong); }

/* Level cards on the dashboard each carry their own colour. */
.rung[data-level="1"] { --level-strong: var(--l1-strong); --level-bright: var(--l1-bright); --level-tint: var(--l1-tint); }
.rung[data-level="2"] { --level-strong: var(--l2-strong); --level-bright: var(--l2-bright); --level-tint: var(--l2-tint); }
.rung[data-level="3"] { --level-strong: var(--l3-strong); --level-bright: var(--l3-bright); --level-tint: var(--l3-tint); }
.rung.is-done .rung-num { background: var(--level-strong); border-color: var(--level-strong); }

/* ------------------------------------------------------------- buttons ---- */
.btn-primary { background: var(--level-strong); color: #fff; }
.btn-primary:hover { filter: brightness(.92); }
.btn-ghost { color: var(--level-strong); border-color: var(--level-strong); }
/* The single key action per screen stays yellow with dark ink — never white
   on yellow, which would be 1.6:1. */
.btn { background: var(--yellow); color: var(--ink); }

/* ------------------------------------------------------------- the quiz --- */
.option:has(input:checked) { border-color: var(--level-strong); background: var(--level-tint); }
.question.is-correct { border-left-color: var(--quiz-correct); }
.question.is-correct .verdict { color: var(--quiz-correct); }
.question.is-wrong { border-left-color: var(--quiz-retry); }
.question.is-wrong .verdict { color: var(--quiz-retry); }
.options-review .opt-correct { border-color: var(--quiz-correct); background: #EDF7F0; }
.options-review .opt-chosen:not(.opt-correct) {
  border-color: var(--quiz-retry); background: var(--quiz-retry-bg);
}
.note-success { border-left-color: var(--quiz-correct); }
.note-error   { border-left-color: var(--quiz-retry); }
/* Passing is a celebration, in the shared yellow. */
.note-success.is-pass { background: #FFFBEA; border-left-color: var(--yellow); border-left-width: 10px; }

/* ============================================== media sizing ==============
   The sign videos are portrait 9:16. At width:100% a portrait video becomes
   about 1700px tall on a laptop — you scroll past the picture to reach the
   controls. Cap the height and let the frame letterbox instead.
   ========================================================================= */
.media-block { display: flex; flex-direction: column; align-items: center; }

.lesson-video {
  width: auto;
  max-width: 100%;
  max-height: 62vh;
  height: auto;
  background: #0E141B;
  border-radius: var(--radius);
  display: block;
}
/* On a phone the video may use the full width; it is already portrait, so
   the height cap is what does the work. */
@media (max-width: 40rem) {
  .lesson-video { max-height: 70vh; width: 100%; }
}

.lesson-img {
  max-height: 46vh;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  object-fit: contain;
}

.media-block .player-controls { justify-content: center; }

/* A video screen with no separate audio track says so, rather than leaving a
   gap where the player would be. */
.media-note {
  font-size: .9375rem; color: var(--ink-soft);
  margin-top: var(--step); text-align: center;
}

/* ------------------------------------------------- contrast-mode overrides -
   The accessibility themes must beat the brand, not the other way round.    */
html.a11y-contrast-high body[data-level] {
  --level-strong: #000; --level-bright: #000; --level-tint: #fff;
}
html.a11y-contrast-dark body[data-level="1"] { --level-strong: #6FD3E8; --level-tint: #12303A; }
html.a11y-contrast-dark body[data-level="2"] { --level-strong: #6FD68A; --level-tint: #12301F; }
html.a11y-contrast-dark body[data-level="3"] { --level-strong: #BCA6E0; --level-tint: #241B33; }
html.a11y-contrast-dark .btn-primary { color: #11181F; }
html.a11y-contrast-dark .brand-logo { background: #fff; }

@media (forced-colors: active) {
  .level-band { background: Canvas; color: CanvasText; border-bottom: 2px solid CanvasText; }
  .brand-logo { background: Canvas; }
}

/* ==========================================================================
   THE CERTIFICATE

   Sized for A4 landscape. The learner prints this, pins it up, and shows it
   to a supervisor — so it has to look like an award, not a receipt, while
   staying inside the same accessible palette as the rest of the platform.

   The ribbon down the left is the level's signature colour, which is how a
   supervisor can tell Level 1 from Level 3 across a room.
   ========================================================================== */

.cert-page main { max-width: 62rem; }
.cert-actions { display: flex; gap: 12px; margin: 24px 0; flex-wrap: wrap; }

.certificate {
  position: relative;
  background: #fff;
  border: 2px solid var(--line);
  border-left: 14px solid var(--level-strong);
  border-radius: 4px;
  padding: 40px 48px 32px 56px;
  text-align: center;
  box-shadow: 0 2px 14px rgba(27, 59, 111, .10);
}
/* A thin inner rule in the SOS yellow — the only decorative flourish. */
.certificate::after {
  content: ""; position: absolute; inset: 10px 12px;
  border: 1px solid var(--yellow); pointer-events: none; border-radius: 2px;
}
.cert-ribbon {
  position: absolute; left: -14px; top: 32px;
  width: 14px; height: 84px; background: var(--yellow);
}

.cert-head { margin-bottom: 20px; }
.cert-logo { max-height: 62px; width: auto; margin: 0 auto 10px; display: block; }
.cert-org   { font-size: 1.0625rem; font-weight: 700; letter-spacing: .03em;
              color: var(--navy); margin: 0 auto 2px; max-width: none; }
.cert-org-2 { font-size: .9375rem; color: var(--ink-soft); margin: 0 auto; max-width: none; }

.cert-title {
  font-size: 1.5rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--level-strong); margin: 0 0 28px;
  padding-bottom: 12px; border-bottom: 2px solid var(--level-tint);
}
body.lang-hi .cert-title { text-transform: none; letter-spacing: .01em; }

.cert-label { color: var(--ink-soft); font-size: .9375rem; margin: 0 auto 6px; max-width: none; }

.cert-name {
  font-size: 2.25rem; font-weight: 800; line-height: 1.2;
  color: var(--navy); margin: 0 auto 2px; max-width: none;
}
.cert-name-alt { font-size: 1.375rem; font-weight: 700; color: var(--ink-soft);
                 margin: 0 auto 4px; max-width: none; }
.cert-village  { color: var(--ink-soft); margin: 0 auto 22px; max-width: none; }

.cert-course { font-size: 1.375rem; font-weight: 700; color: var(--ink);
               margin: 0 auto 4px; max-width: none; }
.cert-spine  { font-size: .9375rem; letter-spacing: .06em; color: var(--level-strong);
               font-weight: 700; margin: 0 auto 18px; max-width: none; }
.cert-score  { display: inline-block; font-weight: 700; color: var(--quiz-correct);
               background: #EDF7F0; border-radius: 999px; padding: 4px 16px;
               margin: 0 auto 26px; max-width: none; }

.cert-signatures {
  display: flex; justify-content: center; gap: 64px; flex-wrap: wrap;
  margin: 30px 0 26px;
}
.cert-sig { display: flex; flex-direction: column; align-items: center; min-width: 13rem; }
.sig-rule { display: block; width: 13rem; border-top: 1px solid var(--ink); margin-bottom: 6px; }
.cert-sig strong { font-size: 1rem; }
.cert-sig .muted { font-size: .8125rem; text-align: center; }

.cert-foot {
  display: flex; align-items: center; justify-content: center; gap: 28px;
  flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 18px;
  text-align: left;
}
.cert-qr { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cert-qr .qr { width: 92px; height: 92px; display: block; }
.qr-caption { font-size: .75rem; color: var(--ink-soft); }
.cert-foot-text p { margin: 0 0 3px; font-size: .875rem; max-width: none; }
.cert-code { font-size: 1.0625rem; letter-spacing: .12em; font-family: ui-monospace, monospace; }

.cert-revoked { color: var(--danger); font-weight: 700; margin-top: 16px; }

@media (max-width: 46rem) {
  .certificate { padding: 26px 20px 22px 26px; border-left-width: 10px; }
  .cert-name { font-size: 1.625rem; }
  .cert-title { font-size: 1.1875rem; }
  .cert-signatures { gap: 26px; margin: 22px 0 18px; }
}

@media print {
  @page { size: A4 landscape; margin: 10mm; }
  .cert-page main { max-width: none; padding: 0; }
  .certificate {
    box-shadow: none; border-color: #999;
    border-left: 12px solid var(--level-strong);
    padding: 26px 34px;
  }
  .cert-actions, .site-head, .site-foot, .a11y-panel, .skip-links { display: none !important; }
  .cert-name { font-size: 30pt; }
  .cert-title { font-size: 15pt; }
  .cert-qr .qr { width: 78px; height: 78px; }
}

/* ==========================================================================
   THE SIGN-IN SCREEN
   The first thing a house mother sees. Cloud-grey field, one white card, the
   SOS mark at the top — calm, and obviously the right place.
   ========================================================================== */
body.login-page { background: var(--cloud); }
.login-mark { text-align: center; margin: 8px 0 4px; }
.login-mark img { max-height: 76px; width: auto; }
.login-page h1 { text-align: center; margin-bottom: 6px; }
.login-page .login-sub { text-align: center; color: var(--ink-soft); margin: 0 auto 24px; }
.login-page .card-narrow { box-shadow: 0 2px 12px rgba(27,59,111,.08); }
.login-help { text-align: center; margin-top: 20px; }

/* A page background that matches the branding plan's Cloud Grey. */
body { background: var(--cloud); }

/* ==========================================================================
   PRINT — fit on one A4 landscape page

   A4 landscape less 10mm margins leaves about 718px of height at 96dpi. The
   screen layout runs to roughly 900px, which orphaned the QR and issue date
   onto a second sheet — a certificate that prints as two pages is not a
   certificate. Vertical rhythm is compressed here only; nothing changes on
   screen.
   ========================================================================== */
@media print {
  html, body { height: auto; }

  /* Browsers strip background colours when printing unless told otherwise,
     which would drop the yellow ribbon and the score pill. */
  .certificate, .cert-ribbon, .cert-score {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .certificate {
    padding: 18px 30px 14px 34px;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .certificate::after { inset: 7px 8px; }
  .cert-ribbon { top: 22px; height: 62px; width: 11px; left: -12px; }

  .cert-head   { margin-bottom: 10px; }
  .cert-logo   { max-height: 44px; margin-bottom: 6px; }
  .cert-org    { font-size: 10.5pt; }
  .cert-org-2  { font-size: 8.5pt; }

  .cert-title  { font-size: 13pt; margin-bottom: 14px; padding-bottom: 8px; }
  .cert-label  { font-size: 8.5pt; margin-bottom: 3px; }
  .cert-name   { font-size: 24pt; }
  .cert-name-alt { font-size: 14pt; }
  .cert-village { font-size: 9.5pt; margin-bottom: 12px; }
  .cert-course { font-size: 13pt; }
  .cert-spine  { font-size: 8.5pt; margin-bottom: 8px; }
  .cert-score  { font-size: 10pt; padding: 2px 12px; margin-bottom: 12px; }

  .cert-signatures { margin: 16px 0 10px; gap: 44px; }
  .sig-rule { width: 10rem; }
  .cert-sig strong { font-size: 9.5pt; }
  .cert-sig .muted { font-size: 7.5pt; }

  .cert-foot { padding-top: 10px; gap: 20px; }
  .cert-qr .qr { width: 62px; height: 62px; }
  .qr-caption { font-size: 6.5pt; }
  .cert-foot-text p { font-size: 8.5pt; margin-bottom: 1px; }
  .cert-code { font-size: 10pt; }
}

/* ---- accessibility corrections (colour-blindness, 1.4.11, focus ring) ---- */
:root {
  /* L3 indigo -> violet: teal and indigo were ΔE 10.3 apart under
     deuteranopia, i.e. the same colour for roughly 1 in 12 men. */
  --l3-bright: #7B3BB0;
  --l3-strong: #6B2FA0;
  --l3-tint:   #F0E9F8;

  /* WCAG 1.4.11 needs 3:1 on anything that identifies a control.
     --line is 1.53:1 — fine for decorative rules, not for card edges. */
  --line-strong: #7A8AA0;
}

.option,
.field input[type="text"], .field input[type="password"],
.field input[type="email"], .field input[type="tel"],
.a11y-group, .transcript, .player-btn,
.speed-group select { border-color: var(--line-strong); }

/* Two rings — navy against the component, yellow outside it. On a light page
   the navy reads 14:1; on the navy header the yellow reads 7.65:1. One of the
   two is always high-contrast, whatever it lands on. */
:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--navy-dark), 0 0 0 7px var(--yellow);
  border-radius: 4px;
}
html.a11y-contrast-dark :focus-visible { box-shadow: 0 0 0 3px #0E141B, 0 0 0 7px var(--yellow); }
html.a11y-contrast-high :focus-visible { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 7px #000000; }
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; box-shadow: none; }
}

html.a11y-contrast-dark body[data-level="3"] { --level-strong: #C9A6F0; --level-tint: #291B3D; }