/* The Quiz Show Co. site styles. One look: near black, brass, a condensed
   display face for the big words, a high contrast serif for headings and the
   covers, and plain Barlow for reading. */

/* Fonts, served from this site so a visitor's browser never asks a font
   company for anything. All four families are under the SIL Open Font
   License, see assets/fonts/LICENSE.txt. Latin subset only (Western European
   letters, the pound sign, curly quotes); anything else falls back to the
   next font in the stack. Faces still on a fonts.gstatic.com address are
   waiting to be copied in: scripts/fetch_fonts.mjs does that and rewrites
   these lines, and scripts/check_seo.mjs warns until it has. */
@font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/bebas-neue-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://fonts.gstatic.com/s/barlow/v13/7cHpv4kjgoGqM7E_DMs5ynghnQ.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 400; font-display: swap; src: url("https://fonts.gstatic.com/s/barlow/v13/7cHrv4kjgoGqM7E_Cfs7wH8Dnzcj.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("https://fonts.gstatic.com/s/barlow/v13/7cHqv4kjgoGqM7E3_-gs51ostz0rdg.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("https://fonts.gstatic.com/s/barlow/v13/7cHqv4kjgoGqM7E30-8s51ostz0rdg.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://fonts.gstatic.com/s/dmserifdisplay/v17/-nFnOHM81r4j6k0gjAW3mujVU2B2G_Bx0vrx52g.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Serif Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("https://fonts.gstatic.com/s/dmserifdisplay/v17/-nFhOHM81r4j6k0gjAW3mujVU2B2G_VB0PD2xWr53A.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #0b0b0d;
  --bg-2: #131215;
  --bg-3: #1d1b21;
  --ink: #f4ecd8;
  --ink-2: #c9c1ad;
  --ink-3: #8f887a;
  --accent: #d9a84e;      /* brass */
  --accent-ink: #14110a;
  --pop: #ff5e7e;          /* errors only */
  --line: rgba(244, 236, 216, 0.14);
  --field-line: rgba(244, 236, 216, 0.38); /* form boxes: 3.2:1 on the page, the AA minimum for a control's edge is 3:1 */
  --card: rgba(255, 255, 255, 0.035);
  --shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
  --radius: 14px;
  --dfont: "Bebas Neue", "Barlow Condensed", Impact, sans-serif;
  --sfont: "DM Serif Display", Georgia, "Times New Roman", serif;
  --bfont: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --btn-primary-bg: var(--accent);
  --btn-primary-ink: var(--accent-ink);
}

* { box-sizing: border-box; }
/* The sticky nav is 69px tall. Anything scrolled to, by a link or by the
   keyboard moving focus, stops clear of it. */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--bfont);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
/* Read out, not shown: "(choose one)" after a group's label and the
   form's "Sending..." line. */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: min(1180px, 100% - 48px); margin-inline: auto; }
.wrap-narrow { width: min(820px, 100% - 48px); }

/* Type. Bebas for the two big signs (the hero and the order form), the
   serif for section headings, Barlow Condensed for labels. */
.h1 {
  font-family: var(--dfont);
  font-size: clamp(56px, 8vw, 118px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
/* A long hero line (two phrases) gets one phrase to a line beside the cover. */
.h1-long { font-size: clamp(52px, 5.6vw, 84px); text-wrap: balance; }
@media (max-width: 1000px) { .h1-long { font-size: clamp(52px, 9vw, 96px); } }
.h2 {
  font-family: var(--sfont);
  font-size: clamp(34px, 4.3vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  margin-bottom: 18px;
  text-wrap: balance;
}
.lit { color: var(--accent); }
.kicker {
  display: flex; align-items: center; gap: 14px;
  font-family: "Barlow Condensed", var(--bfont);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 16px;
}
.kicker::after { content: ""; width: 44px; height: 1px; background: currentColor; opacity: 0.6; }
.lede { font-size: 20px; max-width: 34ch; color: var(--ink-2); margin: 22px 0 16px; }
.sub { color: var(--ink-2); max-width: 56ch; margin-bottom: 26px; font-size: 18px; }
.hint { color: var(--ink-3); font-size: 14px; margin-top: 10px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 26px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: "Barlow Condensed", var(--bfont);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 17px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.15s, background 0.2s, border-color 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-ink); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); }
.btn-sm { padding: 11px 18px; font-size: 15px; }
.btn-wide { width: 100%; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* Nav: a text wordmark, nothing else */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 11, 13, 0.92); /* for browsers without color-mix */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand-word { font-family: var(--dfont); font-size: 26px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.brand-word em { font-style: normal; color: var(--accent); }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a {
  text-decoration: none; font-family: "Barlow Condensed", var(--bfont); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 15px; color: var(--ink-2); white-space: nowrap;
}
.nav-links a:hover { color: var(--accent); }

/* Hero */
.hero { position: relative; padding: 84px 0 72px; overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.price-line { font-size: 18px; line-height: 30px; margin-bottom: 22px; }
.price-line .chip { vertical-align: top; margin-right: 6px; }
.price-line strong { color: var(--accent); }
.ticks { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 26px; color: var(--ink-2); font-size: 15px; }
.ticks li::before { content: "✓"; content: "✓" / ""; color: var(--accent); margin-right: 8px; font-weight: 700; }
.ticks-col { flex-direction: column; gap: 10px; }
.ticks-col li { position: relative; padding-left: 24px; }
.ticks-col li::before { position: absolute; left: 0; top: 0; margin: 0; }
.hero-screen { position: relative; min-width: 0; }
.screen-caption { text-align: center; color: var(--ink-3); font-size: 14px; margin-top: 14px; font-style: italic; }

/* The screen around a cover: a slim black bezel with a brass edge. */
.screen-frame {
  container-type: inline-size;
  padding: 8px; border-radius: 12px;
  background: #050506;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(217, 168, 78, 0.2);
}

/* The cover: the quiz's opening slide, laid out like the real one. A small
   WELCOME TO, the pub in a serif, the night in italics, the host when there
   is one, prizes along the bottom and the date in a framed box, all inside a
   fine brass frame with diamond notches. Sizes are in cqw (a share of the
   screen's own width) so it scales with the box, not the window, and --k is
   a fit factor the script lowers if anything would spill out. */
.cover {
  --venue: #1f4d3a; --venue-ink: #fff; --cv-brass: #e0b862; --cv-box: rgba(0, 0, 0, 0.24); --k: 1;
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 5px;
  background:
    radial-gradient(90% 80% at 26% 42%, rgba(255, 255, 255, 0.09), transparent 62%),
    radial-gradient(130% 110% at 50% 118%, rgba(0, 0, 0, 0.42), transparent 58%),
    var(--venue);
  color: var(--venue-ink);
  display: flex; flex-direction: column; gap: calc(1.6cqw * var(--k));
  padding: 6cqw 7.2cqw 5.4cqw;
  text-align: left;
  transition: background-color 0.3s;
}
.cover p { margin: 0; }
.cv-frame { position: absolute; inset: 2.3cqw; border: max(1px, 0.15cqw) solid var(--cv-brass); pointer-events: none; }
.cv-frame::before { content: ""; position: absolute; inset: 0.6cqw; border: max(1px, 0.08cqw) solid var(--cv-brass); opacity: 0.45; }
.cv-frame i {
  position: absolute; width: 1.5cqw; height: 1.5cqw;
  background: var(--venue); border: max(1px, 0.15cqw) solid var(--cv-brass); transform: rotate(45deg);
}
.cv-frame i::after { content: ""; position: absolute; inset: 30%; background: var(--cv-brass); }
.cv-frame i:nth-child(1) { top: -0.82cqw; left: calc(50% - 0.75cqw); }
.cv-frame i:nth-child(2) { bottom: -0.82cqw; left: calc(50% - 0.75cqw); }
.cv-frame i:nth-child(3) { left: -0.82cqw; top: calc(50% - 0.75cqw); }
.cv-frame i:nth-child(4) { right: -0.82cqw; top: calc(50% - 0.75cqw); }
.cover > :not(.cv-frame) { position: relative; z-index: 1; }
.cv-top { flex: 1 0 auto; display: flex; align-items: center; gap: 3cqw; }
.cv-main { flex: 1 1 auto; min-width: 0; display: grid; justify-items: start; gap: calc(0.9cqw * var(--k)); }
.cv-kick {
  display: flex; align-items: center; gap: 1.4cqw;
  font-family: "Barlow Condensed", var(--bfont); font-weight: 600; font-size: calc(1.75cqw * var(--k));
  letter-spacing: 0.42em; text-transform: uppercase; color: var(--cv-brass); line-height: 1;
}
.cv-kick::after { content: ""; width: 7cqw; height: max(1px, 0.14cqw); background: currentColor; opacity: 0.7; }
.cv-name {
  font-family: var(--sfont); font-size: calc(8.8cqw * var(--k)); line-height: 1;
  max-width: 100%; overflow-wrap: anywhere; text-wrap: balance;
}
.cv-night { font-family: var(--sfont); font-style: italic; font-size: calc(3.7cqw * var(--k)); line-height: 1.1; color: var(--cv-brass); overflow-wrap: anywhere; }
.cv-host {
  font-family: "Barlow Condensed", var(--bfont); font-weight: 600; font-size: calc(1.7cqw * var(--k));
  letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.25; overflow-wrap: anywhere;
}
.cv-rule {
  display: block; width: 46%; height: calc(0.8cqw * var(--k)); margin-top: calc(0.4cqw * var(--k));
  border-top: max(1px, 0.15cqw) solid var(--cv-brass); border-bottom: max(1px, 0.15cqw) solid var(--cv-brass);
  -webkit-mask-image: linear-gradient(90deg, #000 35%, transparent); mask-image: linear-gradient(90deg, #000 35%, transparent);
}
.cv-foot { flex: none; display: flex; align-items: flex-end; gap: 3cqw; }
.cv-prizes {
  flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: calc(0.5cqw * var(--k)) calc(2.2cqw * var(--k));
  font-size: calc(1.55cqw * var(--k)); line-height: 1.25; overflow-wrap: anywhere;
}
.cv-prizes b {
  font-family: "Barlow Condensed", var(--bfont); font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cv-brass); margin-right: 0.4cqw;
}
.cv-date {
  flex: none; max-width: 46%; margin-left: auto; display: grid; justify-items: center; gap: calc(0.5cqw * var(--k));
  padding: calc(1.1cqw * var(--k)) calc(2.2cqw * var(--k)); text-align: center;
  border: max(1px, 0.15cqw) solid var(--cv-brass); background: var(--cv-box);
  outline: max(1px, 0.08cqw) solid var(--cv-brass); outline-offset: 0.45cqw;
}
.cv-when {
  font-family: "Barlow Condensed", var(--bfont); font-weight: 600; font-size: calc(1.95cqw * var(--k));
  letter-spacing: 0.28em; margin-right: -0.28em; text-transform: uppercase; white-space: nowrap; line-height: 1.1;
}
.cv-entry { font-size: calc(1.45cqw * var(--k)); letter-spacing: 0.06em; line-height: 1.2; overflow-wrap: anywhere; }

/* The corner slot: their logo, or initials in the badge shape they picked. */
.cover-badge {
  flex: none; align-self: flex-start;
  width: calc(11.5cqw * var(--k)); aspect-ratio: 1; display: grid; place-items: center;
  margin: 0.8cqw 0.8cqw 0 0;
  color: var(--cv-brass); border: max(1px, 0.32cqw) solid currentColor; border-radius: 50%;
  box-shadow: 0 0 0 0.5cqw var(--venue), 0 0 0 max(2px, 0.65cqw) currentColor;
  font-family: var(--sfont); font-size: calc(4.2cqw * var(--k)); line-height: 1; letter-spacing: 0.02em;
}
.cover-badge[data-shape="shield"] { border-radius: 40% 40% 50% 50% / 20% 20% 70% 70%; box-shadow: none; }
.cover-badge[data-shape="diamond"] { border-radius: 8%; transform: rotate(45deg) scale(0.8); box-shadow: none; }
.cover-badge[data-shape="diamond"] span { transform: rotate(-45deg); }
.cover-badge[data-shape="banner"] { width: calc(21cqw * var(--k)); aspect-ratio: 3 / 1.25; border-radius: 0.8cqw; box-shadow: none; }
.cover-badge img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cover-badge.has-logo {
  border: 0; box-shadow: none; border-radius: 0; transform: none;
  width: calc(20cqw * var(--k)); height: calc(12cqw * var(--k)); aspect-ratio: auto;
}
.cover-badge.has-logo span { display: none; }

/* On a phone the slide is small, so the small print gets a larger share,
   and never drops below about 9px: the prizes and entry fee are what the
   visitor just typed. If that crowds the slide, fitCover shrinks the big
   name instead (the floors do not move with --k). */
@container (max-width: 560px) {
  .cover { padding: 5.6cqw 6.4cqw 5cqw; gap: calc(1.4cqw * var(--k)); }
  .cv-kick { font-size: max(9px, calc(2.3cqw * var(--k))); letter-spacing: 0.34em; }
  .cv-name { font-size: calc(9cqw * var(--k)); }
  .cv-night { font-size: max(11px, calc(4.2cqw * var(--k))); }
  .cv-host { font-size: max(9px, calc(2.3cqw * var(--k))); letter-spacing: 0.16em; }
  .cv-prizes { font-size: max(9.5px, calc(2.15cqw * var(--k))); column-gap: calc(1.8cqw * var(--k)); }
  .cv-when { font-size: max(9.5px, calc(2.5cqw * var(--k))); letter-spacing: 0.16em; margin-right: -0.16em; white-space: normal; }
  .cv-entry { font-size: max(9.5px, calc(2.1cqw * var(--k))); }
  .cover-badge { width: calc(13cqw * var(--k)); font-size: calc(4.8cqw * var(--k)); }
}

/* Bands. Each one opens on a hairline with a small brass diamond, the same
   mark as the notches on the covers. */
.band { position: relative; padding: 96px 0; border-top: 1px solid var(--line); overflow-x: clip; }
.band::before {
  content: ""; position: absolute; left: 50%; top: -6px; width: 11px; height: 11px; margin-left: -6px;
  transform: rotate(45deg); background: var(--bg); border: 1px solid var(--accent);
}
.band-inbox { background: var(--bg-2); }
.band-yours { background: var(--bg); }
.band-night { background: var(--bg-2); }
.band-challenge { background: var(--bg); }
.band-order { background: var(--bg-2); }
.band-how { background: var(--bg); }
.band-hosts { background: var(--bg-2); }
.band-price { background: var(--bg); }
.band-faq { background: var(--bg-2); }
.band-start { background: var(--bg); padding: 120px 0; }
.band-start .h1 { font-size: clamp(48px, 7vw, 96px); }

/* What turns up in your inbox: the delivery email, on paper. */
.inbox-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.inbox-copy .sub { margin-bottom: 0; }
.mail {
  --venue: #1f4d3a;
  padding: 24px 28px 10px; border-radius: 6px;
  background: var(--ink); color: #1c1914; box-shadow: var(--shadow);
  border-top: 4px solid var(--accent);
}
.mail-head { display: grid; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid rgba(28, 25, 20, 0.14); font-size: 15px; line-height: 1.4; }
.mail-head p { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: baseline; }
.mh-k {
  font-family: "Barlow Condensed", var(--bfont); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; color: #6f6758;
}
.mail-btn {
  display: inline-block; margin: 18px 0 4px; padding: 10px 20px; border-radius: 999px;
  background: #1c1914; color: var(--ink);
  font-family: "Barlow Condensed", var(--bfont); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 14px;
}
.mail-items { margin-top: 14px; }
.mail-items li { display: grid; grid-template-columns: 58px 1fr; gap: 18px; align-items: center; padding: 16px 0; border-top: 1px solid rgba(28, 25, 20, 0.12); }
.mail-items p { font-size: 16px; line-height: 1.5; color: #4a4337; }
.mail-items b { color: #1c1914; font-weight: 600; }

/* Little drawings of what is in the download, in CSS. */
.glyph { position: relative; display: block; justify-self: center; }
.glyph-screen { width: 54px; height: 32px; border: 2px solid #1c1914; border-radius: 3px; padding: 3px; margin-bottom: 6px; }
.glyph-screen i { display: block; height: 100%; background: var(--venue); border-radius: 1px; }
.glyph-screen::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 18px; height: 3px; margin-left: -9px; background: #1c1914; border-radius: 2px; }
.glyph-sheet {
  width: 34px; height: 44px; border: 2px solid #1c1914; border-radius: 2px; background: #fff;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 6px 4px 4px; border-top-width: 6px; border-top-color: var(--venue);
}
.glyph-sheet i { display: block; background: color-mix(in srgb, var(--venue) 70%, #fff); border-radius: 1px; }
.glyph-phone {
  width: 26px; height: 44px; border: 2px solid #1c1914; border-radius: 6px; padding: 7px 4px;
}
.glyph-phone i { display: block; height: 100%; background: repeating-linear-gradient(180deg, #1c1914 0 2px, transparent 2px 6px); opacity: 0.55; }

/* Builder */
.builder { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 44px; align-items: start; }
.builder-form { display: grid; gap: 22px; min-width: 0; }
/* No one row may widen the column: at 320px a row of buttons that will
   not wrap would push every box past the edge. */
.builder-form > * { min-width: 0; }
.builder-next { display: none; justify-self: start; }
.field { display: grid; gap: 8px; }
.field > span { font-family: "Barlow Condensed", var(--bfont); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; color: var(--ink-3); }
.field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="date"], .field input[type="time"], .field select, .field textarea {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--field-line); background: var(--card); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 84px; line-height: 1.45; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field input[type="date"], .field input[type="time"] { color-scheme: dark; min-height: 52px; }
.field select { padding-right: 40px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.prize-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.prize-row label { display: grid; gap: 4px; min-width: 0; }
.prize-row small { font-family: "Barlow Condensed", var(--bfont); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; color: var(--accent); }
.field .prize-row input[type="text"] { padding: 12px 12px; font-size: 15px; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.swatches button {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid transparent; cursor: pointer;
  background: var(--sw); box-shadow: inset 0 0 0 1px var(--field-line), 0 0 0 2px var(--bg), 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s;
}
.swatches button:hover { transform: scale(1.1); }
.swatches button.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.swatch-custom {
  position: relative; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; cursor: pointer;
  background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  box-shadow: 0 0 0 2px var(--bg), 0 4px 12px rgba(0, 0, 0, 0.3);
  display: grid; place-items: center;
}
.swatch-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.swatch-custom span { font-family: var(--dfont); font-size: 13px; color: #fff; padding: 1px 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.62); pointer-events: none; }
.swatch-custom:focus-within { outline: 2px solid var(--accent); outline-offset: 6px; }
.swatch-note { color: var(--ink-2); font-size: 15px; font-style: italic; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 4px; background: var(--card); }
.seg-wrap { flex-wrap: wrap; border-radius: 22px; }
.seg button {
  min-height: 44px; padding: 9px 16px; border-radius: 999px; border: 0; background: transparent; cursor: pointer;
  font-family: "Barlow Condensed", var(--bfont); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; color: var(--ink-2);
}
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.builder-preview { position: sticky; top: 90px; display: grid; gap: 14px; justify-items: center; min-width: 0; }
.builder-preview .screen-frame { width: 100%; justify-self: stretch; }
.builder-preview .screen-caption { margin-top: 0; }
.host-caption { color: var(--ink-2); max-width: 46ch; }
.hero-screen .screen-frame { width: 100%; }

/* Rounds: the three that are always in sit in a row like a printed menu. */
.rounds { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 34px; border-top: 1px solid var(--accent); }
.round { padding: 26px 28px 28px 0; }
.round + .round { padding-left: 28px; border-left: 1px solid var(--line); }
.tag { display: inline-block; font-family: "Barlow Condensed", var(--bfont); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; color: var(--accent-ink); background: var(--accent); padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.round h3 { font-family: var(--dfont); font-size: 30px; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; }
.round p { color: var(--ink-2); font-size: 15px; }
.pick3 { margin-top: 56px; }
.pick3 h3 { font-family: var(--dfont); font-size: 36px; line-height: 1.05; text-transform: uppercase; }
.pick3-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.pick { position: relative; display: inline-flex; align-items: stretch; border-radius: 999px; border: 1px solid var(--line); background: var(--card); }
.pick.on { background: var(--accent); border-color: var(--accent); }
/* Dim the chip's name, not the chip: its info popover lives inside it and
   must stay at full strength, and so does its i, which still works. */
.pick.off .pick-btn { opacity: 0.5; }
.pick-btn {
  padding: 12px 6px 12px 18px; border: 0; background: transparent; cursor: pointer; border-radius: 999px 0 0 999px;
  font-family: "Barlow Condensed", var(--bfont); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 15px; color: var(--ink);
}
/* A bonus chip's name is a label, not a button: centre it the same way. */
label.pick-btn { display: inline-flex; align-items: center; }
.pick.on .pick-btn { color: var(--accent-ink); }
.pick.off .pick-btn { cursor: not-allowed; }
.pick-info {
  width: 34px; margin: 6px 6px 6px 0; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer;
  font-family: Georgia, serif; font-style: italic; font-size: 14px; color: var(--ink-2); line-height: 1;
}
.pick-info:hover, .pick-info[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.pick.on .pick-info { border-color: rgba(0, 0, 0, 0.25); color: var(--accent-ink); }
/* The outer box carries the pointer tail; the words scroll inside it, so
   the tail is never clipped and a scroll at the end of the words never
   carries on into the page (which would close the popover). */
.pick-pop {
  position: fixed; z-index: 60; width: 320px; max-width: calc(100vw - 32px);
  border-radius: 14px; background: var(--ink); color: var(--bg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); font-size: 15px; line-height: 1.5;
  text-transform: none; letter-spacing: 0;
}
.pick-pop-body {
  padding: 16px 18px; border-radius: 14px;
  max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain;
}
.pick-pop-body:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pick-pop::before {
  content: ""; position: absolute; left: var(--tail, 22px); top: -7px;
  width: 14px; height: 14px; background: var(--ink); transform: rotate(45deg); border-radius: 3px;
}
.pick-pop[data-flip="up"]::before { top: auto; bottom: -7px; }
.pick-pop strong { display: block; font-family: var(--dfont); font-weight: 400; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; }
.pick-pop p { margin: 0; }
.pick3-count { margin-top: 14px; color: var(--ink-3); font-size: 14px; }

/* How it works: big italic numerals on hairlines, no boxes. */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 40px; border-top: 1px solid var(--line); }
.steps li { padding: 28px 30px 6px 0; }
.steps li + li { padding-left: 30px; border-left: 1px solid var(--line); }
.step-num { display: block; color: var(--accent); font-family: var(--sfont); font-style: italic; font-size: 64px; line-height: 1; margin-bottom: 14px; }
.steps h3 { font-family: var(--dfont); font-size: 32px; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 8px; }
.steps p { color: var(--ink-2); font-size: 16px; }
/* Four steps: one row on a wide screen, two by two on a tablet, one to a
   row on a phone (the 760px block below). */
.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 761px) and (max-width: 1000px) {
  .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-4 li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .steps-4 li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
.tip { margin-top: 36px; padding: 2px 0 2px 18px; border-left: 2px solid var(--accent); color: var(--ink-2); font-size: 15px; max-width: 70ch; }
.tip a { color: var(--accent); }

/* For quizmasters: the copy, and three of one host's pubs fanned out. */
.hosts-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.hosts-copy .sub { margin-bottom: 18px; }
.hosts-list { margin: 0 0 30px; gap: 12px; font-size: 16px; }
.host-deck { position: relative; aspect-ratio: 5 / 4; }
.deck { position: absolute; width: 74%; }
.deck-1 { left: 0; top: 0; transform: rotate(-4deg); }
.deck-2 { right: 0; top: 19%; transform: rotate(3deg); }
.deck-3 { left: 9%; bottom: 0; transform: rotate(-1deg); }

/* Price: one ticket, torn along the dotted line. */
.chip {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-family: var(--dfont); font-size: 17px;
  box-shadow: inset 0 0 0 3px var(--accent), inset 0 0 0 5px var(--accent-ink), 0 3px 8px rgba(0, 0, 0, 0.3);
}
.ticket { position: relative; display: grid; grid-template-columns: 290px 1fr; margin-top: 34px; border: 1px solid var(--accent); border-radius: 14px; }
.ticket-stub {
  position: relative; display: grid; align-content: center; justify-items: start; gap: 4px;
  padding: 40px 34px; border-right: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 13px 0 0 13px;
}
.ticket-stub::before, .ticket-stub::after {
  content: ""; position: absolute; right: -13px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--accent);
}
.ticket-stub::before { top: -13px; clip-path: inset(calc(50% - 1px) 0 0 0); }
.ticket-stub::after { bottom: -13px; clip-path: inset(0 0 calc(50% - 1px) 0); }
.ticket-title { font-family: "Barlow Condensed", var(--bfont); font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; font-size: 14px; color: var(--accent); }
.price-big { font-family: var(--dfont); font-size: 112px; line-height: 0.9; }
.ticket-small { color: var(--ink-2); font-size: 15px; }
.ticket-body { display: grid; gap: 20px; padding: 36px 40px; align-content: center; }
.ticket .ticks-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; margin: 0; font-size: 15px; }
.ticket-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.ticket-foot .hint { margin: 0; }

/* Speed */
.pack { display: grid; gap: 8px; margin: 10px 0 28px; }
.pack li { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.pack b { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-family: var(--dfont); font-size: 18px; }
/* The SpeedQuizzing hero: one week's pack as six numbered round cards. */
.sq-board {
  padding: 18px; border-radius: 16px;
  background: linear-gradient(180deg, #18171b, #0d0d0f);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(217, 168, 78, 0.25);
}
.sq-rounds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sq-rounds li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center;
  padding: 16px; border-radius: 10px; background: var(--bg-3);
  border: 1px solid var(--line); border-top: 2px solid var(--accent);
}
.sq-rounds b {
  grid-row: 1 / span 2; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--accent); color: var(--accent); font-family: var(--sfont); font-style: italic; font-weight: 400; font-size: 24px; line-height: 1;
}
.sq-rounds span { font-family: var(--dfont); font-size: 24px; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1; align-self: center; }
.sq-rounds li { grid-template-rows: auto; }
.sq-rounds li b { grid-row: 1; }
.h1-sq, .h1-sq .lit { text-wrap: balance; }
.h1-sq .lit { display: block; }
.sq-rounds small { font-family: "Barlow Condensed", var(--bfont); font-weight: 600; font-size: 13px; color: var(--ink-3); letter-spacing: 0.12em; text-transform: uppercase; align-self: start; }

/* FAQ: questions on hairlines, like How it works, not in boxes. */
.faq { display: grid; margin-top: 30px; border-top: 1px solid var(--accent); }
.faq details { border-bottom: 1px solid var(--line); padding: 0 2px; }
.faq summary { cursor: pointer; padding: 18px 0; font-family: "Barlow Condensed", var(--bfont); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 19px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; content: "+" / ""; color: var(--accent); font-size: 26px; font-family: var(--dfont); }
.faq details[open] summary::after { content: "\2212"; content: "\2212" / ""; }
.faq details p { padding: 0 0 20px; color: var(--ink-2); }

/* Start */
.start-inner { position: relative; z-index: 1; text-align: center; display: grid; justify-items: center; }
.start-form { width: 100%; max-width: 680px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; margin-top: 10px; }
.start-form .btn, .start-form .hint { grid-column: 1 / -1; }
.start-form .hint { text-align: center; }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 30px 0; color: var(--ink-3); font-size: 14px; }
.foot-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.foot a { color: var(--accent); }

/* The name preview pill, only with ?review=1. Never saves anything. */
.review-pill {
  position: fixed; right: 14px; bottom: 14px; z-index: 70;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: calc(100vw - 28px);
  padding: 8px; border-radius: 12px; background: var(--bg-3); border: 1px dashed var(--accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.review-label { padding: 0 6px; font-family: "Barlow Condensed", var(--bfont); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; font-size: 12px; color: var(--accent); }
.review-pill button { padding: 6px 10px; border-radius: 8px; border: 1px solid transparent; background: transparent; cursor: pointer; font-size: 13px; color: var(--ink-2); }
.review-pill button[aria-pressed="true"] { border-color: var(--accent); color: var(--ink); }

/* Responsive */
@media (max-width: 1100px) {
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 14px; letter-spacing: 0.08em; }
}
@media (max-width: 1000px) {
  .hero-grid, .builder, .inbox-grid, .hosts-grid { grid-template-columns: 1fr; }
  .inbox-grid { gap: 32px; }
  .hosts-grid { gap: 48px; }
  /* The preview sits above the builder and stays in view while the boxes
     under it are filled in, so every change shows as it is typed. Focus
     inside the builder stops below it (scroll-margin). */
  .builder-preview {
    position: sticky; top: 68px; z-index: 5; order: -1;
    padding: 10px 0 12px; background: var(--bg); box-shadow: 0 14px 18px -12px rgba(0, 0, 0, 0.8);
  }
  .builder-preview .btn { display: none; }
  .builder-next { display: inline-flex; }
  .builder-form input, .builder-form button { scroll-margin-top: 330px; }
  /* The hero's slide comes straight after the headline, so it is on the
     first screen of a phone. */
  .hero-grid { gap: 0; }
  .hero-copy { display: contents; }
  .hero-copy .kicker { order: 1; }
  .hero-copy .h1 { order: 2; }
  .hero-screen { order: 3; margin: 26px 0 8px; }
  .hero-copy .lede { order: 4; }
  .hero-copy .price-line { order: 5; }
  .hero-copy .cta-row { order: 6; }
  .hero-copy .ticks { order: 7; }
  .nav-links { display: none; }
  .nav-inner { justify-content: space-between; }
  .host-deck { max-width: 620px; width: 100%; justify-self: center; }
}
@media (max-width: 820px) {
  .ticket { grid-template-columns: 1fr; }
  .ticket-stub { border-right: 0; border-bottom: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 13px 13px 0 0; padding: 30px 28px 26px; }
  .ticket-stub::before { top: auto; bottom: -13px; right: auto; left: -13px; clip-path: inset(0 0 0 calc(50% - 1px)); }
  .ticket-stub::after { bottom: -13px; right: -13px; clip-path: inset(0 calc(50% - 1px) 0 0); }
  .ticket-body { padding: 28px; }
  .ticket .ticks-col { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .steps-4 { grid-template-columns: minmax(0, 1fr); }
  .steps li, .steps li + li { padding: 22px 0 18px; border-left: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
  .step-num { grid-row: 1 / span 2; font-size: 50px; margin: 0; }
  .steps li + li { border-top: 1px solid var(--line); }
  .round, .round + .round { padding: 22px 0 24px; border-left: 0; }
  .round + .round { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap, .wrap-narrow { width: min(1180px, 100% - 32px); }
  .band { padding: 64px 0; }
  .hero { padding: 56px 0 56px; }
  .kicker::after { display: none; }
  .start-form { grid-template-columns: 1fr; }
  .brand-word { font-size: 20px; }
  .price-big { font-size: 84px; }
  .mail { padding: 20px 18px 6px; }
  .mail-items li { grid-template-columns: 44px 1fr; gap: 14px; }
  .glyph-screen { width: 44px; height: 27px; }
  .sq-board { padding: 10px; }
  .sq-rounds { gap: 8px; }
  .sq-rounds li { padding: 12px 10px; column-gap: 9px; }
  .sq-rounds b { width: 34px; height: 34px; font-size: 18px; }
  .sq-rounds span { font-size: 18px; }
  .sq-rounds small { font-size: 11px; letter-spacing: 0.08em; }
  .host-deck { aspect-ratio: 1 / 1.1; }
  .deck { width: 88%; }
  .deck-2 { top: 30%; }
  .deck-3 { left: 3%; }
  .prize-row { grid-template-columns: 1fr; }
  .faq summary { font-size: 17px; }
  /* On a phone the pinned preview drops its captions and its shadowed
     bezel padding, so the boxes under it keep as much room as they can. */
  .builder-preview { padding: 6px 0 8px; }
  .builder-preview .screen-frame { padding: 4px; }
  .builder-preview .screen-caption { display: none; }
  .builder-form input, .builder-form button { scroll-margin-top: 280px; }
}

/* Round options (picture theme, music era) and the richer info popover */
.round-opts { display: grid; gap: 10px; margin-top: 14px; }
.round-opt { display: grid; gap: 4px; }
.round-opt span { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.round-opt select {
  padding: 9px 12px; border-radius: 10px; border: 1px solid var(--field-line);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 14px;
}
.pick-pop { width: 320px; }
.pop-meta { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; }
.pop-eg { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.15); }
.pop-eg span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65; }
.pop-eg ul { margin: 6px 0 0; padding-left: 16px; }
.pop-eg li { margin-bottom: 5px; font-size: 14px; line-height: 1.45; }
.pop-eg b { font-weight: 600; opacity: 0.85; }
.pop-needs { margin: 10px 0 0; font-size: 13px; opacity: 0.7; }
.pick3-count { margin-top: 18px; font-weight: 500; }

/* The challenge round and the recommended running order */
/* The challenge games read like a menu chalked up behind the bar: name,
   dotted leader, what you need. */
.challenges { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; margin-top: 30px; border-top: 1px solid var(--line); }
.challenge {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: baseline; align-content: start;
  padding: 18px 8px 18px 0; border-bottom: 1px solid var(--line);
}
.challenge h3 { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; gap: 12px; font-family: var(--dfont); font-size: 26px; line-height: 1.1; letter-spacing: 0.02em; margin: 0 0 4px; }
.challenge h3::after { content: ""; flex: 1; min-width: 16px; border-bottom: 2px dotted color-mix(in srgb, var(--ink) 28%, transparent); }
.challenge > p { margin: 0; color: var(--ink-2); line-height: 1.5; grid-column: 1 / -1; font-size: 15px; }
.challenge > .challenge-needs {
  grid-column: 2; grid-row: 1; font-family: "Barlow Condensed", var(--bfont); font-weight: 600;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); text-align: right;
}
/* The running order: steps on hairlines, the same treatment as How it works. */
.runorder { list-style: none; margin: 28px 0 0; padding: 0; display: grid; counter-reset: ro; border-top: 1px solid var(--accent); }
.runorder li {
  display: grid; grid-template-columns: 130px 1fr; gap: 4px 20px; align-items: baseline;
  padding: 16px 2px; border-bottom: 1px solid var(--line);
}
.ro-step { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.runorder b { font-family: var(--dfont); font-weight: 400; font-size: 24px; letter-spacing: 0.02em; }
.ro-why { grid-column: 2; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
@media (max-width: 760px) {
  .challenges { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .challenge { grid-template-columns: 1fr; }
  .challenge h3::after { display: none; }
  .challenge > .challenge-needs { grid-column: 1; grid-row: 2; text-align: left; margin-bottom: 6px; }
}
@media (max-width: 640px) {
  .runorder li { grid-template-columns: 1fr; gap: 2px; }
  .ro-why { grid-column: 1; }
}

/* "Our pick" flag on a recommended but optional round */
.pick-flag {
  margin-left: 8px; padding: 3px 7px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: 1px;
}
.pick.on .pick-flag { background: var(--accent-ink); color: var(--accent); }
.pick-rec { border-color: var(--accent); }
.pop-rec { margin: 8px 0 0; font-weight: 600; }

/* Challenge cards: hover or tap for how it works, with a photo or clip */
/* No transform on this card: a transformed ancestor becomes the containing
   block for position:fixed children, which would trap the popup inside it. */
.challenge { position: relative; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.challenge:hover, .challenge.ch-open, .challenge:focus-within {
  border-bottom-color: var(--accent);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 6%, transparent));
}
.challenge:hover h3, .challenge.ch-open h3, .challenge:focus-within h3 { color: var(--accent); }
.ch-more {
  grid-column: 1 / -1; justify-self: start; margin-top: 8px; padding: 2px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.ch-more[aria-expanded="true"], .ch-more:hover { color: var(--accent); }
.ch-more::after { content: " →"; content: " →" / ""; }
.ch-pop {
  position: fixed; z-index: 60; width: 340px; max-width: calc(100vw - 32px);
  padding: 0 0 16px; border-radius: 14px; background: var(--ink); color: var(--bg);
  box-shadow: 0 18px 44px rgba(0,0,0,0.5); overflow: hidden auto; text-align: left;
}
.ch-media { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #222; }
.ch-pop strong {
  display: block; padding: 14px 18px 0; font-family: var(--dfont); font-weight: 400;
  font-size: 24px; letter-spacing: 0.03em; text-transform: uppercase;
}
.ch-pop p { margin: 6px 0 0; padding: 0 18px; font-size: 15px; line-height: 1.5; }
.ch-pop-needs { margin-top: 12px !important; font-size: 13px !important; opacity: 0.6; }

/* Policy pages and the thank you page */
.legal { padding-top: 140px; padding-bottom: 100px; }
.legal .h2 { margin-bottom: 8px; }
.legal-date { color: var(--ink-2); font-size: 14px; margin: 0 0 28px; }
.legal h2 { font-family: var(--sfont); font-weight: 400; font-size: 26px; margin: 34px 0 8px; color: var(--ink); }
.legal p, .legal li { color: var(--ink-2); line-height: 1.65; font-size: 17px; }
.legal p + p { margin-top: 12px; }
/* On these pages the first band sits right under the nav, which would cut
   its little diamond in half. */
.nav + main.band::before { display: none; }
.legal ul { padding-left: 20px; margin: 8px 0; }
.legal li { margin-bottom: 6px; }
.legal li b, .legal p b { color: var(--ink); }
.legal a { color: var(--accent); }
.thanks { text-align: center; }
.thanks .sub { margin-left: auto; margin-right: auto; }
.order-ref { margin: 18px auto 0; padding: 12px 18px; border: 1px dashed var(--accent); border-radius: 12px; display: inline-block; }
.order-ref b { font-family: "Barlow Condensed", var(--bfont); font-size: 20px; letter-spacing: 0.08em; color: var(--ink); }
.next { text-align: left; margin: 34px auto 18px; max-width: 520px; padding: 0; list-style: none; counter-reset: n; }
.next li { counter-increment: n; position: relative; padding: 14px 0 14px 54px; border-bottom: 1px solid var(--line); }
.next li::before { content: counter(n); position: absolute; left: 0; top: 12px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--dfont); font-size: 20px; }

/* The order form: step one always open, the rest in a panel a landlord can
   skip. Host fields only appear for quizmasters. */
.order-form .field-full { grid-column: 1 / -1; }
.order-form .field { align-content: start; }
.order-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.order-form legend, .kit-q {
  padding: 0; margin-bottom: 8px;
  font-family: "Barlow Condensed", var(--bfont); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 13px; color: var(--ink-3);
}
.who .seg { display: flex; }
.who .seg button { flex: 1 1 auto; }
.seg button { transition: background 0.15s, color 0.15s; }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.host-block { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 18px; border: 1px dashed var(--line); border-radius: 14px; }
.pair { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.pair input { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--field-line); background: var(--card); color: var(--ink); }
.pair input:focus { border-color: var(--accent); }
.field-hint { color: var(--ink-3); font-size: 13px; line-height: 1.4; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.linkish {
  display: inline; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font: inherit;
}
/* Links inside a sentence get a thumb sized (44px) tap area without moving
   the text: padding above and below, taken back by a negative margin. */
.linkish, .profile-links a { padding-block: 14px; margin-block: -14px; }
.check { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; color: var(--ink-2); font-size: 15px; cursor: pointer; }
.check input { margin-top: 4px; accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.shares { display: grid; gap: 2px; }
.start-form .host-block .hint { text-align: left; margin-top: 0; }

.more { border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.more > summary {
  cursor: pointer; list-style: none; padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font-family: "Barlow Condensed", var(--bfont); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 18px;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: "+"; content: "+" / ""; margin-left: auto; color: var(--accent); font-family: var(--dfont); font-size: 26px; line-height: 1; }
.more[open] > summary::after { content: "\2212"; content: "\2212" / ""; }
.more > summary small { font-family: var(--bfont); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--ink-3); }
.more-saved { font-style: normal; font-family: var(--bfont); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--accent); }
.more-body { display: grid; gap: 22px; padding: 4px 20px 22px; }
.more-group { display: grid; gap: 4px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.grid2 .field-full { grid-column: 1 / -1; }

.logo-row { display: flex; gap: 18px; align-items: flex-start; }
.logo-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.logo-pick {
  flex: none; width: 120px; height: 120px; border-radius: 14px; cursor: pointer;
  border: 1.5px dashed var(--line); display: grid; place-items: center; text-align: center; padding: 10px;
  background:
    linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%) 0 0 / 16px 16px,
    linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%) 8px 8px / 16px 16px;
  font-family: "Barlow Condensed", var(--bfont); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; color: var(--ink-2);
}
.logo-pick:hover, .logo-input:focus-visible + .logo-pick { border-color: var(--accent); color: var(--accent); }
.logo-pick img { max-width: 100%; max-height: 74px; object-fit: contain; }
.logo-copy { display: grid; gap: 6px; justify-items: start; }

.order-summary {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; text-align: left;
  padding: 18px 20px; border-radius: 16px; border: 1px solid var(--accent); background: var(--card);
}
.sum-badge {
  --venue: #1f4d3a; --venue-ink: #fff;
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: var(--venue); color: var(--venue-ink);
  font-family: var(--dfont); font-size: 22px; letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 2px var(--venue), inset 0 0 0 4px var(--venue-ink);
}
.sum-badge.has-logo span { display: none; }
.sum-badge img { width: 78%; height: 78%; object-fit: contain; }
.sum-text { display: grid; gap: 3px; min-width: 0; }
.sum-text b { font-family: var(--dfont); font-weight: 400; font-size: 26px; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.05; overflow-wrap: anywhere; }
.sum-line { color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.sum-total { color: var(--ink); font-weight: 500; }
.sum-actions { font-size: 15px; color: var(--ink-2); }
.sum-price { font-family: var(--dfont); font-size: 46px; line-height: 1; color: var(--accent); }

.warns { display: grid; gap: 6px; }
.warns:empty { display: none; }
.warn {
  display: block; padding: 8px 12px; border-radius: 10px; font-size: 14px; line-height: 1.45;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink);
  border-left: 3px solid var(--accent);
}
.round-opts .warn { margin-top: 4px; }
.form-msg {
  padding: 12px 16px; border-radius: 12px; font-size: 15px; font-weight: 500; text-align: left;
  background: color-mix(in srgb, var(--pop) 16%, transparent); border: 1px solid var(--pop); color: var(--ink);
}
.form-note { color: var(--ink-2); font-size: 14px; }
.fallback { display: grid; gap: 12px; justify-items: center; padding: 18px; border-radius: 14px; border: 1px dashed var(--pop); }
.fallback p { color: var(--ink-2); font-size: 15px; text-align: center; }
.fallback .btn { white-space: normal; text-align: center; }

.pick3-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; }
.pick3-foot .pick3-count { margin: 0; }
.pick3-total { margin-top: 8px; color: var(--ink); font-size: 15px; }
.pick3 .form-msg { margin-top: 14px; display: inline-block; }
.pick-back { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; color: var(--ink); font-size: 15px; }
.pick-back .btn { min-height: 44px; }
.dupe-pay { justify-self: center; }

/* Linkage or Under the Radar: two chips, one always on, the same look as
   the picks under them. */
.bonus-pick { margin-top: 56px; }
.bonus-pick h3 { font-family: var(--dfont); font-size: 36px; line-height: 1.05; text-transform: uppercase; }
.bonus-pick + .pick3 { margin-top: 44px; }
/* "+£1" on a pick past the free ones, drawn like the old "our pick" flag. */
.pick-extra {
  margin-left: 8px; padding: 3px 7px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 11px; letter-spacing: 0.06em; vertical-align: 1px;
}
.pick.on .pick-extra { background: var(--accent-ink); color: var(--accent); }
/* The extra round pop up floats over the grid, just above the chip that was
   tapped, so nothing on the page moves. Never a dialog: taps go straight
   through it, and it fades on its own. It stays in the page while faded
   (opacity, not display), so a screen reader hears each new line. No
   transform on .pick3 itself: the round popovers inside it are fixed. */
.pick3 { position: relative; }
.pick-toast {
  position: absolute; z-index: 5; top: 0; left: 0; width: max-content; max-width: min(320px, 100%);
  padding: 10px 14px; border-radius: 12px; background: var(--ink); color: var(--bg);
  font-size: 15px; font-weight: 500; line-height: 1.4; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  pointer-events: none; opacity: 0; transition: opacity 0.25s ease;
}
.pick-toast.show { opacity: 1; }
.pick-toast::after {
  content: ""; position: absolute; left: var(--tail, 22px); bottom: -6px; width: 12px; height: 12px;
  background: var(--ink); transform: rotate(45deg); border-radius: 2px;
}
/* Under the grid (the chip was not in the top row): the tail points up. */
.pick-toast[data-below]::after { bottom: auto; top: -6px; }
/* "Last time you also had Odd One Out...", under the total. */
.pick-note { margin-top: 10px; color: var(--ink-2); font-size: 15px; }
.sum-price { text-align: right; }
.sum-price-note { display: block; margin-top: 6px; font-family: var(--bfont); font-size: 13px; letter-spacing: 0; line-height: 1.3; color: var(--ink-2); }

.profiles { width: 100%; max-width: 680px; margin: 0 auto 18px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); text-align: left; display: grid; gap: 10px; }
.welcome { font-size: 17px; color: var(--ink); }
.profile-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.profile-label { font-family: "Barlow Condensed", var(--bfont); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; color: var(--ink-3); }
.profile-links { margin: 0; }
.profile-links a { color: var(--accent); }
[data-reorder-note] { margin: 0 auto 14px; }


@media (max-width: 640px) {
  .host-block, .grid2, .pair { grid-template-columns: 1fr; }
  .who .seg { border-radius: 18px; }
  .order-summary { grid-template-columns: auto 1fr; }
  .sum-price { grid-column: 1 / -1; text-align: right; font-size: 38px; }
  .logo-row { flex-direction: column; }
}

/* ---------- Getting round by keyboard ----------
   One focus ring for everything: brass, outside the element, so it shows on
   the dark page and never sits on a brass button's own colour. Only for
   keyboard focus (:focus-visible), so a mouse click leaves no ring. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.pair input:focus-visible, .round-opt select:focus-visible { outline-offset: 1px; }
.swatches button:focus-visible { outline-offset: 6px; }
.faq summary:focus-visible, .more > summary:focus-visible { outline-offset: 4px; border-radius: 6px; }
/* A round chip is two buttons in one pill. The ring goes round the whole
   pill for the name, and round the i for the i, in the ink the i is drawn in. */
@supports selector(:has(*)) {
  .pick-btn:focus-visible { outline: none; }
  .pick:has(.pick-btn:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
}
.pick-info:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* The bonus pair's names are labels for radio buttons, which are hidden but
   still take the keyboard (Tab lands on the one that's on, the arrow keys
   swap). The ring goes round the name, or the whole pill where :has works. */
.pick-radio:focus-visible + .pick-btn { outline: 2px solid var(--accent); outline-offset: 3px; }
@supports selector(:has(*)) {
  .pick-radio:focus-visible + .pick-btn { outline: none; }
  .pick:has(.pick-radio:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
}

/* Skip straight past the menu. Hidden until a keyboard lands on it. */
.skip {
  position: absolute; left: 16px; top: -200px; z-index: 100;
  padding: 12px 18px; border-radius: 10px; background: var(--accent); color: var(--accent-ink);
  font-family: "Barlow Condensed", var(--bfont); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  text-decoration: none;
}
.skip:focus { top: 12px; }
main:focus { outline: none; }

/* Under 1000px the links fold into a Menu button, so the SpeedQuizzing page
   and the policies are one tap away on a phone too. */
.menu-btn {
  display: none; align-items: center; justify-content: center; gap: 8px; margin-left: auto;
  min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--field-line); background: transparent; color: var(--ink);
  font-family: "Barlow Condensed", var(--bfont); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 15px; cursor: pointer;
}
.menu-icon { position: relative; width: 16px; height: 2px; background: currentColor; border-radius: 1px; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; border-radius: 1px; }
.menu-icon::before { top: -5px; }
.menu-icon::after { top: 5px; }
.menu-btn[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-icon::before { top: 0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-icon::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 1000px) {
  .menu-btn { display: inline-flex; }
  .nav-inner { gap: 12px; }
  .nav.menu-open .nav-links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    padding: 6px 24px 18px; background: var(--bg-2); border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.45);
  }
  .nav.menu-open .nav-links a { padding: 14px 0; font-size: 17px; border-bottom: 1px solid var(--line); }
  .nav.menu-open .nav-links a:last-child { border-bottom: 0; }
  /* The sign in link is last, and hidden until signing in opens. */
  .nav.menu-open .nav-links a:has(+ a[hidden]:last-child) { border-bottom: 0; }
}
@media (max-width: 640px) {
  .nav-inner { gap: 8px; }
  .menu-btn { padding: 0 12px; }
  .nav .btn-sm { padding: 10px 13px; font-size: 14px; }
  .nav.menu-open .nav-links { padding: 4px 16px 14px; }
}
@media (max-width: 359px) {
  .menu-btn { padding: 0; }
  .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* "Untick one first to swap": a nudge, not an error, so brass not red. */
.pick3 .form-msg.nudge { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); }

/* Visitors who ask their device for less movement get none: no smooth
   scrolling, no fades or lifts, and challenge clips wait for a tap. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .btn:hover, .swatches button:hover { transform: none; }
}

/* ---------- The order desk (admin.html), phone first ---------- */
.admin .admin-wrap { padding: 28px 0 80px; max-width: 760px; }
.admin-head { margin-bottom: 18px; }
.admin-head .hint { margin-top: 0; }
.admin-signin { display: grid; gap: 14px; max-width: 420px; }
.admin-signin .btn { justify-self: start; }
.admin-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 12px; }
.admin-filter { min-width: 190px; }
.admin-h { font-family: var(--sfont); font-size: 26px; margin: 30px 0 12px; }
.admin-list { display: grid; gap: 12px; }
.admin-empty { color: var(--ink-3); font-size: 15px; }
.admin-card { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.admin-card.status-new { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.admin-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-id { margin-left: auto; font-family: "Barlow Condensed", var(--bfont); font-weight: 600; letter-spacing: 0.08em; color: var(--ink-2); }
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line);
  font-family: "Barlow Condensed", var(--bfont); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
}
.pill-new { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pill-paid, .pill-building { border-color: var(--accent); color: var(--accent); }
.pill-urgent { border-color: var(--pop); color: var(--ink); background: color-mix(in srgb, var(--pop) 22%, transparent); }
.admin-headline { display: flex; gap: 14px; align-items: center; }
.admin-logo { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; background: rgba(255, 255, 255, 0.9); padding: 4px; flex: none; }
.admin-venue { font-family: var(--dfont); font-size: 28px; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.05; overflow-wrap: anywhere; }
.admin-sub { color: var(--ink-2); font-size: 15px; }
.admin-row { font-size: 15px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.admin-row a { color: var(--accent); }
.admin-k { display: inline-block; min-width: 86px; font-family: "Barlow Condensed", var(--bfont); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 12px; color: var(--ink-3); }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: flex-start; }
.admin-more { flex: 1 1 100%; border: 1px dashed var(--line); border-radius: 12px; padding: 0 12px; }
.admin-more > summary { cursor: pointer; padding: 10px 0; font-family: "Barlow Condensed", var(--bfont); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 15px; color: var(--accent); }
.admin-form { display: grid; gap: 10px; padding: 0 0 12px; }
.admin-form input[type="text"], .admin-form input[type="url"], .admin-form select {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--field-line); background: var(--bg); color: var(--ink);
}
.admin-form .btn { justify-self: start; white-space: normal; }
.admin-cancel { color: var(--ink-2); }

/* ---------- Signing in, from any page ----------
   "Sign in" in the nav reads "Your quiz" once signed in (site.js). The quiet
   line by the order form and on the thank you page has a version for each.
   All of them are hidden until structure.accounts_open is published. Signed
   in, the order form gets a plain pointer to the quiz page instead. */
.nav-links a[aria-current="page"] { color: var(--accent); }
.acct-hint { margin: -10px 0 22px; }
.acct-hint > .hint { margin-top: 0; }
.acct-hint a, .thanks .acct-hint a { color: var(--accent); }
.acct-hint .btn { color: var(--btn-primary-ink); white-space: normal; text-align: center; }
.thanks .acct-hint { margin: 6px auto 0; max-width: 520px; }
.acct-in {
  display: grid; justify-items: center; gap: 12px; max-width: 560px; padding: 14px 18px; border-radius: 12px;
  font-size: 16px; line-height: 1.45; color: var(--ink);
  background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid var(--accent);
}

/* ---------- The customer's own page (account.html), phone first ----------
   One screen per pub: this week's quiz at the top, big and plain, then the
   details and rounds, then the send off. From 1000px wide the send off sits
   in its own column and stays in view while the details and rounds change.
   The rest (quiz night, look, pub, adding a pub) is folded away underneath
   in the same panels as the order form's "Make it more yours". */
.acct { padding-top: 48px; padding-bottom: 96px; }
.acct-loading { color: var(--ink-2); padding: 32px 0; }
.acct-signin, .acct-down { max-width: 600px; }
.acct-down .btn { white-space: normal; text-align: center; }
.acct-signin .sub { margin-bottom: 20px; }
.acct-signin-form { display: grid; gap: 14px; max-width: 460px; }
.acct-signin-form .btn { justify-self: start; white-space: normal; text-align: center; }
/* Server words and our own notes: a brass edged line, like the warnings. */
.acct-note, .acct-msg {
  display: block; padding: 10px 14px; border-radius: 10px; font-size: 15px; line-height: 1.45; color: var(--ink);
  background: color-mix(in srgb, var(--accent) 14%, transparent); border-left: 3px solid var(--accent);
}
.acct-note { margin-bottom: 18px; }
.acct-msg { margin-top: 14px; }
.acct-welcome { margin-bottom: 22px; }
.acct-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 26px; }

.acct-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "week" "send" "main" "more"; gap: 36px; }
.acct-week { grid-area: week; min-width: 0; padding-top: 22px; border-top: 1px solid var(--accent); }
.acct-main { grid-area: main; min-width: 0; display: grid; gap: 36px; }
.acct-send { grid-area: send; min-width: 0; }
.acct-more { grid-area: more; min-width: 0; display: grid; gap: 14px; align-content: start; }
@media (min-width: 1000px) {
  .acct-grid { grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "week week" "main send" "more send"; column-gap: 56px; row-gap: 44px; }
  .acct-send-inner { position: sticky; top: 92px; }
}

/* The next quiz: the pub, the heading, the date, where it stands. */
.acct-pub {
  font-family: "Barlow Condensed", var(--bfont); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 14px; color: var(--accent); margin-bottom: 8px; overflow-wrap: anywhere;
}
.acct-h1 { margin-bottom: 12px; }
.acct-date { font-family: var(--dfont); font-size: clamp(34px, 5vw, 54px); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; }
.acct-date small {
  display: inline-block; font-family: "Barlow Condensed", var(--bfont); font-weight: 600; font-size: 15px;
  letter-spacing: 0.14em; color: var(--ink-2); vertical-align: 0.45em; white-space: nowrap;
}
.acct-status { margin-top: 14px; max-width: 48ch; font-size: 19px; line-height: 1.45; color: var(--ink); }
.acct-status b { color: var(--accent); font-weight: 600; }
.acct-missed { margin-top: 14px; max-width: 48ch; }
.acct-after { margin-top: 8px; max-width: 48ch; font-size: 15px; color: var(--ink-2); }
.acct-nonight { display: grid; gap: 6px; max-width: 460px; margin-top: 18px; }
.acct-nonight .hint { margin-top: 0; }
.acct-date-msg { color: var(--ink); font-size: 15px; font-weight: 500; padding: 8px 12px; border-radius: 10px; border-left: 3px solid var(--pop); background: color-mix(in srgb, var(--pop) 16%, transparent); }

/* A sign in link, before it signs anyone in: whose it is. */
.acct-peek-q { overflow-wrap: anywhere; margin-bottom: 22px; }
.acct-peek .btn { white-space: normal; text-align: center; }

/* A pub brought in from an order: is that its night every week? */
.acct-suggest { display: grid; gap: 14px; margin-bottom: 26px; max-width: 640px; }
.acct-ask { display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--accent); background: var(--card); }
.acct-ask .acct-pub { margin-bottom: 0; }
.acct-ask-q { font-size: 19px; line-height: 1.4; color: var(--ink); }
.acct-ask .cta-row .btn { white-space: normal; text-align: center; }
.acct-suggest-msg { margin: 0 0 22px; max-width: 640px; }

/* The details and the rounds: ruled sections, no boxes, under one label.
   Once the quiz on screen has gone, a line says they are for the next one. */
.acct-change-h {
  font-family: "Barlow Condensed", var(--bfont); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 14px; color: var(--accent); margin-bottom: -22px;
}
.acct-next { margin-bottom: -16px; }
.acct-sec { display: grid; gap: 16px; min-width: 0; align-content: start; }
.acct-h { font-family: var(--sfont); font-size: 28px; line-height: 1.1; padding-top: 18px; border-top: 1px solid var(--line); }
.acct-line { color: var(--ink-2); font-size: 15px; }
/* Empty status lines stay in the page (so a screen reader hears them when
   they fill) but take no room. */
.acct-saved { margin-top: -4px; }
.acct-sec > .acct-saved:empty { margin-top: -16px; }
.more-body > .acct-saved:empty { margin-top: -22px; }
.prize-row.acct-prizes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .prize-row.acct-prizes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acct .bonus-pick { margin-top: 0; }
.acct .bonus-pick h4, .acct .pick3 h4 { font-family: var(--dfont); font-size: 24px; line-height: 1.05; text-transform: uppercase; margin-bottom: 2px; }
.acct .bonus-pick .pick3-grid, .acct .pick3 .pick3-grid { margin-top: 12px; }
.acct .bonus-pick + .pick3 { margin-top: 26px; }
/* A chip with no i beside it: the name is the whole pill. */
.pick-solo .pick-btn { padding: 12px 18px; border-radius: 999px; }
.acct .pick3-foot { margin-top: 14px; }
.acct-pickmsg { margin-top: 8px; color: var(--ink); font-size: 15px; font-weight: 500; }
.acct-pickmsg:empty, .acct .pick3-total:empty { margin-top: 0; }

/* The send off: the order form's summary card, the button, then the rest. */
.acct-send-inner { display: grid; gap: 14px; }
.acct-send .btn { white-space: normal; text-align: center; }
.acct-send .hint { margin-top: 0; text-align: center; }
/* Waiting: sending, or a moment's pause after the date on screen moved on. */
.acct-send .btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; transform: none; }
.acct-skipnote { text-align: center; color: var(--ink); font-size: 16px; }
.acct-skip { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.acct-skip:not(:has(:not([hidden]))) { display: none; }
/* In the narrow column the price gets its own row, as the order form's
   summary does on a phone, so the rounds have room to read. */
.acct-summary { grid-template-columns: auto minmax(0, 1fr); padding: 16px 18px; }
.acct-summary .sum-text b { font-size: 24px; }
.acct-summary .sum-price { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 12px; font-size: 42px; padding-top: 10px; border-top: 1px solid var(--line); }
.acct-summary .sum-price-note { order: -1; margin-top: 0; }
.acct-ref { font-family: "Barlow Condensed", var(--bfont); font-weight: 600; letter-spacing: 0.08em; }
.acct-booked { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.acct-booked-h { font-family: "Barlow Condensed", var(--bfont); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 14px; color: var(--ink-2); }
.acct-booked-list { list-style: none; display: grid; gap: 4px; font-size: 15px; color: var(--ink); }
/* On a phone the send off sits straight under the status: one compact row
   (the date, the rounds on one line, the price), then the button. */
@media (max-width: 999px) {
  .acct-summary { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; }
  .acct-summary .sum-badge { width: 44px; height: 44px; font-size: 16px; }
  .acct-summary .sum-text b { display: none; }
  .acct-summary .sum-line { font-size: 14px; line-height: 1.4; }
  .acct-summary .sum-rounds { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .acct-summary .sum-price { grid-column: auto; display: grid; justify-items: end; gap: 2px; font-size: 32px; padding-top: 0; border-top: 0; }
  .acct-summary .sum-price-note { order: 0; max-width: 6.5em; text-align: right; font-size: 12px; }
  /* The status line right above says the same, and the start time is
     under the date at the top. */
  .acct-skipnote, .acct-summary .sum-start { display: none; }
}
/* A narrow phone: the badge steps aside so the date and rounds have room. */
@media (max-width: 420px) {
  .acct-summary { grid-template-columns: minmax(0, 1fr) auto; }
  .acct-summary .sum-badge { display: none; }
}

/* Folded panels, the feedback box, the account's own buttons. */
.acct-more .more { min-width: 0; }
.acct-more .more-body { padding-top: 8px; }
.acct-remove { padding-top: 14px; border-top: 1px dashed var(--line); }
.acct-confirm { display: grid; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--pop); color: var(--ink-2); font-size: 15px; }
.acct-confirm .cta-row { margin-top: 0; }
.acct-confirm .check { color: var(--ink); }
.acct-feedback { margin-top: 22px; }
.acct-feedback form { display: grid; gap: 14px; }
.acct-feedback .btn { justify-self: start; }
.acct-fb-hint, .acct-reminders-off { color: var(--ink-2); font-size: 14px; }
.acct-fb-hint { margin-top: -8px; }
.check:has(input:disabled) { color: var(--ink-3); cursor: default; }
.acct-rating { justify-self: start; }
.acct-rating button { min-width: 44px; }
.acct-empty { display: grid; gap: 4px; max-width: 640px; }
.acct-empty .more { margin-top: 10px; }
.acct-foot { display: grid; gap: 8px; margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 15px; }
.acct-foot b { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.acct-foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
@media (max-width: 640px) {
  .acct { padding-top: 32px; }
  .acct-grid { gap: 30px; }
  .acct-status { font-size: 18px; }
}

/* ---------- The order desk's This week tab ---------- */
.admin-tabs { margin: 18px 0 4px; }
.admin-stars { color: var(--accent); font-family: "Barlow Condensed", var(--bfont); font-weight: 700; letter-spacing: 0.08em; }
.admin-quote { white-space: pre-wrap; color: var(--ink); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }