/* 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;color:var(--paper);background:var(--pew-2);
  border:1px solid var(--rail);border-radius:var(--r-sm)}
input::placeholder{color:var(--paper-faint)}
.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;
  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;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:.13em;font-size:13px;
  font-weight:600;color:var(--paper-faint);padding:10px;text-align:left;
  border-bottom:1px solid var(--rail)}
.lb td{padding:13px 10px;border-bottom:1px solid var(--rail);vertical-align:middle}
.lb td.num{text-align:right;font-family:var(--display);font-size:22px;
  font-variant-numeric:tabular-nums;color:var(--pipe)}
.lb td.rank{font-family:var(--display);font-size:20px;color:var(--paper-faint);width:1%;
  padding-right:14px}
.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}}