/* PRINTABLES.
   The page on screen is the page that comes out of the printer, so the layout
   is done in millimetres and the only thing the screen adds is the controls. */

.setup { max-width: 900px; margin: 0 auto; padding: clamp(24px, 5vw, 50px) clamp(16px, 5vw, 40px) 10px; }
.setup h1 { margin: 0 0 10px; font-size: clamp(28px, 5vw, 46px); font-weight: 900; letter-spacing: -0.02em; }
.setup .sub { margin: 0 0 22px; font-size: 17px; line-height: 1.6; color: var(--soft); }

.controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; }
.controls label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.controls select {
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  min-width: 240px;
}
.controls .check { flex-direction: row; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; }
.controls .cta { border: 0; cursor: pointer; font: inherit; font-weight: 800; }

#pages { padding: 24px clamp(16px, 5vw, 40px) 60px; display: flex; flex-direction: column; align-items: center; gap: 22px; }

/* a page is a page: A4 portrait with a 12mm margin, shown on screen at the same
   proportions so what is on the screen is what comes out */
.page {
  width: 210mm;
  min-height: 297mm;
  padding: 12mm;
  background: #fff;
  color: #111;
  box-shadow: 0 18px 50px rgba(36, 29, 22, 0.14);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.page h2 { margin: 0 0 6mm; font-size: 16pt; font-weight: 900; }
.page .note { margin: 0 0 6mm; font-size: 9pt; color: #666; }

.grid { display: grid; gap: 6mm; flex: 1; }
.grid.cards6 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }
.grid.cards9 { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }

.pcard {
  border: 1.2mm solid #e8dfc8;
  border-radius: 4mm;
  background: #fdf8ec;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2mm;
  padding: 3mm;
  overflow: hidden;
}
.pcard img { width: 100%; height: 100%; object-fit: contain; }
.pcard span { font-size: 13pt; font-weight: 800; letter-spacing: 0.02em; }

/* the homework sheet: a picture, its word, and a row of boxes to tick */
.rowsheet { display: flex; flex-direction: column; gap: 4mm; flex: 1; }
.line { display: flex; align-items: center; gap: 5mm; border-bottom: 0.3mm solid #e2e2e2; padding-bottom: 3mm; }
.line img { width: 22mm; height: 22mm; object-fit: contain; }
.line b { font-size: 14pt; flex: 1; }
.line .ticks { display: flex; gap: 2.5mm; }
.line .ticks i { width: 6mm; height: 6mm; border: 0.4mm solid #bbb; border-radius: 1.2mm; display: block; }

.foot { margin-top: 6mm; font-size: 8pt; color: #999; display: flex; justify-content: space-between; }

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  #pages { padding: 0; gap: 0; }
  .page { box-shadow: none; margin: 0; page-break-after: always; }
  .page:last-child { page-break-after: auto; }
}

/* MARK: - minimal pairs on paper
   A pair only works if both pictures are on the table at once, so they print as
   facing halves with a cut line between them and the process named underneath,
   which is the bit a parent will not know to ask about. */
.pairsheet { display: flex; flex-direction: column; gap: 6mm; }
.pairrow {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8mm;
  padding-bottom: 5mm;
  border-bottom: 1px dashed #c9bfa8;
}
.pairrow .half { text-align: center; }
.pairrow .half img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border: 1px solid #ddd3bd;
  border-radius: 3mm;
  background: #fffdf6;
}
.pairrow .half b { display: block; margin-top: 2mm; font-size: 13pt; }
.pairrow .why {
  position: absolute;
  left: 50%;
  bottom: 1mm;
  transform: translateX(-50%);
  font-size: 8pt;
  color: #8a7f6a;
}

/* MARK: - the sheet a parent takes home
   Not a score and not a grade. What was practised, how often, when, and three
   ruled lines for the clinician to write the week's job by hand, because that
   part should be in her handwriting and not printed by us. */
.kidname { margin: 0 0 4mm; font-size: 18pt; }
.progress { display: flex; flex-direction: column; }
.prow {
  display: grid;
  grid-template-columns: 1fr 1.1fr 0.7fr 0.7fr 0.9fr 1.5fr;
  gap: 3mm;
  padding: 2.4mm 0;
  border-bottom: 1px solid #e6dcc6;
  font-size: 11pt;
}
.prow.head {
  font-weight: 700;
  font-size: 9pt;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a7f6a;
  border-bottom: 1.5px solid #c9bfa8;
}
.homenote { margin-top: 8mm; }
.homenote b { font-size: 11pt; }
.writein {
  height: 9mm;
  margin: 3mm 0 0;
  border-bottom: 1px solid #c9bfa8;
}
.nope { color: #8a7f6a; font-size: 11pt; }

/* A COLOURING SHEET. One drawing, as big as the page allows, with the word
   underneath in something a child could trace. Nothing else on the page: a
   colouring sheet with a header and a footer on it is a worksheet. */
.colouring { display: flex; flex-direction: column; align-items: center; }
.colouring .lines {
  width: 100%; max-width: 15cm; height: auto; display: block;
}
.colourword {
  order: 2; margin: 0.4cm 0 0; font-size: 34pt; font-weight: 800;
  letter-spacing: 0.02em; color: #111;
}