/* Conference Madness — design system.
   Signature: the Conference Center organ pipes. Gold bars of varying height,
   used as the progress indicator and the leaderboard. Everything else stays
   quiet so the pipes are the thing you remember. */
@import url('brand/brand.css');
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow:ital,wght@0,400;0,500;0,600;1,400&family=Barlow+Condensed:wght@500;600&display=swap');

:root{
  /* palette pulled from the logo file, not invented */
  --ink:#000C26;          /* the deep navy the logo sits on */
  --pew:#06183C;          /* card surface, one step up */
  --pew-2:#0A2050;        /* inputs, chips */
  --rail:#123A6E;         /* hairlines */
  --arc:#0DC0FD;          /* the cyan bracket outline */
  --pipe:#FDC512;         /* organ-pipe gold */
  --pipe-deep:#FC8201;    /* pipe shadow / CTA */
  --paper:#FDFDFD;
  --paper-dim:#A9C0DE;
  --paper-faint:#6B85AC;
  --ok:#3DD68C; --bad:#FF6B6B;

  --display:'Anton',Impact,'Haettenschweiler',sans-serif;
  --body:'Barlow',system-ui,-apple-system,sans-serif;
  --util:'Barlow Condensed','Barlow',system-ui,sans-serif;

  --r:14px; --r-sm:9px; --pad:16px; --tap:48px; --wrap:1120px;
}
*,*::before,*::after{box-sizing:border-box}
/* [hidden] only sets display:none at the weakest possible specificity, so any
   class that sets display (.btn, .opt, .grid, .row...) silently overrides it
   and the "hidden" element shows anyway. This bit everyone: the Submit button
   appeared to signed-out visitors, and hidden error messages would have too. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--body);font-size:17px;line-height:1.5;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--arc);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--pipe)}
:focus-visible{outline:3px solid var(--arc);outline-offset:3px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.wrap--narrow{width:100%;max-width:540px;margin:0 auto;padding:0 var(--pad)}
.stack>*+*{margin-top:var(--pad)}

/* ---- header ---------------------------------------------------- */
.hdr{background:var(--ink);border-bottom:1px solid var(--rail);position:sticky;top:0;z-index:50}
.hdr__in{display:flex;align-items:center;gap:12px;padding:9px 0;flex-wrap:wrap;min-width:0}
.hdr__logo{height:44px;width:auto;flex:0 0 auto}
.hdr__spacer{flex:1 1 auto}
.hdr nav{display:flex;gap:2px;align-items:center;flex-wrap:wrap;min-width:0}
.hdr nav a{font-family:var(--util);text-transform:uppercase;letter-spacing:.08em;
  font-size:15px;font-weight:600;color:var(--paper-dim);text-decoration:none;
  padding:11px 12px;border-radius:var(--r-sm);white-space:nowrap}
.hdr nav a:hover{color:var(--paper);background:var(--pew)}
.hdr nav a[aria-current="page"]{color:var(--ink);background:var(--pipe)}
@media(min-width:768px){.hdr__logo{height:58px}.hdr nav a{font-size:16px;padding:11px 15px}}

.signedout{text-align:center;padding:20px 0 4px}
.hero__logo{width:100%;max-width:430px;margin:0 auto}
@media(min-width:768px){.hero__logo{max-width:520px}}

/* ---- type ------------------------------------------------------- */
h1,h2{font-family:var(--display);font-weight:400;line-height:.95;
  letter-spacing:.005em;text-transform:uppercase;margin:0}
h1{font-size:clamp(34px,8vw,62px)}
h2{font-size:clamp(25px,4.5vw,38px)}
h3{font-family:var(--body);font-weight:600;font-size:19px;line-height:1.25;margin:0}
p{margin:0}
.lede{font-size:clamp(17px,2.4vw,20px);color:var(--paper-dim);max-width:54ch}
.dim{color:var(--paper-dim)} .faint{color:var(--paper-faint)}
.gold{color:var(--pipe)} .cyan{color:var(--arc)}

/* Section instructions. These were a faint grey line and people missed
   them, so they get a real panel: left rule in gold, larger text, its own
   breathing room. */
.instruct{margin:0 0 4px;padding:12px 16px;background:var(--pew);
  border-left:4px solid var(--pipe);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:17px;line-height:1.45;color:var(--paper)}

/* broadcast lower-third label. structural, not decorative:
   it always names the thing beneath it. */
.eyebrow{font-family:var(--util);text-transform:uppercase;letter-spacing:.2em;
  font-size:14px;font-weight:600;color:var(--arc);display:block;margin-bottom:6px}

/* big tabular numbers — scores, countdowns, ranks */
.fig{font-family:var(--display);font-weight:400;font-variant-numeric:tabular-nums;
  letter-spacing:.01em;line-height:1}
.fig--xl{font-size:clamp(44px,11vw,76px)}
.fig--lg{font-size:clamp(28px,6vw,40px)}

/* ---- surfaces --------------------------------------------------- */
.card{background:var(--pew);border:1px solid var(--rail);border-radius:var(--r);padding:20px}
.card--lit{border-color:var(--pipe)}
.panel{background:var(--pew);border:1px solid var(--rail);border-radius:var(--r);
  padding:20px;border-top:3px solid var(--arc)}

/* points chip. the number is the point of it, so the number is big. */
.pts{display:inline-flex;align-items:baseline;gap:4px;padding:3px 9px;border-radius:999px;
  background:var(--pew-2);border:1px solid var(--rail);white-space:nowrap}
.pts b{font-family:var(--display);font-weight:400;font-size:16px;color:var(--pipe);line-height:1}
.pts span{font-family:var(--util);text-transform:uppercase;letter-spacing:.1em;
  font-size:12px;font-weight:600;color:var(--paper-faint)}

.tag{display:inline-block;padding:4px 11px;border-radius:999px;font-family:var(--util);
  text-transform:uppercase;letter-spacing:.11em;font-size:13px;font-weight:600;
  background:var(--pew-2);color:var(--paper-dim)}
.tag--live{background:var(--pipe-deep);color:#2A1000}
.tag--open{background:var(--pipe);color:#2A2205}

/* ---- controls --------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--tap);padding:0 24px;border-radius:var(--r-sm);border:1px solid transparent;
  font-family:var(--util);text-transform:uppercase;letter-spacing:.09em;font-size:17px;
  font-weight:600;cursor:pointer;text-decoration:none;background:var(--pew-2);color:var(--paper)}
.btn:hover{background:#0E2A66}
.btn--primary{background:var(--pipe-deep);color:#2A1000;border-color:#FFA640}
.btn--primary:hover{background:var(--pipe);color:#2A2205}
.btn--ghost{background:transparent;border-color:var(--rail);color:var(--paper)}
.btn--ghost:hover{border-color:var(--arc);background:transparent}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn--block{width:100%}

label{display:block;font-family:var(--util);text-transform:uppercase;letter-spacing:.1em;
  font-size:14px;font-weight:600;color:var(--paper-dim);margin-bottom:6px}
input,select,textarea{width:100%;min-height:var(--tap);padding:11px 14px;
  font-family:var(--body);font-size:17px;border-radius:var(--r-sm)}
/* White fields. Against the navy page these read far more clearly than a
   dark field, and it is obvious where you are meant to type. Checkboxes and
   radios are excluded - they draw themselves and a white box breaks them. */
input:not([type="checkbox"]):not([type="radio"]),select,textarea{
  color:var(--cm-ink);background:var(--paper);border:1px solid #B9C6DA}
input:not([type="checkbox"]):not([type="radio"]):hover,select:hover,textarea:hover{
  border-color:#8FA3C2}
input::placeholder,textarea::placeholder{color:#6B7A90}

/* Chrome paints autofilled fields light blue with dark text, overriding the
   page. On a dark theme that makes username and password look broken next to
   every other field. background-color cannot be overridden here, so the only
   reliable fix is an inset shadow the width of the field, plus forcing the
   text colour. The long transition stops Chrome repainting it on focus. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--cm-ink);
  -webkit-box-shadow:0 0 0 1000px var(--paper) inset;
  box-shadow:0 0 0 1000px var(--paper) inset;
  caret-color:var(--cm-ink);
  border:1px solid #B9C6DA;
  transition:background-color 100000s ease-in-out 0s;
}
.err{color:var(--bad);font-size:15px;margin-top:6px}
.status{font-family:var(--util);text-transform:uppercase;letter-spacing:.09em;
  font-size:14px;font-weight:600;color:var(--paper-faint)}
.status--ok{color:var(--ok)} .status--warn{color:var(--pipe)} .status--bad{color:var(--bad)}

/* ---- answer chips ------------------------------------------------ */
.opts{display:grid;gap:9px;grid-template-columns:1fr}
@media(min-width:560px){.opts--tight{grid-template-columns:1fr 1fr}}
.opt{display:flex;align-items:center;gap:12px;min-height:var(--tap);padding:11px 14px;
  color:var(--paper);font:inherit;text-align:left;
  border:1px solid var(--rail);border-radius:var(--r-sm);background:var(--pew-2);cursor:pointer}
.opt:hover{border-color:var(--paper-faint)}
.opt input{width:22px;height:22px;min-height:0;flex:0 0 auto;padding:0;
  background:transparent;border:0;accent-color:var(--arc)}
.opt--on{border-color:var(--pipe);background:#13275A;box-shadow:inset 3px 0 0 var(--pipe)}
.opt--off,.opt input:disabled{opacity:.4;cursor:not-allowed}
.opt--off{background:transparent}

.banner{border-radius:var(--r-sm);padding:13px 15px;border:1px solid var(--rail);
  background:var(--pew-2);font-weight:500}
.banner--lock{border-color:var(--pipe);background:#2A2205;color:var(--pipe)}
.banner--bad{border-color:var(--bad);background:#2E0F0F;color:#FFC9C9}

/* ================================================================
   THE SIGNATURE: organ pipes.
   The Conference Center organ is a row of gold pipes of varying
   height. That is already a bar chart. Used in exactly two places —
   pick-sheet progress and the leaderboard — so it stays a signature
   and not a motif that has been run into the ground.
   ================================================================ */
.pipes{display:flex;align-items:flex-end;gap:2px;height:34px;padding:0;margin:0;list-style:none}
.pipe{flex:1 1 0;min-width:2px;background:var(--rail);border-radius:2px 2px 0 0;height:52%;
  transition:background .18s ease,height .18s ease}
/* the real organ rises toward the centre — this pattern echoes it */
.pipe:nth-child(7n+1){height:64%} .pipe:nth-child(7n+2){height:78%}
.pipe:nth-child(7n+3){height:92%} .pipe:nth-child(7n+4){height:100%}
.pipe:nth-child(7n+5){height:88%} .pipe:nth-child(7n+6){height:72%}
.pipe--on{background:var(--pipe)}
.pipe--on:nth-child(3n){background:var(--pipe-deep)}
@media(prefers-reduced-motion:reduce){.pipe{transition:none}}

/* sticky progress footer on the pick sheet */
.prog{position:sticky;bottom:0;z-index:40;background:var(--ink);
  border-top:1px solid var(--rail);padding:11px var(--pad) 13px}
.prog__row{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.prog__count{font-family:var(--display);font-size:22px;color:var(--pipe);line-height:1}
.prog__label{font-family:var(--util);text-transform:uppercase;letter-spacing:.13em;
  font-size:14px;font-weight:600;color:var(--paper-dim)}
/* kept so older markup still renders */
.prog__bar{height:8px;border-radius:4px;background:var(--pew-2);overflow:hidden}
.prog__fill{height:100%;background:var(--pipe)}

/* ---- leaderboard -------------------------------------------------- */
/* Safety net: a wide table scrolls inside its own box rather than pushing
   the whole page sideways. The rules below should stop it ever needing to. */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.lb{width:100%;border-collapse:collapse}
.lb th{font-family:var(--util);text-transform:uppercase;letter-spacing:.1em;font-size:11px;
  font-weight:600;color:var(--paper-faint);padding:6px 8px;text-align:left;
  border-bottom:1px solid var(--rail)}
/* Tight rows. Hundreds of people will scan this looking for their own name;
   every extra pixel of padding is another row they have to scroll past. */
.lb td{padding:6px 8px;border-bottom:1px solid var(--rail);vertical-align:middle;line-height:1.25}
.lb tr:hover{background:var(--pew)}
.lb td.num{text-align:right;font-family:var(--display);font-size:17px;
  font-variant-numeric:tabular-nums;color:var(--pipe)}
.lb td.rank{font-family:var(--display);font-size:15px;color:var(--paper-faint);width:1%;
  padding-right:10px}
/* score and "still live" belong on ONE line - the number was in a block
   element, which pushed the chip onto a second row and doubled every row's
   height. */
.lb td.num{white-space:nowrap}
.lb td.num>div{display:inline-block;margin-right:6px;vertical-align:middle}
.lb td.num .pts{vertical-align:middle}
.lb .pts{padding:1px 6px}
.lb .pts b{font-size:13px}
.lb .pts span{font-size:10px}
.lb .tag{padding:1px 6px;font-size:10px}
.lb td.move{text-align:right;font-family:var(--util);font-weight:600;font-size:15px;width:1%;
  white-space:nowrap}
.lb tr.me{background:#0E2A5E}
.lb tr.me td.rank{color:var(--arc)}
.up{color:var(--ok)} .down{color:var(--bad)}

/* On a narrow phone four columns will not fit. Tighten everything, let the
   name wrap, and drop the movement column - the arrow is repeated in the
   row's own chips, so nothing is lost. */
@media(max-width:430px){
  .lb th,.lb td{padding:10px 6px}
  .lb th{font-size:11px;letter-spacing:.06em}
  .lb td.rank{font-size:17px;padding-right:8px}
  .lb td.num{font-size:19px}
  .lb th:last-child,.lb td.move{display:none}
  .lb td:nth-child(2){overflow-wrap:anywhere;hyphens:none}
}

/* ---- layout ------------------------------------------------------- */
.grid{display:grid;gap:var(--pad);grid-template-columns:1fr}
@media(min-width:768px){.grid--2{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.grid--3{grid-template-columns:2fr 1fr}}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* the five session buttons under each leader in section A.
   wraps on a phone, one line from tablet up. */
.row--choices{gap:8px;align-items:stretch}
.row--choices .btn{flex:1 1 auto;min-width:132px;padding:0 14px;font-size:15px}
@media(min-width:900px){.row--choices .btn{min-width:0;flex:1 1 0}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.ftr{margin-top:56px;padding:22px 0 30px;border-top:1px solid var(--rail);
  color:var(--paper-faint);font-size:14px}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ================================================================
   ADMIN DENSITY
   The player-facing UI is built for thumbs on a phone: 48px targets,
   17px type, generous padding. The admin screen is the opposite job —
   one person at a laptop entering thirty answers against the clock
   while conference is on. Everything here is tighter, and the whole
   block is scoped to .dense so nothing on the player side changes.
   ================================================================ */
.dense{font-size:15px}
.dense .qrow{display:grid;grid-template-columns:1fr minmax(210px,300px) auto;
  gap:10px;align-items:start;padding:8px 10px;border-bottom:1px solid var(--rail)}
.dense .qrow:hover{background:var(--pew)}
.dense .qrow--voided{opacity:.45}
.dense .qrow--done{opacity:.72}
.dense .qlabel{font-weight:500;line-height:1.35;min-width:0}
.dense .qmeta{font-family:var(--util);text-transform:uppercase;letter-spacing:.09em;
  font-size:11px;color:var(--paper-faint);display:block;margin-bottom:2px}
.dense .qmeta b{color:var(--pipe);font-weight:600}

.dense input:not([type="checkbox"]),.dense select,.dense textarea{
  min-height:34px;padding:5px 9px;font-size:15px;border-radius:6px}
.dense select{padding-right:26px}

/* the pick-9 grid: small chips, several per row, not a stack of big bars */
.dense .opts{display:grid;gap:4px;grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.dense .opt{min-height:28px;padding:3px 7px;font-size:13px;gap:6px;border-radius:5px;line-height:1.2}
.dense .opt input[type="checkbox"]{width:15px;height:15px}

/* void is a small control, not a full-width row */
.dense .qvoid{display:flex;align-items:center;gap:5px;font-size:12px;
  color:var(--paper-faint);white-space:nowrap;padding-top:6px}
.dense .qvoid input{width:15px;height:15px;min-height:0}
.dense .tag{padding:1px 7px;font-size:11px;letter-spacing:.07em}
@media(max-width:720px){
  .dense .qrow{grid-template-columns:1fr;gap:6px}
  .dense .qvoid{padding-top:0}
}