/* Philadelphia Literacy Initiative — global custom rules.
   Tailwind (with the PLI palette injected via tailwind.config in
   partials/head.html) handles component styling in the markup. This file is
   only for things Tailwind can't express. */

:root {
  --pli-paper: #fbfaf6;
  --pli-paper-2: #f7f3e8;
  --pli-ink: #111111;
  --pli-muted: #6b6a63;
  --pli-rule: #e6e2d6;
  --pli-primary: #f5c518;
  --pli-primary-hover: #e8b80f;
  --pli-primary-deep: #6f5600;
  --pli-support: #0e1e3a;
}

html { background: var(--pli-paper); }
body { font-family: 'Inter', system-ui, sans-serif; color: var(--pli-ink); }

[hidden] { display: none !important; }

/* Accessible focus ring in the brand gold, like the source app */
:focus-visible {
  outline: 2px solid var(--pli-primary-deep);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(245, 197, 24, 0.25);
  border-radius: 4px;
}

/* Thin, paper-toned scrollbars */
* { scrollbar-width: thin; scrollbar-color: #d8d0bf var(--pli-paper-2); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #d8d0bf; border-radius: 6px; }
*::-webkit-scrollbar-track { background: var(--pli-paper-2); }

@keyframes pli-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pli-fade-up { animation: pli-fade-up .25s ease-out; }

@keyframes pli-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
.pli-loading { animation: pli-pulse 1.2s ease-in-out infinite; }

/* Print: used by session detail, student progress and the reporting print view */
/* A <canvas> prints blank — the browser re-lays-out the page for print without
   asking Chart.js to redraw. A decoded PNG snapshot sits beside every chart,
   hidden on screen, and stands in for it on paper. */
.print-chart-snapshot { display: none; }

/* Chart.js sizes a canvas from its container but does not cap it, so on a
   narrow screen the canvas ran a few pixels past the card and scrolled the
   whole page sideways. */
canvas { max-width: 100%; }

@media print {
  .no-print, nav { display: none !important; }
  /* Platform-injected cookie/consent banner. It is position:fixed, so it landed
     on the printed page as a black box — on a report that goes to a school.
     Also covers the feedback widget and any toast still on screen at print time. */
  #bm-cookie, #bm-feedback { display: none !important; }
  body { background: #fff; }
  .print-block { break-inside: avoid; }
  canvas { display: none !important; }
  .print-chart-snapshot { display: block !important; break-inside: avoid; }
}