/* Final Register — organiser set-up */
[hidden] { display: none !important; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { color: var(--margin); }
.wz { padding-top: 16px; padding-bottom: 64px; }
.wz h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; margin: 0 0 18px; }
.wz-intro { max-width: var(--measure); }
.wz-intro .lede { font-size: 1.2rem; }
.hint { color: var(--pencil); font-size: 0.95rem; }

.setup-list { list-style: none; padding: 0; margin: 0 0 24px; max-width: 980px; }
.setup-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.setup-name { font-weight: 700; font-size: 1.1rem; }
.setup-status { color: var(--pencil); }

.wz-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }

/* The step list is a class register: one row per step, ticked when done */
.register { padding-top: 6px; }
.register-title { font-family: var(--display); font-weight: 800; font-size: 1.6rem; margin: 0 0 6px; }
.register ol { list-style: none; margin: 0 0 18px; padding: 0; border-top: 2px solid var(--ink); }
.register li { border-bottom: 1px solid var(--rule); }
.register li button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 2px; background: none; border: 0; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.register li button:disabled { color: var(--pencil); cursor: default; }
.register .box { width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 3px; flex: none; position: relative; background: var(--chalk); }
.register li.done .box::after { content: ""; position: absolute; left: 5px; top: 0; width: 6px; height: 12px; border: solid var(--margin); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.register li[aria-current="step"] button { font-weight: 700; }
.register li[aria-current="step"] .box { border-color: var(--margin); }

.wz-form { max-width: none; margin-top: 0; }
.wz-step { border: 0; margin: 0; padding: 0; display: grid; gap: 18px; min-width: 0; }
.wz-step h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1; margin: 0; }
.wz-step h2:focus { outline: none; }
.wz-step h3 { font-size: 1.15rem; margin: 10px 0 -6px; }
.stack { display: grid; gap: 10px; }
.form input.short { max-width: 220px; }
.wz-step h3 + .hint { margin: 0; }
.field-label { font-weight: 700; margin: 0 0 6px; }
.inline-radios { display: flex; flex-wrap: wrap; gap: 10px 28px; min-height: 52px; align-items: center; }
/* a choice of a few options, shown as cards side by side */
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.form .opts .check { padding: 14px 16px; border: 2px solid var(--rule); border-radius: 8px; background: var(--chalk); cursor: pointer; }
.form .opts .check:has(input:checked) { border-color: var(--ink); box-shadow: inset 4px 0 0 var(--margin); }
.form .opts .check:has(input:disabled) { cursor: default; color: var(--pencil); }

.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.product { display: grid; gap: 8px; align-content: start; }
.product .linkish { justify-self: start; }
.product-img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--chalk); border-radius: 4px; }
.choice { position: relative; display: grid; gap: 4px; padding: 16px; border: 2px solid var(--rule); border-radius: 8px; background: var(--chalk); cursor: pointer; font-weight: 400; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 4px 0 0 var(--margin); }
.choice:has(input:focus-visible) { outline: 3px solid var(--margin); outline-offset: 3px; }
.choice-title { font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1; }
.choice-price { font-weight: 700; font-size: 1.15rem; }
.choice-note { color: var(--pencil); font-size: 0.95rem; }

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.swatch-img { width: 84px; height: 84px; object-fit: contain; }
.swatch:has(input:checked)::after { content: ""; position: absolute; top: 6px; right: 8px; width: 7px; height: 13px; border: solid var(--margin); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.swatch { position: relative; }
.colour-tools { display: flex; gap: 18px; align-items: baseline; margin-top: -6px; }
/* one panel per garment offered */
.g-panel { display: grid; gap: 14px; padding-top: 18px; border-top: 2px solid var(--rule); min-width: 0; }
.g-panel h3 { margin: 4px 0 -6px; }
/* colours on the left, the front on the right; one column on smaller screens */
.g-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 20px clamp(24px, 3vw, 44px); align-items: start; }
.g-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.g-col + .g-col { padding-left: clamp(20px, 2.5vw, 36px); border-left: 2px solid var(--rule); }
.g-panel .g-panel-title { font-family: var(--display); font-weight: 800; font-size: 1.9rem; line-height: 1; margin: 0; }
#garment-panels { display: grid; gap: 24px; }
.subgroup { display: grid; gap: 18px; padding-left: 16px; border-left: 3px solid var(--rule); }

.print-colours { display: grid; gap: 12px; }
.print-colours h3 { margin: 0; }
.pc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.pc-list li { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 12px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--rule); }
.pc-list li.on { background: var(--wash); box-shadow: inset 4px 0 0 var(--margin); }
.pc-hoodie { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(27, 35, 80, 0.25); }
.pc-chips { display: flex; gap: 4px; }
.pc-chip { width: 22px; height: 22px; border-radius: 4px; border: 1px solid rgba(27, 35, 80, 0.35); }
.button.small { padding: 6px 12px; font-size: 0.95rem; }

.product-dialog { width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border: 2px solid var(--ink); border-radius: 10px; padding: 0; background: var(--paper); color: var(--ink); }
.product-dialog::backdrop { background: rgba(27, 35, 80, 0.45); }
.pd-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px; background: var(--paper); border-bottom: 2px solid var(--ink); }
.pd-head h2 { font-family: var(--display); font-weight: 800; font-size: 2rem; margin: 0; }
.pd-body { padding: 16px 20px 24px; }
.pd-body h3 { margin: 22px 0 8px; }
.pd-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 210px); gap: 10px; overflow-x: auto; }
.pd-gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
.pd-summary { font-size: 1.15rem; }
.pd-features { margin: 0; padding-left: 20px; }
.pd-flats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.pd-flats figure { margin: 0; text-align: center; font-size: 0.9rem; }
.pd-flats img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.table-wrap { overflow-x: auto; }
.size-table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 0.95rem; }
.size-table th, .size-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--rule); }
.size-table thead th { border-bottom: 2px solid var(--ink); }
.swatch { display: grid; justify-items: center; gap: 6px; padding: 8px 4px; border: 2px solid transparent; border-radius: 8px; cursor: pointer; font-weight: 400; text-align: center; }
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch .chip { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(27, 35, 80, 0.25); }
.swatch-name { font-size: 0.9rem; line-height: 1.2; }
.swatch:has(input:checked) { border-color: var(--ink); background: var(--chalk); }
.swatch:has(input:focus-visible) { outline: 3px solid var(--margin); outline-offset: 2px; }

.estimate { font-weight: 700; margin: -6px 0 0; min-height: 1.6em; }
.close-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 10px 28px; align-items: end; }
.close-row .estimate { margin: 0 0 12px; }
@media (max-width: 620px) { .close-row { grid-template-columns: minmax(0, 1fr); } .close-row .estimate { margin: 0; } }
.wz-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.wz-form.locked .wz-actions .button:not([data-back]) { display: none; }

.designer-wrap { grid-column: 1 / -1; margin-top: 8px; }
.designer-wrap iframe { width: 100%; height: 900px; border: 2px solid var(--ink); border-radius: 8px; background: var(--chalk); display: block; }
.designer-actions { margin-top: 14px; }
.designer-wrap.offstage { position: absolute; left: -10000px; top: 0; width: 1200px; }

.review-list { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); column-gap: 40px; }
.review-list div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.review-list dt { color: var(--pencil); }
.review-list dd { margin: 0; }
.review-price { font-weight: 700; font-size: 1.1rem; }
.proofs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.proof { margin: 0; }
.proof img { width: 100%; border: 1px solid var(--rule); border-radius: 6px; display: block; }
.proofs:has(.proof-pair) { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.proofs .proof-pair { grid-column: 1 / -1; }
.proofs:has(.proof-pair) .proof:not(.proof-pair) { max-width: 300px; }
.proof-pics { display: grid; grid-template-columns: 1fr 1fr 0.72fr; gap: 10px; align-items: start; }
.proof-pics img { background: #fff; }
.proof-pic { display: grid; gap: 6px; align-content: start; font-size: 0.95rem; }
@media (max-width: 620px) { .proof-pics { grid-template-columns: 1fr 1fr; } .proof-pics .proof-close { grid-column: 1 / -1; max-width: 70%; justify-self: center; } }
.proof figcaption { font-size: 0.95rem; margin-top: 6px; display: flex; justify-content: space-between; gap: 8px; }
.problems { background: var(--wash); border-left: 4px solid var(--margin); padding: 12px 16px; }
.problems p { margin: 0 0 6px; }
.problems ul { margin: 0; padding-left: 20px; }

@media (max-width: 1180px) {
  .g-cols { grid-template-columns: minmax(0, 1fr); }
  .g-col + .g-col { padding-left: 0; border-left: 0; padding-top: 16px; border-top: 2px solid var(--rule); }
}
@media (max-width: 860px) {
  .wz-grid { grid-template-columns: 1fr; }
  .designer-wrap iframe { height: 1500px; }
}
@media (max-width: 520px) {
  .products, .review-list { grid-template-columns: 1fr; }
  .pc-list li { grid-template-columns: 28px 1fr auto; }
  .pc-list li .pc-chips { grid-column: 2; }
  .setup-list li { grid-template-columns: 1fr auto; }
  .setup-list li .button { grid-column: 1 / -1; }
}

/* the front choice: the extra questions sit under the option they belong to */
.front-sub { display: grid; gap: 10px; margin: -4px 0 6px 30px; padding-left: 14px; border-left: 2px solid var(--rule); }
.front-sub[hidden], .front-method[hidden] { display: none; }
.logo-box { display: grid; gap: 8px; padding: 16px 0 4px; border-top: 2px solid var(--rule); max-width: 62ch; }
.logo-box[hidden] { display: none; }
.logo-box h3 { margin: 0; }
.logo-file { margin: 0; overflow-wrap: anywhere; }
.logo-pick { justify-self: start; }
.logo-pick.is-busy { opacity: 0.5; pointer-events: none; }
.logo-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.logo-actions .linkish[hidden] { display: none; }
.logo-preview[hidden] { display: none; }
.logo-preview { display: grid; gap: 6px; }
.logo-thumb { width: 180px; height: 180px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden;
  background-color: #fff; background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.logo-thumb img { max-width: 92%; max-height: 92%; object-fit: contain; }
.logo-thumb .hint { padding: 8px; text-align: center; }
.logo-icon { font: 800 1.4rem var(--display, sans-serif); color: var(--pencil); border: 2px solid var(--pencil); border-radius: 6px; padding: 18px 14px; background: #fff; }
.wz-actions button:disabled, .register button:disabled { opacity: 0.5; cursor: wait; }
#logo-ok-row[hidden] { display: none; }
.front-method { display: grid; gap: 6px; margin-left: 30px; }
.front-sub input:not([type]) { max-width: 22em; }

/* What you'll offer: one row per garment with a clear on/off button */
.offer-rows { display: grid; gap: 12px; }
.offer-item { border: 2px solid var(--rule); border-radius: 8px; background: var(--chalk); overflow: hidden; min-width: 0; }
.offer-item.on { border-color: var(--ink); box-shadow: inset 5px 0 0 var(--margin); }
.offer-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 12px 16px 12px 12px; }
.offer-item.on .offer-row { background: var(--wash); }
/* the chosen garment's colours and front, inside its own card */
.offer-panel { padding: 4px 18px 20px 22px; border-top: 2px solid var(--rule); }
.offer-panel[hidden] { display: none; }
.offer-panel .g-panel { border-top: 0; padding-top: 6px; }
.offer-img { width: 112px; height: 112px; object-fit: contain; background: var(--chalk); border-radius: 6px; display: block; }
.offer-body { display: grid; gap: 3px; justify-items: start; }
.offer-title { font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1; }
.offer-price { font-weight: 700; }
.offer-note { color: var(--pencil); font-size: 0.95rem; }
.form .offer-toggle { position: relative; display: inline-flex; flex-direction: row; align-items: center; gap: 10px; padding: 10px 16px; border: 2px solid var(--ink); border-radius: 6px; background: var(--chalk); font-weight: 700; cursor: pointer; white-space: nowrap; }
.offer-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.offer-box { width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 3px; position: relative; flex: none; }
.offer-toggle .offer-on { display: none; }
.offer-toggle:has(input:checked) { background: var(--ink); color: var(--chalk); }
.offer-toggle:has(input:checked) .offer-box { border-color: var(--chalk); }
.offer-toggle:has(input:checked) .offer-box::after { content: ""; position: absolute; left: 5px; top: 0; width: 6px; height: 12px; border: solid var(--chalk); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.offer-toggle:has(input:checked) .offer-on { display: inline; }
.offer-toggle:has(input:checked) .offer-off { display: none; }
.offer-toggle:has(input:focus-visible) { outline: 3px solid var(--margin); outline-offset: 3px; }
.offer-summary { font-weight: 700; margin: 4px 0 8px; }
@media (max-width: 620px) {
  .offer-panel { padding: 4px 12px 16px 14px; }
  .offer-row { grid-template-columns: 84px minmax(0, 1fr); }
  .offer-img { width: 84px; height: 84px; }
  .offer-toggle { grid-column: 1 / -1; justify-content: center; }
}

/* ---------------------------------------------------------------- organiser pack (live schools) */
.pack-back { margin: 0 0 8px; }
.pack-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px clamp(20px, 3vw, 36px); margin: 24px 0 12px; max-width: 880px; }
.pack-key { border: 2px solid var(--ink); border-radius: 8px; padding: 14px 18px; background: var(--paper); }
.pack-key p { margin: 0 0 10px; }
.pack-key .hint { margin: 0; }
.pack-val { font-weight: 700; overflow-wrap: anywhere; }
.pack-code { font-family: var(--display); font-size: 2rem; line-height: 1.1; letter-spacing: 0.06em; }
.pack-docs h2 { margin-top: 12px; }
.pack-more { margin-top: 20px; }
@media (max-width: 860px) { .pack-keys { grid-template-columns: minmax(0, 1fr); } }
/* logo proofs on the organiser's page (Ben, 30 Oct 2026) */
.pack-proof { max-width: 880px; margin: 8px 0 20px; }
.pack-proof[hidden] { display: none; }
.pack-proof > h2 { margin: 12px 0 6px; }
.proof-item { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-top: 1px solid var(--rule); }
.proof-item h3 { margin: 0 0 6px; }
.proof-item p { margin: 0 0 8px; }
.proof-item .logo-thumb { width: 220px; height: 220px; }
.proof-item.waiting { grid-template-columns: minmax(0, 1fr); }
.proof-answer { font-weight: 700; }
.proof-change { display: grid; gap: 8px; max-width: 520px; margin-top: 6px; }
.proof-change[hidden] { display: none; }
.proof-change textarea { font: inherit; padding: 8px 10px; border: 2px solid var(--ink); border-radius: 6px; min-height: 6em; }
.proof-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 600px) { .proof-item { grid-template-columns: minmax(0, 1fr); } .proof-item .logo-thumb { width: 180px; height: 180px; } }

/* the letter and poster are drawn into #print-area and printed on their own, one A4 page */
.print-area { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  body.printing { background: #fff !important; margin: 0; }
  body.printing > *:not(#print-area) { display: none !important; }
  body.printing .print-area { display: block; }
}
.print-page { width: 210mm; height: 296mm; box-sizing: border-box; overflow: hidden; color: #1b2350; background: #fff;
  font-family: var(--text); -webkit-print-color-adjust: exact; print-color-adjust: exact; position: relative; }
.print-page svg { display: block; width: 100%; height: auto; }

.pl-letter { padding: 18mm 20mm 16mm; font-size: 10.5pt; line-height: 1.45; }
.pl-letter h1 { font-family: var(--display); font-weight: 800; font-size: 26pt; line-height: 1.05; margin: 0 0 7mm; }
.pl-letter h2 { font-size: 11.5pt; margin: 5mm 0 2mm; }
.pl-letter p { margin: 0 0 3mm; max-width: none; }
.pl-letter ul, .pl-letter ol { margin: 0 0 3mm; padding-left: 6mm; }
.pl-letter li { margin: 0 0 1.5mm; }
.pl-order { display: grid; grid-template-columns: 1fr 30mm; gap: 8mm; align-items: center; border: 0.5mm solid #1b2350; border-radius: 2mm; padding: 4mm 5mm 2mm; margin-bottom: 4mm; }
.pl-code { font-family: var(--display); font-size: 15pt; letter-spacing: 0.06em; white-space: nowrap; }
.pl-sign { margin-top: 6mm !important; }
.pl-foot { position: absolute; left: 20mm; right: 20mm; bottom: 10mm; margin: 0 !important; font-size: 8pt; color: #5e6475; }

/* the poster keeps the site's exercise-book look: pale rules and one red margin line */
.pp-poster { padding: 16mm 16mm 12mm 30mm; display: flex; flex-direction: column;
  background-image: linear-gradient(to right, transparent 21mm, #d64545 21mm, #d64545 21.6mm, transparent 21.6mm),
    repeating-linear-gradient(to bottom, transparent 0, transparent 9.5mm, #c9d8ee 9.5mm, #c9d8ee 9.8mm); }
.pp-kicker { font-weight: 700; font-size: 16pt; margin: 0 0 2mm; }
.pp-poster h1 { font-family: var(--display); font-weight: 800; font-size: 58pt; line-height: 0.92; margin: 0 0 4mm; text-transform: none; }
/* the photos have white backgrounds, so they sit on a white card rather than the ruled paper */
.pp-pics { position: relative; flex: 1 1 auto; min-height: 0; margin: 0 0 5mm; background: #fff; border: 0.6mm solid #1b2350; border-radius: 2.5mm; }
.pp-pics img { position: absolute; object-fit: contain; }
.pp-back { left: 3%; top: 3%; width: 72%; height: 94%; object-position: left center; }
.pp-front { right: 3%; bottom: 4%; width: 40%; height: 56%; object-position: right bottom; }
.pp-names { font-size: 18pt; font-weight: 700; margin: 0 0 5mm; }
.pp-order { display: grid; grid-template-columns: 46mm 1fr; gap: 7mm; align-items: center; background: #fff; border: 0.6mm solid #1b2350; border-radius: 2.5mm; padding: 4mm; }
.pp-by { font-family: var(--display); font-weight: 800; font-size: 24pt; line-height: 1; margin: 0 0 3mm; }
.pp-link { font-weight: 700; font-size: 11pt; overflow-wrap: anywhere; margin: 0 0 2mm; }
.pp-code { font-size: 11pt; margin: 0; }
.pp-foot { font-family: var(--display); font-weight: 800; font-size: 13pt; margin: 4mm 0 0; color: #1b2350; }
/* logo proofs v2 (1 Nov 2026): colour versions on garment colours, the large view */
.proof-item.proof-logo { grid-template-columns: minmax(0, 1fr); }
.proof-versions { display: flex; flex-wrap: wrap; gap: 18px; margin: 8px 0 12px; }
.proof-version { width: 220px; }
.proof-version .logo-thumb { cursor: zoom-in; padding: 0; font: inherit; }
.logo-thumb.on-colour { background-image: none; }
.logo-thumb.on-colour .hint { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.proof-vname { font-weight: 700; margin: 6px 0 2px; }
.proof-new { display: inline-block; font-size: 0.8rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--ink); color: var(--chalk); }
.proof-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.proof-sw { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 0.85rem; padding: 3px 8px 3px 4px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); color: var(--ink); cursor: pointer; }
.proof-sw span { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.25); }
.proof-sw[aria-pressed="true"] { border-color: var(--ink); font-weight: 700; }
.proof-which { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.proof-which legend { font-weight: 700; margin-bottom: 4px; padding: 0; }
.proof-which-list { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-left: 26px; }
.proof-viewer { border: 2px solid var(--ink); border-radius: 8px; padding: 16px; width: min(1000px, calc(100vw - 24px)); max-height: calc(100vh - 24px); background: var(--paper); color: var(--ink); }
.proof-viewer::backdrop { background: rgba(27, 35, 80, 0.6); }
.proof-viewer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.proof-viewer-head h2 { margin: 0; font-size: 1.2rem; }
.proof-viewer-pic { display: grid; place-items: center; height: min(70vh, 760px); border-radius: 6px; overflow: hidden; }
.proof-viewer-pic img { max-width: 92%; max-height: 92%; object-fit: contain; }
@media (max-width: 600px) { .proof-version { width: 180px; } .proof-viewer-pic { height: 60vh; } }

/* sizes, when the school pays (1 Nov 2026) */
.pack-sizes { max-width: 1040px; margin: 8px 0 24px; gap: 12px; }
.pack-sizes[hidden], .pack-sizes [hidden] { display: none; }
.pack-sizes h2, .pack-sizes h3, .pack-sizes p { margin: 0; }
.sz-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; margin-top: 8px; }
.sz-count { font-weight: 700; color: var(--pencil); }
.sz-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.sz-sheet { display: flex; flex-wrap: wrap; gap: 8px; }
.pack-sizes .sz-todo { font-weight: 400; }
.sz-table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 0.95rem; }
.sz-table th, .sz-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.sz-table thead th { border-bottom: 2px solid var(--ink); font-size: 0.9rem; white-space: nowrap; }
.sz-table thead .hint { font-weight: 400; }
.sz-table tbody th { font-weight: 700; white-space: nowrap; }
.sz-table tr.sz-first > * { border-top: 1px solid var(--pencil); }
.sz-table tr.sz-gap > th:first-child { box-shadow: inset 4px 0 0 var(--margin); }
.sz-table tr.sz-none { color: var(--pencil); }
.sz-same { color: var(--pencil); font-weight: 400; }
.sz-by, .sz-na { color: var(--pencil); white-space: nowrap; font-size: 0.9rem; }
.pack-sizes .sz-table input, .pack-sizes .sz-table select { padding: 5px 8px; border-width: 1px; border-radius: 4px; width: auto; }
.pack-sizes .sz-table select[data-f="size"] { min-width: 5.5em; }
.pack-sizes .sz-table input[data-f="nick"], .pack-sizes .sz-table input[data-f="label"] { width: 11em; }
.pack-sizes .sz-table input[data-f="initials"], .pack-sizes .sz-table input[data-f="qty"] { width: 4.5em; }
.pack-sizes .sz-table input[type="checkbox"] { width: 20px; height: 20px; }
.sz-sub { margin-top: 12px; }
.sz-total { background: var(--wash); border-radius: 8px; padding: 12px 16px; }
.sz-total:empty { display: none; }
.sz-total p + *, .sz-lines { margin: 6px 0 0; }
.sz-lines { padding-left: 1.2em; }
.sz-final { border: 2px solid var(--ink); border-radius: 8px; padding: 16px 18px; display: grid; gap: 14px; background: var(--paper); }
.sz-done { background: var(--wash); border-left: 4px solid var(--margin); padding: 14px 18px; display: grid; gap: 8px; }
.sz-late { margin-top: 18px; display: grid; gap: 10px; }
.sz-late[hidden] { display: none; }
.sz-late h3, .sz-late p { margin: 0; }
.sz-late-list { margin: 0; padding-left: 1.2em; }
@media (max-width: 700px) { .pack-sizes .pair { grid-template-columns: minmax(0, 1fr); } }

/* orders so far, when parents pay (1 Nov 2026) */
.pack-orders { max-width: 880px; margin: 8px 0 20px; border: 2px solid var(--ink); border-radius: 8px; padding: 14px 18px; background: var(--paper); }
.pack-orders[hidden] { display: none; }
.pack-orders h2 { margin: 0 0 6px; }
.pack-orders h3 { margin: 14px 0 4px; font-size: 1.05rem; }
.pack-orders p { margin: 4px 0; }
.po-sizes { margin: 10px 0 0; }
.po-sizes summary { cursor: pointer; font-weight: 700; }
.po-names { columns: 3 12em; column-gap: 24px; padding-left: 1.2em; margin: 6px 0; }
.po-all { font-weight: 700; color: #1d6b3a; }