/* 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:var(--ink-soft); 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,.m-parts{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}
/* the charts and tables (MM-823) draw with more of the theme than the shapes do: black on white here too */
.m-q__fig{--ink:#111; --ink-faint:#555; --card:#fff; --card-2:#F2F2F2; --accent-edge:#D0D0D0}
.m-q__fig .fig-table{border-collapse:collapse; font-size:14px; color:#111}
.m-q__fig .fig-table caption{caption-side:top; text-align:left; font-weight:700; padding-bottom:4px; white-space:nowrap}
.m-q__fig .fig-table th,.m-q__fig .fig-table td{border:1px solid #111; padding:3px 8px; text-align:center}
.m-q__fig .fig-table tbody th{text-align:left}
/* on a phone's screen a table is no wider than the screen (MM-1448, MM-1453): under 390 px its caption wraps and, if the
   columns still do not fit, the table scrolls inside its own box (a keyboard reaches the box: parent/papers.js figureBox);
   from 390 px and in print the paper is as it was, the caption on one line */
@media screen and (max-width:389px){
  .m-q__fig:has(> .fig-table){overflow-x:auto}
  .m-q__fig .fig-table caption{white-space:normal}
}
.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}
/* a two-part item (MM-830): the parts under the stem, 5(a) and 5(b), as a SATs paper sets them */
.m-parts{list-style:none; margin:var(--sp-2) 0 0; padding:0; display:grid; gap:var(--sp-2)}
/* the GL/SEAG line (P2-815): the line in its four groups, a letter under each, divided as GL prints them */
.m-groups{list-style:none; margin:var(--sp-2) 0 0; padding:0; display:flex; flex-wrap:wrap}
.m-groups li{display:flex; flex-direction:column; align-items:center; padding:0 var(--sp-3); border-right:1px solid currentColor}
.m-groups li:last-child{border-right:0}
/* GL's pair types (MM-953): two groups of three side by side, A B C and X Y Z */
.m-pairs{display:flex; flex-wrap:wrap; gap:0 var(--sp-6)}
.m-pairs__group{display:block; min-width:9rem}
.m-groups b{font-size:0.85em}
.m-end{margin:var(--sp-4) 0 0; font-size:13px; color:#333; text-align:center}

/* sections (MM-816): a black bar with the section's name, its instructions, a worked example,
   the section-end line; a text boxed as FSCE's — a plain black box, black on white, never the
   child app's card (child.css .passage), paragraphs numbered */
.m-section + .m-section{margin-top:var(--sp-5)}
.m-section__bar{margin:0 0 var(--sp-2); padding:4px var(--sp-3); background:#111; color:#fff; font-size:14.5px; font-weight:700}
.m-section__how{margin:0 0 var(--sp-2); font-size:14px}
.m-section__end{margin:var(--sp-3) 0 0; font-size:13px; font-style:italic; color:#333}
.m-example{margin:0 0 var(--sp-3); padding:var(--sp-2) var(--sp-3); border:1px dashed #555}
.m-example__label{margin:0 0 2px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.m-example__answer{margin:var(--sp-2) 0 0; font-size:14px}
.m-paper .m-passage{
  max-width:none; margin:0 0 var(--sp-3); padding:var(--sp-3) var(--sp-4);
  background:#fff; color:#111; border:1.5px solid #111; border-radius:0; box-shadow:none;
  font-size:inherit; line-height:1.5;
}
.m-paper .m-passage .passage__title{font-family:var(--f-body); font-size:15px; color:#111}
.m-paper .m-passage .passage__n,.m-paper .m-passage .passage__credit{color:#333}
.m-q__body > .m-passage{margin-top:0}
/* a text with numbered gaps (P2-816): each gap's number in bold, then a line to read it by;
   its options are the question's of that number, in a row under the text (GL's layout) */
.m-paper .m-passage .gap__n{font-family:var(--f-body); font-weight:700}
.m-paper .m-passage .gap__blank{display:inline-block; min-width:5em; border-bottom:1.5px solid #111}
.m-q__gap{margin:0}
.m-options--five{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}

/* English (MM-817): a synonym or opposite item is its word in bold, five options in a row;
   a choice of paragraphs is printed one under another */
.m-q__stem{margin:0; font-size:16px}
/* where a mark goes (MM-902): an arrow under each gap, lettered */
.m-arrows{display:inline-block; line-height:2.4}
.m-arrow{display:inline-block; vertical-align:-0.9em; font-size:12px; line-height:1}
.m-options--long{grid-template-columns:1fr; gap:var(--sp-2)}
.m-options--long li{display:flex; gap:var(--sp-2)}
/* a match (P2-818): the left items with their boxes, the lettered right items beside them */
.m-match{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--sp-4); margin-top:var(--sp-2)}
.m-match .m-options{margin-top:0}
.m-match__left li{align-items:center}
.m-match__left .m-box{margin-left:auto; flex:none}

/* FSCE's answer sheet: a candidate box under a black bar, and the instructions with an oval
   shaded and one crossed out for another */
.m-candidate{margin:0 0 var(--sp-3); border:1.5px solid #111}
.m-candidate__bar{margin:0 0 var(--sp-2); padding:4px var(--sp-3); background:#111; color:#fff; font-size:14.5px; font-weight:700}
.m-candidate .m-name{margin:0 var(--sp-3) var(--sp-2)}
.m-candidate__code{font-family:var(--f-num)}
.m-guide{margin:0 0 var(--sp-3); padding:var(--sp-2) var(--sp-3); border:1.5px solid #111}
.m-guide__title{margin:0 0 2px; font-weight:700}
.m-guide__row{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; padding:4px 0}
.m-guide__text{margin:0; font-size:13.5px}
.m-demo{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-demo--on{background:#111; color:#111}
.m-demo--x{background:
  linear-gradient(to top right, transparent calc(50% - 1px), #111 calc(50% - 1px), #111 calc(50% + 1px), transparent calc(50% + 1px)),
  linear-gradient(to top left, transparent calc(50% - 1px), #111 calc(50% - 1px), #111 calc(50% + 1px), transparent calc(50% + 1px))}

/* GL's answer sheet (MM-874): small boxes marked with a firm pencil line through, in columns */
.m-sheet--line .m-oval,.m-sheet--line .m-demo{border-radius:2px; width:26px; height:16px}
.m-demo--line{background:linear-gradient(transparent calc(50% - 1.5px), #111 calc(50% - 1.5px), #111 calc(50% + 1.5px), transparent calc(50% + 1.5px))}
.m-sheet--line .m-rows{columns:3 190px}

/* non-verbal reasoning in GL's style (MM-1258; research/38 §8.4, core/paper-nonverbal.js GL_PAGE):
   a ruled frame 180 mm wide and a band of 47.5 mm a question, holding its number, top left, and
   its drawing alone; five bands fill a printed page. A drawing says its own size in millimetres
   (core/figures-nvr.js layoutPrint), so nothing here scales it unless the screen is narrower.
   Buckinghamshire's two taller types (.m-bands--tall) are as tall as the drawing. */
.m-bandpage{margin-top:var(--sp-4)}
.m-bandpage__head{margin:0 0 4px; font-family:var(--f-num); font-size:12px; color:#333}
.m-bands{width:180mm; max-width:100%; margin:0 auto; padding-top:1px; box-sizing:border-box}
.m-q--band{position:relative; display:flex; align-items:center; justify-content:center; gap:0; box-sizing:border-box;
  height:47.5mm; padding:0; margin-top:-1px; border:1px solid #111; break-inside:avoid}
.m-bands--tall .m-q--band{height:auto; min-height:47.5mm; padding:6mm 0 2mm}
.m-q--band .m-q__n{position:absolute; top:1.5mm; left:2mm; min-width:0; font-size:17px; font-weight:700; line-height:1}
.m-q--band .m-q__body{flex:none; max-width:100%}
.m-q--band .m-q__fig{margin:0; line-height:0}
.m-q__fig .fig-nvr--print{display:block; margin:0 auto}
/* non-verbal reasoning in Quest's style (MM-1258 part 3; research/38 §8.6, core/paper-nonverbal.js
   QUEST_PAGE): a column 177 mm wide with no frame, two questions a page and a rule between them;
   a question is its number in bold at the left, its own line of instruction, and its drawing
   (the given figure centred above five options of 23.9 mm, at the size the drawing itself says). */
.m-stacks{width:177mm; max-width:100%; margin:0 auto; box-sizing:border-box}
.m-q--stack{padding:5mm 0 6mm; border-bottom:0; border-top:1px solid #111; break-inside:avoid}
.m-q--stack:first-child{border-top:0}
.m-q--stack .m-q__n{min-width:9mm; font-size:20px; font-weight:700; line-height:1.1}
.m-q--stack .m-q__prompt{margin:0 0 4mm}
.m-q--stack .m-q__fig{margin:0; line-height:0}
.m-bandpage__next{margin:4mm 0 0; text-align:center; font-size:14px; font-weight:700}
/* a section's opening: the example and the practice questions, each drawing at its printed size */
.m-section--paged .m-example{padding-left:0; padding-right:0}
.m-section--paged .m-example > p{padding:0 var(--sp-3)}
/* the answer sheet's block for a section: the example's box marked already, a box a practice question */
.m-sheet .m-rows--opening{columns:auto; display:flex; flex-wrap:wrap; gap:0 var(--sp-6); margin-bottom:2px; border-bottom:1px solid #999}
.m-row .m-row__n--word{width:auto; min-width:2.2ch; text-align:left}
.m-oval--marked{background:linear-gradient(transparent calc(50% - 1.5px), #111 calc(50% - 1.5px), #111 calc(50% + 1.5px), transparent calc(50% + 1.5px))}

/* the answer sheet: a number, then four or five ovals, or a row of boxes; a named section's rows under its bar */
.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-sheet .m-section__bar{margin-top:var(--sp-3)}
.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__marks{font-weight:400; 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,.m-example,.m-passage{break-inside:avoid}
  .m-section__bar{break-after:avoid}
  .m-oval,.m-box,.m-section__bar,.m-candidate__bar,.m-demo,.m-demo--line{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .m-candidate,.m-guide{break-inside:avoid}
  /* GL's non-verbal paper (MM-1258): a section's opening starts a page, and so does each page of five questions */
  .m-section--paged,.m-bandpage{break-before:page; margin-top:0}
  .m-q--band{break-inside:avoid}
  /* Quest's (part 3): a question is never split, and the go-on line stays on its questions' page */
  .m-q--stack{break-inside:avoid}
  .m-bandpage__next{break-before:avoid}
  /* its answer sheet: a section's block is never split over two sides */
  .m-rows--opening{break-after:avoid}
  .m-rows--gl-nonverbal,.m-rows--gl-spatial{break-inside:avoid}
  .m-oval--marked{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}
/* the kinds she chooses (MM-822): a grid's rows numbered i, ii …, an order's boxes 1 to n */
.m-row__sub{font-family:var(--f-num); font-size:12px; font-weight:600; margin-left:6px}
.m-row__sub:first-child{margin-left:0}
/* the writing paper (MM-820): the planning box, the ruled lines */
.m-writing__task{font-weight:600}
.m-writing__fig svg{max-width:100%; height:auto}
.m-plan{border:1.5px solid #111; min-height:9cm; padding:6px 8px; margin-top:10px}
.m-plan__label{margin:0; font-weight:600}
.m-lines{display:flex; flex-direction:column}
.m-lines__line{display:block; height:0.9cm; border-bottom:1px solid #555}
.m-writing__more{break-before:page; page-break-before:always; margin-top:16px}
.m-rubric .m-box{flex:none; margin-right:10px}
/* the model example under a writing paper's ticks (MM-1134) */
.m-model{display:grid; gap:6px; margin-top:14px; font-size:12.5px}
.m-model__head{margin:0; font-size:14px}
.m-model .rubric-model__text{border-left:2px solid #999; padding-left:10px}
.m-model .rubric-model__text p{margin:0 0 6px}
.m-model .rubric-model__n{color:#000}
.m-model .rubric-model__notes{margin:0; padding-left:18px}
/* missing letters (MM-818): a word's letters in boxes, inside its sentence and on the sheet */
.m-letters{display:inline-flex; vertical-align:middle; margin:0 4px}
.m-box--letter{text-align:center; line-height:30px; font-weight:700; font-size:16px}

/* the KS2 arithmetic paper (P2-502): space to work, then the answer box, in the booklet */
.m-q__work{min-height:5.5em; border:1px dashed currentColor; margin:.4em 0}
.m-q__answerbox{display:flex; justify-content:flex-end; align-items:center; gap:.6em; margin:.2em 0 .8em}
.m-q__answerlabel{font-size:.8em}
.m-q__box{display:inline-block; width:8em; height:2.2em; border:1.5px solid #000}

/* the KS2 reasoning papers (P2-502): a "Show your method" box, the unit or £ by the answer box, a box per part */
.m-q__method{min-height:8em; border-style:solid; position:relative; padding:.3em .5em}
.m-q__methodlabel{display:inline-block; font-size:.8em; font-weight:700; border:1px solid currentColor; padding:.1em .4em}
.m-q__unit{font-weight:700}
.m-q__part{font-weight:700; margin-right:auto}

/* the KS2 English papers (P2-502): a box to tick beside each option, a true/false table, lines to
   write on, a gap in a spelling sentence, the script the grown-up reads */
.m-tick{display:inline-block; flex:none; width:1.1em; height:1.1em; border:1.5px solid #000; margin-left:auto; vertical-align:middle}
.m-ticktable{border-collapse:collapse; margin:.4em 0}
.m-ticktable th, .m-ticktable td{border:1px solid #000; padding:.3em .6em; text-align:center}
.m-ticktable tbody th{text-align:left; font-weight:400}
.m-q__write{margin:.4em 0}
.m-q__line{display:block; height:1.6em; border-bottom:1px solid #000}
.m-q__marksonly{margin-top:0}
.m-gap{display:inline-block; width:9em; border-bottom:1.5px solid #000; margin:0 .3em}
.m-q__heard{line-height:2.2}
.m-key__script{margin:0 0 .2em}

/* MM-899: STA's raw-to-scaled table under a whole SATs-style paper's answers */
.m-scaled{margin-top:1rem; break-inside:avoid}
.m-scaled__runs{list-style:none; margin:.4rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.15rem .9rem; font-size:.85rem}
.m-scaled__run.is-key{font-weight:700}
/* sheet drills (MM-941): the rule in large print, each line's words before its ovals */
.m-drill__rule{font-size:22px; font-weight:700; line-height:1.3; border:2px solid #111; padding:8px 12px; margin:10px 0}
.m-drill__say{flex:1 1 12ch; min-width:0}
/* six interview practice cards on one A4 page (MM-1030): two columns of three, small type */
.m-iv__grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3)}
.m-iv__card{border:1px solid #111; border-radius:6px; padding:var(--sp-3); font-size:12.5px; line-height:1.35; break-inside:avoid}
.m-iv__card p{margin:0 0 4px}
.m-iv__kind{font-family:var(--f-num); font-size:11px; color:#333; text-transform:uppercase; letter-spacing:.04em}
.m-iv__ask{font-weight:700; white-space:pre-wrap}
.m-iv__text{font-size:11px; line-height:1.3; white-space:pre-wrap}
.m-iv__label{font-weight:600; margin-top:4px !important}
.m-iv__list{margin:0 0 4px; padding-left:16px}
.m-iv__answer{font-size:11px; color:#333}
@media print{
  .m-iv{font-size:10pt}
  .m-iv__grid{gap:4mm}
  .m-iv__card{font-size:9.5pt; padding:3mm}
  .m-iv__text,.m-iv__answer,.m-iv__kind{font-size:8.5pt}
}
.m-cover{font-weight:700; font-size:15px; margin:0 0 var(--sp-3)}