/* Mathlab: the assignment builder (builder.html).
   Two parts: the controls (site design, both themes) and the printed sheet (.ws-*), which is always black on white,
   measured in millimetres and points so the screen preview and the printout are laid out identically. */

/* ---------- page layout ---------- */
.builder main { max-width: none; }
.bld-hero { grid-template-columns: minmax(0, 1fr) !important; padding-block: 2.4rem 1.6rem !important; }
.bld-hero h1 { font-size: clamp(2.1rem, 10vw, 4.8rem); margin: .55rem 0 .9rem; overflow-wrap: anywhere; }
.bld-hero .lede { max-width: 50rem; }
.bld { display: grid; gap: 1.6rem; align-items: start; }
@media (min-width: 1000px) {
  .bld { grid-template-columns: minmax(21rem, 25rem) minmax(0, 1fr); gap: 2rem; }
  .bld-side { position: sticky; top: .8rem; max-height: calc(100vh - 1.6rem); overflow-y: auto; overscroll-behavior: contain; padding-right: .3rem; scrollbar-width: thin; }
}

/* ---------- side panels ---------- */
.bpanel { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 1rem; }
.bpanel > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; font-family: var(--f-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .95rem; color: var(--ink); }
.bpanel > summary::-webkit-details-marker { display: none; }
.bpanel > summary::after { content: "▾"; margin-left: auto; color: var(--ink-3); transition: transform .2s; }
.bpanel:not([open]) > summary::after { transform: rotate(-90deg); }
.bp-n { width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: .8rem; letter-spacing: 0; flex: none; }
:root[data-theme="dark"] .bp-n { color: #10131a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bp-n { color: #10131a; } }
.bp-body { display: grid; gap: .85rem; padding: .9rem 1rem 1.05rem; border-top: 1px solid var(--rule); }
.bp-help { margin: 0; font-size: .93rem; line-height: 1.45; color: var(--ink-2); }
.bf { display: grid; gap: .3rem; min-width: 0; align-content: start; }
.bf > .lbl { font-size: .74rem; letter-spacing: .12em; }
.bf-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .7rem; }
.bf-row-mid { align-items: end; }
.bf-row-mid .bchk { padding-bottom: .3rem; }
.bld-side .field { font-family: var(--f-display); font-size: 1.02rem; padding: .38rem .55rem; }
.bld-side select.field { font-family: var(--f-label); font-size: .98rem; width: 100%; }
.bld-side textarea.field { resize: vertical; line-height: 1.4; min-height: 4.2rem; }
.bld-side .field.num { font-family: var(--f-mono); font-size: .95rem; }
.bchks { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.bchk { display: inline-flex; align-items: center; gap: .45rem; font-size: 1rem; cursor: pointer; line-height: 1.3; }
.bchk input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; margin: 0; flex: none; }
.logo-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.logo-thumb { height: 2.7rem; max-width: 7.5rem; object-fit: contain; background: #fff; border: 1px solid var(--rule); border-radius: 4px; padding: 2px; }
label.btn { cursor: pointer; }
.bf-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* segmented choices: type, difficulty, columns */
.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 1px solid var(--ink-3); border-radius: 5px; overflow: hidden; justify-self: start; }
.seg-b { font-family: var(--f-label); font-weight: 600; font-size: .86rem; letter-spacing: .06em; text-transform: uppercase; padding: .36rem .7rem .32rem; background: var(--panel); color: var(--ink-2); border: 0; border-right: 1px solid var(--rule); cursor: pointer; line-height: 1.2; }
.seg-b:last-child { border-right: 0; }
.seg-b:hover { color: var(--ink); }
.seg-b[aria-pressed="true"] { background: var(--accent-wash); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.seg-b:disabled { opacity: .38; cursor: not-allowed; text-decoration: line-through; }

/* block cards */
.blocks { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.blocks-empty { color: var(--ink-3); font-style: italic; }
.bcard { border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: var(--paper); transition: box-shadow .15s, opacity .15s; }
.bc-head { display: flex; align-items: center; gap: .5rem; padding: .5rem .55rem; border-bottom: 1px dashed var(--rule); }
.bc-handle { cursor: grab; color: var(--ink-3); font-size: 1.15rem; line-height: 1; touch-action: none; user-select: none; }
.bc-letter { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--f-label); font-weight: 700; font-size: .9rem; display: grid; place-items: center; flex: none; }
.bc-name { min-width: 0; flex: 1; display: grid; line-height: 1.2; }
.bc-title { font-weight: 500; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-sum { font-family: var(--f-label); font-size: .76rem; letter-spacing: .05em; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-tools { display: flex; gap: .2rem; flex: none; }
.bc-tools .icon-btn { width: 1.85rem; height: 1.85rem; font-size: .95rem; letter-spacing: 0; }
.icon-btn.off { opacity: .3; pointer-events: none; }
.icon-btn.danger:hover { border-color: var(--bad); color: var(--bad); }
.bc-body { padding: .75rem .7rem .8rem; display: grid; gap: .75rem; }
.bcard.dragging { opacity: .45; }
.bcard.drop-before { box-shadow: 0 -3px 0 var(--accent); }
.bcard.drop-after { box-shadow: 0 3px 0 var(--accent); }
.add-block { justify-self: start; }
.bc-note { margin: -.35rem 0 0; font-size: .85rem; line-height: 1.35; color: var(--ink-3); font-style: italic; }
@media (max-width: 400px) {
  .bc-tools .icon-btn { width: 1.7rem; height: 1.7rem; }
  .seg-b { padding: .34rem .5rem .3rem; font-size: .8rem; }
}

/* templates */
.tpl-save { display: flex; gap: .5rem; }
.tpl-save .field { flex: 1; }
.tpl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.tpl-list li { display: flex; align-items: center; gap: .5rem; padding: .4rem .45rem .4rem .65rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); }
.tpl-name { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.tpl-name b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-name small { color: var(--ink-3); font-size: .8rem; }
.tpl-list li.tpl-empty { color: var(--ink-3); font-style: italic; font-size: .95rem; border: 0; background: none; padding: 0; }
.tpl-list .icon-btn { width: 1.85rem; height: 1.85rem; }

/* ---------- the preview ---------- */
.bld-view { min-width: 0; }
.bld-bar { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .7rem 0 .75rem; background: var(--paper); border-bottom: 1px solid var(--rule); margin-bottom: 1.1rem; }
.bar-group { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bar-group .lbl { font-size: .74rem; }
.seed-in { width: 6.6rem; font-size: .95rem; }
.bar-key { font-size: .98rem; }
.bar-stats { font-family: var(--f-label); font-size: .86rem; letter-spacing: .05em; color: var(--ink-3); flex-basis: 100%; }
@media (min-width: 1500px) { .bar-stats { flex-basis: auto; margin-left: auto; } }
.bld-stage { position: relative; overflow: hidden; }
.bld-pages { width: 210mm; transform-origin: 0 0; }
.ws-measure { position: absolute !important; left: -10000px; top: 0; visibility: hidden; pointer-events: none; }

/* ---------- the printed sheet ---------- */
.ws-page {
  --ws-ink: #141414; --ws-ink2: #3d3d3d; --ws-ink3: #6b6b6b; --ws-rule: #a8a8a8; --ws-faint: #d2d2d2; --ws-acc: #8F5A00;
  width: 210mm; height: 297mm; padding: 15mm; margin: 0 0 9mm; background: #fff; color: var(--ws-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 10px 28px -14px rgba(0, 0, 0, .5);
  font-family: var(--f-display); font-size: 11pt; line-height: 1.4; font-optical-sizing: auto;
  font-variant-numeric: lining-nums; -webkit-print-color-adjust: exact; print-color-adjust: exact; color-scheme: light;
}
.ws-in { position: relative; width: 180mm; height: 267mm; overflow: hidden; }
.ws-flow { width: 180mm; }
.ws-flow > * { margin-top: 0; margin-bottom: 0; }
.ws-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 4mm; border-top: .25mm solid var(--ws-faint); padding-top: 1.6mm; font-family: var(--f-label); font-size: 7.5pt; letter-spacing: .09em; text-transform: uppercase; color: var(--ws-ink3); line-height: 1.3; }
.ws-foot .wf-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80mm; }
.ws-empty { padding-top: 10mm; color: var(--ws-ink3); font-style: italic; text-align: center; }

/* header: school top left, pupil fields top right */
.ws-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8mm; padding-bottom: 4mm; border-bottom: .5mm solid var(--ws-ink); }
.ws-school { display: flex; align-items: center; gap: 4mm; min-height: 18mm; min-width: 0; flex: 1; }
.ws-logo { height: 18mm; width: auto; max-width: 46mm; object-fit: contain; object-position: left center; flex: none; }
.ws-sch-text { min-width: 0; }
.ws-sname { font-size: 14pt; font-weight: 500; line-height: 1.15; letter-spacing: -.005em; }
.ws-subj { font-family: var(--f-label); font-size: 9pt; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ws-ink2); margin-top: 1.2mm; }
.ws-pupil { width: 84mm; flex: none; display: grid; gap: 3.2mm; padding-top: .5mm; }
.ws-field { display: flex; align-items: flex-end; gap: 2mm; font-family: var(--f-label); font-size: 8.5pt; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ws-ink2); line-height: 1; }
.ws-field i { flex: 1; height: 6.5mm; border-bottom: .3mm solid var(--ws-ink); }
.ws-fields-row { display: flex; gap: 5mm; }
.ws-fields-row .ws-field { flex: 1; }
.ws-titlebox { padding: 5mm 0 1mm; }
.ws-title { font-size: 22pt; font-weight: 400; line-height: 1.1; margin: 0; letter-spacing: -.012em; font-variation-settings: "opsz" 60; }
.ws-meta { display: flex; flex-wrap: wrap; gap: 1mm 6mm; margin-top: 2.2mm; font-size: 10pt; color: var(--ws-ink); }
.ws-mi b { font-family: var(--f-label); font-weight: 600; font-size: 8pt; letter-spacing: .13em; text-transform: uppercase; color: var(--ws-ink3); margin-right: .6mm; }
.ws-instr { margin: 3.2mm 0 0 !important; font-size: 10pt; font-style: italic; color: var(--ws-ink2); white-space: pre-line; border-left: .7mm solid var(--ws-acc); padding: .4mm 0 .4mm 3mm; }

/* block heading */
.ws-bh { display: flex; align-items: flex-start; gap: 3mm; padding: 7mm 0 1.8mm; border-bottom: .25mm solid var(--ws-rule); }
.ws-bl { flex: none; width: 7mm; height: 7mm; border-radius: 50%; background: var(--ws-ink); color: #fff; font-family: var(--f-label); font-weight: 700; font-size: 10.5pt; display: grid; place-items: center; line-height: 1; margin-top: .2mm; }
.ws-bt { min-width: 0; flex: 1; }
.ws-btitle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1mm 2.5mm; }
.ws-btitle b { font-size: 13pt; font-weight: 500; line-height: 1.2; }
.ws-btag { font-family: var(--f-label); font-size: 7.5pt; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ws-acc); border: .25mm solid currentColor; border-radius: .8mm; padding: .3mm 1.3mm .1mm; line-height: 1.2; }
.ws-binstr { font-size: 9.5pt; font-style: italic; color: var(--ws-ink2); margin-top: .6mm; line-height: 1.3; }
.ws-bpts { margin-left: auto; font-family: var(--f-label); font-size: 8.5pt; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ws-ink2); white-space: nowrap; padding-top: 1mm; }

/* tasks: number, prompt and answer space, points in the margin */
.ws-row { display: grid; column-gap: 7mm; padding-top: 4.5mm; }
.cols-1 { grid-template-columns: minmax(0, 1fr); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 5mm; }
/* one line: prompt and answer line side by side, rows packed tightly */
.ws-row.ws-lay-line { padding-top: 3mm; }
.ws-row.ws-lay-line .ws-prompt { line-height: 1.5; }
/* the answer line takes the rest of the line and only drops below when there is less than 8 mm left */
.ws-row.ws-lay-line .ws-prompt { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1mm; }
.ws-row.ws-lay-line .gblank { flex: 1 0 8mm; min-width: 8mm; max-width: 24mm; margin: 0; }
.ws-row.cols-4 .ws-prompt { font-size: 10.5pt; }
.ws-row.cols-4 .ws-task { grid-template-columns: 6mm minmax(0, 1fr) auto; column-gap: 1mm; }
/* compact block: tighter heading, rules and row gaps */
.ws-bh.ws-compact { padding: 4mm 0 1mm; }
.ws-bh.ws-compact .ws-binstr { margin-top: .2mm; }
.ws-row.ws-compact { padding-top: 2.5mm; }
.ws-row.ws-compact.ws-lay-line { padding-top: 1.6mm; }
.ws-row.ws-compact .ws-ans { margin-top: 1mm; }
.ws-task { position: relative; display: grid; grid-template-columns: 7mm minmax(0, 1fr) auto; column-gap: 1.5mm; align-items: start; }
.ws-no { font-weight: 600; font-size: 11.5pt; line-height: 1.45; font-variant-numeric: lining-nums tabular-nums; }
.ws-body { min-width: 0; }
.ws-prompt { font-size: 11.5pt; line-height: 1.45; font-variant-numeric: lining-nums tabular-nums; overflow-wrap: break-word; }
.ws-prompt p { margin: 0; }
.ws-pts { font-family: var(--f-label); font-size: 8pt; font-weight: 600; letter-spacing: .06em; color: var(--ws-ink2); border: .25mm solid var(--ws-rule); border-radius: .8mm; padding: .5mm 1.3mm .3mm; white-space: nowrap; margin-top: .8mm; line-height: 1.1; }
.ws-ans { grid-column: 2 / 4; margin-top: 1.5mm; }
/* answer space: vector backgrounds stay crisp on screen and paper (thin CSS gradients can vanish at some zoom levels) */
.ws-lines { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' preserveAspectRatio='none'%3E%3Crect x='0' y='7.7' width='10' height='.3' fill='%23a0a0a0'/%3E%3C/svg%3E") 0 0 / 100% 8mm repeat-y; }
.ws-squared { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' viewBox='0 0 5 5'%3E%3Cpath d='M0 .1H5M.1 0V5' stroke='%23c4c4c4' stroke-width='.2' fill='none'/%3E%3C/svg%3E") 0 0 / 5mm 5mm repeat; border-right: .2mm solid #c4c4c4; border-bottom: .2mm solid #c4c4c4; }
.ws-blank { background: none; }
.ws-re { position: absolute; right: 0; bottom: 0; width: 7mm; height: 7mm; border-radius: 50%; border: .3mm solid var(--ws-rule); background: #fff; color: var(--ws-ink2); font-size: 11pt; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; display: grid; place-items: center; padding: 0; }
.ws-task:hover .ws-re, .ws-re:focus-visible { opacity: 1; }
.ws-re:hover { border-color: var(--ws-ink); color: var(--ws-ink); }
@media screen and (hover: none) { .ws-re { opacity: .55; } .ws-task { padding-right: 8mm; } }  /* touch: no hover, so keep the button visible and leave it its own space */

/* maths inside tasks (made by js/gen) */
.gm { white-space: nowrap; }
.cols-3 .gm, .cols-4 .gm { white-space: normal; }
.gf { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: .88em; line-height: 1.12; margin: 0 .1em; }
.gf > span:first-child { border-bottom: .25mm solid currentColor; padding: 0 .15em .05em; }
.gf > span:last-child { padding-top: .05em; }
.gsp { display: inline-block; width: .12em; }
.gblank { display: inline-block; min-width: 15mm; height: 1em; border-bottom: .3mm solid var(--ws-ink); vertical-align: baseline; margin: 0 .5mm; }
.gcol { border-collapse: collapse; font-size: 13pt; margin: .8mm 0 0 1mm; font-variant-numeric: lining-nums tabular-nums; }
.gcol td { width: 5.5mm; height: 6.5mm; padding: 0; text-align: center; vertical-align: middle; border: .2mm solid #e3e3e3; line-height: 1; }
.gcol td.gc-op { border: 0; width: 5mm; font-size: 12pt; }
.gcol tr.gc-last td:not(.gc-op) { border-bottom: .5mm solid var(--ws-ink); }
.gcol tr.gc-ans td { height: 7.5mm; }
.gp-intro { margin: 0; }
.gparts { list-style: none; margin: 1.6mm 0 0; padding: 0 0 0 6mm; }
.gparts li { position: relative; margin: .9mm 0 0; }
.gparts li::before { content: attr(data-l); position: absolute; left: -6mm; font-weight: 600; }

/* the solution key */
.ws-keyhead { padding-bottom: 3mm; border-bottom: .5mm solid var(--ws-ink); }
.ws-keyhead .ws-meta { margin-top: 1.5mm; }
.ws-bh-key { padding-top: 5.5mm; }
.ws-krow { display: grid; column-gap: 7mm; padding-top: 3.2mm; }
.ws-kt { display: grid; grid-template-columns: 7mm minmax(0, 1fr); column-gap: 1.5mm; }
.ws-kbody { min-width: 0; }
.ws-kans { font-weight: 600; font-size: 11pt; line-height: 1.4; }
.ws-kans .gparts { margin-top: 0; }
.ws-kans .gparts li { margin-top: .4mm; }
.ws-ksteps { margin: .8mm 0 0; padding: 0; list-style: none; color: var(--ws-ink2); font-size: 9.5pt; line-height: 1.42; }
.ws-ksteps li { padding-left: 3mm; text-indent: -3mm; }
.ws-ksteps li::before { content: "– "; color: var(--ws-ink3); }
.ws-ksteps .gf { text-indent: 0; }

/* ---------- print: only the A4 pages ---------- */
@page { size: A4; margin: 15mm; }
@media print {
  html, body { background: #fff !important; }
  body { padding: 0 !important; margin: 0 !important; }
  .topbar, .site-foot, .progress, .bld-hero, .bld-side, .bld-bar, .ws-re, .toast, .search-dlg, .mega, .ws-measure, noscript { display: none !important; }
  .shell, main, .bld, .bld-view { display: block !important; margin: 0 !important; padding: 0 !important; max-width: none !important; width: auto !important; }
  .bld-stage { height: auto !important; overflow: visible !important; }
  .bld-pages { transform: none !important; margin: 0 !important; width: 180mm !important; }
  .ws-page { width: 180mm; height: auto; padding: 0; margin: 0; box-shadow: none; break-after: page; page-break-after: always; break-inside: avoid; }
  .ws-page:last-child { break-after: auto; page-break-after: auto; }
  .ws-in { height: 265mm; }
  .ws-task, .ws-row, .ws-krow, .ws-bh { break-inside: avoid; }
}