@page {
  size: Letter;
  margin: 0;
}

/* Height is deliberately auto, not 11in. `.worksheet-page` already declares its
   own 11in, so pinning the shell as well bought nothing (measured: identical
   either way) while giving every ancestor a box that has to fit the sheet
   exactly. A browser that reserves its own page margin — iOS Safari does, which
   is where its URL and page numbers go — then cannot fit an 11in shell inside a
   shorter printable area, and the overflow becomes a blank second page. */
html,
body {
  width: 8.5in;
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
}

body {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* .view-toggle is the mobile-only Builder/Preview switch. It is 64px tall and a
   desktop media query hides it, so leaving it out of this list looked harmless
   for months — but printing from a phone happens below that breakpoint, where it
   is on screen. It pushed the print body to 1120px against an 1056px sheet, and
   the 64px overflow printed as a blank second page on every document, one page
   or two. That was the iOS "extra white page", not a Safari quirk. */
.app-header,
.app-footer,
.controls,
.preview-heading-row,
.view-toggle,
.screen-only,
.confirmation-dialog {
  display: none !important;
}

/* display needs !important for the same reason the hide list has it: the mobile
   layout's `.workspace[data-mobile-view="build"] .preview-area { display: none }`
   is 0,2,0 and outranks these bare class selectors. Without it, printing from the
   Builder view on a phone — where the Print button lives — printed an empty body:
   header and controls hidden by the list above, preview still hidden by the
   screen rule. Print must show the worksheet whichever pane is on screen. */
.workspace,
.preview-area,
.preview-frame {
  width: 8.5in;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block !important;
  background: transparent;
}

/* Fit-to-page is a screen-only view setting. The frame height is set inline by
   app.mjs, so it needs !important to lose to the print size. */
.preview-frame {
  height: auto !important;
}

.preview-frame .worksheet-page {
  transform: none !important;
}

/* Multi-page documents (Life Goals, Needs Assessment, My Story's High tier) used
   to need a `:has(.worksheet-extra-page:not([hidden]))` block here releasing the
   same five containers to `height: auto`, because the rules above clamped the
   print surface to one 11in box and clipped the later sheets. Those rules are
   `auto` unconditionally now, so that block said nothing the shell did not
   already do and has been removed. The page break below is the part that was
   ever doing work. */
.worksheet-extra-page:not([hidden]) {
  break-before: page;
  page-break-before: always;
}

/* A hidden page must not reserve a sheet of its own. */
.worksheet-extra-page[hidden] {
  display: none !important;
}

.worksheet-page {
  width: 8.5in;
  height: 11in;
  max-width: none;
  /* !important because app.mjs sets a negative bottom margin inline to close
     the screen-only gap between stacked pages; printing must ignore it. */
  margin: 0 !important;
  padding: 0.45in;
  overflow: hidden;
  break-inside: avoid;
  page-break-inside: avoid;
  box-shadow: none;
  /* Transparent, not the screen's oklch(99.5%) cream: paper is the page
     background in print. Painting the cream was invisible while the page was
     full-bleed, but the handheld 94% zoom leaves real paper around the page,
     and the seam between painted cream and paper read as "off-white centre,
     white edges". Printers were also literally printing that faint wash. */
  background: transparent;
}

/* Phones and tablets only (desktops answer `pointer: fine`), and this is the
   load-bearing rule for printing from them. Handheld browsers refuse
   `@page { margin: 0 }`: iOS Safari reserves margins plus a fat strip for its
   URL/page-number footer, leaving a printable box measured off real iPhone PDFs
   at 532 x 655.23pt — aspect ratio 1.232. A US Letter page is 1.294: TALLER
   than the box's shape. Safari scales to fit the width, so the height always
   lands 33.25pt over and every Letter print grew a mostly-blank second sheet.
   No amount of hiding stray elements can fix a ratio mismatch (A4 printed fine
   all along because A4 is taller-shaped). So handheld prints scale the whole
   sheet to 94% — nothing reflows, compresses, or moves relative to anything
   else; the print is uniformly smaller with ~8pt of slack. The box height is
   0.94 x 11in so it exactly wraps the scaled content, and the selector matches
   `.preview-frame .worksheet-page` because that is the specificity of the
   transform reset above, which this must beat. Desktop prints are untouched.
   iOS also lays print out at the PAPER-width viewport, not the phone's, so
   mobile-layout rules (the view toggle, the builder/preview panes) never
   applied to these prints in the first place. */
/* Safari, both platforms — this feature query matches Safari alone (Chrome,
   Edge and Firefox all answer false; verified in Chromium). The engine, not
   the device, is what refuses `@page { margin: 0 }`: a My Story PDF printed
   from macOS Safari showed the same 655.23pt printable box as every iPhone
   print, with each unzoomed 688pt page spilling its remainder onto an extra
   sheet. The first version of this rule gated on `(pointer: coarse)`, which
   fixed phones and silently left laptop Safari broken. */
@supports (font: -apple-system-body) {
  .preview-frame .worksheet-page {
    /* zoom, not transform: zoom scales the LAYOUT uniformly — the page still
       believes it is 8.5x11in inside, every row and font shrinks together, and
       the box other elements (and the printer) see becomes 0.94 x 1056px =
       992.6px -> 647.2pt, 8pt inside the printable box. A transform was tried
       first and double-shrank: setting the box height reflowed the 1fr row,
       then the transform scaled the already-reflowed content again. */
    zoom: 0.94;
  }

  /* Natural page filling instead of forced breaks. With the zoom in place the
     fit already dictates one sheet per page — after a 647pt page only 8pt of
     the 655pt sheet remains, so the next page (kept whole by break-inside:
     avoid) must open a new sheet. Safari's forced breaks were each minting one
     phantom sheet on top of that: a 2-page document printed 1 trailing blank, a
     3-page document printed 2 — extras exactly equal to the number of forced
     breaks, on iPhone and macOS alike. Chrome keeps the explicit breaks: its
     unzoomed pages fill their sheets edge to edge, and that exact fit plus
     forced breaks is the proven desktop path. */
  .worksheet-extra-page:not([hidden]) {
    break-before: auto;
    page-break-before: auto;
  }
}

.worksheet-header {
  padding-bottom: 2.4%;
}

.worksheet-header h2 {
  min-height: 3.5rem;
  padding: 0 8rem 0 4%;
  font-size: 28px;
}

.worksheet-page[data-template-id="needs-assessment"] .worksheet-header h2 {
  padding-left: 5.6%;
}

.worksheet-title-level {
  font-size: 16px;
  font-weight: 500;
}

.worksheet-logo {
  right: calc(4% - 6px);
  left: auto;
  width: 7.6rem;
  height: auto;
}

.worksheet-instructions {
  margin-top: 3.2%;
  padding: 0;
  border-width: 2px;
  border-radius: 0.8rem;
}

.worksheet-page[data-layout-id="needs-assessment-four"] .worksheet-instructions {
  margin-left: 5.6%;
}

.worksheet-page[data-layout-id="needs-assessment-six"] .worksheet-instructions {
  margin-left: 5.6%;
  transform: translateY(-0.5rem);
}

.worksheet-instructions-heading {
  padding: 0.65rem 1.15rem;
  gap: 0.65rem;
}

.worksheet-instructions-heading h3 {
  font-size: 18px;
}

.worksheet-instructions-icon {
  width: 1.8rem;
  height: 1.8rem;
}

.worksheet-instructions ol {
  margin: 0;
  padding: 0.8rem 1.15rem 0.9rem 2.7rem;
  gap: 0.4rem;
  font-size: 16px;
  line-height: 1.25;
}

.worksheet-page[data-layout-id="needs-assessment-four"] .worksheet-grid {
  padding: 4.7% 1.4% 1.5% 5.6%;
  column-gap: 10.37%;
  row-gap: 4%;
}

.worksheet-page[data-layout-id="needs-assessment-four"] .worksheet-grid:not(:has(.worksheet-theme.is-empty)) {
  grid-template-rows: repeat(2, auto);
  align-content: space-between;
}

.worksheet-screen-image {
  display: none !important;
}

.worksheet-print-image {
  display: block;
}

.worksheet-theme {
  border-width: 3px;
  border-radius: 0.7rem;
}

.worksheet-label {
  padding: 0.8rem 3.2rem;
  border-top-width: 3px;
  font-size: 16px;
}

.worksheet-page[data-layout-id="needs-assessment-four"] .worksheet-label {
  height: 4rem;
  padding-inline: 3rem;
}

.worksheet-check {
  right: 0.6rem;
  width: 2rem;
  border-width: 3px;
}

.worksheet-meta {
  width: 94.6%;
  margin-top: 3.2%;
  margin-left: 4%;
  font-size: 16px;
}

.worksheet-page[data-template-id="needs-assessment"] .worksheet-meta {
  width: 93%;
  margin-left: 5.6%;
}

.worksheet-page[data-layout-id="needs-assessment-six"] .worksheet-grid {
  padding: 2.4% 5.85% 1.35% 11.7%;
  column-gap: 11.75%;
  row-gap: 1.85%;
  transform: translateY(0.25rem);
}

.worksheet-page[data-layout-id="needs-assessment-six"] .worksheet-label {
  height: 3.15rem;
  padding: 0.5rem 2.6rem;
}

.worksheet-page[data-layout-id="needs-assessment-six"] .worksheet-check {
  width: 1.55rem;
}

.worksheet-page[data-template-id="my-clb-levels"] .worksheet-instruction-text {
  margin: 0;
  padding: 0.8rem 1.15rem 0.9rem;
  font-size: 16px;
  line-height: 1.25;
}

.worksheet-page[data-layout-id="my-clb-levels-higher"] .worksheet-instruction-text {
  padding: 0;
}

.clb-row .clb-icon {
  max-height: 5.28rem;
}

/* The QR poster deliberately has no print block. It used to restate the logo
   width, type size, and spacing in print units, and those numbers had drifted
   away from the screen ones — the logo printed 49% larger and the headings 16%
   larger than the preview showed. styles.css now carries the only copy, in units
   that measure the same on screen and on paper, so the two cannot diverge again.
   Do not reintroduce overrides here; change styles.css instead. */

.worksheet-page[data-template-id="my-clb-levels"] .worksheet-instructions,
.worksheet-page[data-template-id="life-goals"] .worksheet-instructions {
  margin-left: 5.6%;
}

.worksheet-page[data-template-id="my-clb-levels"] .worksheet-meta {
  width: 94.6%;
}

.clb-chart-label {
  font-size: 1.1rem;
}

.clb-skill-heading {
  font-size: 18px;
}

.clb-skill-title .clb-icon {
  width: 3.25rem;
  height: 3.25rem;
}

.clb-skill-level {
  font-size: 15px;
}

.clb-chart-cell {
  border-right-width: 1.5px;
  border-bottom-width: 1.5px;
}

.clb-goal h3 {
  font-size: 20px;
}

.clb-goal {
  padding: 0.85rem 1.1rem;
  border-radius: 0.8rem;
}

.clb-improve {
  font-size: 16px;
}

.worksheet-theme.is-empty {
  border-color: transparent;
  background: transparent;
}

.worksheet-empty {
  display: none !important;
}

/* ---- Life Goals ----
   The screen clamps all saturate at their maximum on the printed page, so these
   restate those maxima as fixed units and printing never depends on cqw. */

.worksheet-page[data-template-id="life-goals"] .worksheet-instruction-text {
  padding: 0.8rem 1.15rem 0.9rem;
  font-size: 16px;
  line-height: 1.3;
}

.goal-boxes {
  width: 93%;
  margin-left: 5.6%;
  gap: 2.2rem;
}

.goal-box {
  grid-template-columns: 2.9rem minmax(0, 1fr);
  border-width: 3px;
}

.goal-box-number {
  font-size: 33.6px;
}

.goal-box-content {
  padding: 1rem 1.2rem;
}

.goal-box-prompt {
  font-size: 24px;
}

.worksheet-page[data-layout-id="life-goals-lower"] .goal-box-prompt {
  font-size: 30.4px;
}

.goal-years-prompt {
  margin-bottom: 0.25rem;
  font-size: 15.2px;
}

.goal-years-row {
  gap: 0.95rem;
  font-size: 16px;
}

.goal-cutouts {
  --goal-cut-line: 3px;
  row-gap: 1rem;
  justify-content: center;
}

/* The border is transparent and holds the box model only — the visible cut line
   is the four background strips in styles.css, which size themselves off
   `--goal-cut-line` above. Keep this width in step with that variable. */
.goal-cutout {
  padding: 0.5rem 0.9rem;
  gap: 0.9rem;
  border-width: 3px;
}

.goal-cutout-scissors {
  width: 19.2px;
  left: 0.9rem;
  padding: 0 2.88px;
}

.goal-cutout-label {
  padding-left: 24px;
  font-size: 22.4px;
}

.goal-cutouts[data-tier="lower"] .goal-cutout-label {
  font-size: 25.6px;
}

.goal-cutout-image {
  width: 11.25rem;
}

/* ---- My Story ---- */

.worksheet-page[data-template-id="my-story"] .worksheet-instructions {
  margin-left: 5.6%;
}

.worksheet-page[data-template-id="my-story"] .worksheet-instruction-text {
  padding: 0.8rem 1.15rem 0.9rem;
  font-size: 16px;
}

.worksheet-page[data-template-id="my-story"] .worksheet-meta {
  width: 94.6%;
}

/* Foundation and the stem sheet have no block here on purpose: both are sized in
   rem, which measures the same on screen and on paper, so a print copy of those
   numbers could only drift. Change styles.css instead. */

.story-foundation-visual {
  border-width: 3px;
  border-radius: 0.7rem;
}

.story-sentence p {
  font-size: 17.6px;
}

.story-lines {
  gap: 0.45rem;
}

.story-lines span {
  border-bottom-width: 1.5px;
}

.story-high {
  gap: 1rem;
}

.story-quick-facts .story-sentence p {
  gap: 0.35rem;
  font-size: 17.6px;
}

.story-quick-facts .story-sentence i {
  border-bottom-width: 1.5px;
}

.story-high-introduction {
  gap: 1rem;
}

.story-sketch,
.story-quick-facts,
.story-plan,
.story-writing {
  padding: 0.9rem;
  border-width: 2px;
  border-radius: 0.6rem;
}

.story-sketch h3,
.story-quick-facts h3,
.story-plan h3,
.story-writing h3 {
  font-size: 22.4px;
}

.story-sketch-space {
  margin-top: 0.6rem;
  border-width: 1.5px;
}

.story-quick-facts {
  gap: 0.4rem;
}

/* The question list has no block here: it is sized in rem and clamps that
   saturate, so screen and print already measure the same. */

.story-plan,
.story-writing {
  gap: 0.6rem;
}

.story-plan-prompts {
  gap: 0.7rem;
}

.story-plan-prompt {
  padding: 0.6rem;
  gap: 0.35rem;
}

.story-plan-prompt h4 {
  font-size: 15.2px;
}