/* site.css - the QRT Trading Challenge pages. QRT's ground (indigo #0d072c) and
   blues (#1d71b8, #36a9e0, #85c9f0) from qube-rt.com; the layout of the portal's
   sign-in screen; the portal's order-book background (marque/carnet.css). */
:root{
  --ground:#0d072c; --card:#140b3f; --glass:rgba(20,11,63,.78); --field:#0f0834;
  --ink:#eef3fb; --muted:#9aa6c8; --line:#2a2170; --line-hi:#3b3290;
  --brand:#36a9e0; --brand-2:#85c9f0; --deep:#1d71b8; --ring:rgba(54,169,224,.22);
  --ok:#3fd08a; --warn:#ffc107; --bad:#ff5858;
  --card-shadow:0 1px 1px rgba(0,0,0,.4), 0 14px 28px -10px rgba(0,0,0,.55), 0 40px 80px -30px rgba(29,113,184,.35);
  --btn-shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 26px -8px rgba(54,169,224,.55);
  --glow-a:rgba(29,113,184,.38); --glow-b:rgba(54,169,224,.20); --glow-c:rgba(26,14,88,.9);
  --tile:#0d072c; --tile-line:#2a2170;
}
:root[data-theme="light"]{
  --ground:#f1f5fb; --card:#ffffff; --glass:rgba(255,255,255,.86); --field:#f6f9fd;
  --ink:#0d072c; --muted:#5b6386; --line:#e1e7f2; --line-hi:#cbd6e8;
  --brand:#1d71b8; --brand-2:#1d71b8; --deep:#1d71b8; --ring:rgba(29,113,184,.16);
  --ok:#12a150; --warn:#b8791a; --bad:#d64545;
  --card-shadow:0 1px 1px rgba(13,7,44,.04), 0 10px 20px -8px rgba(13,7,44,.12), 0 30px 60px -24px rgba(29,113,184,.22);
  --btn-shadow:0 1px 2px rgba(13,7,44,.22), 0 10px 22px -6px rgba(29,113,184,.42);
  --glow-a:rgba(54,169,224,.18); --glow-b:rgba(133,201,240,.22); --glow-c:rgba(29,113,184,.08);
  --tile:#0d072c; --tile-line:#0d072c;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0; padding:2.2rem 1rem 1.5rem; display:grid; justify-items:center; background:var(--ground); color:var(--ink);
  font:400 16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(900px 560px at 15% -8%, var(--glow-a), transparent 60%),
             radial-gradient(760px 480px at 90% 105%, var(--glow-b), transparent 60%),
             radial-gradient(600px 400px at 100% 0%, var(--glow-c), transparent 65%)}
a{color:var(--brand-2)}
.theme{position:fixed; top:1.15rem; right:1.15rem; z-index:2; width:2.3rem; height:2.3rem; display:grid; place-items:center;
  border-radius:11px; cursor:pointer; background:var(--card); border:1px solid var(--line); color:var(--muted)}
.theme:hover{color:var(--brand); border-color:var(--line-hi)}
.theme .moon{display:none}
:root[data-theme="light"] .theme .sun{display:none}
:root[data-theme="light"] .theme .moon{display:block}

.wrap{position:relative; z-index:1; width:100%; max-width:31rem}
.wrap.wide{max-width:60rem}

/* The top row: the two schools either side, the three partners on the axis. */
.top{width:min(40rem,calc(100vw - 2rem)); margin:0 auto 1.6rem; position:relative; left:50%; transform:translateX(-50%);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:0 2rem}
.top > :first-child{justify-self:end}
.top > :last-child{justify-self:start}
.top a{line-height:0}
.partner{display:block; background:#fff; border-radius:10px; padding:.35rem .5rem; opacity:.92}
.partner img{height:40px; width:auto; display:block}
.brand{display:flex; flex-direction:column; align-items:center; gap:.45rem; text-align:center}
.tiles{display:flex; align-items:center; gap:.55rem}
.tile{width:64px; height:64px; border-radius:15px; display:grid; place-items:center; overflow:hidden;
  background:var(--tile); border:1px solid var(--tile-line); box-shadow:0 14px 32px -12px rgba(29,113,184,.5), 0 0 0 8px var(--ring)}
.tile.maqi{background:#fff; border-color:var(--line-hi)}
.tile.lseg{background:#001eff; border-color:#001eff}
.tile img{width:38px; height:38px; display:block}
.tile.lseg img{width:64px; height:64px}
.x{font-size:1.15rem; font-weight:300; color:var(--muted); line-height:1}
.names{display:flex; align-items:center; gap:.5rem; margin-top:.1rem}
.names b{font-size:1.15rem; font-weight:700; letter-spacing:-.01em; color:var(--ink); line-height:1}
.names img{height:19px; width:auto; display:block}
.names .ink{display:none}
:root[data-theme="light"] .names .white{display:none}
:root[data-theme="light"] .names .ink{display:block}
.brand small{font-size:.74rem; color:var(--brand-2); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap}

.card{background:var(--glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--line);
  border-radius:22px; padding:1.85rem 1.6rem 1.5rem; box-shadow:var(--card-shadow); margin-bottom:1rem}
.card h1{margin:0 0 .3rem; font-size:1.3rem; font-weight:700; letter-spacing:-.02em; line-height:1.3; text-align:center}
.card h2{margin:1.2rem 0 .5rem; font-size:1rem; font-weight:700}
.lede{margin:0 0 1.1rem; font-size:.88rem; line-height:1.55; color:var(--muted); text-align:center; text-wrap:pretty}
.status{display:flex; justify-content:center; margin:0 0 1.1rem}
.status span{display:inline-flex; align-items:center; gap:.45rem; font-size:.78rem; font-weight:600; border-radius:999px; padding:.25rem .75rem;
  color:var(--ok); background:rgba(63,208,138,.10); border:1px solid rgba(63,208,138,.32)}
.status span::before{content:""; width:.5rem; height:.5rem; border-radius:50%; background:currentColor}
.status.closed span,.status.soon span{color:var(--warn); background:rgba(255,193,7,.08); border-color:rgba(255,193,7,.3)}
.status.last span,.status.final span{color:var(--bad); background:rgba(255,88,88,.08); border-color:rgba(255,88,88,.35)}
.status .count{font-style:normal; font-variant-numeric:tabular-nums}
.status.final span::before{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin:0 0 1.4rem}
.facts div{border:1px solid var(--line); border-radius:12px; padding:.55rem .5rem; text-align:center; background:var(--field)}
.facts b{display:block; font-size:.88rem; color:var(--brand-2)}
.facts small{display:block; font-size:.72rem; color:var(--muted); line-height:1.35}

fieldset{border:0; margin:0 0 1rem; padding:0}
legend{font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; padding:0}
label{display:block; font-size:.78rem; font-weight:600; margin:0 0 .6rem}
label span{display:block; margin-bottom:.2rem}
input,select,textarea{width:100%; font:inherit; font-size:.92rem; color:var(--ink); background:var(--field);
  border:1px solid var(--line-hi); border-radius:10px; padding:.6rem .7rem; margin-bottom:.45rem}
input::placeholder,textarea::placeholder{color:var(--muted); opacity:.75}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ring); border-color:var(--brand)}
input.guess{color:var(--muted); font-style:italic}
.hint{font-size:.74rem; color:var(--muted); font-weight:400; margin:.1rem 0 .6rem}
.muted{color:var(--muted); font-size:.85rem}
.you{margin:-.6rem 0 1rem; text-align:center}
.consent{display:flex; gap:.55rem; align-items:flex-start; font-weight:400; font-size:.76rem; color:var(--muted); line-height:1.45; margin:.3rem 0 1rem}
.consent input{width:auto; margin:.15rem 0 0; accent-color:var(--brand)}
.consent a{color:var(--muted)}
.btn{display:block; width:100%; border:0; border-radius:14px; padding:.85rem 1.2rem; cursor:pointer; text-align:center; text-decoration:none;
  font:inherit; font-size:.95rem; font-weight:650; color:#fff; background:linear-gradient(135deg, var(--deep), #36a9e0); box-shadow:var(--btn-shadow)}
.btn:hover{filter:brightness(1.08)}
.btn.secondary{background:var(--card); color:var(--brand-2); border:1px solid var(--line-hi); box-shadow:none}
.btn + .btn{margin-top:.6rem}
button.link{background:none; border:0; padding:0; font:inherit; font-size:.8rem; color:var(--brand-2); cursor:pointer; text-decoration:underline}
button.link.danger,a.danger{color:var(--bad)}
form.inline{display:inline; margin-left:.4rem}
.notice{border-radius:12px; padding:.6rem .85rem; font-size:.84rem; line-height:1.45; margin:0 0 1rem; border:1px solid var(--line); background:var(--field)}
.notice.ok{color:var(--ok); border-color:rgba(63,208,138,.32)}
.notice.warn{color:var(--warn); border-color:rgba(255,193,7,.3)}
.notice.bad{color:var(--bad); border-color:rgba(255,88,88,.35)}
ul.members,ul.plain,ul.files{list-style:none; margin:0 0 .8rem; padding:0}
ul.members li,ul.files li{padding:.45rem 0; border-bottom:1px solid var(--line); font-size:.88rem}
ul.plain li{font-size:.82rem; padding:.1rem 0}
.addr{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85em}
.state{font-size:.74rem; padding:.1rem .5rem; border-radius:999px; border:1px solid var(--line-hi); margin-left:.3rem}
.state.ok{color:var(--ok); border-color:rgba(63,208,138,.4)}
.state.warn{color:var(--warn); border-color:rgba(255,193,7,.4)}
.state.muted{color:var(--muted)}
td.ok,.text-ok{color:var(--ok); font-weight:600}
td.warn,.text-warn{color:var(--warn); font-weight:600}
table{width:100%; border-collapse:collapse; font-size:.85rem; margin:0 0 1rem}
th,td{text-align:left; vertical-align:top; padding:.5rem .4rem; border-bottom:1px solid var(--line)}
th{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.counts{display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; margin:0 0 1.2rem}
.counts div{border:1px solid var(--line); border-radius:12px; padding:.55rem .5rem; text-align:center; background:var(--field)}
.counts b{display:block; font-size:1.4rem; color:var(--brand-2)}
.counts small{font-size:.72rem; color:var(--muted)}
details summary{cursor:pointer; font-size:.8rem; color:var(--muted)}
pre{white-space:pre-wrap; font-size:.8rem; background:var(--field); border:1px solid var(--line); border-radius:10px; padding:.8rem}
.foot{display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:.4rem 1.4rem; margin-top:.4rem; font-size:.78rem; color:var(--muted)}
.foot span{display:inline-flex; align-items:center; gap:.45rem}
.foot img{height:22px; width:auto}
.foot a{color:var(--muted)}
.preview{position:sticky; top:0; z-index:3; font-size:.74rem; color:#0d072c; background:#ffc107; border-radius:10px; padding:.35rem .7rem; margin-bottom:1rem; text-align:center}
.preview a{color:#0d072c}
@media (max-width:600px){.top{gap:0 .8rem}.partner img{height:28px}.tile{width:52px;height:52px;border-radius:12px}.tile img{width:30px;height:30px}
  .tile.lseg img{width:52px;height:52px}.names b{font-size:1rem}.names img{height:16px}.brand small{font-size:.62rem}
  .facts,.counts{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}