/* Shared styles for the worksheet pages, including the stacked problem the
   times table and division pages print, and the fonts and colors the privacy
   page uses too. A page keeps only styles no other page uses inline: the
   one-line problem on the times table page, long division on the division
   page, the color key and picture on the Color by Number page, and the privacy
   page's reading column.

   Layout: settings column on the left, letter-size paper preview on the right. Stacks on phones. */

/* Fonts are served from this site (fonts/), not a font service, so the pages
   contact no other site (see privacy/). These are the "latin" subsets Google
   Fonts serves: English letters, digits, ×, ÷, and the en dash in titles.
   Other characters fall back to the system fonts in --font-sheet and
   --font-ui. Licenses: fonts/OFL-*.txt. */
@font-face { font-family: "Andika"; font-weight: 400; font-display: swap; src: url("fonts/andika-400.woff2") format("woff2"); }
@font-face { font-family: "Andika"; font-weight: 700; font-display: swap; src: url("fonts/andika-700.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url("fonts/atkinson-hyperlegible-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url("fonts/atkinson-hyperlegible-700.woff2") format("woff2"); }

:root {
  --desk: #e7ecf2;
  --surface: #f6f8fb;
  --text: #17202b;
  --muted: #586473;
  --line: #c9d2dd;
  --field: #ffffff;
  --pencil: #f5c13e;
  --pencil-ink: #2a2206;
  --blue: #2c5ba6;
  --error: #b42318;
  /* Paper stays paper in both themes. */
  --paper: #ffffff;
  --ink: #111111;
  --rule: #9aa3ad;
  --font-sheet: "Andika", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --desk: #0f141b;
    --surface: #161d26;
    --text: #e4e9ef;
    --muted: #98a4b2;
    --line: #2b3542;
    --field: #0f141b;
    --pencil: #f5c13e;
    --pencil-ink: #2a2206;
    --blue: #8eb2ef;
    --error: #ff8f86;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--desk);
  color: var(--text);
  font: 15px/1.45 var(--font-ui);
}

.app {
  display: grid;
  grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---------- Settings panel ---------- */
.panel {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.brand h1 {
  font-family: var(--font-sheet);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.15;
  margin: 0 0 4px;
  text-wrap: balance;
}
.brand p { margin: 0; color: var(--muted); font-size: 0.92rem; }

form { display: flex; flex-direction: column; gap: 20px; }
fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
legend {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0;
  margin-bottom: 8px;
}
label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

input[type="text"], input[type="number"] {
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  width: 100%;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
input:focus-visible, button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
input[aria-invalid="true"] { border-color: var(--error); }
.hint { font-size: 0.82rem; color: var(--muted); }
.err { font-size: 0.82rem; color: var(--error); }

/* Answer key switch: a checkbox drawn as an on/off switch. Colors follow the
   times table page's segmented control: field color when off, text color when on. */
label.switch { flex-direction: row; align-items: center; gap: 10px; cursor: pointer; }
.switch input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 40px;
  height: 24px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--field);
  cursor: pointer;
  transition: background-color 0.15s;
}
.switch input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.15s;
}
.switch input:checked { background: var(--text); border-color: var(--text); }
.switch input:checked::before { background: var(--surface); transform: translateX(16px); }

/* Segmented control (radio buttons drawn as one bar), like the Layout choice
   on both pages (two options) and the times table page's "Times-table number
   goes" (three). Every option gets an equal share of the width. */
.seg-caption { font-size: 0.9rem; }
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.seg label { position: relative; display: block; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
  display: block;
  text-align: center;
  padding: 8px 6px;
  font-size: 0.9rem;
  background: var(--field);
  cursor: pointer;
}
.seg label + label span { border-left: 1px solid var(--line); }
.seg input:checked + span { background: var(--text); color: var(--surface); font-weight: 700; }
.seg input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

.summary {
  font-size: 0.88rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin: 0;
}
.summary strong { color: var(--text); font-variant-numeric: tabular-nums; }

.actions { display: flex; flex-direction: column; gap: 10px; }
button {
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 6px;
  padding: 11px 14px;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-print { background: var(--pencil); color: var(--pencil-ink); }
.btn-print:hover { filter: brightness(1.05); }
.btn-print:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-shuffle { background: transparent; color: var(--text); border-color: var(--line); }
.btn-shuffle:hover { border-color: var(--muted); }
.print-note { font-size: 0.8rem; color: var(--muted); margin: 0; }
.brand .cross-link { font-size: 0.88rem; margin: 8px 0 0; }
.cross-link a, .panel-footer a { color: var(--blue); }
/* The privacy link, at the very bottom of the panel. margin-top: auto pushes
   it down when the panel is taller than its contents. */
.panel-footer { font-size: 0.82rem; margin: auto 0 0; }

/* ---------- Preview ---------- */
.preview {
  padding: 32px 32px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  min-width: 0;
}
.sheet-wrap { width: min(100%, 760px); container-type: inline-size; }
/* While a setting needs fixing, the last good sheet stays up but dimmed, and it
   won't print (see the print rules below), matching the disabled Print button. */
.preview.stale .sheet-wrap { opacity: 0.4; }
.page-label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

/* All sheet sizes are in inches so screen and print match. */
.paper {
  --in: calc(100cqw / 8.5);
  width: 100%;
  aspect-ratio: 8.5 / 11;
  background: var(--paper);
  color: var(--ink);
  padding: calc(var(--in) * 0.5);
  display: flex;
  flex-direction: column;
  gap: calc(var(--in) * 0.15);
  font-family: var(--font-sheet);
  box-shadow: 0 1px 2px rgba(15, 25, 40, 0.12), 0 8px 24px rgba(15, 25, 40, 0.10);
  overflow: hidden;
}
.ws-head {
  height: calc(var(--in) * 1.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: calc(var(--in) * 0.014) solid var(--ink);
  padding-bottom: calc(var(--in) * 0.1);
  flex: none;
}
.ws-fields {
  display: flex;
  gap: calc(var(--in) * 0.35);
  font-size: calc(var(--in) * 12 / 72);
}
.ws-field { display: flex; align-items: flex-end; gap: calc(var(--in) * 0.08); }
.ws-field.name { flex: 1 1 auto; }
.ws-field.date { flex: 0 0 calc(var(--in) * 2.4); }
.ws-field .blank { flex: 1; border-bottom: calc(var(--in) * 0.01) solid var(--ink); height: 1.1em; }
/* Answer key pages put this label where Name and Date go. */
.ws-key-label { align-self: flex-end; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
/* The sheet code matches a key to its worksheet: small, at the right end of the line. */
.ws-code {
  align-self: flex-end;
  margin-left: auto;
  font-size: calc(var(--in) * 10 / 72);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ws-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--in) * 0.2);
}
.ws-title h2 {
  margin: 0;
  font-size: calc(var(--in) * 20 / 72);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ws-meta {
  font-size: calc(var(--in) * 10 / 72);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ws-grid { display: grid; flex: none; }

/* One stacked problem, on both pages: the top number, then the sign and the
   bottom number over a rule. Built by WorksheetUI.stackedProblem. */
.stacked {
  justify-self: center;
  align-self: start;
  width: 2.8em;
  padding-top: 0.35em;
  line-height: 1.2;
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}
.stacked .n2 {
  display: flex;
  justify-content: space-between;
  border-bottom: 0.08em solid var(--ink);
  padding-bottom: 0.05em;
}
/* The answer spot under the rule: empty on the worksheet, filled on the answer
   key. Rows already leave room for it, so nothing moves. Flex end keeps the
   answer under the ones digits; if a wide fallback font makes 9801 wider than
   the problem, it spills left into the cell's spare room, not into a neighbor. */
.stacked .ans {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.12em;
  font-weight: 700;
}
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .panel { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 24px 16px; }
  .preview { padding: 24px 16px 40px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Print: only the sheets, one per page ----------
   The page margins hold the 0.5 in border that the paper's padding draws on
   screen, and the paper takes only the height it needs: the header, the gap,
   and the grid come to 9.25 in (GRID_H in worksheet-core.js), well inside the
   10 in between the margins. Phones and some browsers ignore @page margins
   and use their own, and iPhone Safari adds a footer, so the spare room keeps
   each sheet on one page there too. A fixed-height paper on a zero-margin
   page did not fit: it overflowed onto a second page. */
@media print {
  @page { size: letter; margin: 0.5in; }
  html, body { background: #fff; }
  .panel, .page-label { display: none !important; }
  .app { display: block; min-height: 0; }
  .preview { display: block; padding: 0; }
  .preview.stale { display: none; }
  .sheet-wrap { width: 7.5in; margin: 0 auto; container-type: normal; }
  .paper {
    --in: 1in;
    width: 7.5in;
    height: auto;
    aspect-ratio: auto;
    padding: 0;
    box-shadow: none;
    break-inside: avoid;
    break-after: page;
  }
  .sheet-wrap:last-child .paper { break-after: auto; }
}