/*
 * The Newspaper sheet. One Letter page per .sheet; the front and back are two
 * sheets that print double-sided. Every slot is a fixed-height grid row and
 * clips its content: the sheet never grows to a third page.
 *
 * Greyscale-first: pure black on white only. No fills lighter than solid.
 */

@page {
  size: letter portrait;
  margin: 0; /* removes the browser's date/title/URL headers and footers */
}

.sheet {
  width: 8.5in;
  height: 11in;
  padding: 0.5in;
  box-sizing: border-box;
  background: white;
  color: black;
  overflow: hidden;
  display: grid;
  font-family: "Andika", sans-serif;
  font-size: 11pt;
  line-height: 1.3;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.sheet.front {
  grid-template-rows: 1.15in 4.65in 4in;
  row-gap: 0.1in;
  break-after: page;
}

.sheet.back {
  grid-template-rows: 5.6in 4.2in;
  row-gap: 0.2in;
}

.sheet[data-typeface="lexend"] { font-family: "Lexend", sans-serif; }
.sheet[data-typeface="atkinson"] { font-family: "Atkinson Hyperlegible", sans-serif; }
.sheet[data-typeface="opendyslexic"] { font-family: "OpenDyslexic", sans-serif; font-size: 10pt; }

/* The wide faces get a slightly smaller Parent Panel so a full week still fits. */
.sheet[data-typeface="lexend"] .parent-panel,
.sheet[data-typeface="opendyslexic"] .parent-panel { font-size: 7.5pt; }

.sheets {
  display: contents; /* never affects layout or pagination */
}

.sheet * {
  box-sizing: border-box;
}

/* Overflow: on screen only, a slot whose content is clipped is outlined. */
.sheet [data-slot] { position: relative; }

.sheet [data-slot].overflow {
  outline: 3px solid #b00020;
  outline-offset: -3px;
}

.sheet [data-slot].overflow::after {
  content: "Too much for this space";
  position: absolute;
  right: 0;
  bottom: 0;
  background: #b00020;
  color: white;
  font-family: system-ui, sans-serif;
  font-size: 8pt;
  padding: 2px 6px;
}

@media print {
  .sheet [data-slot].overflow { outline: none; }
  .sheet [data-slot].overflow::after { display: none; }
}

.sheet p, .sheet h1, .sheet h2, .sheet h3, .sheet ul, .sheet ol {
  margin: 0;
}

/* ---------- Masthead ---------- */

.masthead {
  display: grid;
  grid-template-rows: auto auto;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  overflow: hidden;
}

.masthead .paper-name {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 34pt;
  line-height: 1.1;
  text-align: center;
  padding: 0.04in 0;
  letter-spacing: 0.01em;
}

.masthead .dateline {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-top: 1px solid black;
  font-size: 9.5pt;
  padding: 0.03in 0;
}

.masthead .dateline .issue-date { text-align: left; }
.masthead .dateline .class-line { text-align: center; font-weight: 700; }
.masthead .dateline .issue-number { text-align: right; }

/* ---------- Activities ---------- */

.activity-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.15in;
  min-height: 0;
}

.activity {
  border: 2px solid black;
  padding: 0.1in 0.12in;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.activity .kicker {
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.activity .activity-title {
  font-size: 15pt;
  font-weight: 700;
  line-height: 1.15;
}

.activity.lead .activity-title {
  font-size: 20pt;
}

.activity .prompt {
  margin-top: 0.05in;
  margin-bottom: 0.08in;
}

.activity .body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Written Response and Short List: lines share the remaining height. */
.lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lines .line {
  flex: 1;
  border-bottom: 1.5px solid black;
  min-height: 0.28in;
  display: flex;
  align-items: flex-end;
  padding-left: 0.05in;
}

.lines .line .number {
  font-weight: 700;
  padding-right: 0.08in;
}

/* Draw and Label */
.frame {
  flex: 1;
  border: 2px solid black;
  min-height: 0.8in;
}

.label-lines {
  display: flex;
  flex-direction: column;
}

.label-lines .line {
  height: 0.34in;
  border-bottom: 1.5px solid black;
}

/* Fill in the Blanks */
.sentences {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 0.2in;
  line-height: 1.9;
}

.blank {
  display: inline-block;
  width: 1.1in;
  border-bottom: 1.5px solid black;
  vertical-align: baseline;
}

.word-bank {
  border: 1.5px dashed black;
  padding: 0.05in 0.1in;
  display: flex;
  flex-wrap: wrap;
  gap: 0.05in 0.25in;
  font-weight: 700;
}

.word-bank .label {
  font-weight: 400;
  font-size: 9pt;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  width: 100%;
}

/* Math Set */
.math-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 0.08in;
  min-height: 0;
}

/* Small slots get two columns so a problem like "42 × 2 =" stays on one line. */
.activity:not(.lead) .math-grid {
  grid-template-columns: repeat(2, 1fr);
}

.math-grid .problem {
  border: 1.5px solid black;
  padding: 0.05in 0.08in;
  font-size: 12pt;
  font-weight: 700;
}

.activity.lead .math-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* Sort or Match */
.match {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 0.7in 1fr;
  grid-auto-rows: 1fr;
  align-items: center;
  min-height: 0;
}

.match .left, .match .right {
  border: 1.5px solid black;
  padding: 0.04in 0.08in;
  font-size: 10pt;
}

.match .left { text-align: right; }
.match .left::after { content: " ●"; }
.match .right::before { content: "● "; }

/* ---------- Fun Band ---------- */

.fun-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.2in;
  min-height: 0;
}

.fun-item, .word-search {
  border: 2px solid black;
  padding: 0.1in 0.12in;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.fun-item .fun-title, .word-search .fun-title {
  font-size: 15pt;
  font-weight: 700;
}

.ws-grid {
  /* Cells shrink as the grid grows so the puzzle always spans the same width. */
  --span: 3.3in;
  --cell: calc(var(--span) / var(--size));
  border-collapse: collapse;
  margin: 0.08in auto;
  table-layout: fixed;
  width: var(--span);
  font-family: inherit;
  font-weight: 700;
  font-size: calc(var(--cell) * 0.58);
}

.ws-grid td {
  width: var(--cell);
  height: var(--cell);
  text-align: center;
  vertical-align: middle;
  padding: 0;
  line-height: 1;
  border: 0.5px solid black;
}

.ws-grid td.hit {
  background: #bbb;
  outline: 1.5px solid black;
  outline-offset: -1.5px;
}

.ws-warning {
  border: 2px solid #b00020;
  color: #b00020;
  padding: 0.05in;
  font-size: 9pt;
  margin-top: 0.05in;
}

/* ---------- Answer Key (third page, teacher only) ---------- */

.sheet.answer-key {
  grid-template-rows: 0.5in 5.6in;
  row-gap: 0.2in;
  break-before: page;
}

.key-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 3px solid black;
  font-size: 10pt;
}

.key-header .key-title {
  font-size: 18pt;
  font-weight: 700;
}

@media print {
  .screen-only { display: none !important; }
}

.word-search .word-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.02in 0.18in;
  font-weight: 700;
  font-size: 10pt;
}

.fun-item .frame {
  margin-top: 0.08in;
}

.fun-item .frame.colouring {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.15in;
  min-height: 0;
}

.fun-item .frame.colouring svg {
  width: 100%;
  height: 100%;
  max-height: 5.2in;
}

/* ---------- Parent Panel ---------- */

.parent-panel {
  border: 3px double black;
  padding: 0.08in 0.12in;
  display: grid;
  grid-template-rows: auto auto 1fr;
  row-gap: 0.04in;
  font-size: 8pt;
  line-height: 1.22;
  min-height: 0;
  overflow: hidden;
}

.parent-panel h2 {
  font-size: 11pt;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
}

.parent-panel .reminders {
  border: 2px solid black;
  padding: 0.04in 0.08in;
  display: flex;
  flex-wrap: wrap;
  gap: 0.02in 0.25in;
}

.parent-panel .reminders .label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.parent-panel .reminders .when {
  font-weight: 700;
}

.parent-panel .columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.15in;
  min-height: 0;
  overflow: hidden;
}

.parent-panel h3 {
  font-size: 9pt;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid black;
  margin-bottom: 0.03in;
}

.parent-panel ul {
  padding-left: 0.14in;
}

.parent-panel li {
  margin-bottom: 0.02in;
}