/* src/components/jr/sheet-print/sheet-print.css — SJ2 Sheet print.
   Transcribed from art-source/design-sj2-2026-09-12/screens/SJ2 Sheet print.dc.html, whose
   whole document is authored in POINTS. Points are kept: this page is measured against paper,
   not against a screen, and 14pt is 14pt on both.

   THE FIVE TINTS ARE HERE AND NOWHERE ELSE. A block arrives carrying a NAME ("sun", "green",
   "sky", "orange", "teal") from src/engine/jr/sheets_model.mjs, and this file is the only
   place those five become colours. No colour value exists in the content or the recipe.

   HER NOTE ON WHY THE HEADER FILLS STAY BRIGHT, kept verbatim because the next person will
   otherwise "fix" them: "the panel label is set at 14pt bold (18.67px), a hair over the
   18.66px large-text cutoff, so white ink on them owes 3:1 rather than 4.5:1 and the house
   hues all clear it (green 3.37, sky 3.40, orange 3.08, teal 3.27). Darkening the fills
   instead — the first attempt — passed the audit and drained the page to navy and brown,
   which is the wrong trade. Type size is the lever here, not colour. Sunshine can never carry
   white ink at any size, so it keeps dark ink."

   PRINTING. `@page { margin: 0 }` leaves Chrome no margin box to draw its own date and URL
   header in, and the page's visual margin lives on the sheet's own padding instead. The
   running header and footer are `position: fixed`, so the browser stamps them on every sheet;
   the thead/tfoot spacers in the print frame are what stop page two's content sliding under
   them. That is the one shape of scripts/doc-page.js this screen needs, and all of it. */

.jr-pr-shell {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #e9e4da;
}

/* ---------------------------------------------------------------- the bar (screen only) */
.jr-pr-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 26px;
  background: var(--sj-ink);
  font-family: var(--sj-font);
}

.jr-pr-bar-back,
.jr-pr-bar-print {
  appearance: none;
  cursor: pointer;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 14px;
  border: none;
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 16px;
}
.jr-pr-bar-back { background: var(--sj-card); color: var(--sj-ink); }
.jr-pr-bar-print { padding: 0 22px; background: var(--sj-orange); color: var(--sj-card); font-weight: 700; }

.jr-pr-bar-note {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--sj-card);
  font-size: 15px;
  font-weight: 600;
  text-wrap: pretty;
}

/* Inside the tablet shell this screen lives in a fixed 940px box with overflow hidden, and a
   worksheet is about 1950px tall, so the sheet needs its own scroller. */
.jr-pr-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  padding: 22px 0 40px;
}

/* ---------------------------------------------------------------- the sheet */
.jr-pr-page {
  --jr-pr-margin: 0.4in;
  --jr-pr-hdr-h: 30px;
  --jr-pr-ftr-h: 26px;
  box-sizing: border-box;
  width: 8.5in;
  min-height: 11in;
  padding: var(--jr-pr-margin);
  background: #ffffff;
  color: var(--sj-ink);
  box-shadow: 0 18px 44px rgba(35, 50, 44, .28);
  font-family: var(--sj-font);
}

.jr-pr-frame { width: 100%; border-collapse: collapse; }
.jr-pr-frame td { padding: 0; text-align: left; font-weight: inherit; }
.jr-pr-hspace { height: 0; }
.jr-pr-fspace { height: 0; }

.jr-pr-runhead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 5pt;
  border-bottom: 2pt solid #f0e9da;
  font-family: var(--sj-font);
}
.jr-pr-mark { flex: none; width: 15pt; height: 15pt; border-radius: 5pt; background: var(--sj-teal); display: block; }
.jr-pr-brand { font-weight: 700; font-size: 11pt; color: var(--sj-ink); letter-spacing: -.01em; }
.jr-pr-spring { flex: 1 1 auto; }
.jr-pr-headline { font-weight: 500; font-size: 9pt; color: #16352b; }

.jr-pr-runfoot {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 6pt;
  border-top: 2pt solid #f0e9da;
  font-family: var(--sj-font);
}
.jr-pr-foottext { font-size: 8.5pt; font-weight: 500; color: #16352b; }

/* ---------------------------------------------------------------- the title */
.jr-pr-titlewrap { position: relative; text-align: center; padding: 4pt 0 12pt; }

.jr-pr-title {
  margin: 0;
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 36pt;
  line-height: 1.08;
  letter-spacing: -.015em;
}
.jr-pr-space { color: transparent; }
/* Her five title colours. 36pt is a headline, so the 3:1 floor applies and each of these
   clears it; gold and orange are the two she nudged to get there. */
.jr-pr-l0 { color: #439b4d; }
.jr-pr-l1 { color: #3f8fd2; }
.jr-pr-l2 { color: #d9550d; }
.jr-pr-l3 { color: #42a9c8; }
.jr-pr-l4 { color: #b07a00; }

.jr-pr-ribbon {
  display: inline-block;
  margin-top: 5pt;
  padding: 5pt 22pt;
  border-radius: 999pt;
  background: #fef2e4;
  border: 2pt solid #f7c69b;
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 12.5pt;
  color: var(--sj-orange-deep);
}

/* Her six paper shapes around the title. */
.jr-pr-shape { position: absolute; display: block; }
.jr-pr-shape-a { left: 2%; top: 6pt; width: 13pt; height: 13pt; border-radius: 4pt; background: #ffc93d; transform: rotate(18deg); }
.jr-pr-shape-b { left: 11%; top: 30pt; width: 9pt; height: 9pt; border-radius: 50%; background: var(--sj-sky); }
.jr-pr-shape-c { left: 6%; top: 52pt; width: 11pt; height: 11pt; border-radius: 3pt; background: var(--sj-green); transform: rotate(-14deg); }
.jr-pr-shape-d { right: 3%; top: 8pt; width: 14pt; height: 14pt; border-radius: 4pt; background: #ee6a1c; transform: rotate(-20deg); }
.jr-pr-shape-e { right: 12%; top: 32pt; width: 9pt; height: 9pt; border-radius: 50%; background: #ffc93d; }
.jr-pr-shape-f { right: 6%; top: 54pt; width: 11pt; height: 11pt; border-radius: 50%; background: var(--sj-teal); }

/* ---------------------------------------------------------------- name and date */
.jr-pr-namebar {
  display: flex;
  align-items: center;
  gap: 14pt;
  margin: 0 0 12pt;
  padding: 8pt 16pt;
  border-radius: 12pt;
  background: var(--sj-stage);
  border: 2pt solid #ece3d0;
}
.jr-pr-namelabel { flex: none; font-weight: 600; font-size: 11pt; color: var(--sj-ink); }
.jr-pr-nameline { flex: 1 1 auto; border-bottom: 1.4pt solid #b9b0a0; height: 15pt; }
.jr-pr-dateline { flex: 0 0 96pt; border-bottom: 1.4pt solid #b9b0a0; height: 15pt; }

/* ---------------------------------------------------------------- the blocks */
.jr-pr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11pt; }

.jr-pr-block {
  grid-column: auto;
  break-inside: avoid;
  border-radius: 14pt;
  padding: 0 0 11pt;
  overflow: hidden;
  border: 2pt solid transparent;
}
.jr-pr-wide { grid-column: span 2; }

.jr-pr-block-head { display: flex; align-items: center; gap: 8pt; padding: 7pt 13pt; }
.jr-pr-block-n {
  flex: none;
  width: 19pt;
  height: 19pt;
  border-radius: 50%;
  background: var(--sj-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 10.5pt;
}
/* 14pt bold is 18.67px: large text, so white ink owes 3:1 and her bright fills keep it. */
.jr-pr-block-title { flex: 1 1 auto; font-family: var(--sj-font); font-weight: 600; font-size: 14pt; }
.jr-pr-block-hint { margin: 8pt 13pt 9pt; font-family: var(--sj-font); font-size: 10.5pt; font-weight: 500; line-height: 1.35; color: var(--sj-ink); }

.jr-pr-b-green { background: #e9f7ee; border-color: #9ad9b3; }
.jr-pr-b-green .jr-pr-block-head { background: #439b4d; }
.jr-pr-b-green .jr-pr-block-title { color: var(--sj-card); }
.jr-pr-b-green .jr-pr-block-n { color: #1f6f47; }

.jr-pr-b-sky { background: #e8f3fc; border-color: #a8d3f2; }
.jr-pr-b-sky .jr-pr-block-head { background: #3f8fd2; }
.jr-pr-b-sky .jr-pr-block-title { color: var(--sj-card); }
.jr-pr-b-sky .jr-pr-block-n { color: #2a6494; }

/* Sunshine can never carry white ink at any size, so this one keeps dark ink. */
.jr-pr-b-sun { background: #fff6da; border-color: #f2da9a; }
.jr-pr-b-sun .jr-pr-block-head { background: #ffc93d; }
.jr-pr-b-sun .jr-pr-block-title { color: #4a3313; }
.jr-pr-b-sun .jr-pr-block-n { color: #8a5a08; }

.jr-pr-b-orange { background: #fef2e4; border-color: #f7c69b; }
.jr-pr-b-orange .jr-pr-block-head { background: #ee6a1c; }
.jr-pr-b-orange .jr-pr-block-title { color: var(--sj-card); }
.jr-pr-b-orange .jr-pr-block-n { color: #a4551c; }

.jr-pr-b-teal { background: #e7f5f5; border-color: #a6d8d6; }
.jr-pr-b-teal .jr-pr-block-head { background: #42a9c8; }
.jr-pr-b-teal .jr-pr-block-title { color: var(--sj-card); }
.jr-pr-b-teal .jr-pr-block-n { color: #1f6a64; }

/* ---- trace rows ---- */
.jr-pr-trace { margin: 0 13pt; display: flex; flex-direction: column; gap: 9pt; }
.jr-pr-trace-row { display: flex; align-items: stretch; gap: 9pt; }
.jr-pr-trace-cell {
  flex: 1 1 0;
  position: relative;
  height: 31pt;
  border-bottom: 1.4pt solid #7d8a83;
  display: flex;
  align-items: flex-end;
  padding: 0 0 2pt 4pt;
}
.jr-pr-trace-rule { position: absolute; left: 0; right: 0; top: 15pt; border-top: 0.7pt dashed #b9b0a0; }
.jr-pr-trace-word {
  position: relative;
  font-family: var(--sj-font-story);
  font-size: 17pt;
  letter-spacing: .04em;
  color: var(--sj-ink);
}
/* Deliberately faint: the letter shape to write OVER, not text to read. */
.jr-pr-trace-faint { color: #a89e8c; }

/* ---- table ---- */
.jr-pr-table { margin: 0 13pt; }
.jr-pr-table-head { display: flex; gap: 6pt; margin-bottom: 5pt; }
.jr-pr-table-col {
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 9pt;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--sj-ink);
}
.jr-pr-table-body { display: flex; flex-direction: column; gap: 5pt; }
.jr-pr-table-row { display: flex; gap: 6pt; }
.jr-pr-table-cell {
  min-height: 25pt;
  box-sizing: border-box;
  padding: 5pt 8pt;
  border-radius: 7pt;
  background: var(--sj-card);
  border: 1.4pt solid #e2dbcc;
  font-family: var(--sj-font-story);
  font-size: 13pt;
  color: var(--sj-ink);
}
.jr-pr-table-lead { border-color: #c9c1b2; }

/* ---- circle the right one ---- */
.jr-pr-circle { margin: 0 13pt; display: flex; flex-direction: column; gap: 7pt; }
.jr-pr-circle-row { display: flex; gap: 8pt; }
.jr-pr-circle-opt {
  flex: 1 1 0;
  text-align: center;
  padding: 6pt 4pt;
  border-radius: 999pt;
  background: var(--sj-card);
  border: 1.6pt solid #d9d2c4;
  font-family: var(--sj-font-story);
  font-size: 14pt;
  color: var(--sj-ink);
}

/* ---- match ---- */
.jr-pr-match { margin: 0 13pt; display: flex; justify-content: space-between; gap: 40pt; }
.jr-pr-match-col { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8pt; }
.jr-pr-match-row { display: flex; align-items: center; gap: 8pt; }
.jr-pr-match-box {
  width: 34pt;
  text-align: center;
  padding: 5pt 0;
  border-radius: 8pt;
  background: var(--sj-card);
  border: 1.6pt solid #d9d2c4;
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 14pt;
  color: var(--sj-ink);
}
.jr-pr-match-dot { width: 6pt; height: 6pt; border-radius: 50%; background: var(--sj-ink); display: block; }

/* ---- lines to write on ---- */
.jr-pr-lines { margin: 0 13pt; display: flex; flex-direction: column; gap: 10pt; }
.jr-pr-lines-group { display: block; }
.jr-pr-lines-label {
  display: block;
  margin-bottom: 3pt;
  font-family: var(--sj-font-story);
  font-weight: 600;
  font-size: 13pt;
  color: var(--sj-ink);
}
.jr-pr-rule { display: block; position: relative; height: 27pt; border-bottom: 1.4pt solid #7d8a83; margin-bottom: 6pt; }
.jr-pr-rule-mid { position: absolute; left: 0; right: 0; top: 13pt; border-top: 0.7pt dashed #b9b0a0; }

/* ---- sums ---- */
.jr-pr-sums { margin: 0 13pt; display: grid; gap: 9pt; }
.jr-pr-sum {
  break-inside: avoid;
  border-radius: 9pt;
  background: var(--sj-card);
  border: 1.6pt solid #d9d2c4;
  padding: 5pt 9pt 8pt;
  display: block;
}
.jr-pr-sum-n { display: block; font-family: var(--sj-font); font-weight: 500; font-size: 8pt; color: var(--sj-ink); }
.jr-pr-sum-top,
.jr-pr-sum-bottom {
  display: flex;
  justify-content: flex-end;
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 15pt;
  color: var(--sj-ink);
}
.jr-pr-sum-bottom { border-bottom: 1.6pt solid var(--sj-ink); padding-bottom: 2pt; }
.jr-pr-sum-space { display: block; height: 22pt; }

/* ---- number bonds ---- */
.jr-pr-bonds { margin: 0 13pt; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7pt; }
.jr-pr-bond {
  break-inside: avoid;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5pt;
  padding: 6pt 4pt;
  border-radius: 8pt;
  background: var(--sj-card);
  border: 1.6pt solid #d9d2c4;
  font-family: var(--sj-font);
  font-weight: 600;
  font-size: 12.5pt;
  color: var(--sj-ink);
}
.jr-pr-bond-op { color: var(--sj-ink); }
.jr-pr-bond-slot { min-width: 22pt; text-align: center; }
.jr-pr-bond-ruled { border-bottom: 1.4pt solid #7d8a83; }

/* ---- number lines ---- */
.jr-pr-nlines { margin: 0 13pt; display: flex; flex-direction: column; gap: 17pt; }
.jr-pr-nline { display: block; break-inside: avoid; }
.jr-pr-nline-bar { display: block; position: relative; height: 19pt; border-bottom: 1.6pt solid var(--sj-ink); }
.jr-pr-nline-tick { position: absolute; bottom: 0; width: 1.2pt; height: 6pt; background: var(--sj-ink); }
.jr-pr-nline-tall { height: 12pt; }
.jr-pr-nline-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 2pt;
  font-family: var(--sj-font);
  font-weight: 500;
  font-size: 8.5pt;
  color: var(--sj-ink);
}

/* ---- passage and draw ---- */
.jr-pr-passage { margin: 0 13pt; font-family: var(--sj-font-story); font-size: 14pt; line-height: 1.65; color: var(--sj-ink); }
.jr-pr-draw { display: block; margin: 0 13pt; border-radius: 10pt; background: var(--sj-card); border: 2pt dashed #c9c1b2; }

/* ---- the cheer strip ---- */
.jr-pr-cheer {
  margin-top: 13pt;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11pt;
  padding: 9pt 20pt;
  border-radius: 999pt;
  background: #fff5d6;
  border: 2pt solid #f2da9a;
}
.jr-pr-cheer-text { font-family: var(--sj-font); font-weight: 600; font-size: 13pt; color: #7a4a08; text-align: center; }
.jr-pr-cheer-a { flex: none; width: 12pt; height: 12pt; border-radius: 4pt; background: #ee6a1c; transform: rotate(20deg); display: block; }
.jr-pr-cheer-b { flex: none; width: 12pt; height: 12pt; border-radius: 50%; background: var(--sj-green); display: block; }

/* ---------------------------------------------------------------- nothing to print */
.jr-pr-nothing {
  align-self: flex-start;
  margin-top: 60px;
  max-width: 620px;
  background: var(--sj-card);
  border: 1px solid var(--sj-line);
  border-radius: var(--sj-r-panel);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.jr-pr-nothing-head { margin: 0; font-family: var(--sj-font); font-weight: 700; font-size: 26px; color: var(--sj-ink); }
.jr-pr-nothing-note { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--sj-ink); text-wrap: pretty; }
.jr-pr-nothing-link { align-self: flex-start; font-family: var(--sj-font); font-weight: 600; font-size: 17px; color: var(--sj-teal-ink); }

/* ================================================================ on paper */
@media print {
  /* No margin box, so Chrome has nowhere to print its own date, URL and page count. The
     page's visual margin is the sheet's own padding instead. */
  @page { margin: 0; }

  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* The tablet shell is a fixed, scaled, clipped 1440x940 stage. None of it may reach paper. */
  .jr-root,
  .jr-fit,
  .jr-stage,
  .jr-screen {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
    background: none !important;
  }
  .jr-note-rail { display: none !important; }

  .jr-pr-shell { position: static !important; display: block !important; background: none !important; }
  .jr-pr-bar { display: none !important; }
  .jr-pr-scroll {
    overflow: visible !important;
    flex: none !important;
    padding: 0 !important;
    display: block !important;
  }

  .jr-pr-page {
    width: auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
    padding: 0 var(--jr-pr-margin) !important;
  }

  /* Fixed elements stamp every printed page, which is what a running header IS. The spacers
     hold that much room at the top and bottom of each sheet so nothing slides underneath. */
  .jr-pr-runhead,
  .jr-pr-runfoot {
    position: fixed;
    left: 0;
    right: 0;
    box-sizing: border-box;
  }
  .jr-pr-runhead { top: 0; padding: calc(var(--jr-pr-margin) * 0.45) var(--jr-pr-margin) 0; }
  .jr-pr-runfoot { bottom: 0; padding: 0 var(--jr-pr-margin) calc(var(--jr-pr-margin) * 0.45); }

  .jr-pr-hspace { height: max(var(--jr-pr-margin), calc(var(--jr-pr-hdr-h) + 0.2in)); }
  .jr-pr-fspace { height: max(var(--jr-pr-margin), calc(var(--jr-pr-ftr-h) + 0.2in)); }

  /* Bright panels are the point of this page, so they have to survive the browser's
     ink-saving default. */
  .jr-pr-page,
  .jr-pr-page * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .jr-pr-block { break-inside: avoid; }
  p, .jr-pr-block-hint { orphans: 3; widows: 3; }
}