/* ── Shared Practice Sheet Styles ─────────────────────────────────
   Grade 2 Reading practice sheets.
   Required variables: --accent, --accent-bg, --heading-color,
   --title-color, --col-bg, --col-heading, --word-bg
   Optional: --draw-bg (defaults to --accent-bg)

   .story-map / .story-map-box — 3-column Beginning/Middle/End planning
   grid (put .sort-slot lines inside each box for a simple write-here area)
   ─────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Comic Sans MS', 'Chalkboard SE', cursive; background: #fff8fb; color: #333; }

.page { width: 210mm; min-height: 297mm; margin: 0 auto 10mm; padding: 12mm 16mm; background: #fff; border: 1px solid #ddd; page-break-after: always; display: flex; flex-direction: column; gap: 12px; }
.page-header { text-align: center; }
.page-header h1 { font-size: 20px; color: var(--heading-color, #c2185b); }
.page-header p, .page-num { font-size: 11px; color: #777; }
.page-num { text-align: right; margin-top: -8px; }

.exercise { border: 2px solid var(--accent, #f06292); border-radius: 12px; padding: 10px 14px; background: var(--accent-bg, #fce4ec); }
.exercise-title { font-size: 13px; font-weight: bold; color: var(--title-color, #ad1457); margin-bottom: 6px; }
.exercise-instruction { font-size: 11px; color: #555; margin-bottom: 8px; font-style: italic; }

.word-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.word-col { border: 1.5px dashed var(--accent, #f06292); border-radius: 10px; padding: 8px; background: var(--col-bg, #fce4ec); }
.word-col h3 { text-align: center; color: var(--col-heading, #ad1457); font-size: 12px; margin-bottom: 6px; }
.word-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.word-list li { font-size: 26px; font-weight: bold; text-align: center; background: var(--word-bg, #fff); border-radius: 8px; padding: 4px; }

.word-bank { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bank-word { background: #fff0f5; border: 1px solid #f06292; border-radius: 6px; padding: 2px 10px; font-size: 13px; font-weight: bold; color: #ad1457; }
.blank-list, .build-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.blank-list li, .build-list li { font-size: 15px; }
.blank { display: inline-block; border-bottom: 2px solid #333; width: 100px; height: 20px; }

.sort-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sort-col { border: 2px solid #f48fb1; border-radius: 8px; padding: 6px; background: #fff1f5; }
.sort-col h4 { font-size: 12px; color: #ad1457; text-align: center; margin-bottom: 4px; }
.sort-slot { border-bottom: 1.5px solid #ad1457; height: 20px; margin-bottom: 4px; }

.story-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.story-map-box { border: 2px dashed var(--accent, #f06292); border-radius: 10px; padding: 8px; background: var(--col-bg, #fce4ec); }
.story-map-box h4 { text-align: center; font-size: 12px; color: var(--col-heading, #ad1457); margin-bottom: 6px; }

.draw-row { display: flex; gap: 14px; align-items: flex-start; }
.draw-box { width: 480px; height: 280px; border: 2px dashed var(--accent, #f06292); border-radius: 8px; background: var(--draw-bg, var(--accent-bg, #fce4ec)); display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 13px; }

.answer-key { margin-top: auto; border-top: 2px dashed #ccc; padding-top: 6px; font-size: 10px; color: #888; }

@page { size: A4; margin: 0; }
@media print {
  body { background: #fff; }
  .page { border: none; margin: 0; min-height: auto; }
  .page:last-child { page-break-after: avoid; }
  .answer-key,
  div.answer-key { display: none !important; visibility: hidden !important; height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
}