/* paper.css — the mock papers (MM-603): how a paper looks under Controls › Mock papers, and
 * the print stylesheet that prints the paper and nothing else.
 *
 * A paper is paper: black on white in either theme, since what is on screen is a preview of
 * what comes out of the printer. Its three parts — the question booklet, the answer sheet
 * and the answers — each start a new printed page.
 */

.m-paper{
  /* the figures draw with these (core/figures.js): black lines, a light fill, dark labels */
  --accent:#111; --accent-soft:#E6E6E6; --ink-soft:#333;
  background:#fff; color:#111; border:1px solid var(--line); border-radius:var(--r);
  padding:var(--sp-6) var(--sp-5); margin:0 0 var(--sp-5); font-family:var(--f-body); font-size:15px; line-height:1.45;
}
.m-part + .m-part{margin-top:var(--sp-7); padding-top:var(--sp-6); border-top:2px dashed #999}
.m-part__head{border-bottom:2px solid #111; padding-bottom:var(--sp-2); margin-bottom:var(--sp-3)}
.m-part__title{font-size:19px; margin:0; color:#111}
.m-part__meta{margin:2px 0 0; font-family:var(--f-num); font-size:12.5px; color:#333}
.m-small{font-size:13px; color:#333; margin:0 0 var(--sp-3)}
.m-rules{margin:0 0 var(--sp-5); padding-left:20px; font-size:14px}
.m-rules li{margin-bottom:3px}
.m-name{margin:0 0 var(--sp-3); font-size:14px; display:flex; align-items:flex-end; gap:var(--sp-2)}
.m-name__line{display:inline-block; flex:0 1 260px; border-bottom:1px solid #111; height:1.1em}

.m-questions,.m-rows,.m-key,.m-options{list-style:none; margin:0; padding:0}
.m-q,.m-key__row{display:flex; gap:var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid #ccc}
.m-q__n{flex:none; min-width:2ch; font-family:var(--f-num); font-weight:600}
.m-q__body{flex:1; min-width:0}
.m-q__prompt{margin:0; white-space:pre-wrap; overflow-wrap:anywhere}
.m-q__fig{margin:var(--sp-2) 0}
.m-q__fig svg{max-width:100%; height:auto}
.m-options{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:4px var(--sp-4); margin-top:var(--sp-2)}
.m-options b{display:inline-block; min-width:1.4em}
.m-end{margin:var(--sp-4) 0 0; font-size:13px; color:#333; text-align:center}

/* the answer sheet: a number, then four ovals or a row of boxes */
.m-rows{columns:2 220px; column-gap:var(--sp-7)}
.m-row{display:flex; align-items:center; gap:var(--sp-3); padding:6px 0; break-inside:avoid}
.m-row__n{flex:none; width:2.2ch; text-align:right; font-family:var(--f-num); font-weight:600}
.m-row__marks{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.m-oval{display:inline-flex; align-items:center; justify-content:center; width:30px; height:18px;
  border:1.5px solid #111; border-radius:50%; font-size:10.5px; font-weight:600; color:#333}
.m-box{display:inline-block; width:24px; height:30px; border:1.5px solid #111; background:#fff}
.m-box + .m-box{margin-left:-6px}
.m-unit{margin-left:4px; font-size:14px}

/* the answers */
.m-key__answer{margin:0; font-weight:600}
.m-key__topic{margin:2px 0 0; font-size:13px; color:#333}
.m-key__method{margin:2px 0 0; font-size:12.5px; color:#333; white-space:pre-wrap}
.m-paper .k-chip__code{color:#555}

.m-again__row{display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap}
.m-again__row .freetext{width:12ch; font-family:var(--f-num); text-transform:uppercase}
.m-paper-bar .k-btn{margin-top:var(--sp-2)}

@media (max-width:640px){
  .m-again{flex-wrap:wrap}
  .m-paper{padding:var(--sp-4) var(--sp-3)}
}

@media print{
  @page{size:A4; margin:14mm}
  /* only the paper: every element that neither holds it nor is inside it goes */
  body:has(.m-paper) :not(:has(.m-paper), .m-paper, .m-paper *){display:none !important}
  body:has(.m-paper), body:has(.m-paper) :has(.m-paper){
    margin:0 !important; padding:0 !important; max-width:none !important; min-height:0 !important;
    background:#fff !important; border:0 !important; box-shadow:none !important;
  }
  .no-print{display:none !important}
  .m-paper{border:0; border-radius:0; padding:0; margin:0; font-size:12pt}
  .m-part + .m-part{break-before:page; margin-top:0; padding-top:0; border-top:0}
  .m-q,.m-key__row,.m-row{break-inside:avoid}
  .m-oval,.m-box{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}