/* ══ THE PAPER ═════════════════════════════════════════════════════════════
   A practice paper page: the app's paper (src/styles/css.js, ".paper-*") on the site's white sheet. Loaded by the
   paper pages only, after chapter.css. The markup is written by scripts/render-paper.mjs with the app's own class names.
   It carries the print rules too (a child saves the paper as a PDF from the browser's print dialog), which is why
   it is a file of its own: chapter.css has no print styles and notes.check.mjs keeps it that way.
   The accent is ink: the vermilion here is the app's paper margin colour on numbers and bands, never a wash. */

.paper{position:relative;margin:0 0 6px;padding:22px 16px 18px 18px;border:1px solid var(--seam);border-radius:4px;background:#fff;
  font-size:15px;line-height:1.7;color:#2a2a2a;overflow-wrap:break-word}
@media(min-width:701px){.paper{padding:28px 30px 24px 34px}}
.paper strong{font-weight:600;color:#111}
.paper math{font-size:1.04em;math-style:normal}
.paper .katex-error{color:var(--vermilion)}
.paper .paper-plain{font-size:13px;line-height:1.85;color:#2a2a2a;margin:0 0 10px}
.paper .paper-h{font-family:var(--fb);font-size:15px;font-weight:600;color:#141416;margin:18px 0 6px}
.paper .doc-tablewrap{overflow-x:auto;max-width:100%;margin:12px 0}
.paper .doc-table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.5}
.paper .doc-table th{text-align:left;padding:7px 9px;font-family:var(--fd);font-weight:700;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--seam2)}
.paper .doc-table td{padding:7px 9px;color:#2a2a2a;border-bottom:1px solid #ededf0;vertical-align:top}

.paper-head{margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid #E7E7EA;text-align:center}
.paper-meta{font-family:var(--fd),monospace;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#66666C;margin:0}

.paper .drawn-edge{position:relative}
.paper .drawn-edge::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:6px;background:var(--call-edge);
  --stroke:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='90' viewBox='0 0 6 90'%3E%3Cpath d='M3 0C1.6 14 4.2 23 2.6 37c-1.5 13 1.4 21 .3 33-.7 8 .6 13 .1 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-image:var(--stroke);mask-image:var(--stroke);-webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;
  -webkit-mask-position:left top;mask-position:left top}

.paper-section{display:flex;align-items:baseline;gap:10px;margin:30px 0 14px;padding:9px 14px 9px 17px;background:#F6F6F7;border-radius:2px 10px 10px 2px;--call-edge:#C6303E}
.paper-section-letter{font-family:var(--fd),ui-monospace,monospace;font-size:17px;font-weight:700;color:#C6303E;line-height:1;flex-shrink:0}
.paper-section-name{font-family:var(--fd),monospace;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#6B6570;line-height:1.4}

.paper-rules{position:relative;margin:0 0 22px;padding:11px 15px 12px 17px;border-radius:2px 10px 10px 2px;background:#F8F7F9;--call-edge:#B7B3C0}
.paper-rules-head{font-family:var(--fd),monospace;font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#4A4753;margin-bottom:6px}
.paper-rule{font-size:12.5px;line-height:1.7;color:#43414A;margin:0 0 2px}
.paper-rule:last-child{margin-bottom:0}

.paper-line{display:block}
.paper-q-loose{margin-bottom:8px}
.paper-q{display:flex;gap:11px;align-items:flex-start;margin:0 0 15px}
.paper-qno{font-family:var(--fd),monospace;font-size:11px;font-weight:700;color:#C6303E;min-width:22px;text-align:right;flex-shrink:0;padding-top:3px;font-variant-numeric:tabular-nums}
.paper-qbody{flex:1;min-width:0;font-size:13px;line-height:1.85;color:#2a2a2a}
.paper-marks{display:inline-flex;align-items:baseline;gap:3px;margin-left:8px;padding:1px 7px 2px;border-radius:9px;background:#F1F1F3;
  font-family:var(--fd),monospace;font-size:10px;font-weight:700;color:#8C2F39;vertical-align:1px;white-space:nowrap}
.paper-marks i{font-style:normal;font-weight:600;opacity:.75;letter-spacing:.04em}

.paper-key-band{display:flex;align-items:center;gap:8px;margin:34px 0 16px;padding-top:15px;border-top:1.5px dashed #E2D8DA;
  font-family:var(--fd),monospace;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8C2F39}

.paperhint{margin:10px 0 0;font-size:13px;color:var(--text-muted);line-height:1.5}
@media(max-width:600px){.paper-q{gap:8px}.paper-qno{min-width:18px;font-size:10.5px}}

/* Save as PDF: the browser's own print dialog, so the file is a real vector PDF made on the child's device and
   the site holds no PDF. Only the paper is printed. */
@media print{
  body{background:#fff}
  .sheetbg,nav,.crumb,.chnum,.lede,.notebar,.tabs,.paperhint,.facts,#chapters,footer,.getapp{display:none!important}
  main .wrap{max-width:none;padding:0}
  h1{font-size:18px;margin:0 0 12px}
  .paper{border:0;padding:0;font-size:12px}
  .paper-q,.paper-section,.paper-rules{break-inside:avoid}
  .paper-key-band{break-before:page;border-top:0}
}