/* ==========================================================================
   Projects GOLD — accessibility / print / motion hardening for the unit
   culminating-project wizard pages (companion to projects-gold.js).

   Scope: everything is gated on body.pro-projects so hubs, answer keys, and
   the rest of the site are untouched. Purely additive; no page-owned rule is
   removed, only extended.

   What this layer fixes (audit 2026-07-02):
     1. PRINT — the wizard shows one .step-panel at a time; without this,
        printing captured only the active step. Print now flattens the whole
        project (every panel, rubric, checklist) with ink-safe readouts.
     2. CONTRAST — feedback injected into the dark .readout used the AA-on-
        white tokens (--green/--coral/--orange/--gold), which fail on navy.
        Remap those inline text colors to AA-on-dark equivalents.
     3. MOTION — hard prefers-reduced-motion stop for page-owned animations
        (panel fade, button scaling). Confetti is gated in projects-gold.js.
     4. MOBILE — .rubric / .data-table overflow horizontally on phones; the
        JS wraps them in .gold-scroll and this styles the scroll container.

   Injected by tools/inject-projects-gold.mjs (sentinel: projects-gold).
   ========================================================================== */

/* --- 4. Mobile table overflow -------------------------------------------- */
body.pro-projects .gold-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
body.pro-projects .gold-scroll > table {
  margin-left: 0;
  margin-right: 0;
}

/* --- 2. AA feedback text on the dark readout ------------------------------
   Pages inject feedback as inline style="color:var(--token)". Those tokens
   were darkened for AA on white (ff94ba512) and fail on the navy readout.
   Match the inline declaration and substitute a light AA-on-navy value.
   NOTE: the --green rule also substring-matches color:var(--green-lt); the
   later --green-lt rule wins (equal specificity, later order) on purpose. */
body.pro-projects .readout [style*="color:var(--green)"],
body.pro-projects .readout [style*="color: var(--green)"] {
  color: #8fe3a9 !important;
}
body.pro-projects .readout [style*="color:var(--coral)"],
body.pro-projects .readout [style*="color: var(--coral)"] {
  color: #ffb3a1 !important;
}
body.pro-projects .readout [style*="color:var(--orange)"],
body.pro-projects .readout [style*="color: var(--orange)"] {
  color: #ffce85 !important;
}
body.pro-projects .readout [style*="color:var(--gold)"],
body.pro-projects .readout [style*="color: var(--gold)"] {
  color: #ffd98c !important;
}
body.pro-projects .readout [style*="color:var(--green-lt)"],
body.pro-projects .readout [style*="color: var(--green-lt)"] {
  color: #eafff2 !important; /* badge text on solid green chips stays light */
}

/* Keyboard focus lands on the newly-activated panel (projects-gold.js);
   the panel itself is a focus waypoint, not an interactive control. */
body.pro-projects .step-panel:focus {
  outline: none;
}

/* --- 3. Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.pro-projects *,
  body.pro-projects *::before,
  body.pro-projects *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 1. Print: the whole project, ink-safe -------------------------------- */
@media print {
  /* Celebration confetti (tagged by projects-gold.js) never reaches paper. */
  .gold-confetti {
    display: none !important;
  }
  /* Every wizard step prints, not just the active tab. */
  body.pro-projects .step-panel {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 1.25rem;
  }
  /* Cards hidden by the pro reveal layer must not print invisible. */
  body.pro-projects .pro-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Wizard chrome that is meaningless on paper. */
  body.pro-projects .step-trail,
  body.pro-projects .nav-btn,
  body.pro-projects .no-print {
    display: none !important;
  }
  /* Dark readout/report panels: flatten to white so feedback is legible
     and the page does not print solid navy blocks. */
  body.pro-projects .readout {
    background: #fff !important;
    color: #16303f !important;
    border: 1px solid #94a7b3 !important;
  }
  body.pro-projects .readout [style*="color:var("],
  body.pro-projects .readout [style*="color: var("] {
    color: #16303f !important;
  }
  body.pro-projects .gold-scroll {
    overflow: visible;
  }
}

/* --- 5. Level Selection Overlay (Gold welcome screen) --- */
#gold-level-overlay {
  position: fixed;
  inset: 0;
  /* Above the Save/Resume + Math Workbench launchers (z 2147483000): while a
     student is choosing a support level nothing should float over the gate. */
  z-index: 2147483200;
  background: rgba(15, 43, 60, 0.95);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 1;
  transition: opacity 0.25s ease-out;
}
#gold-level-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}
.gold-level-card {
  background: #ffffff;
  border-radius: 20px;
  padding: clamp(24px, 5vw, 40px);
  max-width: 580px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  text-align: center;
  box-sizing: border-box;
  animation: gold-scale-up 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes gold-scale-up {
  from {
    transform: scale(0.9) translateY(10px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
.gold-level-emoji {
  font-size: 48px;
  margin-bottom: 12px;
  line-height: 1;
}
.gold-level-title {
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 800;
  color: #0f2b3c;
  margin-bottom: 8px;
  line-height: 1.25;
}
.gold-level-sub {
  color: #525f6e;
  font-size: 15px;
  margin-bottom: 24px;
  line-height: 1.5;
}
.gold-level-heading {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #0b6f65;
  margin-bottom: 16px;
  border-bottom: 1px solid #e2e7ec;
  padding-bottom: 8px;
}
.gold-level-option {
  display: block;
  width: 100%;
  padding: 16px 20px;
  margin: 10px 0;
  background: #ffffff;
  border: 2px solid #e2e7ec;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #0f2b3c;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.gold-level-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.gold-level-option:active {
  transform: translateY(0);
}
.gold-level-option.opt-lv0:hover {
  border-color: #f59e0b;
  background: #fffdf5;
}
.gold-level-option.opt-lv1:hover {
  border-color: #10b981;
  background: #f6fdf9;
}
.gold-level-option.opt-lv2:hover {
  border-color: #3b82f6;
  background: #f5f9ff;
}
.gold-level-option:focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
}