/* Pole Education — readability fixes.
   The lavender theme repaints body text to a dark violet with !important.
   Panels that were built dark never set their own colour, so they inherited
   it and rendered dark-on-dark. Every rule below is a measured case.

   Fixes are scoped with data-pe-page because the class names involved
   (.step, .meter, .summary) also exist on light panels in other modules,
   where a blanket rule turned their text white on white. */

/* ── dark panels need light text ──────────────────────────── */
[data-pe-page="m3"] .quote,
[data-pe-page="m3"] .scene .step,
[data-pe-page="m3"] .scene .progress,
[data-pe-page="situational"] .sidebar,
[data-pe-page="situational"] .scorecard,
[data-pe-page="situational"] .meter,
[data-pe-page="situational"] .situation,
[data-pe-page="situational"] .summary,
[data-pe-page="m2"] .photo-stage,
[data-pe-page="m2"] .photo-note,
[data-pe-page="m8"] .scenario-score .meter{
  color: #ece7fb !important;
}
/* plain text inside them follows; controls and badges keep their own colour */
[data-pe-page="m3"] .quote :is(p,h2,h3,h4,strong,b,small,span,li,div),
[data-pe-page="m3"] .scene .step :is(p,h2,h3,h4,strong,b,small,span,li,div),
[data-pe-page="situational"] .sidebar :is(p,h2,h3,h4,strong,b,small,span,li,div),
[data-pe-page="situational"] .scorecard :is(p,h2,h3,h4,strong,b,small,span,li,div),
[data-pe-page="situational"] .situation :is(p,h2,h3,h4,strong,b,small,span,li,div),
[data-pe-page="situational"] .summary :is(p,h2,h3,h4,strong,b,small,span,li,div),
[data-pe-page="m2"] .photo-stage :is(p,h2,h3,h4,strong,b,small,span,li,div),
[data-pe-page="m2"] .photo-note :is(p,h2,h3,h4,strong,b,small,span,li,div){
  color: inherit !important;
}
[data-pe-page] .quote :is(button,[class*="tab"],[class*="btn"],.badge),
[data-pe-page] .sidebar :is(button,[class*="tab"],[class*="btn"],.badge),
[data-pe-page] .summary :is(button,[class*="tab"],[class*="btn"],.badge),
[data-pe-page] .situation :is(button,[class*="tab"],[class*="btn"],.badge),
[data-pe-page] .scorecard :is(button,[class*="tab"],[class*="btn"],.badge){
  color: revert-layer;
}
/* quieter secondary text, still legible on the dark ground */
[data-pe-page="situational"] .sidebar small,
[data-pe-page="situational"] .scorecard small,
[data-pe-page="situational"] .situation small,
[data-pe-page="situational"] .summary small,
[data-pe-page="m2"] .photo-note small,
[data-pe-page="m3"] .scene .step small{
  color: #bdb3dd !important;
}
[data-pe-page="m8"] .challenge-options button{
  background: #17212f !important;
  border: 1px solid #33405a !important;
  box-shadow: none !important;
  color: #ece7fb !important;
}

/* ── filled buttons carry white text ──────────────────────── */
/* .danger малює сама себе: незворотна дія не має виглядати як
   звичайна головна кнопка */
body .btn:not(.secondary):not(.ghost-btn):not(.danger):not([class*="tab"]),
body form > button:not([class]){
  background: linear-gradient(150deg, var(--peb-plum-hi) 0%, var(--peb-plum) 52%, var(--peb-plum-lo) 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 10px 26px rgba(74,32,124,.28),
              inset 0 1px 0 rgba(255,255,255,.26) !important;
}

/* ── text that measured too pale on white ─────────────────── */
[data-pe-page="situational"] .prompt{ color: #3b2d5e !important; }
[data-pe-page="situational"] .role{ color: #6b5c8f !important; }
[data-pe-page="situational"] .case-code{ color: #5b3cc4 !important; }
body .module-status{ color: #5f5680 !important; }
body .jc-count{ color: #6b6386 !important; }

/* ── disabled controls ────────────────────────────────────
   WCAG exempts them, but 2.89:1 was hard to read even so. */
body .primary-btn:disabled,
body .final-btn:disabled,
body .btn:disabled,
body button:disabled{
  background: #ded6f0 !important;
  color: #5d5473 !important;
  border-color: #cfc4e8 !important;
}

/* ── the last four pale cases, by measured selector ───────── */
body .module-card .module-status,
body .module-card.locked .module-status.locked{ color: #5f5680 !important; }
[data-pe-page="m2"] .photo-tabs .photo-tab small{ color: #5b5472 !important; }
[data-pe-page="m2"] .photo-tabs .photo-tab.active small{ color: #f0ebff !important; }
[data-pe-page="m8"] .protocol-fields .protocol-field label{ color: #5c5070 !important; }
[data-pe-page="situational"] .footer-progress span{ color: #5f5680 !important; }

/* ── sign-in page, dark side panel ────────────────────────
   Measured from rendered pixels: the heading sat at 1.17:1, dark violet on
   a near-black gradient, because the theme paints body text dark and the
   panel never set its own colour. The earlier CSS-only audit could not see
   this: it skipped anything over a gradient. */
[data-pe-page="auth"] .visual{ color: #ece7fb !important; }
[data-pe-page="auth"] .visual :is(h1,h2,h3,strong,b,li,div){ color: inherit !important; }
[data-pe-page="auth"] .visual p{ color: #c3badf !important; }
[data-pe-page="auth"] .visual .mini{ color: #c8a6ff !important; }
[data-pe-page="auth"] .visual a{ color: #e3dbff !important; }
/* That back link sits on the near-black visual panel, where pale lavender is
   the right colour. Giving it .toplink for a 44px touch target also handed it
   the white pill from mobile.css, and pale-on-white measured 1.33:1 — the
   text all but disappeared. Keep the target, drop the pill. */
[data-pe-page="auth"] .visual .toplink{
  background: transparent !important;
  border-color: transparent !important;
  padding-left: 0 !important; padding-right: 0 !important;
  min-height: 44px !important; align-items: center;
}

/* ── second pass: what only appears after an interaction ──────
   The first audit read the page as it loads. Panels that open when a
   trainer is checked were never measured, and one of them — module 4's
   sort result — kept the old dark-lab fill under text the lavender theme
   had already repainted dark: 1.2:1, invisible. Everything below is
   measured from rendered pixels, text colour against the actual background
   behind it, and brought to 4.5:1 (3:1 for large text).
   #645d86 clears 4.5 on every background this site uses, up to #e8e0ff. */

/* result panels left behind from the dark theme */
body .sort-result,
body #sortResult,
body #freqResult,
body .sort-result.show{
  background: #f6f2ff !important;
  border: 1px solid #ded5f6 !important;
  color: #3b2d5e !important;
}
body .sort-result *, body #sortResult *, body #freqResult *{ color: inherit !important; }

/* labels drawn for a dark panel */
/* only where they sit on a light panel — the selected tab keeps a plum
   fill, and painting its label muted made it worse than it started */
body .judge-top,
body .judge-top span,
body #protoCount,
body #finishNote,
body .jc-kicker,
body .case-list .case-tab:not(.active){ color: #645d86 !important; }
body .case-tab.active,
body .case-tab.active *,
body .scenario-tab.active, body .jc-tab.active, body .tab.active,
body .case-tab.active + *{ color: #fff !important; }
/* #caseNo rides on a plum bar in one module and a pale card in another,
   so no single text colour is right for it. Giving it its own chip makes
   it independent of whatever it lands on. */
body #caseNo{
  color: #4f4868 !important;
  background: #f4f0ff !important;
  border: 1px solid #ded5f6 !important;
  border-radius: 999px !important;
  padding: 2px 10px !important;
  font-weight: 700 !important;
}
body .judge-top:has(.active) span{ color: inherit !important; }

/* module 8's live status lines: white and pale green on a light card */
body .hj-status,
body .hj-status strong,
body .hj-status b{ color: #4f4868 !important; }
body .hj-status.on, body .hj-status.on strong{ color: #2f6b45 !important; }
body .hj-status.alert, body .hj-status.alert strong{ color: #8c4a5e !important; }
body .badge{ color: #8c4a5e !important; }

/* The sign-in page has both: a dark plum panel on one side and a white
   form on the other, and the PE mark is a light disc sitting inside the
   dark panel — so it needs the opposite treatment to everything around it.
   Scoped tightly, or the divider inside the dark panel goes dark too. */
[data-pe-page="auth"] .visual .mark{ color: #5b3cc4 !important; }
/* not the label inside the Google button — that one is white on plum */
[data-pe-page="auth"] .formwrap > span,
[data-pe-page="auth"] .formwrap p > span{ color: #645d86 !important; }

/* a disabled primary button still has to be readable */
body .btn.primary:disabled,
body .final-btn:disabled,
body .primary-btn:disabled{
  background: #6b6490 !important;   /* white on this is 5.45:1 */
  border-color: #6b6490 !important;
  color: #fff !important;
  opacity: 1 !important;
}

/* muted text that sat just under the line */
body .mk-foot,
body .mk-facts-label,
body .mk-step,
body .mk-hero .meta,
body .mk-hero .pills,
body .mk-hero .meta .pill,
body .mk-hero .pills .pill,
body .mk-finish p,
body .step,
body .desk p, body .desk small,
body .row .m, body .metric span, body .m{ color: #645d86 !important; }

/* the pink "main idea" panel is the one background where the shared muted
   tone lands at 4.43 — it is .core-main in modules 1-2 and .main in 4-6 */
body .core-main p, body .core-main div,
body .main p, body .main div{ color: #5f5880 !important; }

/* "або через email" on the sign-in form */
body .auth-divider, body .auth-divider span{ color: #645d86 !important; }

/* ── незворотна дія ───────────────────────────────────────── */
/* Видалення студента не має виглядати як звичайна головна кнопка: у рядку
   таблиці воно тихе, у вікні підтвердження — помітне. Обидва кольори
   заміряні на контраст, бо глобальне правило на button перефарбовує текст. */
body .btn.danger{
  background: #fff !important;
  border: 1px solid #cf8d8d !important;
  color: #8c2f2f !important;
  box-shadow: none !important;
}
body .btn.danger:hover{
  background: #fbeeee !important;
  border-color: #a94848 !important;
  color: #7a2626 !important;
}
body #wipeConfirm{
  background: #9a3030 !important;
  border-color: #9a3030 !important;
  color: #fff !important;
}
body #wipeConfirm:hover{
  background: #822525 !important;
  border-color: #822525 !important;
}

/* ── відповідь правильна чи ні ─────────────────────────────── */
/* mobile.css фарбує .answer і .choice у біле з !important, і станів
   correct/wrong не знає. Через це в модулі 4 та в ситуаційних тренажерах
   правильна й неправильна відповідь після перевірки виглядали однаково —
   підсвічування просто не було видно. Кольори ті самі, що й у Judge Check:
   зелений для правильного, червоний для помилки. */
body .answer.correct, body .choice.correct,
body .opt.correct, body .option.correct{
  background: #e9f7ee !important;
  border-color: #7fbd97 !important;
  color: #1d5a33 !important;
}
body .answer.wrong, body .choice.wrong,
body .opt.wrong, body .option.wrong{
  background: #fdecec !important;
  border-color: #cf8d8d !important;
  color: #8c2f2f !important;
}