/* teach-spa.css — responsive helpers for the teacher SPA's inline-grid views.
   The SPA was built at desktop widths with fixed multi-column grids; these
   classes let them collapse on tablet/phone (Chromebooks, iPads) so the
   dash-main column never forces the page wider than the viewport. */

/* belt-and-braces: the legacy teach.html has this inline; mirror it so a
   stray wide child can't horizontally scroll the whole SPA. */
html, body { overflow-x: hidden; }

/* Grid-item shrink fix: grid/flex children default to min-width:auto, which
   refuses to shrink below their content's intrinsic width (leaderboard rows,
   chart, date inputs) — that forces .dash-main, and the whole page, wider
   than the viewport on mobile. min-width:0 lets the column shrink + wrap. */
.dash-main, .dash-sidebar { min-width: 0; }

/* 4-up stat / narrative tiles → 2-up on tablet → 1-up on small phones. */
.spa-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) { .spa-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .spa-grid-4 { grid-template-columns: 1fr; } }

/* chart (2fr) + skill split (1fr) → stack on tablet. */
.spa-split { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
@media (max-width: 760px) { .spa-split { grid-template-columns: 1fr; } }

/* Printable History & Reports (🖨 Print / Save PDF). Print ONLY the report panel
   (#reports-print) — hide all the SPA chrome and the .noprint controls. */
@media print {
  body * { visibility: hidden !important; }
  #reports-print, #reports-print * { visibility: visible !important; }
  #reports-print { position: absolute !important; left: 0; top: 0; width: 100%;
    box-shadow: none !important; border: none !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .noprint { display: none !important; }

  /* Conference one-pager (StudentDetail "🖨 Print one-pager"): body gets
     .print-one-pager, which narrows the printable region from the whole report
     to just this student's panel (#student-one-pager). The two-id selectors
     out-specify the base "#reports-print *" show rule above so the rest of the
     report is hidden. Cleaned off body on afterprint. */
  body.print-one-pager #reports-print * { visibility: hidden !important; }
  body.print-one-pager #reports-print #student-one-pager,
  body.print-one-pager #reports-print #student-one-pager * { visibility: visible !important; }
  body.print-one-pager #reports-print #student-one-pager {
    position: absolute !important; left: 0; top: 0; width: 100%;
    background: none !important; border: none !important; }

  /* Weekly Champion certificate (WeeklyChampion "🖨 Print certificate"): body gets
     .print-champion, which reveals ONLY the #champion-certificate node (rendered
     display:none inline in the card). display:block !important out-specifies the inline
     display:none so the certificate prints; everything else is hidden. Cleaned off body
     on afterprint. */
  body.print-champion #champion-certificate {
    display: block !important; visibility: visible !important;
    position: absolute !important; left: 0; top: 0; width: 100%;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.print-champion #champion-certificate * { visibility: visible !important; }
  /* Printing from the Reports tab: keep the report panel out of the certificate print. */
  body.print-champion #reports-print, body.print-champion #reports-print * { visibility: hidden !important; }
}

/* Reveal & discuss — the primary CTA on the live leaderboard (LiveRoom.js).
   The button IS the class-done / reveal moment (teacher taps it once everyone's
   in), so it earns a gentle draw-the-eye glow. Slow + low-amplitude on purpose:
   intriguing, not a strobe on a dashboard the teacher stares at all lesson.
   Respects reduced-motion. */
.reveal-cta { animation: reveal-cta-glow 2.8s ease-in-out infinite; }
@keyframes reveal-cta-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(179, 58, 26, 0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(179, 58, 26, 0.28); }
}
@media (prefers-reduced-motion: reduce) { .reveal-cta { animation: none; } }