/* Worksheets: the A4 sheet, how it looks on screen, and how it prints */
@page { size: A4; margin: 0; }

.ws-intro { max-width: 760px; margin: 0 auto; padding: 28px 16px 8px; }
.ws-intro h1 { font-size: clamp(28px, 6.5vw, 40px); margin-top: 12px; }
.ws-intro .lead { color: var(--ink-soft); font-size: 17px; margin-top: 10px; }
.ws-intro .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
.ws-intro .tip { margin-top: 18px; }
.namefield { display: flex; gap: 8px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.namefield input { font: 500 18px var(--body); padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); min-width: 0; flex: 1; max-width: 320px; }

.pages { padding: 20px 16px 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; justify-items: center; }
.frame { width: 100%; max-width: 794px; }
.frame .label { font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.scaler { position: relative; overflow: hidden; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 18px 40px -18px rgba(31,42,68,.35); }

.sheet { width: 210mm; height: 297mm; padding: 12mm 14mm 11mm; background: #fff; color: #1f2a44; position: relative; transform-origin: top left; display: flex; flex-direction: column; overflow: hidden; }
.sheet .grown { border: .4mm solid #d9cdb8; border-radius: 4mm; padding: 2.5mm 4mm; font: 400 9.5pt/1.45 var(--body); color: #55607a; display: flex; gap: 3mm; }
.sheet .grown b { color: #1f2a44; font-weight: 600; }
.sheet .grown > svg { flex: none; width: 7mm; height: 7mm; }
.sheet .namebar { display: flex; align-items: flex-end; margin-top: 5mm; font: 700 13pt/1 var(--kid); }
.sheet .namebar .line { flex: 1; border-bottom: .4mm solid #1f2a44; margin: 0 0 1mm 3mm; height: 7mm; }
.sheet .namebar .stars { margin-left: 8mm; display: flex; gap: 2mm; }
.sheet .namebar .stars svg { width: 8mm; height: 8mm; }
.sheet h2 { font: 600 23pt/1.1 var(--head); margin-top: 5mm; display: flex; align-items: center; gap: 3mm; }
.sheet h2.h2s { font-size: 17pt; margin-top: 5mm; }
.sheet h2 .badge { font: 700 20pt/1 var(--kid); width: 12mm; height: 12mm; border-radius: 3.5mm; display: grid; place-items: center; background: #1f2a44; color: #fff; }
.sheet .sub { font: 400 12pt/1.3 var(--kid); color: #55607a; margin-top: 1.5mm; }
.sheet .body { flex: 1; min-height: 0; }
.sheet .foot-note { margin-top: auto; padding-top: 2mm; display: flex; justify-content: space-between; font: 400 7.5pt/1 var(--body); color: #9aa3b5; }
.sheet .paths { display: grid; gap: 4mm; margin-top: 5mm; }
.sheet .paths .row { border: .35mm dashed #e3d8c6; border-radius: 5mm; padding: 1.5mm 0; }
.sheet .letter-box { display: grid; grid-template-columns: 66mm 1fr; gap: 6mm; margin-top: 4mm; align-items: center; }
.sheet .letter-box .big { border: .35mm dashed #e3d8c6; border-radius: 5mm; padding: 2mm; display: flex; justify-content: center; }
.sheet .letter-box .steps { font: 400 12pt/1.5 var(--kid); }
.sheet .letter-box .steps div { display: flex; gap: 3mm; align-items: center; margin-bottom: 2.5mm; }
.sheet .letter-box .steps i { font-style: normal; flex: none; width: 7mm; height: 7mm; border-radius: 50%; border: .4mm solid #1f2a44; display: grid; place-items: center; font: 700 10pt/1 var(--body); }
.sheet .lines { margin-top: 4mm; }
.sheet .pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; margin-top: 3mm; }
.sheet .pick div { border: .35mm solid #e3d8c6; border-radius: 5mm; height: 32mm; display: grid; place-items: center; }

/* Worksheet list */
.ws-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 14px; }
.ws-card { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.ws-card .ws-main { padding: 16px; display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--ink); flex: 1; }
.ws-card .ws-games { display: block; padding: 11px 16px; border-top: 1px solid var(--line); background: var(--paper); font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.ws-card .gi { width: 52px; height: 52px; flex: none; border-radius: 16px; background: var(--accent-soft); display: grid; place-items: center; }
.ws-card .gi svg { width: 36px; height: 36px; }
.ws-card h3 { font: 600 17px/1.3 var(--body); }
.ws-card p { font-size: 14px; color: var(--ink-soft); }

@media print {
  body { background: #fff; }
  .top, .ws-intro, .frame .label, .foot { display: none !important; }
  .pages { padding: 0; gap: 0; display: block; }
  .frame { max-width: none; }
  .scaler { box-shadow: none; border-radius: 0; overflow: visible; height: auto !important; }
  .sheet { transform: none !important; break-after: page; }
  .frame:last-child .sheet { break-after: auto; }
  .sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}