/* Printable sheets — designed for a school printer, not a design portfolio.
   Assumptions that drove this file:
   - It will be printed in black and white on a shared copier. No colour
     fills, no dark backgrounds, nothing that eats toner.
   - It will be written on with a ballpoint pen, on a clipboard, standing up.
     Rows are tall enough for adult handwriting, not for a screen.
   - It may be photocopied from a photocopy. Hairline rules disappear when
     that happens, so nothing here is thinner than 0.5pt.
   - The site's Content-Security-Policy forbids inline styles, so every rule
     a sheet needs lives in this file. */

@page { size: letter portrait; margin: 0.5in; }
@page landscape { size: letter landscape; }

:root{
  --rule:#9aa3a0;        /* survives a photocopy */
  --rule-light:#c8cfcc;
  --ink:#10201c;
  --ink-soft:#555f5c;
  --brand:#0F6E56;
}

*{ box-sizing:border-box; }

body.sheetpage{
  margin:0;
  background:#e8ecea;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

/* ---------- the on-screen toolbar (never printed) ---------- */
.sheetbar{
  position:sticky; top:0; z-index:5;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  padding:14px 20px; background:#0F6E56; color:#fff;
}
.sheetbar a{ color:#CFEFE3; text-decoration:none; font-weight:650; font-size:.9rem; }
.sheetbar a:hover{ text-decoration:underline; }
.sheetbar .spacer{ flex:1 1 auto; }
.sheetbar button{
  font:inherit; font-weight:700; font-size:.9rem; cursor:pointer;
  background:#fff; color:#0F6E56; border:0; border-radius:8px; padding:9px 18px;
}
.sheetbar button:hover{ background:#CFEFE3; }
.sheetbar .hint{ font-size:.82rem; color:#9FE1CB; }

/* ---------- the page itself ---------- */
.sheet{
  width:8.5in; min-height:11in; margin:26px auto; padding:0.5in;
  background:#fff; box-shadow:0 2px 18px rgba(0,0,0,.14);
}
.sheet.land{ width:11in; min-height:8.5in; }

.sheet-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; border-bottom:1.5pt solid var(--ink); padding-bottom:9px;
}
.sheet-head h1{ margin:0; font-size:15.5pt; letter-spacing:-.01em; }
.sheet-head .sub{ margin:3px 0 0; font-size:8.6pt; color:var(--ink-soft); }
.mark{ display:flex; align-items:center; gap:6px; font-size:10pt; white-space:nowrap; }
.mark svg{ width:17px; height:17px; }
.mark b{ font-weight:800; }
.mark span{ font-weight:600; color:var(--ink); }

/* Fill-in fields across the top. A printed underline, not a form input,
   because this is written on with a pen. */
.fields{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px 18px;
  margin:13px 0 11px;
}
.fields.three{ grid-template-columns:repeat(3,1fr); }
.field{ font-size:8.4pt; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.055em; }
.field .line{
  display:block; margin-top:3px; height:17px;
  border-bottom:1pt solid var(--rule);
}

table.grid{ width:100%; border-collapse:collapse; margin-top:3px; }
table.grid th{
  font-size:7.6pt; text-transform:uppercase; letter-spacing:.045em;
  color:var(--ink); font-weight:700; text-align:left;
  padding:5px 5px; border-bottom:1.2pt solid var(--ink);
  background:#f2f5f4;
}
table.grid th.c, table.grid td.c{ text-align:center; }
table.grid td{
  border-bottom:0.6pt solid var(--rule-light);
  padding:0; height:0.30in;
}
/* Sheets with a free-text column need room for adult handwriting, not just a
   two-digit number. Measured against the printable area rather than guessed:
   every sheet still lands on one page with headroom to spare. */
table.grid.tall td{ height:0.34in; }
/* Vertical rules only where a column boundary genuinely helps the eye. */
table.grid .vl{ border-left:0.6pt solid var(--rule-light); }
table.grid .vlh{ border-left:0.6pt solid var(--rule); }
table.grid tbody tr:nth-child(5n) td{ border-bottom:0.9pt solid var(--rule); }
table.grid td.num{
  text-align:center; font-size:7.6pt; color:var(--ink-soft);
  width:0.3in;
}

/* Column widths, in inches, as classes — the CSP forbids a style attribute,
   and a <col class="w55"> is clearer than guessing from content anyway. */
.w30{width:0.30in} .w40{width:0.40in} .w50{width:0.50in} .w55{width:0.55in}
.w60{width:0.60in} .w70{width:0.70in} .w75{width:0.75in} .w80{width:0.80in}
.w90{width:0.90in} .w120{width:1.20in} .w130{width:1.30in} .w150{width:1.50in}
.w160{width:1.60in}

.legend{
  display:flex; flex-wrap:wrap; gap:4px 18px;
  margin-top:11px; font-size:8pt; color:var(--ink-soft);
}
.legend b{ color:var(--ink); }

.note-privacy{
  margin-top:9px; padding:7px 10px;
  border:0.8pt solid var(--rule); border-left:2.5pt solid var(--ink);
  font-size:8pt; line-height:1.45; color:var(--ink);
}

.sheet-foot{
  margin-top:13px; padding-top:7px; border-top:0.8pt solid var(--rule-light);
  display:flex; justify-content:space-between; gap:14px;
  font-size:7.8pt; color:var(--ink-soft);
}
.sheet-foot b{ color:var(--brand); }

/* ---------- print ---------- */
@media print{
  body.sheetpage{ background:#fff; }
  .sheetbar, .noprint{ display:none !important; }
  .sheet{
    width:auto; min-height:0; margin:0; padding:0;
    box-shadow:none;
  }
  .sheet.land{ width:auto; page:landscape; }
  /* A sheet is one page. If a row would split across pages the tally is
     wrong, which is worse than a short sheet. */
  table.grid{ page-break-inside:avoid; }
  table.grid tr{ page-break-inside:avoid; }
  thead{ display:table-header-group; }
}

/* ---------- small screens: let them see it before printing ---------- */
@media (max-width:950px){
  .sheet, .sheet.land{ width:100%; padding:20px; }
  .fields, .fields.three{ grid-template-columns:repeat(2,1fr); }
  .sheet-wrap{ overflow-x:auto; }
}