/* The pub quiz builder (tools/pub-quiz.html, run by tools/pub-quiz.js).
   The hero and its live example (pqd-) sit beside the class builders' own
   (css/tabs/class-builder.css). The app is all under .pq, so none of it
   leaks into the site and the site's own .brand, .card or .stage never
   reach in: a sticky bar with four modes (Build, Present, Scores, Print)
   under the site's top bar, then the view for the mode. Its colours are the
   site's tokens, so it follows dark mode and the accessible palette; the
   projector stage stays dark and the printed pages stay on white paper. */

/* ---------- the hero's live example ----------
   Four round mats are dealt onto the table, one a round, and three teams'
   scores grow beside them; the third round is one team's joker and counts
   double, and that team wins. Only transform and opacity change. With no
   script, or reduced motion, it holds the finished frame. */
.pqd { display: flex; flex-direction: column; }
.pqd .cb-demo-cap { flex-wrap: wrap; row-gap: 2px; }
.pqd-word { display: inline-grid; margin-left: auto; contain: layout paint; }
.pqd-word > * { grid-area: 1 / 1; text-align: right; font-style: normal; }
.pqd-word > i { visibility: hidden; }
.pqd-mats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 14px; }
.pqd-slot { position: relative; display: grid; justify-items: center; gap: 5px; min-width: 0; }
/* Where each mat lands: a dashed ring on the table until it does. */
.pqd-slot::before { content: ""; position: absolute; top: 0; left: 50%; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; border: 1.5px dashed var(--line-strong); }
.pqd-mat { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--ink); border: 2px solid var(--ink); box-shadow: inset 0 0 0 3px var(--paper-white), inset 0 0 0 4.5px var(--ink); transform: rotate(var(--r, 0deg)); transition: transform .5s cubic-bezier(.2, .9, .3, 1.2), opacity .3s ease-out; }
.pqd-mat.rev { background: color-mix(in srgb, var(--riso-green) 24%, var(--paper-white)); }
.pqd-mat.bre { background: color-mix(in srgb, var(--riso-pink) 26%, var(--paper-white)); }
.pqd-mat.out { opacity: 0; transform: translate(-46px, -34px) rotate(-40deg) scale(.7); }
.pqd-slot small { max-width: 100%; font-family: var(--font-mono); font-size: 9.5px; line-height: 1.2; letter-spacing: .02em; text-align: center; color: var(--ink-dim); transition: opacity .3s; }
.pqd-slot .out + small { opacity: 0; }
/* The joker: a star stamped on the mat whose round counts double. */
.pqd-star { position: absolute; top: -7px; right: -9px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--riso-pink); color: var(--on-brand); border: 1.5px solid var(--ink); font-size: 12px; line-height: 1; transition: transform .35s cubic-bezier(.2, .9, .3, 1.4), opacity .2s; }
.pqd-star.out { opacity: 0; transform: scale(0) rotate(-90deg); }
/* One grid for the three rows, so the bars line up under the longest name. */
.pqd-teams { display: grid; grid-template-columns: max-content minmax(36px, 1fr) 1.9em; gap: 7px 8px; }
.pqd-team { position: relative; display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; gap: 8px; align-items: center; font-size: 12.5px; }
.pqd-team b { font-family: var(--font-display); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pqd-track { height: 12px; border: 1.5px solid var(--ink); border-radius: 4px; overflow: hidden; background: var(--paper); }
.pqd-fill { display: block; height: 100%; background: var(--riso-pink); transform-origin: 0 50%; transform: scaleX(var(--s, 0)); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.pqd-team.win .pqd-fill { background: var(--riso-green); }
.pqd-pts { font-family: var(--font-mono); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
/* The winner's row lights up behind its words. */
.pqd-team::before { content: ""; position: absolute; inset: -3px -6px; border-radius: 6px; background: color-mix(in srgb, var(--riso-green) 22%, transparent); opacity: 0; transition: opacity .4s; }
.pqd-team.win::before { opacity: 1; }
.pqd-team > * { position: relative; }
.cb-demo .pqd-foot { margin: 14px 0 0; max-width: none; line-height: 1.4; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ink-dim); }
.pqd.fade .pqd-mat, .pqd.fade .pqd-fill, .pqd.fade .pqd-slot small { opacity: 0; transition: opacity .45s; }
@media (prefers-reduced-motion: reduce) {
  .pqd-mat, .pqd-star, .pqd-fill, .pqd-team::before, .pqd-slot small { transition: none !important; }
}
@container (max-width: 300px) { .pqd-mat, .pqd-slot::before { width: 44px; height: 44px; font-size: 16px; } .pqd-slot::before { margin-left: -22px; } .pqd-team { font-size: 12px; } }
.pqd { container-type: inline-size; }

/* The builder is dense: its page is a little wider than the other builders'. */
main.pr-page.pq-page { max-width: 1320px; }
#build { scroll-margin-top: calc(var(--pq-top, 93px) + 14px); }
.pq-app { margin: 0 0 40px; }
.pq-app > .cb-build-h { margin-bottom: 14px; }

/* ---------- the app ---------- */
.pq {
  --bg: var(--paper); --bg2: var(--paper-white); --bg3: color-mix(in srgb, var(--ink) 7%, var(--paper-white));
  --ink-soft: var(--ink-dim); --ink-mute: var(--ink-dim);
  --pink: var(--riso-pink); --pink-ink: color-mix(in srgb, var(--riso-pink-deep) 70%, var(--ink));
  --pink-wash: color-mix(in srgb, var(--riso-pink) 22%, var(--paper-white));
  --green: var(--riso-green); --green-ink: color-mix(in srgb, var(--riso-green-deep) 75%, var(--ink));
  --green-wash: color-mix(in srgb, var(--riso-green) 20%, var(--paper-white));
  --amber: #8a5000; --amber-wash: color-mix(in srgb, var(--riso-yellow) 30%, var(--paper-white));
  --line: var(--ink);
  --stage: #17332a; --stage-ink: #f4faf6; --stage-pink: #ffb3d1; --stage-green: #a6ebcb;
  --f-display: var(--font-display); --f-body: var(--font-display); --f-serif: var(--font-serif); --f-mono: var(--font-mono);
  position: relative; color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.5;
}
:root[data-theme="dark"] .pq { --amber: var(--riso-yellow); --pink-wash: color-mix(in srgb, var(--riso-pink) 24%, var(--paper-white)); --green-wash: color-mix(in srgb, var(--riso-green) 20%, var(--paper-white)); --stage: #0d1a14; }
.pq *, .pq *::before, .pq *::after { box-sizing: border-box; }
.pq [hidden] { display: none !important; }
/* Element resets at no weight, so the shared picker's own (.cb-btn,
   .cb-seg) and everything else here win over them. */
:where(.pq) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.pq) :where(button) { cursor: pointer; }
.pq :focus-visible { outline: 2.5px solid var(--riso-pink-deep); outline-offset: 2px; }
:where(.pq) :where(h2, h3) { font-family: var(--f-display); margin: 0; text-wrap: balance; letter-spacing: -.015em; }
:where(.pq) h2 { font-size: 22px; font-weight: 750; }
:where(.pq) h3 { font-size: 16px; font-weight: 700; }
:where(.pq) p { margin: 0; }
:where(.pq) a { color: inherit; }

/* The bar: sticky under the site's top bar (tools/pub-quiz.js measures it
   into --pq-top on main). */
.pq-bar { position: sticky; top: var(--pq-top, 0px); z-index: 20; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 9px 12px 9px 16px; background: var(--paper-white); border: 1.5px solid var(--ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--riso-green); }
.pq-brand { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; margin-right: auto; min-width: 0; }
.pq-brand b { font-family: var(--f-display); font-weight: 800; font-size: 16px; overflow-wrap: anywhere; }
.pq-brand i { font-family: var(--f-mono); font-style: normal; font-size: 11.5px; letter-spacing: .04em; color: var(--ink-soft); white-space: nowrap; }
.pq .seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--bg2); max-width: 100%; }
.pq .seg button { border: 0; background: transparent; padding: 6px 13px; font-size: 13.5px; font-weight: 650; white-space: nowrap; }
.pq .seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg2); }
.pq .seg button:focus-visible { outline-offset: -4px; }
.pq-wrap { container: pqw / inline-size; padding: 18px 0 0; }

.pq .eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.pq .muted { color: var(--ink-soft); }
.pq .card { background: var(--bg2); border: 1.5px solid var(--line); border-radius: 10px; padding: 16px; min-width: 0; box-shadow: none; }
.pq .btn { border: 1.5px solid var(--line); background: var(--bg2); border-radius: 999px; padding: 7px 14px; font-weight: 650; font-size: 14px; line-height: 1.3; display: inline-flex; gap: 6px; align-items: center; text-decoration: none; color: var(--ink); }
.pq .btn:hover { background: var(--bg3); }
.pq .btn.primary { background: var(--ink); color: var(--bg2); }
.pq .btn.primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--bg2)); }
.pq .btn.sm { padding: 4px 10px; font-size: 12.5px; }
.pq .btn:disabled { opacity: .4; cursor: not-allowed; }
.pq .chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 650; line-height: 1.5; padding: 1px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.pq .chip.rev { color: var(--green-ink); background: var(--green-wash); border-color: transparent; }
.pq .chip.bre { color: var(--pink-ink); background: var(--pink-wash); border-color: transparent; }
.pq .chip.mode { color: var(--ink-soft); }
.pq .chip.warn { color: var(--amber); background: var(--amber-wash); border-color: transparent; }
.pq-toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 16px); background: var(--ink); color: var(--paper-white); padding: 10px 16px; border-radius: 10px; font-size: 14px; line-height: 1.4; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; z-index: 200; max-width: calc(100% - 32px); }
.pq-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* the beer-mat round badge */
.pq .mat { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 16px; background: var(--bg2); border: 2px solid var(--ink); box-shadow: inset 0 0 0 3px var(--bg2), inset 0 0 0 4.5px var(--ink); }
.pq .mat.rev { background: var(--green-wash); box-shadow: inset 0 0 0 3px var(--green-wash), inset 0 0 0 4.5px var(--ink); }
.pq .mat.bre { background: var(--pink-wash); box-shadow: inset 0 0 0 3px var(--pink-wash), inset 0 0 0 4.5px var(--ink); }
.pq .mat.hand { background: var(--amber-wash); box-shadow: inset 0 0 0 3px var(--amber-wash), inset 0 0 0 4.5px var(--ink); font-size: 12px; }

/* ---------- build ---------- */
.pq .course { margin-bottom: 16px; }
.pq .course-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-bottom: 10px; }
.pq .course-h span { color: var(--ink-soft); font-size: 14px; }
/* The picker draws once its topics arrive: until then a line says so, and
   its room is held so nothing below it jumps. */
.pq #pqPicker { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 150px; }
.pq #pqPicker > .cb-go { margin-top: auto; }
.pq #pqPicker .cb-go-act .cb-btn { padding: 8px 15px; font-size: 14.5px; }
.pq .titlerow { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; margin-bottom: 16px; }
.pq .titlerow .field { flex: 1 1 320px; }
.pq .field { display: grid; gap: 4px; min-width: 0; }
.pq .field label, .pq .field .lbl { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.pq .field input, .pq .field select, .pq .field textarea { width: 100%; border: 1.5px solid color-mix(in srgb, var(--ink) 35%, transparent); background: var(--bg); border-radius: 6px; padding: 8px 10px; }
.pq .field textarea { resize: vertical; }
.pq #pqTitle { font-family: var(--f-display); font-weight: 800; font-size: 22px; padding: 6px 10px; }
.pq .build { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr) minmax(0, 350px); gap: 18px; align-items: start; }
.pq .lib h3 { margin: 4px 0 8px; }
.pq .libsec { display: grid; gap: 8px; margin-bottom: 16px; }
.pq .lc { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: start; padding: 9px 10px; border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 6px; background: var(--bg); cursor: grab; text-align: left; }
.pq .lc:hover { border-color: var(--ink); }
.pq .lc b { font-family: var(--f-display); font-size: 14.5px; }
.pq .lc small { grid-column: 1 / -1; color: var(--ink-soft); font-size: 12.5px; line-height: 1.35; }
.pq .lc .chips { grid-column: 1 / -1; display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.pq .lc .add { border: 1.5px solid var(--line); background: var(--bg2); border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; font-weight: 800; font-size: 16px; line-height: 1; padding: 0; }
.pq .lc .add:hover { background: var(--ink); color: var(--bg2); }
.pq .lc.review { border-left: 5px solid var(--green); }
.pq .lc.breadth { border-left: 5px solid var(--pink); }

.pq .order { display: grid; gap: 10px; min-width: 0; }
.pq .handout { border: 2px dashed var(--amber); border-radius: 8px; padding: 10px; background: color-mix(in srgb, var(--amber-wash) 55%, transparent); }
.pq .handout .empty { font-size: 13px; color: var(--ink-soft); padding: 6px 4px; }
.pq .olist { display: grid; gap: 8px; min-height: 80px; padding: 6px; border-radius: 8px; }
.pq .olist.drag, .pq .handout.drag { outline: 2.5px dashed var(--riso-pink-deep); outline-offset: 2px; }
.pq .oi { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--bg2); cursor: grab; position: relative; }
.pq .oi[aria-current="true"] { box-shadow: 0 0 0 3px var(--riso-pink-deep); }
.pq .oi.gapwarn { border-style: dashed; }
.pq .oi .nm { font-family: var(--f-display); font-weight: 750; font-size: 15px; }
.pq .oi .meta { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.pq .oi .tools { display: flex; gap: 2px; }
.pq .oi .tools button { border: 0; background: transparent; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; color: var(--ink-soft); }
.pq .oi .tools button:hover { background: var(--bg3); color: var(--ink); }
.pq .oi.dropbefore::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 3px; border-radius: 2px; background: var(--riso-pink-deep); }
.pq .oi.dragging { opacity: .4; }
.pq .halfway { display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.pq .halfway::before, .pq .halfway::after { content: ""; flex: 1; border-top: 1.5px dashed color-mix(in srgb, var(--ink) 35%, transparent); }
.pq .balance { display: grid; gap: 8px; }
.pq .mix { display: flex; height: 12px; border-radius: 6px; overflow: hidden; border: 1.5px solid var(--line); }
.pq .mix span { display: block; flex: 1; }
.pq .mix .r { background: var(--green); }
.pq .mix .b { background: repeating-linear-gradient(-45deg, var(--pink) 0 3px, color-mix(in srgb, var(--pink) 55%, var(--bg2)) 3px 6px); }
.pq .unplug { border: 2px solid var(--green); background: var(--green-wash); border-radius: 8px; padding: 10px 14px; margin: -4px 0 16px; font-size: 14px; }
.pq .unplug b { font-family: var(--f-display); }
.pq .warnbox { border-left: 4px solid var(--amber); background: var(--amber-wash); padding: 8px 10px; border-radius: 4px; font-size: 13.5px; }
.pq .okbox { border-left: 4px solid var(--green); background: var(--green-wash); padding: 8px 10px; border-radius: 4px; font-size: 13.5px; }
.pq .stats { display: flex; gap: 4px 14px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 12px; color: var(--ink-soft); }
.pq .stats .r { color: var(--green-ink); }
.pq .stats .b { color: var(--pink-ink); }

.pq .detail .items { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: n; max-height: 460px; overflow: auto; }
.pq .detail .items li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; font-size: 13.5px; line-height: 1.35; counter-increment: n; padding-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.pq .detail .items li::before { content: counter(n); font-family: var(--f-mono); font-size: 11px; color: var(--ink-mute); padding-top: 2px; }
.pq .detail .items .ans { display: block; color: var(--green-ink); font-weight: 650; }
.pq .detail .items .alt { display: block; color: var(--ink-soft); font-size: 12px; }
.pq .from { font-size: 13.5px; }
.pq .from b { font-weight: 650; }
.pq .lnk { color: var(--pink-ink); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; font-size: 12.5px; }
.pq .drop { border: 2px dashed color-mix(in srgb, var(--ink) 40%, transparent); border-radius: 8px; padding: 12px; text-align: center; font-size: 13px; color: var(--ink-soft); cursor: pointer; }
.pq .drop.drag { border-color: var(--riso-pink-deep); background: var(--pink-wash); }
.pq .drop a, .pq .drop button { color: var(--pink-ink); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; }
.pq .clips li { grid-template-columns: 22px minmax(0, 1fr) !important; }
.pq .clip { display: grid; gap: 5px; min-width: 0; }
.pq .clip input { width: 100%; border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); background: var(--bg); border-radius: 5px; padding: 5px 8px; font-size: 13px; }
.pq .clipmeta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; align-items: center; }
.pq .clipmeta a { color: var(--pink-ink); font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
.pq .clipmeta .ok { color: var(--green-ink); font-weight: 650; }
.pq .clipmeta .bad { color: var(--amber); font-weight: 650; }
.pq .libclip { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; font-size: 13px; }
.pq .libclip b { display: block; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pq .libclip small { display: block; }
.pq .settings { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1.5px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
.pq .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- present ---------- */
.pq .pbar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 12px; }
.pq .pbar .ntoggle { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; margin-left: auto; }
.pq .stagewrap { max-width: 1100px; margin: 0 auto; }
.pq .screen { border-radius: 10px; }
.pq .stage { container-type: inline-size; aspect-ratio: 16 / 9; width: 100%; max-width: 100%; background-color: var(--stage); color: var(--stage-ink); border-radius: 10px; position: relative; overflow: hidden; background-image: radial-gradient(rgba(255, 126, 182, .17) 1px, transparent 1.5px); background-size: 14px 14px; }
/* Full screen: the whole screen goes dark and the slide keeps 16:9 in the
   middle of it, so nothing is cut on a 4:3 or an ultrawide projector. */
.pq .screen:fullscreen { display: grid; place-items: center; background: #000; border-radius: 0; }
.pq .screen:fullscreen .stage { width: min(100vw, calc(100vh * 16 / 9)); border-radius: 0; }
.pq .slide { position: absolute; inset: 0; padding: 5cqw 6cqw; display: flex; flex-direction: column; justify-content: center; gap: 2.2cqw; }
.pq .s-eyebrow { font-family: var(--f-mono); font-size: 1.5cqw; letter-spacing: .2em; text-transform: uppercase; color: var(--stage-pink); }
.pq .s-big { font-family: var(--f-display); font-weight: 800; font-size: 7cqw; line-height: 1; letter-spacing: -.02em; text-shadow: .35cqw .25cqw 0 rgba(255, 126, 182, .55); overflow-wrap: break-word; }
.pq .s-title { font-family: var(--f-display); font-weight: 800; font-size: 5cqw; line-height: 1.02; }
.pq .s-q { font-family: var(--f-display); font-weight: 700; font-size: 3.4cqw; line-height: 1.2; max-width: 80cqw; text-wrap: balance; }
.pq .s-sub { font-family: var(--f-serif); font-style: italic; font-size: 2.6cqw; color: var(--stage-green); }
.pq .s-num { position: absolute; top: 4cqw; right: 5cqw; width: 9cqw; height: 9cqw; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 3.6cqw; background: var(--stage-ink); color: var(--stage); box-shadow: inset 0 0 0 .6cqw var(--stage-ink), inset 0 0 0 .9cqw var(--stage); }
.pq .s-foot { position: absolute; left: 6cqw; right: 6cqw; bottom: 3cqw; display: flex; justify-content: space-between; gap: 2cqw; font-family: var(--f-mono); font-size: 1.2cqw; letter-spacing: .12em; text-transform: uppercase; color: rgba(244, 250, 246, .6); }
.pq .s-ans { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw 4cqw; font-size: 2.2cqw; line-height: 1.25; }
.pq .s-ans div { display: grid; grid-template-columns: 3.4cqw 1fr; gap: 1cqw; }
.pq .s-ans b { font-family: var(--f-mono); color: var(--stage-pink); }
.pq .s-ans.one { grid-template-columns: 1fr; }
.pq .zoom { width: 30cqw; height: 30cqw; border-radius: 50%; overflow: hidden; border: .6cqw solid var(--stage-ink); display: grid; place-items: center; background: #f4faf6; margin: 0 auto; }
.pq .zoom span { font-size: 22cqw; line-height: 1; display: block; }
.pq .s-emoji { font-size: 13cqw; line-height: 1.1; text-align: center; }
.pq .s-vowels { font-family: var(--f-mono); font-weight: 600; font-size: 6cqw; letter-spacing: .12em; text-align: center; }
.pq .s-connect { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6cqw; }
.pq .s-connect div { background: rgba(244, 250, 246, .1); border: .25cqw solid rgba(244, 250, 246, .5); border-radius: 1cqw; padding: 2.4cqw; font-family: var(--f-display); font-weight: 750; font-size: 3.4cqw; text-align: center; }
.pq .s-clues { display: grid; gap: 1.4cqw; }
.pq .s-clues div { display: grid; grid-template-columns: 17cqw 1fr; gap: 2cqw; align-items: baseline; font-size: 2.8cqw; font-weight: 650; }
.pq .s-clues span { white-space: nowrap; font-family: var(--f-mono); font-size: 1.5cqw; color: var(--stage-pink); text-transform: uppercase; letter-spacing: .1em; }
.pq .s-clues .dim { opacity: .18; }
.pq .s-play { color: var(--stage-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 2cqw; border: .3cqw solid var(--stage-ink); border-radius: 999px; padding: 1.6cqw 3.4cqw; font-family: var(--f-display); font-weight: 800; font-size: 3cqw; align-self: flex-start; }
.pq a.s-play:hover { background: rgba(244, 250, 246, .12); }
.pq .s-fof { display: flex; gap: 3cqw; font-family: var(--f-display); font-weight: 800; font-size: 3cqw; }
.pq .s-fof span { border: .3cqw solid var(--stage-ink); border-radius: 999px; padding: .8cqw 3cqw; }
.pq .s-rule { font-size: 2cqw; max-width: 70cqw; color: rgba(244, 250, 246, .88); }
.pq .notes { margin-top: 12px; border: 1.5px dashed var(--ink-mute); border-radius: 8px; padding: 10px 14px; font-size: 14px; background: var(--bg2); }
.pq .notes b { color: var(--green-ink); }
.pq .thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 2px 4px; }
.pq .thumbs button { flex: none; border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); background: var(--bg2); border-radius: 6px; padding: 4px 8px; font-size: 12px; font-family: var(--f-mono); }
.pq .thumbs button[aria-current="true"] { background: var(--ink); color: var(--bg2); border-color: var(--ink); }

/* ---------- scores ---------- */
.pq .scorewrap { overflow-x: auto; }
.pq table.scores { border-collapse: collapse; min-width: 100%; font-variant-numeric: tabular-nums; }
.pq .scores th, .pq .scores td { border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); padding: 6px; text-align: center; white-space: nowrap; }
.pq .scores th { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.pq .scores td:first-child, .pq .scores th:first-child { text-align: left; }
.pq .scores input[type=number] { width: 52px; text-align: center; border: 1.5px solid color-mix(in srgb, var(--ink) 30%, transparent); background: var(--bg); border-radius: 4px; padding: 3px; }
.pq .scores input.tname { width: 180px; border: 1.5px solid transparent; background: transparent; font-weight: 700; font-family: var(--f-display); padding: 3px 5px; border-radius: 4px; }
.pq .scores input.tname:hover, .pq .scores input.tname:focus { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.pq .scores td.jok input { accent-color: var(--riso-pink-deep); width: 16px; height: 16px; }
.pq .scores td.doubled input[type=number] { border-color: var(--riso-pink-deep); background: var(--pink-wash); }
.pq .scores .jrow td { padding-top: 0; }
.pq .scores .jlbl { font-size: 11.5px; color: var(--ink-mute); }
.pq .scores .tot { font-family: var(--f-display); font-weight: 800; font-size: 18px; }
.pq .board { display: grid; gap: 8px; margin-top: 12px; }
.pq .brow { display: grid; grid-template-columns: 44px minmax(0, 180px) minmax(0, 1fr) 60px; gap: 10px; align-items: center; transition: opacity .4s; }
.pq .brow .pos { font-family: var(--f-display); font-weight: 800; font-size: 20px; }
.pq .brow b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-display); }
.pq .brow .bar2 { display: block; height: 24px; background: var(--pink); border: 1.5px solid var(--line); border-radius: 4px; transform-origin: 0 50%; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.pq .brow:first-child .bar2 { background: var(--green); }
.pq .brow .pts { font-family: var(--f-display); font-weight: 800; font-size: 18px; text-align: right; }
.pq .brow.hide { opacity: .08; }
.pq .headrow { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.pq .headrow .acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- print ---------- */
.pq .ptools { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 12px; }
.pq .ptools .ph { flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; align-items: flex-end; }
.pq .ptools label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.pq .ptools input[type=number] { width: 58px; border: 1.5px solid var(--line); border-radius: 5px; padding: 3px 6px; background: var(--bg); }
.pq .ptools .grp { display: inline-flex; gap: 6px; align-items: center; }
.pq .ptools .grp > span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.pq .pnote { font-size: 13.5px; margin: 0 0 14px; }
.pq .pscroll { overflow-x: auto; padding-bottom: 10px; }
.pq .pages {
  --bg: #f4faf6; --bg2: #fff; --bg3: #eaf2ed; --ink: #1a3a2a; --ink-soft: #46604f; --ink-mute: #6a8276;
  --pink: #ff7eb6; --pink-ink: #c13b79; --pink-wash: #ffe3ef; --green: #2db876; --green-ink: #13734a; --green-wash: #daf2e5;
  --amber: #8a5000; --amber-wash: #fbeec6; --line: #1a3a2a; --rule: #d6e0da;
  color: var(--ink); display: grid; gap: 22px; justify-content: center; color-scheme: light; font-family: var(--f-body);
}
/* Ink saver: no colour fills, every word in black ink, the pictures in grey. */
.pq .pages.ink { --pink-wash: #fff; --green-wash: #fff; --bg3: #fff; --amber-wash: #fff; --pink-ink: #1a3a2a; --green-ink: #1a3a2a; --green: #1a3a2a; --pink: #1a3a2a; --ink-soft: #2f4a3b; --ink-mute: #4a6859; }
.pq .pages.ink .pzoom, .pq .pages.ink .pemoji, .pq .pages.ink .qm .emo, .pq .pages.ink .riddle .emo { filter: grayscale(1); }
.pq .page { width: 210mm; min-height: 297mm; padding: 12mm 12mm 16mm; background: #fff; box-shadow: 0 2px 14px rgba(0, 0, 0, .18); position: relative; font-size: 10.5pt; line-height: 1.4; }
.pq .page.letter { width: 215.9mm; min-height: 279.4mm; }
.pq .page h2 { font-size: 19pt; font-weight: 750; }
.pq .page .eyebrow { font-size: 7.5pt; color: var(--ink-mute); }
.pq .page .muted { color: var(--ink-soft); }
.pq .phead { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 3mm; margin-bottom: 5mm; }
.pq .phead > div { flex: 1 1 0; min-width: 0; }
.pq .phead .side { flex: 0 1 auto; max-width: 30%; text-align: right; }
.pq .phead .team { flex: none; font-size: 10pt; }
.pq .pfoot { position: absolute; left: 12mm; right: 12mm; bottom: 6mm; display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 7.5pt; color: var(--ink-mute); }
.pq .teambox { display: grid; grid-template-columns: 2fr 1fr; gap: 4mm; margin-bottom: 5mm; }
.pq .teambox div { border: 1.5px solid var(--ink); border-radius: 2mm; padding: 2mm 3mm; height: 15mm; font-family: var(--f-mono); font-size: 7.5pt; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); }
.pq .teambox div.jk { border-color: var(--pink-ink); background: var(--pink-wash); border-width: 2px; }
.pq .acols { columns: 2; column-gap: 6mm; }
.pq .ablock { break-inside: avoid; border: 1.5px solid var(--ink); border-radius: 2mm; margin: 0 0 4mm; overflow: hidden; }
.pq .ablock .ah { display: flex; justify-content: space-between; align-items: center; gap: 2mm; padding: 1.5mm 3mm; background: var(--bg3); border-bottom: 1.5px solid var(--ink); }
.pq .ablock .ah b { font-family: var(--f-display); font-size: 10.5pt; line-height: 1.25; }
.pq .ablock .ah span { flex: none; font-family: var(--f-mono); font-size: 7pt; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); text-align: right; }
.pq .ablock.rev .ah { background: var(--green-wash); }
.pq .ablock.bre .ah { background: var(--pink-wash); }
.pq .aline { display: grid; grid-template-columns: 7mm 1fr; border-bottom: 1px solid var(--rule); height: 7.2mm; align-items: end; padding: 0 3mm 1mm; font-family: var(--f-mono); font-size: 8pt; color: var(--ink-mute); }
.pq .aline:last-of-type { border-bottom: 0; }
.pq .aline.fof { grid-template-columns: 7mm 1fr auto; }
.pq .aline.fof .fx { font-size: 7.5pt; letter-spacing: .06em; }
.pq .aline.who { grid-template-columns: 7mm 1fr 1fr 1fr; gap: 2mm; }
.pq .aline.who i { font-style: normal; border-left: 1px solid var(--rule); padding-left: 1.5mm; font-size: 6.5pt; }
.pq .ablock .af { display: flex; justify-content: flex-end; padding: 1mm 3mm; border-top: 1.5px solid var(--ink); font-family: var(--f-mono); font-size: 7.5pt; color: var(--ink-soft); }
.pq .riddle { break-inside: avoid; display: grid; grid-template-columns: 8mm 1fr; gap: 2mm; margin-bottom: 4mm; }
.pq .riddle .n { font-family: var(--f-display); font-weight: 800; font-size: 13pt; color: var(--pink-ink); }
.pq .riddle p { margin: 0 0 2mm; font-size: 11.5pt; font-weight: 600; }
.pq .riddle .ln { border-bottom: 1px solid #9aa79f; height: 8mm; }
.pq .riddle .vw { font-family: var(--f-mono); letter-spacing: .1em; }
.pq .riddle .emo { font-size: 22pt; line-height: 1.2; }
.pq .qm .how { margin: 0 0 1.5mm; font-size: 9pt; color: var(--ink-soft); }
.pq .prep { border: 2px solid var(--green); background: var(--green-wash); border-radius: 2mm; padding: 3mm 4mm; margin-bottom: 4mm; font-size: 9.5pt; }
.pq .prep b { font-family: var(--f-display); }
.pq .prep ul { margin: 1mm 0 0; padding-left: 5mm; }
.pq .prep li { margin: .6mm 0; }
.pq .picsec { break-inside: avoid; margin-bottom: 5mm; border: 1.5px solid var(--ink); border-radius: 2mm; overflow: hidden; }
.pq .picsec .ah { display: flex; justify-content: space-between; gap: 2mm; padding: 1.5mm 3mm; background: var(--pink-wash); border-bottom: 1.5px solid var(--ink); }
.pq .picsec .ah b { font-family: var(--f-display); font-size: 10.5pt; }
.pq .picsec .ah span { font-family: var(--f-mono); font-size: 7.5pt; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); text-align: right; }
.pq .picgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; padding: 3mm; }
.pq .picgrid.list { grid-template-columns: 1fr; gap: 0; padding: 1mm 3mm; }
.pq .pic { position: relative; border: 1.2px solid #c3d1c9; border-radius: 2mm; padding: 3mm; display: grid; place-items: center; min-height: 38mm; }
.pq .pic .pn { position: absolute; top: 1.5mm; left: 2.5mm; font-family: var(--f-display); font-weight: 800; color: var(--pink-ink); font-size: 11pt; }
.pq .pic.wide { position: static; display: grid; grid-template-columns: 7mm 1fr; align-items: center; min-height: 0; padding: 2mm 0; place-items: center start; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; }
.pq .pic.wide:last-child { border-bottom: 0; }
.pq .pic.wide .pn { position: static; }
.pq .pzoom { width: 32mm; height: 32mm; border-radius: 50%; overflow: hidden; border: 1.5px solid var(--ink); display: grid; place-items: center; background: var(--bg); }
.pq .pzoom span { font-size: 24mm; line-height: 1; display: block; }
.pq .pemoji { font-size: 15mm; line-height: 1.1; }
.pq .pvow { font-family: var(--f-mono); font-weight: 600; font-size: 14pt; letter-spacing: .12em; }
.pq .pcon { font-family: var(--f-display); font-weight: 700; font-size: 12pt; }
.pq .ptxt { font-size: 10.5pt; font-weight: 600; }
.pq table.tally { width: 100%; border-collapse: collapse; margin-top: 2mm; }
.pq .tally th, .pq .tally td { border: 1.3px solid var(--ink); height: 12mm; text-align: center; font-family: var(--f-mono); font-size: 8pt; }
.pq .tally th { height: 8mm; background: var(--bg3); }
.pq .halfnote { margin-top: 4mm; font-size: 9.5pt; border-left: 3px solid var(--green); padding-left: 3mm; }
/* A round's block in the script stays on one page where it fits, so a
   heading is never left at the foot of a page without its questions. */
.pq .qm .sec { break-inside: avoid; }
.pq .qm h3 { font-size: 12pt; margin: 5mm 0 1.5mm; display: flex; justify-content: space-between; align-items: baseline; gap: 3mm; border-bottom: 1.5px solid var(--ink); padding-bottom: 1mm; break-after: avoid; }
.pq .qm h3 span { flex: none; font-family: var(--f-mono); font-size: 7.5pt; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.pq .qm ol { margin: 0; padding-left: 6mm; font-size: 9.5pt; }
.pq .qm li { margin-bottom: 1.4mm; break-inside: avoid; }
.pq .qm li .a { font-weight: 700; color: var(--green-ink); }
.pq .qm li .nt { color: var(--ink-soft); font-size: 8.5pt; }
.pq .qm .vw { font-family: var(--f-mono); font-weight: 600; letter-spacing: .06em; }
.pq .qm .emo { font-size: 12pt; }
.pq .qm .opt { color: var(--ink-soft); font-size: 8.5pt; }
.pq .qm .runorder { display: grid; grid-template-columns: auto 1fr auto auto; gap: 1mm 4mm; font-size: 9.5pt; margin-bottom: 3mm; }
.pq .qm .runorder .tot { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 1mm; font-weight: 650; }

/* ---------- narrower ---------- */
@container pqw (max-width: 1000px) {
  .pq .build { grid-template-columns: minmax(0, 270px) minmax(0, 1fr); }
  .pq .detail { grid-column: 1 / -1; }
}
/* One column on a phone: the running order first, then the round you are
   looking at, then the library to add from. */
@container pqw (max-width: 640px) {
  .pq .build { grid-template-columns: minmax(0, 1fr); }
  .pq .order { order: -2; }
  .pq .detail { order: -1; }
  .pq .row2 { grid-template-columns: 1fr; }
  .pq .pages { justify-content: start; }
  .pq .brow { grid-template-columns: 30px minmax(0, 110px) minmax(0, 1fr) 40px; gap: 8px; }
  .pq .card { padding: 13px; }
  .pq .titlerow .field { flex-basis: 100%; }
  .pq .pbar .ntoggle { margin-left: 0; }
}
@media (max-width: 560px) {
  .pq-bar { padding: 8px 10px; gap: 6px; }
  .pq-brand { flex: 1 1 100%; }
  .pq-brand b { font-size: 14.5px; }
  .pq-bar .seg { width: 100%; }
  .pq-bar .seg button { flex: 1 1 0; padding: 6px 4px; }
  .pq .scores input.tname { width: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .pq *, .pq *::before, .pq *::after { transition: none !important; animation: none !important; }
}

/* ---------- printing ----------
   Only the print pages print, from any mode: the site's bar, the hero, the
   builder's chrome and the other views drop out, and the pages lose their
   screen shadow and size (the paper size is @page, written by the script
   from the A4 or US Letter switch). */
@media print {
  html, body { background: #fff !important; }
  body > :not(main) { display: none !important; }
  main.pr-page { max-width: none !important; margin: 0 !important; padding: 0 !important; }
  main > :not(.pq-app), .pq-app > :not(.pq), .pq > :not(.pq-wrap), .pq-wrap > :not(#pqPrint), #pqPrint > :not(.pscroll) { display: none !important; }
  .pq-wrap { padding: 0 !important; container-type: normal; }
  #pqPrint { display: block !important; }
  .pq .pscroll { overflow: visible; padding: 0; }
  .pq .pages { display: block; gap: 0; zoom: 1 !important; }
  .pq .page, .pq .page.letter { box-shadow: none; break-after: page; margin: 0; width: auto; min-height: 0; padding: 0; }
  .pq .page:last-child { break-after: auto; }
  .pq .pfoot { display: none !important; }
  .pq .page h2, .pq .page h3 { color: var(--ink) !important; }
}