/* ============================================================
   print.css — the Print Shop.
   Sheets are built into #printRoot and printed with the browser's
   own Save as PDF / Print. No PDF library, so it works offline.
   ============================================================ */

/* ---------- on-screen preview ----------
   #printRoot is what actually prints and stays hidden on screen.
   #previewInner holds a second copy, scaled down, for looking at. */
#printRoot{ display:none }
#previewInner .sheet{ border-bottom:1px dashed #bbb }

.sheet{
  position:relative;
  width:7.5in;min-height:9.6in;
  padding:0.25in 0.3in;
  box-sizing:border-box;
  background:#fff;color:#111;
  font-family:ui-rounded,"SF Pro Rounded","Avenir Next Rounded",system-ui,sans-serif;
  display:flex;flex-direction:column;
}
.sheetbody{ flex:1 }
.sheet + .sheet{ page-break-before:always }

.sheet h1{
  font-size:26pt;margin:0 0 2pt;font-weight:800;letter-spacing:-.01em;color:#2E6B39;
}
.sheet .sub{ font-size:11pt;color:#555;margin:0 0 14pt;font-weight:600 }
/* In normal flow, not pinned: a fixed footer repeats on every printed page. */
.sheet .foot{
  margin-top:18pt;
  font-size:8pt;color:#999;display:flex;justify-content:space-between;gap:12pt;
  border-top:1px solid #e6e6e6;padding-top:5pt;
}

/* handwriting rows */
.hwrow{ margin-bottom:10pt; }
.hwrow svg{ display:block;width:100%;height:auto }

/* generic grids */
.psgrid{ display:grid;gap:10pt }
.psgrid.c2{ grid-template-columns:1fr 1fr }
.psgrid.c3{ grid-template-columns:1fr 1fr 1fr }
.psgrid.c4{ grid-template-columns:repeat(4,1fr) }

.pcard{
  border:1.5pt dashed #999;border-radius:8pt;padding:10pt;
  min-height:1.5in;display:flex;flex-direction:column;gap:5pt;
}
.pcard h3{ font-size:12pt;margin:0;font-weight:800 }
.pcard .gear{ font-size:8.5pt;color:#2E6B39;font-weight:700;text-transform:uppercase;letter-spacing:.04em }
.pcard p{ font-size:9.5pt;margin:0;line-height:1.4;color:#333 }
.pcard .why{ font-size:8.5pt;color:#777;font-style:italic;margin-top:auto }

/* counting rows */
.countrow{
  display:flex;align-items:center;gap:14pt;
  border-bottom:1pt solid #eee;padding:16pt 0;
}
.countrow .objs{ display:flex;gap:8pt;flex:1;flex-wrap:wrap;align-items:center }
.countrow .objs svg{ width:46pt;height:46pt }
.countrow .opts{ display:flex;gap:9pt }
.countrow .opt{
  width:42pt;height:42pt;border:1.5pt solid #333;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:19pt;font-weight:800;
}

/* matching */
.matchwrap{ display:flex;justify-content:space-between;gap:40pt;margin-top:10pt }
.matchcol{ display:flex;flex-direction:column;gap:20pt;flex:0 0 auto }
.matchcol .cell{ display:flex;align-items:center;gap:9pt }
.matchcol .cell svg{ width:52pt;height:52pt }
.matchcol .dot{ width:8pt;height:8pt;border-radius:50%;background:#333;flex:0 0 auto }

/* week table */
table.week{ width:100%;border-collapse:collapse;font-size:9.5pt }
table.week th,table.week td{
  border:1pt solid #ddd;padding:5pt 7pt;text-align:left;vertical-align:top;
}
table.week th{ background:#F1F5EF;font-size:8pt;text-transform:uppercase;letter-spacing:.06em;color:#456 }
table.week td.t{ white-space:nowrap;font-weight:700;color:#2E6B39;width:1.1in }
table.week td.n{ color:#666;font-size:8.5pt }

/* colouring page */
.colorpage{ display:flex;align-items:center;justify-content:center;height:8.1in }
.colorpage svg{ width:100%;height:100%;max-height:8.1in }

/* ---------- actual printing ---------- */
@page{ size: letter; margin: 0.4in; }

/* keep units whole across a page break */
.hwrow, .pcard, .countrow, .matchcol .cell, table.week tr{ page-break-inside:avoid }
table.week thead{ display:table-header-group }

@media print{
  html,body{
    position:static !important;overflow:visible !important;height:auto !important;
    background:#fff !important;color:#000 !important;
  }
  #app, #grown, #gate, .finish{ display:none !important }
  #printRoot{
    display:block !important;position:static !important;
    box-shadow:none !important;border-radius:0 !important;
  }
  .sheet{ width:auto;min-height:auto;padding:0 }
}