/* english1to5.com — shared styles. Tokens live in :root only. Bump ?v= in every page when this file changes. */

@font-face { font-family: "Andika"; src: url("/assets/fonts/andika-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Andika"; src: url("/assets/fonts/andika-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* color */
  --paper: #FBFCFE;        /* page */
  --ink: #1C2B4A;          /* text, headings */
  --ink-soft: #4A5876;     /* secondary text */
  --rule: #9DBCE6;         /* notebook blue line */
  --rule-soft: #DCE8F6;    /* borders, table lines */
  --panel: #EEF4FB;        /* tinted panels */
  --margin-red: #C8323F;   /* notebook margin red: mistakes, wrong answers */
  --highlight: #FFE55C;    /* highlighter: marks the thing being taught */
  --correct: #1F7A50;      /* right answers */
  --link: #1D4ED8;
  --focus: #1D4ED8;

  /* type */
  --font-kid: "Andika", "Trebuchet MS", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-body: 1.125rem;     /* 18px parent text */
  --fs-kid: 1.3125rem;     /* 21px kid text */
  --fs-small: 0.9375rem;
  --fs-h3: 1.25rem;
  --fs-h2: 1.625rem;
  --fs-h1: clamp(2.25rem, 6vw, 3.5rem);

  /* space + shape */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4.5rem;
  --radius: 10px;
  --measure: 44rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-kid); font-weight: 700; line-height: 1.2; color: var(--ink); }
h2 { font-size: var(--fs-h2); margin: var(--s8) 0 var(--s4); scroll-margin-top: var(--s5); }
h3 { font-size: var(--fs-h3); margin: var(--s6) 0 var(--s3); }
p { margin: 0 0 var(--s4); }
ul, ol { padding-left: 1.4em; margin: 0 0 var(--s4); }
li { margin-bottom: var(--s2); }
.nowrap { white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: var(--s3) var(--s4); z-index: 10; }
.skip:focus { left: var(--s4); }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 var(--s5); }
.article { max-width: var(--measure); margin: 0 auto; padding: 0 var(--s5) var(--s8); }

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid var(--rule-soft); background: #fff; }
.site-header .wrap { display: flex; align-items: center; gap: var(--s5); min-height: 4rem; flex-wrap: wrap; }
.logo { font-family: var(--font-kid); font-weight: 700; font-size: 1.5rem; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.logo span { color: var(--margin-red); }
.nav-toggle { display: none; margin-left: auto; font: inherit; font-size: var(--fs-small); background: none; border: 1px solid var(--rule); border-radius: 8px; padding: var(--s2) var(--s3); color: var(--ink); min-height: 44px; }
.nav { display: flex; align-items: center; gap: var(--s4); margin-left: auto; }
.nav > a:not(.btn), .nav summary { color: var(--ink); text-decoration: none; font-size: var(--fs-small); font-weight: 600; padding: var(--s3) var(--s1); cursor: pointer; }
.nav details { position: relative; }
.nav summary { list-style: none; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary::after { content: ""; display: inline-block; margin-left: 6px; border: 5px solid transparent; border-top-color: currentColor; transform: translateY(3px); }
.nav details[open] .menu { display: grid; }
.nav .menu { display: none; position: absolute; top: 100%; left: 0; z-index: 5; min-width: 13rem; background: #fff; border: 1px solid var(--rule-soft); border-radius: var(--radius); padding: var(--s2); box-shadow: 0 8px 24px rgba(28, 43, 74, 0.12); }
.nav .menu a { color: var(--ink); text-decoration: none; padding: var(--s2) var(--s3); border-radius: 6px; font-size: var(--fs-small); }
.nav .menu a:hover { background: var(--panel); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: var(--s2) var(--s4); border-radius: 999px; font-weight: 700; font-size: var(--fs-small); text-decoration: none; border: 2px solid var(--ink); color: var(--ink); background: #fff; cursor: pointer; font-family: var(--font-body); }
.btn:hover { background: var(--panel); text-decoration: none; }
.btn-solid { background: var(--ink); color: #fff; }
.btn-solid:hover { background: #2A3D63; }
@media (max-width: 860px) {
  .nav-toggle { display: inline-block; }
  .nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: var(--s4); }
  .nav.is-open { display: flex; }
  .nav .menu { position: static; box-shadow: none; border: 0; padding: 0 0 0 var(--s4); }
  .nav .btn { margin-top: var(--s3); }
}

/* ---------- breadcrumb + chips ---------- */
.crumbs { font-size: var(--fs-small); color: var(--ink-soft); margin: var(--s5) 0 0; }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "›"; margin-right: var(--s2); color: var(--rule); }
.crumbs a { color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0 var(--s5); padding: 0; list-style: none; }
.chips li { margin: 0; font-size: var(--fs-small); font-weight: 600; padding: 2px var(--s3); border-radius: 999px; background: var(--panel); color: var(--ink); border: 1px solid var(--rule-soft); }
.chips a { color: inherit; text-decoration: none; }

/* ---------- the signature: H1 written on primary handwriting paper ---------- */
/* Solid top line, dashed midline, solid baseline: the paper US kids learn to write on. */
.ruled-title { --lh: 1.5em; margin: var(--s4) 0 var(--s4); font-size: var(--fs-h1); line-height: var(--lh); padding: 0 var(--s2);
  /* top line (blue) and baseline (red) repeat once per text line */
  background-image:
    repeating-linear-gradient(transparent 0 0.34em, var(--rule) 0.34em calc(0.34em + 2px), transparent calc(0.34em + 2px) var(--lh)),
    repeating-linear-gradient(transparent 0 1.19em, var(--margin-red) 1.19em calc(1.19em + 2px), transparent calc(1.19em + 2px) var(--lh));
  background-size: auto; background-position: 0 0;
  position: relative; letter-spacing: 0.005em; }
.ruled-title::after { /* dashed midline, one per text line */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(transparent 0 0.6em, var(--rule) 0.6em calc(0.6em + 1.5px), transparent calc(0.6em + 1.5px) var(--lh));
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 18px);
          mask-image: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 18px); }

.lead { font-size: 1.25rem; line-height: 1.55; }
.lead strong { font-weight: 700; }

/* ---------- kid action row + on this page ---------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0 var(--s6); }
.toc { border-left: 4px solid var(--rule); padding: var(--s2) 0 var(--s2) var(--s4); margin: var(--s6) 0; }
.toc p { font-weight: 700; margin-bottom: var(--s2); }
.toc ol { columns: 2; column-gap: var(--s6); margin: 0; font-size: var(--fs-small); }
.toc li { break-inside: avoid; }
@media (max-width: 560px) { .toc ol { columns: 1; } }

/* ---------- highlighter: marks the words being taught ---------- */
mark, .hl { background: linear-gradient(transparent 12%, var(--highlight) 12% 88%, transparent 88%); color: inherit; padding: 0 0.12em; border-radius: 2px; }

/* ---------- rule box: a sentence strip ---------- */
.rule-strip { font-family: var(--font-kid); font-size: var(--fs-kid); line-height: 1.5; background: #fff; border: 2px solid var(--ink); border-radius: var(--radius); padding: var(--s4) var(--s5); margin: var(--s5) 0; box-shadow: 6px 6px 0 var(--rule-soft); }
.rule-strip p:last-child { margin: 0; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin: var(--s5) 0; }
table { width: 100%; border-collapse: collapse; font-size: 1rem; }
th, td { text-align: left; vertical-align: top; padding: var(--s3); border-bottom: 1px solid var(--rule-soft); }
td:first-child { min-width: 9.5rem; }
th { font-family: var(--font-kid); font-size: 1.0625rem; border-bottom: 2px solid var(--rule); }
td.kid { font-family: var(--font-kid); font-size: 1.1875rem; }
.pairs td:first-child { color: var(--ink-soft); }
.wrong { color: var(--margin-red); text-decoration: line-through; text-decoration-thickness: 2px; }
.right { color: var(--correct); font-weight: 700; }

/* ---------- examples list ---------- */
.examples { padding-left: 1.8em; }
.examples li::marker { color: var(--ink-soft); font-size: 0.85em; }
.examples li { font-family: var(--font-kid); font-size: var(--fs-kid); line-height: 1.5; padding: var(--s3) 0; border-bottom: 1px dashed var(--rule); margin: 0; }

/* ---------- steps (a real sequence, so numbered) ---------- */
.steps { list-style: none; padding: 0; counter-reset: step; }
.steps > li { counter-increment: step; position: relative; padding-left: 3.25rem; margin-bottom: var(--s5); }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 2px solid var(--ink); font-family: var(--font-kid); font-weight: 700; display: grid; place-items: center; }
.steps strong { display: block; font-family: var(--font-kid); font-size: 1.1875rem; }

/* ---------- quiz ---------- */
.quiz { list-style: none; padding: 0; margin: var(--s5) 0; }
.q { border: 2px solid var(--rule-soft); border-radius: var(--radius); padding: var(--s4) var(--s5); margin-bottom: var(--s4); background: #fff; }
.q.is-right { border-color: var(--correct); }
.q.is-wrong { border-color: var(--margin-red); }
.q-head { display: flex; gap: var(--s3); align-items: flex-start; justify-content: space-between; }
.q-prompt { font-family: var(--font-kid); font-size: var(--fs-kid); line-height: 1.45; margin: 0 0 var(--s3); }
.q-num { color: var(--ink-soft); font-weight: 700; margin-right: var(--s2); }
.say { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); background: var(--panel); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.q-options { display: grid; gap: var(--s2); margin-bottom: var(--s3); }
.q-options button, .tap { font-family: var(--font-kid); font-size: 1.1875rem; text-align: left; min-height: 48px; padding: var(--s2) var(--s4); border-radius: 8px; border: 2px solid var(--rule); background: #fff; color: var(--ink); cursor: pointer; }
.q-options button:hover, .tap:hover { background: var(--panel); }
.q-options button[aria-pressed="true"] { border-color: var(--ink); background: var(--panel); }
.q-options button.was-right { border-color: var(--correct); background: #E7F5EE; }
.q-options button.was-wrong { border-color: var(--margin-red); background: #FBEAEC; }
.q-words { font-family: var(--font-kid); font-size: var(--fs-kid); line-height: 2.4; margin-bottom: var(--s3); }
.tap { display: inline; min-height: 0; padding: 2px 6px; border-width: 0 0 2px; border-radius: 4px; text-align: center; margin: 0 1px; }
.tap[aria-pressed="true"] { background: linear-gradient(transparent 10%, var(--highlight) 10% 90%, transparent 90%); border-color: var(--ink); }
.tap.was-missed { border-color: var(--margin-red); border-bottom-style: dashed; }
.tap.was-wrong { color: var(--margin-red); }
.q-check { margin-right: var(--s3); }
.q-feedback { font-weight: 600; margin: var(--s3) 0; min-height: 1.6em; }
.q.is-right .q-feedback { color: var(--correct); }
.q.is-wrong .q-feedback { color: var(--margin-red); }
.q-answer { font-size: 1rem; color: var(--ink-soft); }
.q-answer summary { cursor: pointer; font-weight: 600; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
.quiz-score { font-family: var(--font-kid); font-size: 1.375rem; padding: var(--s4) var(--s5); border-radius: var(--radius); background: var(--panel); margin: var(--s4) 0; }
.quiz-score[hidden] { display: none; }

/* ---------- worksheet card ---------- */
.ws-card { display: grid; grid-template-columns: 11rem 1fr; gap: var(--s5); align-items: start; padding: var(--s5); border: 2px solid var(--rule-soft); border-radius: var(--radius); background: #fff; margin: var(--s5) 0; }
.ws-card img { border: 1px solid var(--rule-soft); border-radius: 4px; box-shadow: 0 2px 0 var(--rule-soft); background: #fff; }
.ws-card h3 { margin-top: 0; }
@media (max-width: 560px) { .ws-card { grid-template-columns: 1fr; } .ws-card img { max-width: 12rem; } }

/* ---------- prev / next ---------- */
.pathbar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin: var(--s5) 0; }
.pathbar a { display: block; padding: var(--s4); border: 2px solid var(--rule-soft); border-radius: var(--radius); text-decoration: none; color: var(--ink); background: #fff; }
.pathbar a:hover { border-color: var(--rule); }
.pathbar span { display: block; font-size: var(--fs-small); color: var(--ink-soft); }
.pathbar strong { font-family: var(--font-kid); font-size: 1.1875rem; }
.pathbar .next { text-align: right; }
@media (max-width: 560px) { .pathbar { grid-template-columns: 1fr; } .pathbar .next { text-align: left; } }

/* ---------- faq ---------- */
.faq details { border-bottom: 1px solid var(--rule-soft); padding: var(--s3) 0; }
.faq summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.faq details p { margin: var(--s3) 0 var(--s2); }

/* ---------- reviewed + author ---------- */
.reviewed { font-size: var(--fs-small); color: var(--ink-soft); margin-top: var(--s7); }
.author { display: grid; grid-template-columns: 3.5rem 1fr; gap: var(--s4); align-items: center; padding: var(--s5); border-top: 2px solid var(--ink); margin-top: var(--s7); }
.author .avatar { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--panel); border: 2px solid var(--rule); display: grid; place-items: center; font-family: var(--font-kid); font-weight: 700; font-size: 1.25rem; }
.author p { margin: 0; font-size: 1rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #DCE4F2; padding: var(--s7) 0 var(--s6); font-size: var(--fs-small); }
.site-footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s6); }
.site-footer h2 { font-size: 1.0625rem; color: #fff; margin: 0 0 var(--s3); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer a { color: #DCE4F2; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .legal { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid #34466B; color: #A9B6CF; }

/* ---------- print ---------- */
@media print {
  .site-header, .site-footer, .actions, .toc, .say, .q-check, .pathbar, .crumbs { display: none !important; }
  body { font-size: 12pt; }
  .q-answer { display: none; }
}

/* =================== hubs + homepage (added v2) =================== */
.page-wide { max-width: 64rem; margin: 0 auto; padding: 0 var(--s5) var(--s8); }
.page-wide > .measure { max-width: var(--measure); }
.hero { padding: var(--s6) 0 var(--s5); }
.hero .ruled-title { font-size: clamp(2.25rem, 5.5vw, 3.75rem); max-width: 18ch; }
.hero .lead { max-width: 38rem; }

/* cards: grade cards and topic cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: var(--s4); margin: var(--s5) 0; padding: 0; list-style: none; }
.card-grid li { margin: 0; }
.card-grid.six { grid-template-columns: 1fr; }
@media (min-width: 520px) { .card-grid.six { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .card-grid.six { grid-template-columns: repeat(3, 1fr); } }
.card-grid.five { grid-template-columns: repeat(auto-fill, minmax(10.75rem, 1fr)); }
.card { display: block; height: 100%; padding: var(--s4) var(--s5) var(--s5); background: #fff; border: 2px solid var(--rule-soft); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.card:hover { border-color: var(--rule); text-decoration: none; }
.card strong { display: block; font-family: var(--font-kid); font-size: 1.3125rem; margin-bottom: var(--s1); }
.card span { display: block; font-size: 1rem; color: var(--ink-soft); line-height: 1.5; }
.card .g { margin-top: var(--s2); font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.grade-card { border-top: 6px solid var(--rule); }
.grade-card strong { font-size: 1.75rem; }
.grade-card strong small { font-size: 1.125rem; font-weight: 400; color: var(--ink-soft); }

/* callout (check-up, notes) */
.callout { background: var(--panel); border-radius: var(--radius); padding: var(--s4) var(--s5); margin: var(--s5) 0; }
.callout p:last-child { margin-bottom: 0; }
.callout strong { font-family: var(--font-kid); font-size: 1.1875rem; }

/* grade-hub units */
.unit { border-left: 4px solid var(--rule); padding: var(--s1) 0 var(--s1) var(--s5); margin: var(--s6) 0; }
.unit h3 { margin-top: 0; }
.unit .example { font-family: var(--font-kid); font-size: 1.1875rem; background: #fff; border: 1px dashed var(--rule); border-radius: 8px; padding: var(--s3) var(--s4); }
.unit .links { font-size: 1rem; }
.parent-check { background: #fff; border: 2px solid var(--rule-soft); border-radius: 8px; padding: var(--s2) var(--s4); margin: var(--s3) 0; }
.parent-check summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.parent-check p { margin: var(--s2) 0 var(--s3); }

/* skills checklist */
.checklist fieldset { border: 0; padding: 0; margin: 0 0 var(--s5); }
.checklist legend { font-family: var(--font-kid); font-weight: 700; font-size: 1.1875rem; margin-bottom: var(--s2); }
.checklist label { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s2) 0; border-bottom: 1px dashed var(--rule-soft); cursor: pointer; }
.checklist input { width: 22px; height: 22px; margin-top: 3px; flex: none; accent-color: var(--correct); }
.checklist-actions { display: flex; gap: var(--s3); flex-wrap: wrap; }

/* try-a-question cards (no JS: answers live in the HTML) */
.try-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--s4); margin: var(--s5) 0; }
.try { background: #fff; border: 2px solid var(--rule-soft); border-radius: var(--radius); padding: var(--s4); }
.try p { font-family: var(--font-kid); font-size: 1.1875rem; margin-bottom: var(--s3); }
.try summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.try details p { font-family: var(--font-body); font-size: 1rem; }

/* workbook card (paid product) */
.wb-card { display: grid; grid-template-columns: 9rem 1fr; gap: var(--s5); align-items: start; padding: var(--s5); border: 2px solid var(--ink); border-radius: var(--radius); background: #fff; margin: var(--s5) 0; box-shadow: 6px 6px 0 var(--rule-soft); }
.wb-card h3 { margin-top: 0; }
.wb-cover { aspect-ratio: 8.5 / 11; border-radius: 4px; border: 1px solid var(--rule-soft); background:
  repeating-linear-gradient(transparent 0 26px, var(--rule-soft) 26px 27px), #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s3) var(--s3) var(--s3) 26px; font-family: var(--font-kid); font-weight: 700; line-height: 1.2; position: relative; overflow: hidden; }
.wb-cover::before { content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 2px; background: var(--margin-red); }
.wb-cover b { font-size: 1.75rem; display: block; }
.wb-cover span { font-size: 0.875rem; background: var(--highlight); padding: 0 4px; align-self: flex-start; }
.price small { font-family: var(--font-body); font-size: 1rem; font-weight: 400; color: var(--ink-soft); }
.price { font-family: var(--font-kid); font-weight: 700; font-size: 1.5rem; margin: 0 0 var(--s3); }
.wb-card .actions { margin: var(--s3) 0 0; }
@media (max-width: 560px) { .wb-card { grid-template-columns: 1fr; } .wb-cover { max-width: 9rem; } }

/* lessons in order */
.lesson-list { list-style: none; padding: 0; margin: var(--s4) 0; }
.lesson-list li { display: flex; justify-content: space-between; gap: var(--s3); align-items: baseline; padding: var(--s3) 0; border-bottom: 1px dashed var(--rule); margin: 0; }
.lesson-list a { font-family: var(--font-kid); font-size: 1.1875rem; }
.lesson-list .g { flex: none; font-size: var(--fs-small); color: var(--ink-soft); font-weight: 600; }

/* compact link rows */
.link-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); padding: 0; list-style: none; margin: var(--s3) 0 var(--s4); font-size: 1rem; }
.link-row li { margin: 0; }

@media print {
  .checklist-actions, .try-grid, .wb-card { display: none !important; }
}

/* ---------- worksheets hub ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: end; margin: var(--s5) 0 var(--s3); padding: var(--s4) var(--s5); background: var(--panel); border-radius: var(--radius); }
.filters label { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--fs-small); font-weight: 700; }
.filters select { min-height: 44px; min-width: 11rem; padding: 0 var(--s3); border: 2px solid var(--ink); border-radius: 8px; background: #fff; font: inherit; font-weight: 400; color: var(--ink); }
.filter-count { font-size: var(--fs-small); color: var(--ink-soft); margin: 0 0 var(--s3); }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: var(--s5) var(--s4); margin: 0 0 var(--s6); padding: 0; list-style: none; }
.ws-grid li { margin: 0; }
.ws-grid li[hidden] { display: none; }
.ws-grid a { display: block; color: var(--ink); text-decoration: none; }
.ws-grid img { display: block; width: 100%; height: auto; border: 1px solid var(--rule-soft); border-radius: 6px; box-shadow: 3px 3px 0 var(--rule-soft); background: #fff; }
.ws-grid a:hover img { border-color: var(--rule); }
.ws-grid strong { display: block; font-family: var(--font-kid); font-size: 1.125rem; margin: var(--s3) 0 0; line-height: 1.3; }
.ws-grid span { display: block; font-size: var(--fs-small); color: var(--ink-soft); }
/* ---------- product page ---------- */
.buy-box { display: grid; grid-template-columns: 12rem 1fr; gap: var(--s6); align-items: start; margin: var(--s5) 0 var(--s6); }
.buy-box .wb-cover { max-width: 12rem; }
.buy-box ul { margin: var(--s3) 0; }
.buy-note { font-size: var(--fs-small); color: var(--ink-soft); margin-top: var(--s3); }
@media (max-width: 640px) { .buy-box { grid-template-columns: 5.5rem 1fr; gap: var(--s4); } .buy-box .wb-cover { font-size: .55rem; padding: 6px; } .buy-box .wb-cover b { font-size: 1.1rem; } .buy-box .wb-cover span { font-size: .55rem; } .buy-box .lead { font-size: 1.0625rem; } }
.unit-list { list-style: none; padding: 0; margin: var(--s4) 0; border-top: 1px solid var(--rule-soft); }
.unit-list li { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--rule-soft); margin: 0; }
.unit-list b { font-family: var(--font-kid); }
@media (max-width: 520px) { .unit-list li { grid-template-columns: 1fr; gap: 0; } }
.soon { opacity: .75; }
.legal h2 { font-size: 1.375rem; }
/* ---------- topic-by-grade lesson list ---------- */
.lesson-list.numbered li { display: block; }
.lesson-list.numbered a { display: block; text-decoration: none; }
.lesson-list.numbered a strong { font-weight: 700; }
.lesson-list.numbered a:hover strong { text-decoration: underline; }
.lesson-list.numbered li > span { display: block; color: var(--ink-soft); font-size: 1rem; margin-top: 2px; }
.lesson-list.numbered li > span .g { display: inline; margin-left: var(--s2); }
/* ---------- game pages ---------- */
.game-frame { margin: var(--s5) 0 var(--s3); border: 2px solid var(--ink); border-radius: var(--radius); overflow: hidden; background: var(--panel); box-shadow: 6px 6px 0 var(--rule-soft); }
.game-frame iframe { display: block; width: 100%; border: 0; }
.game-frame.landscape iframe { aspect-ratio: 16 / 10; }
.game-frame.portrait { max-width: 26rem; margin-left: auto; margin-right: auto; }
.game-frame.portrait iframe { aspect-ratio: 9 / 16; max-height: 80vh; }
@media (max-width: 640px) { .game-frame.landscape iframe { aspect-ratio: 3 / 4; } }
.btn.is-disabled { opacity: .55; cursor: default; pointer-events: none; }
/* ---------- picture words (K phonics) ---------- */
.pic { font-size: 1.35em; line-height: 1; vertical-align: -.15em; margin: 0 .05em; }
.q-options .pic { font-size: 1.6em; }

/* ---------- sight word lists ---------- */
.word-grid { list-style: none; padding: 0; margin: 1rem 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.word-grid li { border: 1.5px solid var(--line, #d6dcea); border-radius: 10px; padding: .55rem .7rem; font-size: 1.2rem; font-weight: 700; text-align: center; background: #fff; }
.blank { display: inline-block; min-width: 3.2em; border-bottom: 2px solid currentColor; line-height: 1; }
.word-grid .rk { display: block; font-size: .72rem; font-weight: 400; color: var(--muted, #6b7591); line-height: 1; margin-bottom: .15rem; }

/* ---------- reading check-up ---------- */
.cu-note { background: var(--panel, #EEF4FB); border-radius: 10px; padding: .8rem 1rem; }
.cu-sec { margin: 1.5rem 0; }
.cu-sec h3 small { font-weight: 400; color: var(--muted, #6b7591); font-size: .8em; }
.cu-q { border: 1.5px solid var(--line, #d6dcea); border-radius: 12px; padding: .8rem 1rem 1rem; margin: 0 0 .9rem; position: relative; background: #fff; }
.cu-q legend { font-weight: 700; padding: 0 .3rem; font-size: 1.08rem; max-width: calc(100% - 3rem); }
.cu-q .say { position: absolute; top: .55rem; right: .7rem; }
.cu-opts { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.cu-opt { cursor: pointer; }
.cu-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cu-opt > span { display: inline-flex; align-items: center; gap: .3rem; min-height: 3rem; min-width: 4.5rem; justify-content: center; padding: .45rem 1rem; border: 2px solid var(--line, #d6dcea); border-radius: 10px; font-size: 1.15rem; font-weight: 700; background: #fff; }
.cu-opt .pic { font-size: 1.9rem; }
.cu-opt input:checked + span { border-color: var(--ink, #1C2B4A); background: #FFF6C2; }
.cu-opt input:focus-visible + span { outline: 3px solid var(--ink, #1C2B4A); outline-offset: 2px; }
.cu-q.is-right { border-color: #1F7A50; }
.cu-q.is-wrong, .cu-q.is-blank { border-color: #C8323F; }
.cu-q.is-wrong::after, .cu-q.is-blank::after, .cu-q.is-right::after { position: absolute; bottom: .4rem; right: .8rem; font-size: .85rem; font-weight: 700; }
.cu-q.is-right::after { content: "Right"; color: #1F7A50; }
.cu-q.is-wrong::after { content: "Practice"; color: #C8323F; }
.cu-q.is-blank::after { content: "Skipped"; color: #C8323F; }
.cu-passage { border-left: 4px solid var(--rule, #9DBCE6); padding: .4rem 1rem; margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.6; background: #fff; }
.cu-results { border: 2px solid var(--ink, #1C2B4A); border-radius: 14px; padding: 1rem 1.2rem; margin: 1.5rem 0; background: #fff; }
.cu-results h2 { margin-top: 0; }
.cu-bars { list-style: none; padding: 0; margin: 1rem 0; }
.cu-bars li { display: grid; grid-template-columns: 11rem 1fr auto; gap: .3rem .8rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line, #d6dcea); }
.cu-bar { height: .7rem; background: #EEF1F7; border-radius: 99px; overflow: hidden; }
.cu-bar i { display: block; height: 100%; background: #C8323F; }
.cu-bars li.mid .cu-bar i { background: #E2A52E; }
.cu-bars li.ok .cu-bar i { background: #1F7A50; }
.cu-score { font-weight: 700; font-size: .95rem; }
.cu-practice { grid-column: 1 / -1; font-size: .95rem; }
.cu-small { font-size: .9rem; color: var(--muted, #6b7591); }
@media (max-width: 560px) { .cu-bars li { grid-template-columns: 1fr auto; } .cu-bar { grid-column: 1 / -1; grid-row: 2; } }
@media print { .cu, #before, #areas, #next, #other, .faq, .author, .crumbs, .reviewed, h2#faq { display: none !important; } .cu-results { border: 0; } .cu-results .actions { display: none; } }
.cu-q legend { float: left; width: 100%; padding: 0 3rem .2rem 0; }
.cu-q .cu-opts { clear: both; }

/* ---------- flashcard maker ---------- */
.fc-form { border: 2px solid var(--ink, #1C2B4A); border-radius: 14px; padding: 1rem 1.2rem; background: #fff; display: grid; gap: .9rem; }
.fc-field { display: grid; gap: .35rem; font-weight: 700; border: 0; padding: 0; margin: 0; }
.fc-field legend { font-weight: 700; padding: 0; margin-bottom: .35rem; }
.fc-field small { font-weight: 400; color: var(--muted, #6b7591); }
.fc-field select, .fc-field textarea { font: inherit; font-weight: 400; padding: .55rem .7rem; border: 1.5px solid var(--line, #d6dcea); border-radius: 10px; background: #fff; max-width: 100%; }
fieldset.fc-field label { font-weight: 400; margin-right: 1.2rem; display: inline-flex; gap: .4rem; align-items: center; }
.fc-count { margin: 0; font-size: .95rem; color: var(--muted, #6b7591); }
.fc-preview { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.fc-preview.s6 { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.fc-c { position: relative; border: 2px dashed var(--line, #c9d0e3); border-radius: 10px; aspect-ratio: 1.1; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; background: #fff; }
.fc-preview.s6 .fc-c { font-size: 2.6rem; aspect-ratio: 1.25; }
.fc-c.long { font-size: 1.5rem; }
.fc-c i, .fc-p i, .fc-card-big i { position: absolute; top: .3rem; right: .5rem; font-style: normal; font-size: 1rem; color: #C8323F; }
.fc-more { grid-column: 1 / -1; color: var(--muted, #6b7591); }
.fc-practice { border: 2px solid var(--ink, #1C2B4A); border-radius: 14px; padding: 1.2rem; margin: 1.2rem 0; background: #FFFDF2; text-align: center; }
.fc-card-big { position: relative; font-size: clamp(3rem, 14vw, 6rem); font-weight: 700; min-height: 9rem; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 12px; border: 2px solid var(--line, #d6dcea); }
.fc-card-big.long { font-size: clamp(2.2rem, 10vw, 4.5rem); }
.fc-card-big i { font-size: 1.6rem; top: .6rem; right: .9rem; }
.fc-done { font-size: 2.2rem; }
.fc-progress { color: var(--muted, #6b7591); }
.fc-practice .actions { justify-content: center; }
#fc-print { display: none; }
@media print {
  body.fc-printing > *:not(#fc-print) { display: none !important; }
  body.fc-printing #fc-print { display: block; }
  @page { size: Letter; margin: .4in; }
  .fc-sheet { display: grid; height: 10.1in; page-break-after: always; border-top: 1.2pt dashed #9aa4bf; border-left: 1.2pt dashed #9aa4bf; position: relative; }
  .fc-sheet.s12 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); }
  .fc-sheet.s6 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
  .fc-p { position: relative; border-right: 1.2pt dashed #9aa4bf; border-bottom: 1.2pt dashed #9aa4bf; display: flex; align-items: center; justify-content: center; font-family: "Andika", sans-serif; font-weight: 700; font-size: 40pt; color: #1C2B4A; text-align: center; }
  .fc-sheet.s6 .fc-p { font-size: 60pt; }
  .fc-p.long { font-size: 30pt; } .fc-sheet.s6 .fc-p.long { font-size: 44pt; }
  .fc-p i { font-size: 14pt; top: 6pt; right: 9pt; }
  .fc-foot { position: absolute; bottom: -.3in; left: 0; font-size: 8pt; color: #6b7591; margin: 0; }
}
.fc-field[hidden] { display: none; }
@media print { .fc-sheet:last-child { page-break-after: auto; } }
@media print { .fc-sheet { height: 9.7in; } }
.word-grid.sp li { font-size: 1.05rem; padding: .45rem .5rem; }