/* The printable progress report — a self-contained stylesheet, deliberately not relying on
 * either host page's own :root custom properties. js/report.mjs's fragment is appended to
 * index.html (a family/child device, printReport()) AND console.html (a tutor's own device,
 * printReportData()), and those two pages otherwise use two different design systems with
 * different variable names. Rather than force one page's tokens onto the other, this file
 * defines its own small, hardcoded palette so the printed page looks identical regardless of
 * which app triggered it.
 *
 * --report-accent is the one hook a tenant's own branding can override — set as an inline style
 * on .report-masthead itself (see mastheadHtml() in report.mjs) when the caller has configured an
 * accent colour, falling back to the product's own coral otherwise.
 */

.report-page{--report-accent:#f27f62;--report-ink:#182136;--report-muted:#6f7682;
  --report-line:#dedbd3;--report-cream:#f7f3ea;
  font-family:"DM Sans",sans-serif;color:var(--report-ink);max-width:780px;margin:0 auto}
.report-masthead{text-align:center;margin-bottom:22px}
.report-brand{display:inline-block;font:800 11px "DM Sans";letter-spacing:2px;text-transform:uppercase;
  color:var(--report-accent);margin-bottom:6px}
.report-brand-default{text-transform:none;letter-spacing:0;font-size:15px;color:var(--report-ink)}
.report-logo{display:block;max-height:56px;max-width:220px;margin:0 auto 8px;object-fit:contain}
.report-masthead h1{font-family:Nunito,sans-serif;font-size:32px;letter-spacing:-1px;margin:0}
.report-child{color:var(--report-muted);font-size:12px;margin:6px 0 0}
.report-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.report-stats div{border:1px solid var(--report-line);border-radius:10px;padding:14px;text-align:center}
.report-stats strong{display:block;font:900 22px Nunito;font-variant-numeric:tabular-nums}
.report-stats span{font-size:9px;color:var(--report-muted);text-transform:uppercase;letter-spacing:.6px}
.report-panel{border:1px solid var(--report-line);border-radius:10px;padding:16px 18px;margin-bottom:14px;page-break-inside:avoid}
.report-panel h2{font-family:Nunito,sans-serif;font-size:14px;margin:0 0 4px}
.report-caption{font-size:10px;color:var(--report-muted);margin:0 0 8px}
.report-chart svg{width:100%;height:auto;display:block}
/* renderLineChart() (js/charts.mjs) builds these class names regardless of container, so the
 * report's own mini trend chart needs the same rules the live dashboard's trend panel uses. */
.report-chart .trend-line{fill:none;stroke:var(--report-accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.report-chart .trend-mark{fill:var(--report-accent);stroke:#fffdfa;stroke-width:2}
.report-chart .trend-gridline{stroke:var(--report-line);stroke-width:1}
.report-chart-key{display:flex;align-items:center;gap:12px;font-size:9px;color:var(--report-muted);margin-top:6px}
.report-chart-key i{display:inline-block;margin-right:3px;width:7px;height:7px}
.report-chart-key i.dot{border-radius:50%;background:var(--report-accent)}
.report-chart-key i.diamond{background:var(--report-accent);transform:rotate(45deg)}
.report-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.report-topic-list{list-style:none;margin:0;padding:0}
.report-topic-list li{display:flex;justify-content:space-between;font-size:12px;padding:6px 0;border-bottom:1px solid var(--report-line)}
.report-topic-list li:last-child{border-bottom:0}
.report-topic-list b{font-variant-numeric:tabular-nums}
.report-muted{color:var(--report-muted);font-size:11px;margin:0}
.report-revisit-list{list-style:decimal;margin:0;padding-left:18px}
.report-revisit-list li{margin-bottom:14px;page-break-inside:avoid}
.report-q-text{font-weight:700;font-size:12px;margin:0 0 4px}
.report-q-answer{font-size:11px;margin:0 0 4px;color:var(--report-ink)}
.report-q-explain{background:var(--report-cream);border-radius:7px;padding:9px 11px;font-size:11px;line-height:1.5;margin:0 0 4px}
.report-q-source{font-size:9px;color:var(--report-muted);margin:0}
.report-footnote{font-size:10px;color:var(--report-muted);text-align:center;margin:8px 0 0}
.report-empty-note{text-align:center;border:1px dashed var(--report-line);border-radius:12px;padding:44px 20px}
.report-empty-note span{font-size:28px;color:var(--report-accent);display:block;margin-bottom:8px}
.report-empty-note h3{font-family:Nunito,sans-serif;margin:0 0 8px}
.report-empty-note p{color:var(--report-muted);font-size:12px;max-width:420px;margin:0 auto}

@media print{
  body>*:not(#print-report){display:none!important}
  #print-report{display:block!important}
  @page{margin:14mm}
  body{background:white}
  .report-panel{box-shadow:none}
}