/*
  Printable worksheet + detachable answer key.

  Palette is the LaTeX style guide's, restated here rather than imported
  from study-tools.css: that file's print block hides `body > *`
  unconditionally, which is safe on a quiz page (it only loads there and
  only the guide prints) but would make an ordinary Ctrl+P of the library
  page produce a blank sheet. Everything below is scoped to
  `body.ws-printing`, so printing anything else on the page is unaffected.

  Screen and print share one layout deliberately: the sheet is measured
  in inches on screen too, so what you see in the overlay is what comes
  out of the printer.
*/

.ws-doc {
  --ws-header-blue: #1C569E;
  --ws-accent-orange: #E27A1E;
  --ws-accent-green: #2E7D32;
  --ws-work-purple: #A020F0;
  --ws-warning-red: #C0392B;
  --ws-ink: #1a1a1e;
  --ws-ink-soft: #4a4a55;
  --ws-rule: #d8d8e0;
}

/* ---- Overlay shell (screen only) ---- */

.ws-overlay {
  align-items: flex-start;
  overflow-y: auto;
  padding: 30px 18px;
}
.ws-shell {
  background: #fff;
  border-radius: 14px;
  width: min(900px, 100%);
  max-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 70px rgba(20, 12, 40, 0.28);
  overflow: hidden;
}
.ws-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px; border-bottom: 1px solid #ece9f5; background: #faf9fe;
}
.ws-toolbar-title { font-weight: 700; font-size: 14.5px; color: #241c40; flex: 0 0 auto; }
.ws-toolbar-acts { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.ws-count { font-size: 12px; color: #6c6788; margin-right: 4px; }

.ws-doc {
  flex: 1 1 auto; overflow-y: auto; padding: 22px;
  background: #f4f3f8;
  color: var(--ws-ink);
  font-size: 11pt;
  line-height: 1.5;
}

.ws-empty { padding: 40px 10px; text-align: center; color: #55506e; }
.ws-empty p { margin: 0 0 10px; }

/* ---- Picker ---- */

.ws-picker { background: #fff; border-radius: 10px; padding: 20px; max-width: 560px; margin: 0 auto; }
.ws-pick-field { display: block; font-size: 12.5px; font-weight: 600; color: #4a4560; margin-bottom: 13px; }
.ws-pick-field select, .ws-pick-field input {
  display: block; width: 100%; margin-top: 5px; font: inherit; font-size: 13px;
  padding: 8px 10px; border: 1px solid #ddd8ec; border-radius: 8px; background: #fff; color: #241c40;
}
.ws-pick-acts { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; }
.ws-pick-acts button[disabled] { opacity: 0.5; cursor: default; }

/* ---- The sheet ---- */

.ws-page {
  background: #fff;
  padding: 0.55in 0.6in;
  max-width: 8.5in;
  margin: 0 auto 22px;
  box-shadow: 0 2px 14px rgba(30, 20, 60, 0.1);
}

.ws-brandbar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  border-bottom: 2px solid var(--ws-header-blue);
  padding-bottom: 7px; margin-bottom: 14px;
}
.ws-brandbar-key { border-bottom-color: var(--ws-work-purple); }
.ws-brand {
  font-size: 12.5pt; font-weight: 800; letter-spacing: 0.06em;
  color: var(--ws-header-blue);
}
.ws-brandbar-key .ws-brand { color: var(--ws-work-purple); }
.ws-brand-sub { font-size: 8.6pt; color: var(--ws-ink-soft); }

.ws-title {
  font-size: 16.5pt; font-weight: 700; margin: 0 0 12px; color: var(--ws-ink); line-height: 1.25;
}

/* Name / Date / Period / Score */
.ws-fields {
  display: grid;
  grid-template-columns: 2.2fr 1.2fr 1fr auto;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ws-rule);
}
@media (max-width: 620px) { .ws-fields { grid-template-columns: 1fr 1fr; } }
.ws-field { display: flex; align-items: baseline; gap: 7px; font-size: 9.4pt; }
.ws-field label { color: var(--ws-ink-soft); font-weight: 600; flex: 0 0 auto; }
.ws-rule {
  flex: 1 1 auto; border-bottom: 1px solid #9a9aa8; min-height: 1.15em;
  font-size: 10pt; color: var(--ws-ink);
}
.ws-score { justify-content: flex-end; }
.ws-scorebox {
  border: 1.5px solid var(--ws-header-blue); border-radius: 5px;
  padding: 3px 10px; font-size: 10pt; font-weight: 700; color: var(--ws-header-blue);
  white-space: nowrap;
}
.ws-due { font-size: 9pt; color: var(--ws-accent-orange); font-weight: 600; margin: -8px 0 14px; }

/* Two-column problem flow. Multicolumn rather than grid: it paginates
   across printed sheets, which a grid does not. */
.ws-columns {
  column-count: 2;
  column-gap: 0.42in;
  column-rule: 1px solid #eceaf2;
}
@media (max-width: 620px) { .ws-columns { column-count: 1; } }

.ws-problem {
  break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 13px;
  padding-bottom: 11px;
  border-bottom: 1px dotted #e2e0ea;
}
.ws-problem-head { display: flex; gap: 8px; align-items: baseline; }
/* Sized in absolute units, not em: at 1.15em of a 8.4pt font the digit
   had barely a pixel of room and two-digit numbers turned the circle
   into an oval. A fixed 15pt round badge fits "12" and still reads as a
   circle. */
.ws-num {
  flex: 0 0 auto;
  width: 15pt; height: 15pt;
  border-radius: 50%;
  background: var(--ws-header-blue); color: #fff;
  font-size: 8.2pt; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.ws-stem { font-size: 9.9pt; line-height: 1.45; }

.ws-figure { margin: 8px 0 6px; }
.ws-figure svg { max-width: 100%; height: auto; display: block; }
.ws-figcap { font-size: 7.8pt; color: var(--ws-ink-soft); margin-top: 3px; line-height: 1.35; }

.ws-choices { list-style: none; margin: 7px 0 0; padding: 0 0 0 1.6em; }
.ws-choices li {
  display: flex; gap: 6px; align-items: baseline;
  font-size: 9.5pt; line-height: 1.4; margin-bottom: 3px;
}
.ws-letter { flex: 0 0 auto; font-weight: 700; color: var(--ws-ink-soft); }
.ws-choice { flex: 1 1 auto; }

.ws-trunc { font-size: 8.6pt; color: var(--ws-accent-orange); margin-top: 10px; }

.ws-sheetfoot {
  margin-top: 18px; padding-top: 7px;
  border-top: 1px solid var(--ws-rule);
  font-size: 7.8pt; color: var(--ws-ink-soft);
}

/* ---- Answer key ---- */

.ws-page-key { break-before: page; page-break-before: always; }

.ws-keystrip {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 9px 11px; margin-bottom: 15px;
  background: rgba(160, 32, 240, 0.05);
  border: 1px solid rgba(160, 32, 240, 0.25);
  border-radius: 6px;
}
.ws-keychip { font-size: 8.8pt; color: var(--ws-ink); white-space: nowrap; }
.ws-keychip b {
  color: var(--ws-work-purple); margin-right: 3px; font-weight: 700;
}

.ws-key-list { display: block; }
.ws-key-entry {
  break-inside: avoid; page-break-inside: avoid;
  margin-bottom: 11px; padding: 9px 11px;
  border-left: 2.5pt solid var(--ws-work-purple);
  background: rgba(160, 32, 240, 0.03);
  border-radius: 0 5px 5px 0;
}
.ws-key-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.ws-key-answer {
  font-weight: 800; color: var(--ws-accent-green); font-size: 10.5pt;
}
.ws-key-choice { font-size: 9.6pt; font-weight: 600; flex: 1 1 auto; min-width: 0; }
.ws-key-topic {
  font-size: 7.6pt; color: var(--ws-ink-soft);
  background: #f1eff7; border-radius: 99px; padding: 1px 7px;
}
.ws-key-work { font-size: 9.2pt; line-height: 1.5; color: var(--ws-ink); }

/* Purple-highlighted arithmetic inside a derivation. */
.ws-math {
  color: var(--ws-work-purple);
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.94em;
}

.ws-key-distractors {
  margin-top: 7px; padding-top: 6px; border-top: 1px dotted #ddd6ea;
}
.ws-key-distractors-title {
  font-size: 7.8pt; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ws-warning-red); margin-bottom: 4px;
}
.ws-key-distractor { font-size: 8.8pt; line-height: 1.45; color: var(--ws-ink-soft); margin-bottom: 3px; }
.ws-key-distractor b { color: var(--ws-warning-red); }

/* ==================================================================
   Print
   ==================================================================
   Everything is scoped to body.ws-printing, which the generator adds
   only for the duration of the print call — so this stylesheet being
   loaded never changes what an ordinary Ctrl+P of the page produces.
*/
@media print {
  @page {
    size: letter portrait;
    margin: 0.5in 0.55in 0.5in;
  }

  body.ws-printing { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body.ws-printing > * { display: none !important; }

  body.ws-printing > .ws-overlay {
    display: block !important;
    position: static !important;
    background: none !important;
    padding: 0 !important; margin: 0 !important;
    overflow: visible !important;
    inset: auto !important;
  }
  body.ws-printing .ws-shell {
    display: block !important;
    width: auto !important; max-width: none !important;
    max-height: none !important;
    margin: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; overflow: visible !important;
  }
  body.ws-printing .ws-toolbar { display: none !important; }
  body.ws-printing .ws-doc {
    display: block !important;
    overflow: visible !important;
    padding: 0 !important;
    background: #fff !important;
  }
  body.ws-printing .ws-page {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    box-shadow: none !important;
  }

  /* The key always starts its own sheet — that is what "detachable"
     means, and it is the one page break that must not be negotiable. */
  body.ws-printing .ws-page-key {
    break-before: page !important;
    page-break-before: always !important;
  }

  /* The worksheet's sign-off line is dropped in print.

     Chromium will not pull a block back up alongside a multicolumn
     container that has just filled a sheet, so when the questions ended
     flush with the bottom of page 2 this one line was pushed onto a page
     of its own — a whole blank sheet carrying nothing but "Staples
     Education · Geometry". Verified by real printToPDF: 7 sheets before,
     6 after.

     `break-before: avoid` does not fix it (Chromium ignores it against a
     multicol sibling), and the thead/tfoot running-footer trick the study
     guide uses is unavailable here because multicolumn layout inside a
     table cell paginates badly. So the line goes.

     The cost, stated plainly: a worksheet's second sheet carries no
     branding, since the brandbar only prints at the top of the first.
     The key keeps its footer — it is not laid out in columns and does
     not orphan (verified on page 7 of the same render). */
  body.ws-printing .ws-page-worksheet .ws-sheetfoot { display: none !important; }

  /* The blue rules, the purple key borders and the green answer letters
     are load-bearing here, not decoration: they are how the key reads at
     a glance. Ask for exact color; if the browser refuses, the layout
     still holds and every label is still spelled out in text. */
  body.ws-printing .ws-doc,
  body.ws-printing .ws-page,
  body.ws-printing .ws-key-entry,
  body.ws-printing .ws-keystrip,
  body.ws-printing .ws-num,
  body.ws-printing .ws-scorebox {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}