/* ==========================================================================
 * trace/print.css · Goal100 Learning · printable practice sheets
 * Screen: options + preview. Paper: clean black and white, Letter or A4.
 * ========================================================================== */
.tp-body {
  --tp-ink: var(--g100-ink, #1b1d33); --tp-bg: var(--g100-bg, #f5f6fb); --tp-card: var(--g100-card, #ffffff);
  --tp-line: var(--g100-line, #dfe2ef); --tp-muted: var(--g100-muted, #5d6280); --tp-accent: var(--g100-accent, #4338ca); --tp-on: #ffffff;
  margin: 0; color: var(--tp-ink); background: var(--tp-bg);
  font-family: var(--g100-font, "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif); font-size: 18px; line-height: 1.4;
}
@media (prefers-color-scheme: dark) {
  .tp-body { --tp-ink: var(--g100-ink, #e8eaf6); --tp-bg: var(--g100-bg, #11131f); --tp-card: var(--g100-card, #1a1d2e); --tp-line: var(--g100-line, #2c3047); --tp-muted: var(--g100-muted, #aab0cf); --tp-accent: var(--g100-accent, #a5b4fc); --tp-on: #11131f; }
}
.tp-body *, .tp-body *::before, .tp-body *::after { box-sizing: border-box; }
.tp-top { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--tp-card); border-bottom: 2px solid var(--tp-line); }
.tp-h1 { flex: 1 1 auto; margin: 0; min-width: 0; font-family: var(--g100-display, "Fraunces", Georgia, serif); font-size: clamp(20px, 3.4vw, 28px); line-height: 1.15; }
.tp-main { max-width: 1000px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.tp-btn, .tp-chip, .tp-go {
  font: inherit; font-weight: 700; min-height: 48px; min-width: 48px; padding: 10px 16px; border-radius: 14px; cursor: pointer; text-decoration: none;
  border: 2px solid var(--tp-line); background: var(--tp-card); color: var(--tp-ink); display: inline-flex; align-items: center; justify-content: center;
}
.tp-chip { min-width: 48px; padding: 8px 12px; }
.tp-chip[aria-pressed="true"] { background: var(--tp-accent); border-color: var(--tp-accent); color: var(--tp-on); }
.tp-go { background: var(--tp-accent); border-color: var(--tp-accent); color: var(--tp-on); min-height: 60px; font-size: 21px; box-shadow: 0 4px 0 rgba(27, 29, 51, .22); align-self: flex-start; }
.tp-body a:focus-visible, .tp-body button:focus-visible, .tp-body select:focus-visible { outline: 3px solid var(--tp-accent); outline-offset: 3px; }
.tp-controls { background: var(--tp-card); border: 2px solid var(--tp-line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.tp-field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.tp-field > legend, .tp-field > label { font-weight: 700; padding: 0; }
.tp-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-select { font: inherit; min-height: 52px; padding: 8px 12px; border-radius: 14px; border: 2px solid var(--tp-muted); background: var(--tp-card); color: var(--tp-ink); max-width: 100%; }
.tp-tip { margin: 0; color: var(--tp-muted); font-size: 16px; }
.tp-sheets { display: flex; flex-direction: column; gap: 18px; align-items: center; }

/* a sheet is always black on white, on screen and on paper */
.tp-sheet { width: min(100%, 8.5in); background: #fff; color: #000; padding: 4.5% 5.5%; border: 1px solid #c9cee3; border-radius: 6px; box-shadow: 0 6px 20px rgba(27, 29, 51, .12); display: flex; flex-direction: column; gap: 1.2%; container-type: inline-size; }
.tp-shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 4%; font-family: Georgia, "Times New Roman", serif; }
.tp-stitle { font-size: clamp(11px, 2.3cqw, 19px); font-weight: 700; }
.tp-nick { flex: 0 0 46%; display: flex; align-items: flex-end; gap: 6px; font-size: clamp(10px, 2cqw, 16px); }
.tp-nick::after { content: ""; flex: 1 1 auto; border-bottom: 1.5px solid #000; height: 1em; }
.tp-item { display: flex; flex-direction: column; break-inside: avoid; page-break-inside: avoid; }
.tp-ilabel { font-size: clamp(9px, 1.7cqw, 13px); color: #222; margin: 0.6% 0 0; }
.tp-svg { display: block; width: 100%; height: auto; }
.tp-sfoot { margin-top: auto; padding-top: 1%; font-size: clamp(8px, 1.4cqw, 11px); color: #444; display: flex; justify-content: space-between; }

@media (max-width: 480px) { .tp-main { padding: 12px; } .tp-top { padding: 8px 12px; } .tp-go { align-self: stretch; } }

@page { size: auto; margin: 0.5in; }
@media print {
  .tp-screen { display: none !important; }
  .tp-body { background: #fff; color: #000; }
  .tp-main { max-width: none; padding: 0; display: block; }
  .tp-sheets { display: block; }
  .tp-sheet { width: 100%; height: 9.6in; border: 0; border-radius: 0; box-shadow: none; padding: 0; break-after: page; page-break-after: always; }
  .tp-sheet:last-child { break-after: auto; page-break-after: auto; }
}