/* Spelling test maker: the table strip at the top (pages.css), the maker, the sheets it draws, and the guide.
   The sheets are drawn to scale: the kid's test as SVG in hundredths of an inch, the read-aloud list in units of
   the sheet's own width (--u is 0.01 in), so the preview and the printout are the same page. */

/* The strip of table: the card with the answer, and the two sheets lying on the wood beside it. */
.mk-band .band-card { max-width: 660px; }
.mk-band .band-card h1 { font-size: clamp(32px, 3vw, 44px); }
.mk-band .band-card .row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.mk-band .thing.sheet-pic img { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 0 0 1px rgba(51,54,59,.12), 10px 14px 18px rgba(80,45,10,.32); }
.mk-band .thing { pointer-events: none; }

/* The maker */
.mk { padding: 56px var(--gap) 64px; scroll-margin-top: calc(var(--top-h) + 8px); }
.mk-head { max-width: 1240px; margin: 0 auto 26px; }
.mk-head h2 { margin-bottom: 10px; }
.mk-head p { max-width: 760px; font-size: 19px; line-height: 30px; margin: 0; }
.mk-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 36px 44px; align-items: start; }
.mk-form { background: var(--paper); border: 1.5px solid var(--graphite); border-radius: 6px; padding: 24px 24px 20px; box-shadow: 6px 6px 0 var(--manila), 6px 6px 0 1.5px rgba(51,54,59,.2); }
.mk-form .f { margin: 0 0 20px; }
.mk-form label, .mk-form legend { display: block; font-weight: 700; font-size: 18px; line-height: 25px; margin: 0 0 6px; padding: 0; }
.mk-form .opt { font-weight: 400; }
.mk-form .hint { font-size: 15px; line-height: 22px; margin: 6px 0 0; }
.mk-form textarea, .mk-form input[type=text], .mk-form select { width: 100%; font: 400 18px/1.45 var(--font); color: var(--graphite); background: #fff; border: 1.5px solid var(--graphite); border-radius: 4px; padding: 10px 12px; }
.mk-form textarea { resize: vertical; min-height: 64px; }
.mk-form #mk-words { min-height: 170px; }
.mk-form select { width: auto; min-height: 46px; padding-right: 30px; }
.mk-form textarea:focus-visible, .mk-form input[type=text]:focus-visible, .mk-form select:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.mk-form fieldset { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.mk-form .choices { display: grid; gap: 8px; }
.mk-form .choices.two { grid-template-columns: 1fr 1fr; }
.mk-form .choice { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; padding: 8px 12px; border: 1.5px solid rgba(51,54,59,.35); border-radius: 6px; font-weight: 400; font-size: 17px; line-height: 22px; cursor: pointer; }
.mk-form .choice:has(input:checked) { border-color: var(--graphite); box-shadow: inset 0 0 0 1px var(--graphite); background: #fffbea; }
.mk-form .choice:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.mk-form .choice input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--red); }
.mk-form .choice small { display: block; font-size: 14px; line-height: 19px; }
.mk-form .two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mk-form .tick { display: flex; gap: 10px; align-items: center; min-height: 44px; font-weight: 400; font-size: 17px; line-height: 24px; margin: 0 0 4px; cursor: pointer; }
.mk-form .tick input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--red); }
.mk-form .rule-top { border-top: 1.5px dashed rgba(79,134,219,.7); padding-top: 18px; }
.mk-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.mk-actions .btn-red { min-width: 160px; }
.btn-plain { background: none; border: 0; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; padding: 10px 6px; min-height: 44px; font: 700 16px/1.2 var(--font); color: var(--graphite); cursor: pointer; }
.btn-plain:hover { transform: none; box-shadow: none; text-decoration-thickness: 2px; }
.mk-status { font-size: 16px; line-height: 24px; margin: 14px 0 0; }
.mk-note { font-size: 16px; line-height: 24px; margin: 10px 0 0; padding: 10px 12px; background: #fffbea; border: 1.5px solid var(--yellow); border-radius: 4px; }
.mk-note p { margin: 0; font-size: inherit; line-height: inherit; }
.mk-note .btn-plain { padding-left: 0; }
.mk-top-note { margin: 0 0 18px; }
.f-note { font-size: 15px; line-height: 22px; margin: 8px 0 0; padding: 8px 10px; background: #fffbea; border-left: 3px solid var(--yellow); }
.mk-link-out { margin-top: 12px; }
.mk-link-out p { font-size: 15px; line-height: 22px; margin: 0 0 6px; }
.mk-link-out input { width: 100%; font: 400 15px/1.3 var(--font); padding: 8px 10px; border: 1.5px solid var(--graphite); border-radius: 4px; }
/* Scripts off: the form can't fill the sheets in, so it steps aside and says what works instead. */
.mk-js { display: none; }
html.mk-on .mk-js { display: block; }
html.mk-on .mk-nojs { display: none; }
.mk-nojs { background: var(--paper); border: 1.5px solid var(--graphite); border-radius: 6px; padding: 20px 22px; box-shadow: 6px 6px 0 var(--manila); }
.mk-nojs p { font-size: 17px; line-height: 27px; }

.mk-preview { background: var(--manila); border-radius: 6px; padding: 20px; min-width: 0; }
.mk-preview > p { font-size: 16px; line-height: 24px; margin: 0 0 14px; }
.mk-preview-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.mk-preview-head p { font-size: 16px; line-height: 24px; margin: 0; }
.mk-preview-head .btn { min-height: 44px; }
html.mk-on .mk-preview-head .mk-js { display: inline-flex; }
.mk-preview-head .btn[aria-pressed="true"] { background: #fffbea; box-shadow: inset 0 0 0 1.5px var(--graphite); }
/* Full size: each sheet at its printed width, in a box that scrolls by touch, or with the arrow keys once focused. */
.mk-scroll.big { overflow: auto; max-height: 85vh; padding: 4px 12px 12px 4px; }
.mk-scroll.big:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.mk-scroll.big .mk-sheets { grid-template-columns: 7.25in; justify-content: start; }
.mk-sheets { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; align-items: start; }
.sheet-wrap { margin: 0; min-width: 0; }
.sheet-wrap figcaption { font-size: 15px; line-height: 21px; margin-top: 8px; }
.mk-sheets.no-kid .is-kid .sheet, .mk-sheets.no-list .is-list .sheet { opacity: .35; }
.mk-sheets.no-kid .is-kid figcaption::after, .mk-sheets.no-list .is-list figcaption::after { content: " (not printing)"; }
.mk-measure { position: absolute; left: -10000px; top: 0; width: 7.25in; visibility: hidden; pointer-events: none; }

/* A sheet, on screen and on paper */
.sheet { position: relative; width: 100%; aspect-ratio: 725 / 990; background: #fff; overflow: hidden; container-type: inline-size; box-shadow: 0 0 0 1.5px rgba(51,54,59,.15), 8px 10px 0 rgba(51,54,59,.08); }
.sheet .kid-svg { display: block; width: 100%; height: auto; }
.sheet.parent .ps { --u: calc(100cqw / 725); position: absolute; inset: 0; font-family: var(--font); color: var(--graphite); font-size: calc(var(--u) * 15); line-height: 1.35; }
.sheet.parent::after { content: "Spelling test maker · pencilreply.com"; position: absolute; right: 0; bottom: calc(100cqw / 725 * 3); font: 400 calc(100cqw / 725 * 12)/1 var(--font); color: #5d6168; }
.ps p { margin: 0; font-size: inherit; line-height: inherit; }
.ps .ps-kick { font-size: calc(var(--u) * 15); }
.ps .ps-title { font-size: calc(var(--u) * 30); font-weight: 700; line-height: 1.2; margin-top: calc(var(--u) * 2); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: calc(var(--u) * 2.4); text-underline-offset: calc(var(--u) * 5); text-decoration-skip-ink: none; overflow-wrap: anywhere; }
.ps .ps-how { margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 15.5); max-width: calc(var(--u) * 620); }
.ps-table { width: 100%; border-collapse: collapse; margin-top: calc(var(--u) * 14); table-layout: fixed; }
.ps-table th { text-align: left; font-size: calc(var(--u) * 13); font-weight: 700; padding: 0 calc(var(--u) * 6) calc(var(--u) * 5); border-bottom: calc(var(--u) * 1.6) solid var(--graphite); }
.ps-table td { padding: calc(var(--u) * 7) calc(var(--u) * 6); border-bottom: calc(var(--u) * 1) solid #c7cbd1; vertical-align: middle; }
.ps-table .ps-n { width: calc(var(--u) * 40); padding-left: 0; font-size: calc(var(--u) * 15); }
.ps-table .ps-w { width: calc(var(--u) * 170); font-size: calc(var(--u) * 21); font-weight: 700; overflow-wrap: anywhere; }
.ps-table .ps-s { font-size: calc(var(--u) * 14); overflow-wrap: anywhere; }
.ps-table .ps-t { width: calc(var(--u) * 78); text-align: center; }
.ps-table th.ps-t { text-align: center; }
.ps-table th.ps-n, .ps-table th.ps-w, .ps-table th.ps-s { font-size: calc(var(--u) * 13); font-weight: 700; }
.ps .box { display: inline-block; width: calc(var(--u) * 20); height: calc(var(--u) * 20); border: calc(var(--u) * 1.5) solid var(--graphite); border-radius: calc(var(--u) * 3); vertical-align: middle; }
.ps-star { color: #b98a00; font-size: calc(var(--u) * 18); }
.ps-row.is-star .ps-n { font-weight: 700; }
.ps-blank { display: block; height: calc(var(--u) * 26); border-bottom: calc(var(--u) * 1) solid #8b9097; margin-right: calc(var(--u) * 10); }
.ps-s .ps-line { display: block; height: calc(var(--u) * 26); }
.ps.dense .ps-table td { padding-top: calc(var(--u) * 4); padding-bottom: calc(var(--u) * 4); }
.ps.dense .ps-blank, .ps.dense .ps-s .ps-line { height: calc(var(--u) * 22); }
/* The end of the list: sentences, then the totals beside the try-again lines, then the key, each full width. */
.ps-tail { margin-top: calc(var(--u) * 14); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(var(--u) * 34); row-gap: calc(var(--u) * 12); align-items: start; }
.ps-tail > .ps-sent, .ps-tail > .ps-key { grid-column: 1 / -1; }
.ps-sent { margin-bottom: 0; }
.ps-sent .ps-sh { font-weight: 700; font-size: calc(var(--u) * 15); }
.ps-sent ol { margin: calc(var(--u) * 6) 0 0; padding-left: calc(var(--u) * 24); font-size: calc(var(--u) * 17); }
.ps-sent li { margin-bottom: calc(var(--u) * 4); }
.ps-tot { display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
.ps-tot p { font-size: calc(var(--u) * 16); white-space: nowrap; }
.ps-fill { display: inline-block; width: calc(var(--u) * 50); border-bottom: calc(var(--u) * 1.5) solid var(--graphite); }
.ps-again { margin-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 10) calc(var(--u) * 30); }
.ps-again p { grid-column: 1 / -1; font-size: calc(var(--u) * 15); }
.ps-again .ps-line { display: block; height: calc(var(--u) * 30); border-bottom: calc(var(--u) * 1) solid #8b9097; }
.ps .ps-key { margin-top: 0; font-size: calc(var(--u) * 13); }

/* The blank sheets to download */
.pg .blanks, .blanks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .pg .blanks, .blanks { grid-template-columns: minmax(0, 1fr); } }
.blanks li { margin: 0; }
.blanks a { display: block; height: 100%; text-decoration: none; background: #fff; border: 1.5px solid var(--graphite); border-radius: 6px; padding: 14px 16px 12px; box-shadow: 4px 4px 0 var(--manila); }
.blanks a:hover { box-shadow: 4px 4px 0 var(--yellow); }
.blanks b { display: block; font-size: 19px; line-height: 25px; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.blanks span { display: block; font-size: 15px; line-height: 22px; margin-top: 6px; }

/* The guide */
.guide .pg-in > h2 { scroll-margin-top: calc(var(--top-h) + 20px); }
.guide figure { margin: 26px 0 30px; }
.guide figure img { display: block; width: 100%; height: auto; }
.guide figcaption { font-size: 15px; line-height: 22px; margin-top: 6px; }
.guide blockquote { margin: 16px 0 18px; padding: 4px 0 4px 18px; border-left: 3px solid var(--red); }
.guide blockquote p { font-size: 18px; line-height: 29px; margin: 0 0 4px; }
.guide blockquote footer { font-size: 15px; line-height: 22px; }
.tbl-scroll { overflow-x: auto; margin: 14px 0 10px; }
.tbl-scroll:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.sizes { width: 100%; border-collapse: collapse; margin: 0; font-size: 17px; line-height: 25px; }
.sizes th, .sizes td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid #c7cbd1; vertical-align: top; }
.sizes thead th { font-weight: 700; border-bottom: 1.5px solid var(--graphite); }
.sizes tbody th { font-weight: 400; }
/* Narrow screens and large zoom: each grade becomes a short block, its sizes labelled, so nothing needs scrolling. */
@media (max-width: 480px) {
  .sizes, .sizes tbody, .sizes tr, .sizes th, .sizes td { display: block; }
  .sizes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sizes tr { padding: 10px 0; border-bottom: 1px solid #c7cbd1; }
  .sizes tbody th, .sizes td { border: 0; padding: 2px 0; }
  .sizes tbody th { font-weight: 700; }
  .sizes td::before { content: attr(data-label) ": "; }
}
.src { font-size: 15px; line-height: 22px; }
.toc { margin: 0 0 8px; padding-left: 1.2em; }
.toc li { font-size: 17px; line-height: 26px; margin-bottom: 4px; }
.next-card { margin-top: 8px; }
.next-card .row { margin-top: 6px; }

@media (max-width: 960px) {
  .mk-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .mk { padding: 36px 12px 48px; }
  .mk-head p { font-size: 18px; line-height: 28px; }
  .mk-form { padding: 18px 16px 16px; box-shadow: 4px 4px 0 var(--manila); }
  .mk-preview { padding: 14px; }
  .mk-sheets { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .mk-form .two-up { grid-template-columns: minmax(0, 1fr); }
  .sizes { font-size: 16px; line-height: 24px; }
}
/* Phone-sized targets for the shared menu and footer on these pages. */
@media (max-width: 760px) {
  .top .menu summary { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .top .top-tab { padding-top: 1px; padding-bottom: 1px; }
  .top .menu li a { min-height: 44px; display: flex; align-items: center; }
  .foot li { margin: 0; }
  .foot li a { min-height: 44px; display: inline-flex; align-items: center; padding: 0; }
  .signup .tick { min-height: 44px; align-items: center; }
}
@media (max-width: 340px) {
  .mk-form .choices.two { grid-template-columns: minmax(0, 1fr); }
  .mk-sheets { grid-template-columns: minmax(0, 1fr); }
}

/* The blank tests' own print pages */
.pp { padding-top: calc(var(--top-h) + 36px); }
.pp .mk-head h1 { font-size: clamp(30px, 3.4vw, 44px); margin: 0 0 14px; }
.pp .mk-head p + p { margin-top: 12px; }
.pp .pp-back { font-size: 16px; line-height: 24px; margin-bottom: 10px; }
.pp .pp-do { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.pp .pp-keys { font-size: 16px; line-height: 24px; }
.pp .pp-print { display: none; }
.pp-js .pp .pp-print { display: inline-flex; }
.pp .mk-preview { max-width: 1240px; margin: 0 auto; }
.pp .mk-sheets { grid-template-columns: repeat(auto-fill, minmax(250px, 480px)); }

/* Printing: only the sheets, each at 7.25 x 9.9 in. The page size comes from the paper chosen (a style the maker
   writes); with scripts off, the printer's own paper is used, and the sheet fits US Letter and A4 alike. */
@page { margin: 0.5in; }
@media print {
  html, body { background: #fff !important; }
  body { margin: 0; padding: 0 !important; }
  .top, .bar, .foot, .mk-band, .mk-head, .mk-form, .mk-nojs, .mk-preview > p, .guide, .pg-free, .blank-sec, .skip { display: none !important; }
  main { padding: 0 !important; }
  .mk { padding: 0 !important; }
  .mk-grid { display: block; max-width: none; }
  .mk-preview { background: none; padding: 0; }
  .mk-sheets { display: block; }
  .mk-scroll, .mk-scroll.big { overflow: visible; max-height: none; padding: 0; }
  .mk-preview-head { display: none; }
  .sheet-wrap { margin: 0; break-inside: avoid; break-after: page; }
  .sheet-wrap.p-last, .mk-sheets:not(.has-last) .sheet-wrap:last-child { break-after: auto; }
  .sheet-wrap figcaption { display: none; }
  .mk-sheets.no-kid .is-kid, .mk-sheets.no-list .is-list { display: none; }
  .sheet { width: 7.25in !important; height: 9.9in; aspect-ratio: auto; margin: 0 auto; box-shadow: none !important; opacity: 1 !important; }
  .mk-measure { display: none; }
}