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