/* Printables design system: nametracing.app (CYCLE186-LD-RT-PRINT-BUILD-1).
   Lifted from CYCLE186-DES-RT-PRINTABLES-DESIGN-1, direction B "Crayon-bright" (Andrew approved, 2026-09-30).
   Door-scoped: only the tracing door's templates load this file; the book doors keep site.css.
   No third-party assets. Fonts: vendored OFL subsets (static/rt/fonts, licences beside them).
   The faint letters behind the page are inline SVG, aria-hidden, and never print. */

@font-face { font-family: "EduPre"; src: url("fonts/EduAUVICWANTPre-500-sub.woff") format("woff"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "SchoolPrint"; src: url("fonts/DidactGothic-sub.woff") format("woff"); font-display: swap; }

:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-hand: "EduPre", "Segoe Print", system-ui, sans-serif;
  --font-print: "SchoolPrint", "Century Gothic", system-ui, sans-serif;
  --r-sm: 10px; --r: 16px; --r-lg: 22px;
  --tap: 48px;
  --maxw: 1160px;
  --focus: #1a56db;
  --gutter: 16px;
  --bg: #fffaf1; --surface: #ffffff; --ink: #1f2328; --muted: #4d535a;
  --line: #eadfcd; --line-strong: #8a8173;
  --primary: #1d5bb8; --primary-ink: #ffffff; --primary-press: #16488f;
  --pick: #ffd84d; --pick-ink: #1f2328; --soft: #fff1c9;
  --c1: #e2552b; --c2: #f0b400; --c3: #2d86d9; --c4: #2f9e55; --c5: #8b5cc2;
  --glyph-a: .10;
  --err: #b42318;
  --card-shadow: 0 2px 0 #eadfcd, 0 10px 24px rgba(60, 40, 10, .06);
  --chip-shadow: 0 2px 0 #d9ccb6;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--font-ui); position: relative; overflow-x: hidden; min-height: 100vh; }
a { color: var(--primary); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--surface); padding: 12px 16px; border-radius: 10px; font-weight: 700; }
.skip:focus { left: 12px; }
[hidden] { display: none !important; }

/* the faint letters and numbers in the background */
.glyphs { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; height: 1100px; bottom: auto;
  -webkit-mask-image: linear-gradient(#000 0, #000 55%, transparent 92%); mask-image: linear-gradient(#000 0, #000 55%, transparent 92%); }
.glyphs svg { width: 100%; height: 100%; display: block; }
.glyphs text { font-family: var(--font-hand); }
.glyphs .g1 { fill: var(--c1); } .glyphs .g2 { fill: var(--c2); } .glyphs .g3 { fill: var(--c3); }
.glyphs .g4 { fill: var(--c4); } .glyphs .g5 { fill: var(--c5); }
.glyphs g { opacity: var(--glyph-a); }
.page { position: relative; z-index: 1; }

/* header */
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; flex-wrap: wrap; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); text-decoration: none; color: var(--ink); font-weight: 800; font-size: 19px; letter-spacing: -.01em; }
.wordmark .tile { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-family: var(--font-print); font-size: 26px; line-height: 1; padding-bottom: 3px; background: var(--pick); color: var(--ink); box-shadow: 0 2px 0 #d9b21f; }
.wordmark .tld { color: var(--muted); font-weight: 700; }
.nav { display: flex; gap: 2px; flex-wrap: wrap; }
.nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; border-radius: 999px; color: var(--ink); font-weight: 650; text-decoration: none; font-size: 15px; white-space: nowrap; }
.nav a:hover { background: rgba(0,0,0,.05); }
.nav a[aria-current="page"] { background: var(--soft); box-shadow: inset 0 -3px 0 var(--c2); }
.section-label { margin: 0; font-size: 14px; font-weight: 700; }
.section-label a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--muted); }

/* hero */
.hero-title { word-spacing: .14em; font-family: var(--font-hand); font-weight: 600; font-size: clamp(30px, 7.6vw, 52px); line-height: 1.08; margin: 18px 0 18px; color: var(--ink); overflow-wrap: break-word; }
.hero-title .scribble { background-repeat: no-repeat; background-position: 0 100%; background-size: 100% .28em; padding-bottom: .12em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 40 2, 80 11, 120 5 S 180 3, 198 7' fill='none' stroke='%23f0b400' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.hero-sub { margin: 0 0 18px; color: var(--muted); font-size: 18px; max-width: 34em; }
/* rc-st7-10 (UX-BENCHMARK-1 H8, CYCLE191-CX-1604): the hand-drawn underline sits under the title's last line only (it
   ran through "1-100" on the second line at 390 px): the span is one box, its background at the box's foot */
.hero-title .scribble { display: inline-block; max-width: 100%; }
/* H3 (CYCLE191-CX-1602): the promise line under the H1 */
.promise { margin: -6px 0 16px; font-weight: 700; font-size: 17px; color: var(--ink); }
@media (min-width: 900px) { .promise { margin: -8px 0 10px; font-size: 16px; line-height: 1.3; } .promise + .hero-sub { margin-bottom: 14px; } }

/* the tool: form card + paper preview */
.tool { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); padding-bottom: 28px; }
@media (min-width: 900px) { .tool { grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); align-items: start; gap: 40px; } .tool .preview { position: sticky; top: 16px; } }
.card { background: var(--surface); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--card-shadow); border: 1px solid var(--line); }
@media (min-width: 900px) { .card { padding: 24px; } }
.field-label { display: block; font-weight: 750; font-size: 16px; margin: 0 0 6px; }
.field-label.small { font-size: 14px; margin-top: 10px; }
.name-input, .text-input, .select, .card textarea, .card input[type=text], .page select, .page textarea, .page input[type=text] {
  width: 100%; min-height: var(--tap); padding: 8px 14px; font: 500 18px/1.3 var(--font-ui);
  border: 2px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink); }
.page input.name-input { min-height: 60px; padding: 0 18px; font: 400 28px/1 var(--font-print); border-radius: var(--r); }
.page textarea { min-height: 96px; font: 400 22px/1.35 var(--font-print); resize: vertical; }
.name-input:focus, .page textarea:focus, .page select:focus, .page input[type=text]:focus { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--primary); }
.helper, .hint { font-size: 14px; color: var(--muted); margin: 8px 0 0; }
.error { color: var(--err); font-weight: 700; margin: 10px 0 0; }
.notice { font-size: 14px; color: var(--muted); margin: 8px 0 0; min-height: 0; }
.group { margin: 18px 0 0; border: 0; padding: 0; min-width: 0; }
.group legend { font-weight: 750; font-size: 16px; margin-bottom: 8px; padding: 0; }
/* segmented radios: real inputs, styled as chips */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; background: var(--soft); padding: 5px; border-radius: 999px; }
.seg.wrap-ok { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); border-radius: 26px; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 10px; border-radius: 999px; font: 700 15px/1.15 var(--font-ui); text-align: center; cursor: pointer; color: var(--ink); }
.seg input:checked + label { background: var(--pick); color: var(--pick-ink); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 2px 0 rgba(0,0,0,.06); }
.seg input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.actions .btn-primary { grid-column: 1 / -1; }
/* "Email my PDF" (SHARE-PDF-1, D-96): its own row under Preview and Print; the status line under it */
.actions .share-btn, .actions .share-status { grid-column: 1 / -1; }
.share-status { margin: 0; color: var(--ink); }
.share-status:empty { margin-top: -10px; }
.btn[aria-busy="true"] { cursor: progress; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 14px; border-radius: var(--r); font: 800 17px/1.1 var(--font-ui); text-decoration: none; cursor: pointer; border: 2px solid transparent; }
.btn svg { flex: none; }
.btn-primary { background: var(--primary); color: var(--primary-ink); box-shadow: 0 3px 0 var(--primary-press); }
.btn-primary:hover { background: var(--primary-press); }
.btn-ghost, .btn-secondary { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.options { margin-top: 14px; }
.options > summary { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; color: var(--primary); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.trust { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--muted); font-weight: 600; }
.trust li { display: inline-flex; align-items: center; gap: 6px; }
.trust li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c4); }
.forget { font-size: 14px; color: var(--muted); margin: 12px 0 0; }
.link-btn { background: none; border: 0; padding: 0 4px; min-height: var(--tap); color: var(--primary); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* paper preview */
.preview { min-width: 0; }
.paper-wrap { position: relative; max-width: 620px; margin: 0 auto; }
.paper { background: #fff; aspect-ratio: 8.5 / 11; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 18px 40px rgba(40, 30, 10, .12); overflow: hidden; position: relative; }
.paper.landscape { aspect-ratio: 11 / 8.5; }
.paper > svg, .paper > img { width: 100%; height: 100%; display: block; }
.paper-wrap::before, .paper-wrap::after { content: ""; position: absolute; top: -10px; width: 96px; height: 26px; z-index: 2; opacity: .85; border-radius: 3px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px), var(--c3); }
.paper-wrap::before { left: 18px; transform: rotate(-4deg); }
.paper-wrap::after { right: 18px; transform: rotate(3deg); background: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px), var(--c1); }
.paper.is-sample > svg { opacity: .55; filter: grayscale(.3); }
.sample-tag { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) rotate(-8deg); background: var(--surface); border: 2px dashed var(--line-strong); color: var(--ink); font-weight: 800; padding: 6px 14px; border-radius: 12px; }
.preview-cap { text-align: center; font-size: 14px; color: var(--muted); margin: 10px 0 0; }

/* the full-size preview dialog: the exact PDF page(s) */
.pv { border: 0; padding: 0; width: min(100vw, 980px); max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0 auto; background: var(--bg); color: var(--ink); }
.pv::backdrop { background: rgba(20, 16, 8, .55); }
.pv-in { display: flex; flex-direction: column; height: 100%; }
.pv-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px var(--gutter); background: var(--surface); border-bottom: 1px solid var(--line); }
.pv-bar .pv-title { font: 600 24px/1.1 var(--font-hand); margin: 0 auto 0 0; }   /* SEO-FIX-1 (MC-3): the dialog's name, not a page heading */
.pv-bar .btn { min-height: var(--tap); font-size: 16px; }
.pv-nav { display: flex; align-items: center; gap: 6px; padding: 8px var(--gutter); justify-content: center; font-weight: 700; }
.pv-nav button { min-width: var(--tap); min-height: var(--tap); border-radius: 999px; border: 2px solid var(--line-strong); background: #fff; font: 800 20px/1 var(--font-ui); cursor: pointer; color: var(--ink); }
.pv-body { flex: 1; overflow: auto; padding: 12px var(--gutter) 24px; }
.pv-page { background: #fff; width: 100%; max-width: 816px; margin: 0 auto; aspect-ratio: 8.5 / 11; box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 10px 30px rgba(0,0,0,.12); }
.pv-page > svg { width: 100%; height: 100%; display: block; }
.pv-status { text-align: center; color: var(--muted); }

/* below the tool */
.section { padding: 28px 0; }
.section h2, .library h2 { word-spacing: .12em; font-family: var(--font-hand); font-weight: 600; font-size: 30px; line-height: 1.15; margin: 0 0 6px; }
.section .lede { margin: 0 0 16px; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.tile-card { display: flex; flex-direction: column; gap: 4px; min-height: 132px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); box-shadow: var(--card-shadow); }
.tile-card .big { height: 52px; margin-bottom: 4px; display: block; }
.tile-card strong { font-size: 17px; }
.tile-card .s { font-size: 14px; color: var(--muted); }
.tiles .tile-card:nth-child(4n+1) .big { color: #b83c17; } .tiles .tile-card:nth-child(4n+2) .big { color: #1d5bb8; }
.tiles .tile-card:nth-child(4n+3) .big { color: #22783f; } .tiles .tile-card:nth-child(4n+4) .big { color: #6b3fa3; }
.more-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.more-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.more-card .t { font-weight: 800; margin: 0; }
.more-card .d { margin: 4px 0 8px; color: var(--muted); font-size: 15px; }
.more-card .soon { display: inline-block; font-size: 14px; font-weight: 700; color: var(--muted); border: 2px dashed var(--line-strong); border-radius: 999px; padding: 4px 12px; }
.more-card .btn { min-height: var(--tap); margin-top: 8px; }
.faq .qa { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); margin: 0 0 10px; }
.faq .qa h3 { font-size: inherit; line-height: 1.35; font-weight: 750; margin: 0; padding: 12px 16px 6px; }
.faq .qa p { margin: 0; padding: 0 16px 14px; color: var(--muted); }
.crosslink, .library-link { margin: 14px 0; }

/* library pages, index, hand-off, word search */
.library { padding-bottom: 20px; }
.library .intro { color: var(--muted); max-width: 44em; }
.lib-files { margin-top: 8px; }
.parts { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.part { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.part .btn { width: 100%; text-align: center; padding: 8px 12px; line-height: 1.25; }
.facts { font-size: 14px; color: var(--muted); margin: 6px 0 0; }
.part-personalize { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
.lib-one { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lib-one .share-status { flex-basis: 100%; }
.lib-grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .lib-grid { grid-template-columns: minmax(300px, 460px) minmax(0, 1fr); align-items: start; gap: 40px; } }
.lib-grid .personalize { margin-top: 0; }
.personalize, .lib-end { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; margin: 16px 0; }
.personalize p, .lib-end p { margin: 0 0 10px; font-weight: 600; }
.related ul, .lib-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.related a, .lib-list a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
.lib-list li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px 8px; }
.lib-list .facts { display: block; margin: 0; }
.lib-group { margin: 22px 0; }
.source { font-size: 14px; color: var(--muted); }
.from, .change { margin: 6px 0 14px; }
.from a, .change a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* footer */
.site-foot { border-top: 1px solid var(--line); margin-top: 20px; padding: 22px 0 34px; font-size: 14px; color: var(--muted); }
.site-foot p { margin: 0 0 4px; }
.site-foot a { display: inline-flex; align-items: center; min-height: var(--tap); }
.site-foot .sponsor { font-weight: 700; color: var(--ink); }

@media (max-width: 899px) {
  .hero-sub { font-size: 16px; margin-bottom: 14px; }
  .hero-title { margin-top: 8px; }
  .paper-wrap { max-width: 520px; }
  .site-head { padding-top: 4px; }
  /* CYCLE197-LD-RT-NT-NAV-HUBS-1 (LD-6800): the tab row wraps instead of scrolling sideways (multiplicationcharts.app's
     rule, LD-6603), so every tab and the lit one are on the first screen of a phone */
  .nav { flex: 1 1 100%; width: 100%; min-width: 0; flex-wrap: wrap; overflow-x: visible; row-gap: 0; }
}
@media (max-width: 480px) { .nav a { padding: 0 5px; font-size: 14px; } }
/* rc-st7-10 (UX-BENCHMARK-1 H1/H2, CYCLE191-CX-1600/1601): the tool pages on a phone show, in order, the H1, the
   promise line, the sheet (cropped to its top, "See full sheet" shows the rest), Download PDF and Print, then the
   fields, the intro and the class set. The desktop layout (form left, sheet right) is unchanged. Field helper lines are
   not shown on a phone (they pushed Download down); the FAQ answers the same questions. */
.see-full { display: none; align-items: center; justify-content: center; min-height: var(--tap); width: 100%; font-weight: 700; }
.need-hint { margin: 8px 0 0; font-size: 15px; color: var(--ink); font-weight: 600; }
@media (min-width: 900px) { .see-full { display: none !important; } }
@media screen and (max-width: 899px) {   /* screen only: a print of the page keeps the full sheet */
  .tool { display: flex; flex-direction: column; gap: 0; }
  .tool > div:first-child { display: contents; }
  .tool > div:first-child > * { order: 6; }
  .tool > div:first-child > .hero-title { order: 1; margin-bottom: 12px; }
  .tool > div:first-child > .promise { order: 2; margin: 0 0 14px; }
  .tool > .preview { order: 3; margin-bottom: 14px; }
  .tool > div:first-child > form.card { order: 4; margin-bottom: 18px; }
  .tool > div:first-child > .hero-sub { order: 5; }
  .tool > div:first-child > .class-set { order: 7; }
  .tool #nameForm { display: flex; flex-direction: column; }
  .tool #nameForm > * { order: 2; }
  .tool #nameForm > .actions, .tool #nameForm > .need-hint { order: 1; margin-top: 0; }
  .tool #nameForm > .actions { margin-bottom: 4px; }
  .tool #nameForm[data-need="first"] > .field-label:first-child, .tool #nameForm[data-need="first"] > .name-input:first-of-type { order: 0; }
  .tool #nameForm[data-need="first"] > .name-input:first-of-type { margin-bottom: 14px; }
  .tool #nameForm p.helper:not([role]), .tool #nameForm .show-when p.helper, .tool #nameForm fieldset p.helper { display: none; }
  .js .tool .preview:not(.full) .paper { max-height: var(--crop-h, 300px); width: 100%; aspect-ratio: auto; height: var(--crop-h, 300px); }
  .js .tool .preview:not(.full) .paper > svg, .js .tool .preview:not(.full) .paper > img { height: auto; }
  .js .tool .preview:not(.full) .paper::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
    background: linear-gradient(rgba(255,255,255,0), #fff); pointer-events: none; }
  .tool .preview .preview-cap { display: none; }
  .js .tool .preview .see-full { display: inline-flex; }     /* shown from the first paint (html.js), so nothing shifts */
  .tool .preview.full .see-full { display: none; }
}
@media (max-width: 420px) {
  .actions .btn { padding: 0 12px; font-size: 16px; white-space: nowrap; }
  .seg label { font-size: 14px; padding: 0 6px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* print: only the sheet. With JavaScript, Print fills #printArea with every page of the exact
   sheet (the same SVG pages the PDF holds); without it, the page prints its preview sheet.
   The background letters never print. */
#printArea { display: none; }
/* A4 (NT-STROKES-1): mult.js sets body.paper-a4 and the print page size when A4 is chosen */
body.paper-a4 .paper, body.paper-a4 .pv-page, body.paper-a4 .sheet-wrap { aspect-ratio: 210 / 297; }
/* Class set (CLASS-SETS-1, D-99): below the single sheet's form; one PDF, one page per first name */
.class-set { margin-top: 20px; }
.class-head { font-size: 22px; line-height: 1.2; margin: 0 0 4px; }
.class-set .field-label { margin-top: 14px; }
.class-set textarea { min-height: 176px; font: 500 18px/1.4 var(--font-ui); resize: vertical; }
.class-set .actions { margin-top: 14px; }
.class-count { font-weight: 750; color: var(--ink); }
.class-preview { margin-top: 10px; max-width: 340px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; overflow: hidden; }
.class-preview svg { display: block; width: 100%; height: auto; }

@media print {
  body.paper-a4 .print-page, body.paper-a4 .print-page > svg { width: 210mm; height: 297mm; }
  body.paper-a4:not(.printing) .paper { width: 210mm; height: 297mm; }
}
#arrowsGroup input:disabled + label { opacity: .55; }
@media print {
  @page { size: 8.5in 11in; margin: 0; }
  html, body { background: #fff !important; min-height: 0; }
  .glyphs, .skip { display: none !important; }
  body.printing .page, body.printing .pv { display: none !important; }
  body.printing #printArea { display: block !important; }
  .print-page { width: 8.5in; height: 11in; overflow: hidden; break-after: page; page-break-after: always; }
  .print-page:last-child { break-after: auto; page-break-after: auto; }
  .print-page > svg { width: 8.5in; height: 11in; display: block; }
  body:not(.printing) .site-head, body:not(.printing) .site-foot, body:not(.printing) .card, body:not(.printing) .section,
  body:not(.printing) .hero-title, body:not(.printing) .hero-sub, body:not(.printing) .preview-cap, body:not(.printing) .section-nav,
  body:not(.printing) .library > :not(.lib-grid):not(.tool), body:not(.printing) .lib-grid > :not(.preview) { display: none !important; }
  body:not(.printing) .wrap, body:not(.printing) .paper-wrap { max-width: none; padding: 0; margin: 0; }
  body:not(.printing) .tool { display: block; padding: 0; }
  body:not(.printing) .tool > :not(.preview), body:not(.printing) .preview > :not(.paper-wrap), body:not(.printing) .lib-files { display: none !important; }
  body:not(.printing) main, body:not(.printing) .library, body:not(.printing) .lib-grid { padding: 0 !important; margin: 0 !important; display: block; }
  .paper-wrap::before, .paper-wrap::after, .sample-tag { display: none !important; }
  body:not(.printing) .paper { width: 8.5in; height: 11in; box-shadow: none; border-radius: 0; }
}
.group.first { margin-top: 0; }

/* the hand-off (Personalize this sheet) and the word search from a list: a form card and the sheet */
.prefill { max-width: 760px; }
.prefill form, .custom-ws form#wsForm { background: var(--surface); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--card-shadow); border: 1px solid var(--line); }
.prefill .name-row input { min-height: 60px; font: 400 28px/1 var(--font-print); }
.sheet-area { margin-top: 16px; }
.sheet-wrap { background: #fff; aspect-ratio: 8.5 / 11; max-width: 560px; margin: 0 auto 12px; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 18px 40px rgba(40, 30, 10, .12); display: grid; place-items: center; }
.sheet-wrap.landscape { aspect-ratio: 11 / 8.5; }
.sheet-wrap > svg, .sheet-wrap > img { width: 100%; height: 100%; display: block; }
.sheet-empty { color: var(--muted); padding: 24px; text-align: center; }
.prefill .actions, .custom-ws .actions { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
@media print {
  body.prefill-page:not(.printing) .page > :not(main), body.custom-ws:not(.printing) .page > :not(main) { display: none !important; }
  body.prefill-page:not(.printing) .prefill > :not(form), body.prefill-page:not(.printing) #nameForm > :not(.sheet-area),
  body.prefill-page:not(.printing) .sheet-area > :not(.sheet-wrap) { display: none !important; }
  body.prefill-page:not(.printing) #nameForm { box-shadow: none; border: 0; padding: 0; }
  body.prefill-page:not(.printing) .wrap { padding: 0; }
  .sheet-wrap { box-shadow: none; border-radius: 0; max-width: none; width: 8.5in; height: 11in; margin: 0 !important; }
  body.prefill-page:not(.printing) .prefill, body.prefill-page:not(.printing) .sheet-area { max-width: none; margin: 0; padding: 0; }
  body.prefill-page:not(.printing) main { padding: 0; margin: 0; }
}
.library-link a, .crosslink a, .lede a, .intro a { display: inline-flex; align-items: center; min-height: var(--tap); }
/* CYCLE191 (generator pages and hubs, printables/gen_pages.py): three worked examples, the hub's link groups */
.gp-ex { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.gp-ex figure { margin: 0; }
.gp-ex .paper { max-width: 420px; margin: 0 auto; }
.gp-ex .paper.a4 { aspect-ratio: 210 / 297; }
.gp-ex figcaption { margin-top: 10px; color: var(--muted); }
.hub-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.hub-list li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px 10px; }
.hub-list a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
/* rc-st7-10 (UX-BENCHMARK-1 M2, CYCLE191-CX-1609): each hub card carries a thumbnail of its sheet (drawn by the engine,
   static/rt/thumbs/tracing/), two cards across on a phone, four at 1280 */
.hub-list li { display: flex; gap: 12px; align-items: flex-start; }
.hub-thumb { flex: none; width: 64px; height: 82px; margin-top: 10px; background: #fff; border: 1px solid var(--line); border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.08); object-fit: cover; }
.hub-text { min-width: 0; display: flex; flex-direction: column; }
.hub-jump { margin: 0 0 8px; }
.hub-jump a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
@media (max-width: 599px) { .hub-list { grid-template-columns: 1fr 1fr; } .hub-list li { flex-direction: column; gap: 4px; padding: 10px 10px 10px; } .hub-thumb { margin-top: 0; } }
@media (min-width: 1100px) { .hub-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hub-list li { flex-direction: column; gap: 4px; padding: 12px; } .hub-thumb { margin-top: 0; } }
.hub-line { display: block; }
/* rc-st7-9 UX pass (CYCLE191-LD-RT-RC-ST7-9-MERGE-1): a field label that follows another field's helper line gets the
   group gap (the sentence generator's "Your words or sentences" sat against the list helper); the hub prints its
   sheet like every generator page (browser print gave a blank page: its generator section was hidden) */
.helper + .field-label, .helper + .show-when > .field-label:first-child { margin-top: 18px; }
@media print {
  body.hub:not(.printing) .library > section.section:has(> .tool) { display: block !important; padding: 0 !important; margin: 0 !important; }
  body.hub:not(.printing) .library > section.section:has(> .tool) > h2 { display: none !important; }
}
/* CYCLE192-LD-RT-NT-LETTERS-HUBS-1: the A-to-Z row of letter pages (letter pages and /letter-tracing-worksheets/):
   48 px squares, 6 across on a phone (358 px), 13 across from 720 px */
.az-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(6, minmax(48px, 1fr)); }
@media (min-width: 720px) { .az-grid { grid-template-columns: repeat(13, minmax(48px, 1fr)); } }
.az-grid a, .az-grid .az-current { display: flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-weight: 700; font-size: 18px; text-decoration: none; color: var(--ink); }
.az-grid a:hover, .az-grid a:focus-visible { border-color: currentColor; }
.az-grid .az-current { background: var(--ink); color: var(--surface); border-color: var(--ink); }
@media print { .az-letters { display: none; } }
/* CYCLE192: a hub line naming multiplicationcharts.app (one 24-character word) wraps inside a 2-across phone card */
.hub-line { overflow-wrap: anywhere; }
/* CYCLE197-LD-RT-NT-NAV-HUBS-1 (LD-6803): on a phone a hub's breadcrumb ("Free printables") is the lit nav tab "All free
   printables" (same address), and its 48 px pushed Download PDF below the first screen (822-878 at 390 x 844). The hubs
   drop it under 900 px; desktop and every other page keep it. */
@media (max-width: 899px) { body.hub .section-nav { display: none; } }
/* CYCLE197 (LD-6802): the hub hero's "See every page" link is a full tap target (the harness's 44 px rule) */
.hub-jump { display: inline-flex; align-items: center; min-height: var(--tap); }

/* CYCLE197-LD-RT-MC-DEPTH-1 (R-38, LD-6850/6851): the home pages' quick-link row under the promise line, in the nav's
   pill style. It is ONE line that scrolls sideways at every width (measured: wrapped, it pushed Download PDF below the
   first screen at 390 x 844 and 1280 x 800). With the row on the page, the intro line sits under the form on desktop too
   (as on a phone) and the phone's sheet crop is 250 px, so the sheet and Download PDF stay in the first screen. */
.quick { display: flex; flex-wrap: nowrap; gap: 6px; margin: -4px 0 12px; overflow-x: auto; max-width: 100%;
  scrollbar-width: thin; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
  mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 28px; }
.quick a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 13px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 650; text-decoration: none; font-size: 15px; white-space: nowrap; }
.quick a:hover { background: rgba(0,0,0,.05); }
.quick a[aria-current="page"] { background: var(--soft); box-shadow: inset 0 -3px 0 var(--c2); }
@media (min-width: 900px) {
  .tool > div:first-child:has(> .quick) { display: flex; flex-direction: column; min-width: 0; }
  .tool > div:first-child:has(> .quick) > * { order: 6; }
  .tool > div:first-child:has(> .quick) > .hero-title { order: 1; }
  .tool > div:first-child:has(> .quick) > .promise { order: 2; }
  .tool > div:first-child:has(> .quick) > .quick { order: 3; }
  .tool > div:first-child:has(> .quick) > form.card { order: 4; }
  .tool > div:first-child:has(> .quick) > .hero-sub { order: 5; margin-top: 4px; }
  .tool > div:first-child:has(> .quick) > .class-set { order: 7; }
}
@media screen and (max-width: 899px) {
  .tool > div:first-child > .quick { order: 2; margin: -4px 0 12px; scrollbar-width: none; }
  .tool > div:first-child > .quick::-webkit-scrollbar { display: none; }
  .quick a { padding: 0 12px; font-size: 14.5px; }
  .tool:has(.quick) { --crop-h: 250px; }
}
/* D-159 nav (LD-7250), hub jump (LD-7255) */
@media screen and (max-width:380px){.nav:has(:nth-child(8)){flex-wrap:nowrap;overflow-x:auto;mask-image:linear-gradient(90deg,#000 88%,transparent);padding-right:28px}body:has(.nav :nth-child(8)) .tool{--crop-h:200px}}
.hub-jump-m{display:none}
@media screen and (max-width:480px){.hero-sub>[href="#all"]{display:none}.tool #nameForm>.hub-jump-m{display:inline-flex;order:1}}