/* kids/learn — printable worksheets.

   Print-first. The screen view is a preview of the paper, not a separate
   design: one .page is one A4 sheet, and what you see stacked on screen is
   what comes out of the printer in order.

   Deliberately plain. A worksheet that looks decorated invites decoration; a
   worksheet that looks like paper invites writing on it. */

:root{
  --paper:#FFFFFF; --edge:#D9D2C2; --ink:#141A20; --soft:#6B7681;
  --amber:#DC9C3F; --amber-deep:#A8650E; --amber-pale:#FFF8EA;
  --red:#B54A30; --red-pale:#F7E9E6;
  --blue:#2A5F8F; --blue-pale:#EDF3F9;
  --rule:#C8CFD6;
  /* 背伸び (stretch) — the only two tokens added for it. Green is the same
     #4F7C4C learn.css and svg.py already use; stim is svg.py's PAPER, so a
     stimulus panel and a stimulus figure read as the same piece of paper. */
  --green:#4F7C4C; --stim:#FAF6EC;
}

*{ box-sizing:border-box }
body{
  margin:0; background:#E8EAEC; color:var(--ink);
  font-family:'Zen Kaku Gothic New','Inter',sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
body[lang="en"], body[lang="id"]{ font-family:'Inter','Zen Kaku Gothic New',sans-serif }

a{ color:var(--blue) }
a:focus-visible, summary:focus-visible{ outline:2px solid var(--amber); outline-offset:3px }
.skip{ position:absolute; left:-9999px }
.skip:focus{ left:12px; top:12px; background:var(--amber); color:#000; padding:8px 14px; z-index:9 }

/* ---------- screen chrome, dropped when printing ---------- */
.bar{
  max-width:820px; margin:0 auto; padding:14px 20px 0;
  display:flex; gap:14px; align-items:baseline; flex-wrap:wrap;
  font-size:13px; color:#4A555F;
}
.bar nav{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.06em }
.bar .langs{ margin-left:auto; display:flex; gap:6px }
.bar .langs a, .bar .langs span{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.06em;
  padding:2px 9px; border:1px solid var(--rule); border-radius:4px; text-decoration:none;
  background:#fff;
}
.bar .langs span{ background:var(--ink); color:#fff; border-color:var(--ink) }
.hint-print{
  max-width:820px; margin:10px auto 0; padding:10px 20px; font-size:13px; color:#4A555F;
}

/* ---------- one .page is one A4 sheet ---------- */
/* Not "about a sheet" — the same box. @page below sets A4 with 14mm/13mm
   margins, which leaves 184 x 269 mm of content, and that is exactly what a
   .page is on screen too. So the stack you scroll through is the stack that
   comes out of the printer, and a page that has grown too tall is visible
   here rather than discovered as a surprise fifth sheet.

   _build/check.py holds the other end of that promise: it prints every
   document and fails if the PDF has more pages than the document has .page
   elements. */
.page{
  box-sizing:content-box;
  width:184mm; min-height:269mm; max-width:calc(100% - 50px);
  margin:18px auto; background:var(--paper); color:var(--ink);
  border:1px solid var(--edge); border-radius:6px;
  padding:14mm 13mm; box-shadow:0 8px 22px rgba(0,0,0,.14);
}
/* Anything below the fold is on the next sheet. Shown, not hidden. */
@media screen{
  .page{
    background-image:linear-gradient(to bottom,
      transparent 0 269mm, rgba(181,74,48,.07) 269mm);
    background-origin:content-box; background-repeat:no-repeat;
  }
}
@media (max-width:700px){ .page{ padding:20px 16px 26px; min-height:0 } }

/* the strip that moves between this week's documents; paper has no links */
.docnav{
  max-width:820px; margin:8px auto 0; padding:0 20px;
  display:flex; gap:6px; flex-wrap:wrap;
}
.docnav a{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.04em;
  text-decoration:none; color:#33404B; background:#fff;
  border:1px solid var(--rule); border-radius:4px; padding:3px 10px;
}
.docnav a:hover{ border-color:var(--amber-deep); color:var(--amber-deep) }
.docnav a[aria-current]{ background:var(--ink); color:#fff; border-color:var(--ink) }
.docnav a.k{ margin-left:auto; border-color:var(--amber-deep); color:var(--amber-deep) }
.docnav a.k[aria-current]{ background:var(--amber-deep); color:#fff }

.ph{ border-bottom:2px solid var(--ink); padding-bottom:7px; margin-bottom:13px }
.ph .meta{
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace; font-size:11.5px;
  letter-spacing:.06em; color:var(--soft); text-transform:uppercase;
}
.ph .meta .slot{ background:var(--ink); color:#fff; padding:2px 9px; border-radius:3px }
.ph .meta .of{ margin-left:auto; border:1px solid var(--rule); padding:1px 8px;
  border-radius:3px; letter-spacing:.08em }
.ph .meta .slot.cos{ background:var(--amber-deep) }
.ph h1{ font-size:21px; line-height:1.3; margin:5px 0 1px; font-weight:700 }
.ph .sub{ font-size:13.5px; color:var(--soft); margin:0 }
.ph .name{
  margin-top:8px; display:flex; gap:26px; font-size:12.5px; color:var(--soft); flex-wrap:wrap;
}
.ph .name b{ font-weight:500 }
.ph .name u{ display:inline-block; min-width:130px; border-bottom:1px solid var(--rule); text-decoration:none }

.timer{
  float:right; border:2px solid var(--amber-deep); color:var(--amber-deep);
  border-radius:6px; padding:3px 12px; font-size:13px; font-weight:700;
}

/* ---------- blocks ---------- */
.disc, .rei, .rule-box, .memo, .trap{
  border-radius:6px; padding:10px 14px; margin:10px 0; font-size:14.5px;
  /* A boxed block that splits across a page break leaves its border stranded
     on the next sheet — sometimes as an otherwise empty page. Keep them whole. */
  break-inside:avoid;
}
.disc{ background:var(--blue-pale); border-left:4px solid var(--blue) }
.rei{ background:var(--amber-pale); border-left:4px solid var(--amber-deep) }
.trap{ background:var(--red-pale); border-left:4px solid var(--red) }
.memo{ background:#F4F5F6; border-left:4px solid var(--soft); font-size:14px }
.rule-box{
  border:2px solid var(--ink); text-align:center; font-size:16px; font-weight:700; padding:9px;
}
.rule-box small{ display:block; font-weight:400; font-size:12.5px; color:var(--soft); margin-top:4px }
.blabel{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; padding:0 8px; border-radius:3px;
  margin-bottom:4px; background:var(--ink); color:#fff;
}
.rei .blabel{ background:var(--amber-deep) }
.disc .blabel{ background:var(--blue) }
.trap .blabel{ background:var(--red) }
.memo .blabel{ background:var(--soft) }

h2.sec{
  font-size:14.5px; margin:16px 0 7px; padding-bottom:4px;
  border-bottom:1px solid var(--rule); font-weight:700;
}
h2.sec:first-child{ margin-top:2px }

/* ---------- questions ---------- */
.mon{ margin:11px 0; break-inside:avoid }
.mon-h{ display:flex; gap:10px; align-items:flex-start }
.mon-n{
  flex:none; width:26px; height:26px; line-height:26px; text-align:center;
  background:var(--ink); color:#fff; border-radius:4px;
  font-family:'JetBrains Mono',monospace; font-size:13px;
}
.mon-b{ flex:1; font-size:15px }
.mon .hint{ font-size:12.5px; color:var(--soft); margin:2px 0 0 36px }
.work{
  margin:5px 0 0 36px; border:1px dashed var(--rule); border-radius:4px;
  background:repeating-linear-gradient(0deg, transparent 0 27px, #EDEFF1 27px 28px);
}
@media (max-width:700px){ .mon .hint, .work{ margin-left:0 } }
.omake{
  border:1px dashed var(--amber-deep); border-radius:6px; padding:9px 14px; margin:12px 0;
  background:#FFFDF7; break-inside:avoid;
}
.omake .blabel{ background:var(--amber-deep) }

b, strong{ font-weight:700 }
.mono{ font-family:'JetBrains Mono',monospace }
.hl{ background:linear-gradient(transparent 62%, #F1C989 62%); font-weight:700 }
.wrongtext{ color:var(--red); font-weight:700 }
.frac{ font-family:'JetBrains Mono',monospace; white-space:nowrap }
.frac sup, .frac sub{ font-size:.72em; line-height:0 }

figure{ margin:10px 0; text-align:center; break-inside:avoid }
figure svg{ max-width:100%; height:auto }
figcaption{ font-size:12px; line-height:1.5; color:var(--soft); margin-top:4px; text-align:left }

.tablewrap{ overflow-x:auto; margin:12px 0 }
table{ border-collapse:collapse; width:100%; font-size:14px }
th, td{ border:1px solid var(--rule); padding:6px 9px; text-align:left }
th{ background:#F4F5F6; font-size:12.5px; font-weight:500; color:var(--soft) }
/* a '#'-prefixed header in the content = a numeric column: right-aligned, digits in step */
th.num, td.num{ text-align:right; font-variant-numeric:tabular-nums }

/* ---------- 背伸び · stretch sheets ---------- */
/* One optional challenge a week, never graded or recorded. The look has to say
   "level up, optional, safe to fail" without shouting, and it has to say it
   in greyscale, on a printer with background graphics switched off, and to a
   colour-blind reader. So nothing here relies on the green alone: every mark
   is paired with a shape that survives all three —
     ▲ a climbing marker (text glyph, prints without backgrounds),
     - - a dashed, hollow outline (optional; the solid ink chips are the must-dos),
     = a double rule under the header (every other sheet has a single one).
   Everything is scoped to .page.stretch (set by sheet_page for kind='stretch'),
   so the ~120 existing documents do not move by a pixel. */
.ph .meta .slot.stretch{
  background:#fff; color:var(--green); font-weight:700;
  border:1.5px dashed var(--green); padding:.5px 8px;
}
.ph .meta .slot.stretch::before{ content:"\25B2"; margin-right:5px; font-size:.85em }
.page.stretch .ph{ border-bottom:4px double var(--green) }
.page.key.stretch .ph{ border-bottom-color:var(--amber-deep) }   /* the key stays the key */

/* Stimulus panel — "information to read" versus "questions to answer".
   On a stretch sheet the disc, table and figure blocks are the stimulus: they
   sit on cream paper inside a full frame, like a clipping pasted on the sheet
   (the figures already paint that same cream). The questions stay on white
   with their ink number squares and ruled boxes. Frame vs no frame is the cue,
   so it holds in black and white. The answer key keeps its plain look. */
.page.stretch:not(.key) .disc{
  background:var(--stim); border:1.5px solid var(--soft); border-radius:6px;
  padding:9px 14px 10px;
}
.page.stretch:not(.key) .disc p{ margin:6px 0 0 }
.page.stretch:not(.key) .disc p + p{ margin-top:4px }
.page.stretch:not(.key) .disc .blabel{
  background:#fff; color:var(--ink); border:1.5px solid var(--ink); font-weight:700;
  padding:0 7px; letter-spacing:.06em;
}
.page.stretch:not(.key) .tablewrap{
  background:var(--stim); border:1.5px solid var(--soft); border-radius:6px;
  padding:8px 10px; break-inside:avoid;
}
/* shrink-wrap the table: a two-number table stretched to 184 mm puts "84"
   a hand's width away from the row it belongs to */
.page.stretch:not(.key) .tablewrap{ width:fit-content; min-width:60%; max-width:100% }
.page.stretch:not(.key) .tablewrap table{ width:100% }
.page.stretch:not(.key) .tablewrap td{ background:#fff }
.page.stretch:not(.key) .tablewrap th{
  background:transparent; color:var(--ink); font-weight:700; border-bottom:2px solid var(--ink);
}
.page.stretch:not(.key) .tablewrap figcaption{ margin-top:6px }
/* A figure keeps its own cream ground; the caption under it is part of the
   stimulus, so it is set as reading text rather than as a grey footnote. */
.page.stretch:not(.key) figcaption{ color:var(--ink); font-size:12.5px }
/* The questions after a stimulus: a little air above the first one so the
   eye sees the switch from reading to answering. */
.page.stretch:not(.key) .disc + .mon,
.page.stretch:not(.key) .tablewrap + .mon,
.page.stretch:not(.key) figure + .mon{ margin-top:14px }

/* the day strip: the stretch day is the optional one, and says so by outline */
.docnav a.st{ border:1px dashed var(--green); color:var(--green) }
.docnav a.st::before{ content:"\25B2\00a0"; font-size:.85em }
.docnav a.st:hover{ border-style:solid; color:var(--green) }
.docnav a.st[aria-current]{ background:var(--green); color:#fff; border-style:solid }

/* ---------- answer key (parent side) ---------- */
/* Set tighter than the child's sheets on purpose. Nobody writes on this one,
   and a parent reading a week of worked solutions is better served by having
   them on one sheet than by the whitespace. */
.key{ background:#FBFBFC }
.key .ph{ border-bottom-color:var(--amber-deep) }
.key .ans{ margin:6px 0; font-size:13.5px }
.key .ans-b{ margin:2px 0 0 32px }
.key h2.sec{ margin:12px 0 6px }
.ans{ margin:9px 0; break-inside:avoid; font-size:14px }
.ans-n{
  display:inline-block; min-width:26px; height:24px; line-height:24px; text-align:center;
  background:var(--amber-deep); color:#fff; border-radius:4px;
  font-family:'JetBrains Mono',monospace; font-size:12.5px; margin-right:8px;
}
.ans-b{ margin:3px 0 0 34px }
.ans-b p{ margin:0 0 4px }
@media (max-width:700px){ .ans-b{ margin-left:0 } }

/* ---------- print ---------- */
@page{ size:A4 portrait; margin:14mm 13mm }
@media print{
  body{ background:#fff }
  .bar, .hint-print, .noprint{ display:none !important }
  .page{
    width:auto; max-width:none; min-height:0; margin:0; border:none; border-radius:0;
    box-shadow:none; padding:0; background-image:none;
  }
  /* break BEFORE each sheet after the first, never after. A forced break-after
     on a section that happens to end exactly on the page boundary emits a
     blank sheet; break-before cannot. */
  .page + .page{ break-before:page }
  .work{ background:none; border-color:#BBB }
  a{ color:inherit; text-decoration:none }
}