/* The exercise book: what every Learnest page in the book's clothes shares.

   The two self-hosted typefaces and the plain zero, the colour tokens for both
   themes, links, focus, the pen, the keys (paper, highlighter and outline),
   the cobalt nav with the name-label wordmark, the white grid page with its
   margin rule, tape, the children stepper, and the back cover with the times
   table. landing.css and public.css each load after this file and add their
   own page.

   Every rule here but the plain zero moved out of landing.css word for word,
   in its old order, so the front page draws exactly as it did. Nothing loads
   from anyone else. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/atkinson-hyperlegible-next.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Edu NSW ACT Foundation";
  src: url("fonts/edu-nsw-act-foundation.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Atkinson Hyperlegible Next draws zero with a slash, and in an exercise book a
   slash through a figure means crossed out. The child's pages (kid.css) and the
   landing page's picture of a question set the digit 0 alone in this plain
   zero (tools/build_plain_zero.py builds it from the font's own O, under the
   SIL Open Font License). A page downloads it only when it sets a 0 in a font
   stack that names it. */
@font-face {
  font-family: "Learnest Plain Zero";
  src: url("fonts/learnest-plain-zero.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030;
}

:root {
  color-scheme: light dark;

  --cover: #1d45a3;
  --cover-deep: #16378a;
  --cover-deeper: #0e2766;
  --cover-soft: #c9d6f5;
  --cover-text: #e4ebfb;
  --on-cover: #ffffff;
  --label: #fdfcf7;

  --paper: #fdfdf9;
  --grid: rgba(49, 102, 190, 0.075);
  --margin: #e04a3c;

  --ink: #1b2430;
  --ink-soft: #4a5563;
  --pen: #1f3f9f;
  --red: #cf2e24;
  --hl: #fff14a;
  --hl-ink: #1b2430;
  --done: #1e7a4c;
  --done-bg: #e3f1e8;
  --tint: rgba(29, 69, 163, 0.07);
  --rule: #1b2430;

  --slip: #ffffff;
  --tape: rgba(226, 216, 178, 0.74);
  --slip-shadow: 0 1px 1px rgba(10, 20, 50, 0.06), 0 16px 30px -18px rgba(10, 20, 50, 0.5);

  --key: #fffdf8;
  --key-line: #8c8575;
  --key-edge: #d8cfbd;
  --start: #fff14a;
  --start-hover: #fff77e;
  --start-line: #b8a800;
  --start-edge: #8f8300;

  --focus: #c0561b;

  /* The product shots are pictures of the real screens, so they keep the
     app's own colours in both themes: the email's on the phone, and the
     child's question page (the book by day) on the tablet. */
  --app-accent: #22527a;
  --app-ink: #1b2430;
  --app-ink-soft: #56606c;
  --shot-cover: #1d45a3;
  --shot-cover-deeper: #0e2766;
  --shot-label: #fdfcf7;
  --shot-paper: #fdfdf9;
  --shot-grid: rgba(49, 102, 190, 0.06);
  --shot-margin: #e04a3c;
  --shot-ink: #1b2430;
  --shot-ink-soft: #4a5563;
  --shot-line: #d6dce8;
  --shot-slip: #ffffff;
  --shot-key: #fffdf8;
  --shot-key-line: #8c8575;
  --shot-key-edge: #d8cfbd;
  --shot-hl: #fff14a;
  --shot-hl-edge: #8f8300;
  --shot-pen: #1f3f9f;
  --shot-red: #cf2e24;
  --bezel: #121722;

  --f-print: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-pen: "Edu NSW ACT Foundation", "Segoe Print", "Bradley Hand", cursive;
  --f-code: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

  --wrap: 1200px;
  --side: clamp(16px, 4vw, 48px);
  --sec: clamp(84px, 9vw, 124px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box; }

::selection { background: var(--hl); color: var(--hl-ink); }

a { color: var(--pen); text-underline-offset: 0.2em; text-decoration-thickness: 0.09em; }
a:hover { text-decoration-thickness: 0.14em; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.codebar :focus-visible, .nav :focus-visible, .hero :focus-visible,
.closing :focus-visible, .back :focus-visible { outline-color: var(--hl); }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.pen { font-family: var(--f-pen); font-weight: 600; color: var(--pen); }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 50;
  padding: 10px 16px;
  font-weight: 700;
  color: var(--hl-ink);
  background: var(--hl);
  border-radius: 8px;
}
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ keys

   The app's paper keys: a 2px border and a hard bottom edge that collapses
   when pressed. Yellow is kept for the one action a parent takes. */

.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0.6rem 1.4rem;
  font: 700 1.1rem/1 var(--f-print);
  color: var(--ink);
  text-decoration: none;
  text-align: center;
  background: var(--key);
  border: 2px solid var(--key-line);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--key-edge);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 80ms ease, box-shadow 80ms ease, background-color 120ms ease;
}
.key:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--key-edge); }

.key-start, .key-go {
  color: var(--hl-ink);
  background: var(--start);
  border-color: var(--start-line);
  box-shadow: 0 5px 0 var(--start-edge);
}
.key-start { min-height: 64px; padding: 0 2rem; font-size: 1.25rem; }
.key-start:hover, .key-go:hover { background: var(--start-hover); }
.key-start:active, .key-go:active { box-shadow: 0 1px 0 var(--start-edge); }

.key-outline {
  min-height: 64px;
  padding: 0 1.7rem;
  font-size: 1.15rem;
  color: var(--on-cover);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.82);
  box-shadow: 0 5px 0 var(--cover-deeper);
}
.key-outline:hover { background: rgba(255, 255, 255, 0.1); }
.key-outline:active { box-shadow: 0 1px 0 var(--cover-deeper); }

/* ------------------------------------------------------------------ nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  color: var(--on-cover);
  background: var(--cover);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0 var(--side);
}
.nav-in {
  max-width: var(--wrap);
  margin: 0 auto;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}

/* The white name label on the front of every exercise book. */
.wordmark {
  flex: none;
  display: inline-block;
  padding: 3px 18px 5px;
  text-decoration: none;
  background: var(--label);
  border-radius: 10px;
  outline: 1.5px solid rgba(29, 69, 163, 0.5);
  outline-offset: -5px;
  box-shadow: 0 2px 0 rgba(5, 20, 60, 0.18), 0 10px 20px -12px rgba(0, 8, 30, 0.7);
}
.wordmark .pen { font-size: 1.75rem; font-weight: 700; line-height: 1.15; color: #1f3f9f; }
.wordmark:focus-visible { outline: 3px solid var(--hl); outline-offset: 3px; }

.nav-links { display: flex; gap: clamp(18px, 2.4vw, 34px); }
.nav-links a, .nav-signin {
  color: var(--on-cover);
  font-weight: 700;
  text-decoration: none;
}
.nav-links a:hover, .nav-signin:hover { text-decoration: underline; text-decoration-thickness: 2px; }
/* A line of text, so it borrows a key's height to make a target a thumb can hit. */
.nav-signin { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.nav-act { margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.ns-short, .cb-short { display: none; }
.key-nav { min-height: 48px; padding: 0 1.25rem; font-size: 1.05rem; box-shadow: 0 4px 0 var(--start-edge); }

/* ------------------------------------------------------------------ the page

   One white page ruled in a faint 5 mm grid, lifted off the cover. */

.page {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 6vw, 96px);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -1px -1px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 36px 70px -34px rgba(4, 12, 40, 0.65);
}
/* The printed margin rule, drawn twice the way an exercise book draws it. */
.page::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(10px, 2.6vw, 40px);
  width: 2px;
  background: var(--margin);
  box-shadow: 5px 0 0 -0.5px rgba(224, 74, 60, 0.55);
  opacity: 0.8;
}

/* Taped in. */
.tape {
  position: absolute;
  top: -13px;
  width: 96px;
  height: 27px;
  background: linear-gradient(rgba(255, 255, 255, 0.22), transparent 70%), var(--tape);
  box-shadow: 0 1px 2px rgba(40, 30, 0, 0.1);
}
.tape-l { left: 22px; transform: rotate(-7deg); }
.tape-r { right: 22px; transform: rotate(6deg); }
.tape-t { left: 50%; transform: translateX(-50%) rotate(-2deg); }

.stepper { display: flex; align-items: center; gap: 14px; }
.stepper[hidden] { display: none; }
.stepper-label { margin-right: 6px; font-size: 1.1rem; font-weight: 700; }
.key-step { width: 56px; padding: 0; font-size: 1.7rem; }
.key-step:disabled { cursor: default; opacity: 0.45; transform: none; box-shadow: 0 4px 0 var(--key-edge); }
.step-ico { width: 22px; height: 22px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }

/* ------------------------------------------------------------------ back cover */

.back {
  color: var(--on-cover);
  padding: clamp(44px, 6vw, 76px) var(--side) clamp(44px, 6vw, 72px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.back-in {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 28px 64px;
  align-items: end;
}
.times {
  border-collapse: collapse;
  font: 600 0.8rem/1 var(--f-print);
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.84);
}
.times td {
  width: 2.5em;
  height: 2.1em;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.times td.h { font-weight: 800; color: #ffffff; background: rgba(255, 255, 255, 0.1); }
.back-text p { margin: 0 0 10px; }
.back-name { font-family: var(--f-pen); font-weight: 700; font-size: 2.6rem; line-height: 1; }
.back-links a { display: inline-block; margin: 0 1.2em 6px 0; color: var(--on-cover); font-weight: 700; }
.back-label { display: inline-block; margin: 0 0.8em 6px 0; color: var(--cover-soft); }
.abn { font-size: 0.9rem; color: var(--cover-soft); }

/* ------------------------------------------------------------------ free tools
   What a family can use before any card (_free_tools.html), on the front page
   and on the app's front page, so it lives here and not in landing.css: one
   taped slip per tool, four across on a laptop, three on a tablet and two on
   a phone, the demo's slip twice as wide. The "go" link stretches over its
   whole slip; the year keys on the checks slip sit above it. */

.free h2 {
  display: inline;
  margin: 0;
  font-size: clamp(1.95rem, 1.35rem + 1.8vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.018em;
  text-decoration: underline;
  text-decoration-color: var(--margin);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.24em;
}
.free-app { margin-top: clamp(56px, 8vw, 96px); }
.free-lede { max-width: 38em; margin: 26px 0 0; font-size: clamp(1.1rem, 1rem + 0.3vw, 1.25rem); }
.free-grid {
  list-style: none;
  margin: clamp(40px, 5vw, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 40px) clamp(18px, 2.5vw, 32px);
}
.free-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 22px 22px;
  background: var(--slip);
  box-shadow: var(--slip-shadow);
  transform: rotate(-0.35deg);
}
.free-card:nth-child(even) { transform: rotate(0.4deg); }
.free-card:first-child { grid-column: span 2; }
.free-card h3 { margin: 0; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.free-who { margin: 6px 0 0; font-size: 0.95rem; font-weight: 700; color: var(--ink-soft); }
.free-what { flex: 1 1 auto; margin: 12px 0 0; max-width: 30em; }
.free-years { position: relative; z-index: 1; list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.free-years a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  font-weight: 700;
  color: var(--pen);
  text-decoration: none;
  background: var(--key);
  border: 2px solid var(--key-line);
  border-radius: 12px;
  box-shadow: 0 3px 0 var(--key-edge);
}
.free-years a:hover { border-color: var(--pen); text-decoration: underline; text-decoration-thickness: 2px; }
.free-go { margin: 16px 0 0; }
.free-go a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--pen);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}
.free-go a::after { content: ""; position: absolute; inset: 0; }
.free-go a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.free-card:has(.free-go a:hover) { box-shadow: var(--slip-shadow), 0 0 0 2px var(--pen); }
.free .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 1100px) {
  .free-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .free-card:first-child { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ narrower */

@media (max-width: 760px) {
  .free-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .free-card { padding: 24px 16px 18px; }
  /* The checks card takes the row: its seven year keys need the width. */
  .free-card[data-tool="checks"] { grid-column: 1 / -1; }
  .free-card h3 { font-size: 1.1rem; }
  .free-who, .free-what { font-size: 0.95rem; }
  .free-years a { min-width: 40px; min-height: 40px; padding: 0 6px; }
  .page::before { display: none; }
  .back-in { grid-template-columns: minmax(0, 1fr); }
  .times { font-size: 0.66rem; }
  .times td { width: 2.25em; height: 1.95em; }
}

@media (max-width: 620px) {
  .nav-in { min-height: 64px; gap: 12px; }
  .wordmark { padding: 2px 13px 4px; }
  .wordmark .pen { font-size: 1.4rem; }
  .ns-long { display: none; }
  .ns-short { display: inline; }
  .key-nav { min-height: 44px; padding: 0 0.95rem; font-size: 1rem; }
}

@media (max-width: 420px) {
  .stepper { gap: 10px; }
}

/* ------------------------------------------------------------------ dark */

@media (prefers-color-scheme: dark) {
  :root {
    --cover: #16317a;
    --cover-deep: #0f245e;
    --cover-deeper: #081640;
    --cover-soft: #b9c8ef;
    --cover-text: #dce4f7;
    --label: #ecebe4;

    --paper: #121a2b;
    --grid: rgba(150, 180, 240, 0.07);
    --margin: #e8665a;

    --ink: #e9eef7;
    --ink-soft: #aab6c8;
    --pen: #a6c1ff;
    --red: #ff7d6e;
    --done: #7fd4a6;
    --done-bg: #173226;
    --tint: rgba(166, 193, 255, 0.09);
    --rule: #6c7a90;

    --slip: #1b2438;
    --tape: rgba(214, 198, 146, 0.4);
    --slip-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 18px 34px -18px rgba(0, 0, 0, 0.8);

    --key: #1f2838;
    --key-line: #6f7d8a;
    --key-edge: #070b12;

    --focus: #ffb074;
    --bezel: #0a0d14;
  }
}

@media (prefers-reduced-motion: reduce) {
  .key, .key:active { transition: none; }
}

/* ------------------------------------------------------------------ home-screen app

   Added to an iPad's home screen (or installed from Android Chrome), the book
   fills the screen and iOS draws the clock and the battery over its top edge
   (the status bar is black-translucent, templates/_pwa_head.html). The cover
   reaches up under them: the nav starts below the status bar, and a strip of
   cover stays fixed behind the clock when the page scrolls, so it is never
   white on white paper. On Android, and in a browser tab, the inset is zero
   and none of this draws. */
@media (display-mode: standalone) {
  body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0px);
    background: var(--cover);
    z-index: 60;
    pointer-events: none;
  }
  .nav {
    margin-top: env(safe-area-inset-top, 0px);
    top: env(safe-area-inset-top, 0px);
  }
}