/* ═══════════════════════════════════════════════════════════════════════════════════════
   BuilderCult Speedrun · one sheet for the application and the dashboard.
   Slush grammar: dark tonal layers, no lines (depth is three shades), sun is the only action
   colour and always wears a black outline, Anton for anything loud, Inter for everything read,
   sticker colours only on tags. No visible scrollbars. No purple.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --l0:#0e0e11; --l1:#15151a; --l2:#1f1f25; --l3:#2a2a32; --l4:#363640;
  --ink:#f3efe6; --muted:#a8a49b; --dim:#6f6c66;
  --sun:#ffd731; --ember:#fb4903; --mint:#55db9c; --blue:#4da2ff; --lav:#e9ccff;
  --disp:'Anton','Druk',Impact,ui-sans-serif,sans-serif;
  --mark:'Permanent Marker','Anton',cursive;
  --ui:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --r:20px; --r-lg:30px; --pill:1600px; --max:1120px; --col:720px;
  color-scheme:dark;
}
*{box-sizing:border-box}
/* an element's own display rule must never beat the hidden attribute · the gate, the settings
   panel, the done block and the closed tag all rely on this */
[hidden]{display:none!important}
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
*{scrollbar-width:none} *::-webkit-scrollbar{display:none}
body{margin:0;background:var(--l0);color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.5;letter-spacing:-.01em;font-feature-settings:"tnum";-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--sun);color:#000}

/* ── type ── */
.disp{font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:.88;letter-spacing:-.01em;margin:0}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.032em;text-transform:uppercase;color:var(--muted)}
.dim{color:var(--muted)}
.mono{font-family:var(--mono)}
h1,h2,h3{margin:0}
p{margin:0}

/* ── the mark · BUILDERCULT in marker, SPEEDRUN slanted with speed trails ── */
.lockup{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1;user-select:none;text-decoration:none}
.lockup .bc{font-family:var(--mark);font-size:var(--bc,22px);letter-spacing:.02em;color:var(--ink);transform:rotate(-1.5deg);text-transform:none}
.lockup .sr{font-family:var(--disp);font-style:italic;text-transform:uppercase;font-size:var(--sr,56px);letter-spacing:-.03em;color:var(--sun);
  transform:skewX(-14deg);margin-top:.02em;margin-left:.06em;position:relative;
  text-shadow:-.12em 0 0 rgba(255,215,49,.42),-.24em 0 0 rgba(255,215,49,.22),-.36em 0 0 rgba(255,215,49,.1)}
.lockup .sr::after{content:'';position:absolute;left:.04em;right:-.1em;bottom:-.08em;height:.09em;background:var(--sun);
  clip-path:polygon(0 0,100% 0,96% 100%,4% 100%)}
.lockup.big{--bc:clamp(22px,3.2vw,40px);--sr:clamp(64px,13vw,190px)}
.lockup.small{--bc:15px;--sr:34px}

/* ── buttons · sun is the only action colour and it always wears the black outline ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--pill);padding:12px 22px;font-weight:700;font-size:13.5px;letter-spacing:.032em;text-transform:uppercase;cursor:pointer;border:1px solid transparent;background:var(--l2);color:var(--ink);text-decoration:none;transition:transform .08s,background .15s,box-shadow .08s}
.btn:hover{background:var(--l3)}
.btn.sun{background:var(--sun);color:#000;border-color:#000;box-shadow:0 4px 0 #000}
.btn.sun:hover{transform:translateY(-1px);box-shadow:0 5px 0 #000;background:var(--sun)}
.btn.sun:active{transform:translateY(2px);box-shadow:0 2px 0 #000}
.btn.sun:disabled{opacity:.55;transform:none;cursor:not-allowed}
.btn.ghost{background:transparent;border-color:rgba(243,239,230,.24)}
.btn.ghost:hover{border-color:var(--ink);background:transparent}
.btn.big{padding:18px 32px;font-size:15px}
.btn.sm{padding:8px 14px;font-size:12px}
.btn.danger{color:var(--ember)}

/* ── surfaces · depth is shade, never a line ── */
.panel{background:var(--l1);border-radius:var(--r-lg)}
.card{background:var(--l2);border-radius:var(--r)}

/* ── tags · the sticker colours live here and only here ── */
.tag{display:inline-flex;align-items:center;gap:6px;border-radius:var(--pill);padding:3px 10px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--l3);color:var(--ink);white-space:nowrap}
.tag.sun{background:var(--sun);color:#000}
.tag.mint{background:var(--mint);color:#000}
.tag.blue{background:var(--blue);color:#000}
.tag.ember{background:var(--ember);color:#000}
.tag.lav{background:var(--lav);color:#000}
.tag.ghost{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px rgba(243,239,230,.18)}

/* ── inputs · tonal fill, sun ring on focus, never a resting border ── */
.field{display:flex;flex-direction:column;gap:8px}
.field label,.field .lbl{font-weight:600;font-size:15.5px;line-height:1.35;color:var(--ink)}
.field .help{font-size:13.5px;color:var(--muted);line-height:1.45;margin-top:-2px}
.in{width:100%;background:var(--l2);color:var(--ink);border:1px solid transparent;border-radius:var(--r);padding:13px 15px;font:inherit;font-size:15px;line-height:1.45;outline:none;transition:background .15s,border-color .15s;resize:vertical;min-height:48px}
.in::placeholder{color:var(--dim)}
.in:hover{background:var(--l3)}
.in:focus{background:var(--l2);border-color:var(--sun);box-shadow:0 0 0 3px rgba(255,215,49,.18)}
.in.bad{border-color:var(--ember)}
textarea.in{min-height:132px}
select.in{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a8a49b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.acklink{color:var(--sun);text-decoration:none;font-weight:600;white-space:nowrap}
.acklink:hover{text-decoration:underline}
.pfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:-4px;min-height:22px}
.pfoot .count{margin:0 0 0 auto}
.count{font-size:12px;color:var(--dim);text-align:right;font-variant-numeric:tabular-nums;margin-top:-4px}
/* the mic · quiet until it is listening, then it wears the ember dot like a live tag */
.mic{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(243,239,230,.24);background:transparent;border-radius:var(--pill);padding:5px 12px 5px 9px;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:border-color .15s,color .15s}
.mic:hover{border-color:var(--ink);color:var(--ink)}
.mic i{width:14px;height:14px;border-radius:50%;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3' fill='%23000'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M9 21h6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3' fill='%23000'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M9 21h6'/%3E%3C/svg%3E") center/contain no-repeat}
.mic.on{border-color:var(--ember);color:var(--ink)}
.mic.on i{-webkit-mask:none;mask:none;background:var(--ember);width:10px;height:10px;margin:0 2px;animation:micpulse 1.1s ease-in-out infinite}
.mic.busy{border-color:var(--sun);color:var(--sun);cursor:progress}
.mic.busy i{-webkit-mask:none;mask:none;background:var(--sun);width:10px;height:10px;margin:0 2px;animation:micpulse .6s ease-in-out infinite}
.mic:disabled{cursor:progress}
@keyframes micpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.6);opacity:.45}}
@media (prefers-reduced-motion:reduce){.mic i{animation:none!important}}
.count.warn{color:var(--sun)} .count.over{color:var(--ember)}
.err{font-size:12.5px;color:var(--ember);font-weight:600}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:640px){.row2{grid-template-columns:1fr}}
/* one number, sized for a number · the spinner is gone, the unit sits beside it */
.numrow{display:flex;align-items:center;gap:12px}
.in.num{width:120px;text-align:center;font-family:var(--disp);font-size:26px;letter-spacing:.02em;padding:8px 12px;-moz-appearance:textfield;appearance:textfield}
.in.num::-webkit-outer-spin-button,.in.num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.numrow .unit{font-size:13.5px;color:var(--muted)}

/* choice chips · single or multi, the chosen one turns sun */
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices.col{flex-direction:column}
.choice{display:inline-flex;align-items:center;gap:10px;background:var(--l2);border-radius:var(--r);padding:11px 15px;cursor:pointer;font-size:14.5px;line-height:1.3;border:1px solid transparent;transition:background .12s,transform .08s;user-select:none}
.choice:hover{background:var(--l3)}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice .dot{width:18px;height:18px;border-radius:50%;flex:none;background:var(--l4);display:grid;place-items:center;transition:background .12s}
.choice .dot::after{content:'';width:8px;height:8px;border-radius:50%;background:#000;opacity:0;transform:scale(.4);transition:all .12s}
.choice.box .dot{border-radius:5px}
.choice.box .dot::after{width:10px;height:6px;border-radius:0;background:none;border-left:2.5px solid #000;border-bottom:2.5px solid #000;transform:rotate(-45deg) scale(.6) translate(1px,-1px)}
.choice:has(input:checked){background:var(--sun);color:#000;border-color:#000}
.choice:has(input:checked) .dot{background:#000}
.choice:has(input:checked) .dot::after{opacity:1;transform:scale(1)}
.choice.box:has(input:checked) .dot{background:#fff}
.choice.box:has(input:checked) .dot::after{transform:rotate(-45deg) scale(1) translate(1px,-1px)}
.choice:has(input:focus-visible){box-shadow:0 0 0 3px rgba(255,215,49,.35)}

/* acknowledgement checkboxes · long text, checkbox leads */
.ack{display:flex;gap:14px;align-items:flex-start;background:var(--l2);border-radius:var(--r);padding:14px 16px;cursor:pointer;border:1px solid transparent;transition:background .12s}
.ack:hover{background:var(--l3)}
.ack input{position:absolute;opacity:0;width:0;height:0}
.ack .dot{width:22px;height:22px;border-radius:6px;flex:none;background:var(--l4);margin-top:1px;display:grid;place-items:center}
.ack .dot::after{content:'';width:11px;height:6px;border-left:2.5px solid #000;border-bottom:2.5px solid #000;transform:rotate(-45deg) translate(1px,-2px);opacity:0}
.ack:has(input:checked){background:var(--l3);border-color:rgba(255,215,49,.5)}
.ack:has(input:checked) .dot{background:var(--sun)}
.ack:has(input:checked) .dot::after{opacity:1}
.ack:has(input:focus-visible){box-shadow:0 0 0 3px rgba(255,215,49,.35)}
.ack span{font-size:14px;line-height:1.5;color:var(--ink)}
.ack.bad{border-color:var(--ember)}

/* ── toast ── */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#000;font-weight:700;font-size:13.5px;padding:12px 18px;border-radius:var(--pill);opacity:0;pointer-events:none;transition:all .25s;z-index:99;max-width:min(92vw,560px);text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.bad{background:var(--ember);color:#fff}

/* ═══════════════════ THE APPLICATION PAGE ═══════════════════ */

/* hero · the video is the object, the words punch through it */
.hero{position:relative;overflow:hidden;background:#000;margin:14px;border-radius:var(--r-lg);min-height:calc(100vh - 28px);min-height:calc(100dvh - 28px);display:grid;place-items:center;text-align:center;padding:64px 20px}
@media (max-width:640px){.hero{margin:8px;border-radius:24px;min-height:calc(100dvh - 16px)}}
.hero .vid{position:absolute;inset:0;pointer-events:none}
.hero .vid video,.hero .vid iframe{width:100%;height:100%;object-fit:cover;opacity:.72}
.hero .vid.empty{background:var(--l1)}
.hero .vid.empty::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-14deg,transparent 0 46px,rgba(255,215,49,.045) 46px 48px)}
.hero::after{content:'';position:absolute;inset:0;background:rgba(14,14,17,.34);pointer-events:none}
/* the iconic trail · photos under the copy, never over it */
.trail{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.trail-card{position:absolute;border-radius:12px;object-fit:cover;border:1px solid #000;box-shadow:0 6px 0 #000,0 18px 40px rgba(0,0,0,.45);transform:rotate(var(--tilt)) scale(.6);opacity:0;animation:trail-in .28s cubic-bezier(.2,.9,.3,1.2) forwards;will-change:transform,opacity}
.trail-card.burst{animation:trail-burst .5s cubic-bezier(.2,.9,.3,1.1) forwards}
.trail-card.out{animation:trail-out .38s ease-in forwards}
@keyframes trail-in{to{transform:rotate(var(--tilt)) scale(1);opacity:1}}
@keyframes trail-burst{from{transform:translate(0,0) rotate(var(--tilt)) scale(.4);opacity:0}to{transform:translate(var(--dx),var(--dy)) rotate(var(--tilt)) scale(1);opacity:1}}
@keyframes trail-out{from{opacity:1}to{opacity:0;transform:translate(var(--dx,0),calc(var(--dy,0px) + 18px)) rotate(var(--tilt)) scale(.92)}}
.hero .inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:22px;max-width:960px}
.hero h1 b{font-weight:700;color:#fff}
.hero .lockup{align-items:center}
.hero .lockup .bc{transform:rotate(-2deg)}
.hero h1{font-family:var(--ui);font-weight:400;font-size:clamp(17px,1.9vw,22px);line-height:1.5;letter-spacing:-.01em;max-width:76ch;text-wrap:pretty;margin:0;color:var(--ink);text-align:center}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.playbtn{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;background:var(--sun);border:1px solid #000;box-shadow:0 4px 0 #000;cursor:pointer;display:grid;place-items:center;transition:transform .08s}
.playbtn:hover{transform:translate(-50%,-52%)}
.playbtn::after{content:'';margin-left:5px;border-left:22px solid #000;border-top:13px solid transparent;border-bottom:13px solid transparent}
.playbtn.hide{display:none}
.hero .soundhint{position:absolute;z-index:3;right:18px;bottom:18px}

/* what you get · a checklist of stickers */
.get{max-width:var(--max);margin:0 auto;padding:56px 22px 20px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}
@media (max-width:820px){.get{grid-template-columns:1fr;gap:28px}}
.get .k{font-family:var(--disp);text-transform:uppercase;font-size:clamp(30px,4vw,50px);line-height:1.06;letter-spacing:.01em;max-width:17ch;text-wrap:balance;margin:6px 0 0}
.get .k b{color:var(--sun);font-weight:400}
.get .k span{display:block}
.get ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.get li{display:flex;gap:12px;align-items:flex-start;background:var(--l1);border-radius:var(--r);padding:12px 14px;font-size:14.5px}
.get li i{flex:none;width:22px;height:22px;border-radius:6px;background:var(--sun);display:grid;place-items:center;margin-top:1px}
.get li i::after{content:'';width:10px;height:6px;border-left:2.5px solid #000;border-bottom:2.5px solid #000;transform:rotate(-45deg) translate(1px,-2px)}
.get li:first-child{background:var(--sun);color:#000;font-weight:700}
.get li:first-child i{background:#000} .get li:first-child i::after{border-color:var(--sun)}
.get .fee{font-size:13px;color:var(--muted);line-height:1.5;margin-top:14px}

/* the form · one column, checkpoints down the run, a rail that fills as you go */
.run{max-width:var(--max);margin:0 auto;padding:36px 22px 120px;display:grid;grid-template-columns:200px minmax(0,var(--col));gap:56px;justify-content:center}
@media (max-width:900px){.run{grid-template-columns:minmax(0,1fr);gap:0}}
.rail{position:sticky;top:24px;align-self:start;display:flex;flex-direction:column;gap:2px}
@media (max-width:900px){.rail{display:none}}
.rail a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--muted);font-size:13px;font-weight:600;transition:background .12s,color .12s}
.rail a:hover{background:var(--l1);color:var(--ink)}
.rail a .n{font-family:var(--disp);font-size:14px;letter-spacing:.02em;width:22px;color:var(--dim)}
.rail a .pip{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--l3)}
.rail a.on{color:var(--ink);background:var(--l1)}
.rail a.on .n{color:var(--sun)}
.rail a.done .pip{background:var(--sun)}
.rail a.done .n{color:var(--sun)}
/* the percentage sits under the sections · the number in Anton, the bar under it */
.rail .railprog{margin:18px 10px 0;display:flex;flex-direction:column;gap:8px}
.rail .prog{font-family:var(--disp);font-size:22px;letter-spacing:.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.rail .bar{display:block;height:4px;background:var(--l3);border-radius:2px;overflow:hidden}
.rail .bar i{display:block;height:100%;width:0;background:var(--sun);transition:width .3s}
.rail .save{margin-top:10px;padding:0 10px;font-size:11.5px;color:var(--dim);line-height:1.45}

.sec{padding:26px 0 12px;scroll-margin-top:84px}
.sec .head{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px}
.sec .head .n{font-family:var(--disp);font-size:clamp(56px,8vw,96px);line-height:.8;color:var(--l3);letter-spacing:-.02em;transition:color .3s}
.sec.done .head .n,.sec.on .head .n{color:var(--sun)}
.sec .head .t{padding-bottom:6px}
.sec .head h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(22px,3vw,34px);line-height:1.02;letter-spacing:.01em}
.sec .head .lead{font-size:13.5px;color:var(--muted);margin-top:6px}
.sec .qs{display:flex;flex-direction:column;gap:24px}
.q{display:flex;flex-direction:column;gap:9px;scroll-margin-top:90px}
.q .lbl{display:flex;gap:10px;align-items:baseline}
.q .lbl .num{font-family:var(--disp);font-size:13px;letter-spacing:.04em;color:var(--dim);min-width:20px}
.q .lbl .opt{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-left:auto;white-space:nowrap}
.q[hidden]{display:none}
.links{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:640px){.links{grid-template-columns:1fr}}
.links .lk{display:flex;align-items:center;background:var(--l2);border-radius:var(--r);padding-left:13px;transition:background .12s}
.links .lk:hover{background:var(--l3)}
.links .lk:focus-within{background:var(--l2);box-shadow:0 0 0 1px var(--sun),0 0 0 4px rgba(255,215,49,.18)}
.links .lk span{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;width:78px;flex:none}
.links .lk input{background:transparent;border:0;outline:0;color:var(--ink);font:inherit;font-size:14px;padding:12px 12px 12px 0;flex:1;min-width:0}
.links .lk input::placeholder{color:var(--dim)}
.videoq{display:flex;flex-direction:column;gap:10px}
.videoq .up{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.videoq .file{display:none}
.videoq .upstate{font-size:13px;color:var(--muted)}
.videoq .upbar{height:4px;background:var(--l3);border-radius:2px;overflow:hidden;width:100%;display:none}
.videoq .upbar i{display:block;height:100%;width:0;background:var(--sun);transition:width .2s}
.videoq .upbar.on{display:block}
.submit{margin-top:30px;background:var(--l1);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.submit .ready{font-family:var(--disp);text-transform:uppercase;font-size:28px;line-height:.9}
.submit .missing{font-size:13.5px;color:var(--muted);line-height:1.5}
.submit .missing a{color:var(--sun);text-decoration:none;font-weight:600}
.submit .missing a:hover{text-decoration:underline}

/* done */
.done-wrap{max-width:var(--col);margin:0 auto;padding:96px 22px 140px;display:flex;flex-direction:column;gap:22px;text-align:center;align-items:center}
.done-wrap .stamp{font-family:var(--mark);font-size:clamp(40px,8vw,88px);color:var(--sun);transform:rotate(-4deg);line-height:1}
.done-wrap h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(28px,5vw,52px);line-height:1.04;letter-spacing:.01em}
.done-wrap p{color:var(--muted);max-width:52ch;line-height:1.55}

.foot{max-width:var(--max);margin:0 auto;padding:30px 22px 60px;display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--dim);font-size:12.5px;flex-wrap:wrap}

/* ═══════════════════ THE DASHBOARD ═══════════════════ */
body.admin{background:var(--l0)}
.abar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:12px 20px;background:rgba(14,14,17,.9);backdrop-filter:blur(12px)}
.abar .grow{flex:1}
.abar .store{font-size:11.5px;color:var(--muted);display:flex;gap:8px;align-items:center}
.abar .store b{color:var(--ink)}
.awrap{max-width:1500px;margin:0 auto;padding:22px 20px 80px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:18px}
.tile{background:var(--l1);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:background .12s;border:1px solid transparent}
.tile:hover{background:var(--l2)}
.tile.on{border-color:var(--sun)}
.tile .v{font-family:var(--disp);font-size:34px;line-height:.9;letter-spacing:-.01em}
.tile .k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tile.sun .v{color:var(--sun)}
.bars{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-bottom:18px}
.barcard{background:var(--l1);border-radius:var(--r);padding:14px 16px}
.barcard .k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.barcard .b{display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:8px;align-items:center;font-size:12.5px;margin-bottom:7px}
.barcard .b .lab{display:flex;flex-direction:column;gap:4px;min-width:0}
.barcard .b .lab span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barcard .b .lab i{display:block;height:5px;border-radius:2px;background:var(--sun);min-width:3px}
.barcard .b .n{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.tools .in{width:auto;min-width:220px;flex:1;padding:10px 14px;min-height:0}
.tools select.in{flex:none;min-width:0;width:auto;padding-right:36px}
.tools .n{font-size:12.5px;color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums}
#tablewrap{overflow-x:auto}
.tbl{width:100%;min-width:960px;border-collapse:separate;border-spacing:0 6px}
.tbl th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:4px 12px;white-space:nowrap}
.tbl td{background:var(--l1);padding:12px;font-size:13.5px;vertical-align:middle}
.tbl tr td:first-child{border-radius:var(--r) 0 0 var(--r)}
.tbl tr td:last-child{border-radius:0 var(--r) var(--r) 0}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover td{background:var(--l2)}
.tbl tbody tr.sel td{background:var(--l2);box-shadow:inset 0 0 0 1px rgba(255,215,49,.5)}
.tbl .who b{display:block;font-weight:700}
.tbl .who span{color:var(--muted);font-size:12px}
.tbl .cell-dim{color:var(--muted);font-size:12.5px}
.tbl .flags{display:flex;gap:4px;flex-wrap:wrap}
.tbl .score{font-family:var(--disp);font-size:20px;letter-spacing:.02em}
.tbl .score.none{color:var(--dim);font-size:13px;font-family:var(--ui)}
.empty{background:var(--l1);border-radius:var(--r-lg);padding:60px 20px;text-align:center;color:var(--muted)}
.empty .disp{font-size:34px;margin-bottom:8px;color:var(--ink)}

/* the side sheet · the whole application, readable */
.sheet{position:fixed;top:0;right:0;bottom:0;width:min(760px,100vw);background:var(--l1);z-index:40;transform:translateX(102%);transition:transform .28s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;box-shadow:-30px 0 60px rgba(0,0,0,.5)}
.sheet.on{transform:translateX(0)}
.sheet .sh{display:flex;align-items:flex-start;gap:12px;padding:20px 22px 14px;background:var(--l1);position:sticky;top:0;z-index:2}
.sheet .sh .who{flex:1;min-width:0}
.sheet .sh h2{font-family:var(--disp);text-transform:uppercase;font-size:30px;line-height:.9;letter-spacing:-.01em;word-break:break-word}
.sheet .sh .meta{font-size:12.5px;color:var(--muted);margin-top:6px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sheet .sh .x{width:36px;height:36px;border-radius:50%;background:var(--l2);border:0;cursor:pointer;display:grid;place-items:center;font-size:18px;flex:none}
.sheet .sh .x:hover{background:var(--l3)}
.sheet .body{overflow:auto;padding:0 22px 40px;flex:1}
.sheet .st{display:flex;gap:6px;flex-wrap:wrap;padding:8px 0 18px}
.sheet .st button{border:1px solid transparent;background:var(--l2);border-radius:var(--pill);padding:7px 13px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.sheet .st button:hover{background:var(--l3)}
.sheet .st button.on{background:var(--sun);color:#000;border-color:#000}
.sheet .grp{margin-bottom:24px}
.sheet .grp h3{font-family:var(--disp);text-transform:uppercase;font-size:16px;letter-spacing:.04em;color:var(--sun);margin-bottom:10px;display:flex;align-items:center;gap:10px}
.sheet .grp h3 span{color:var(--dim);font-size:13px}
.sheet .a{margin-bottom:14px}
.sheet .a .ql{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px;line-height:1.35}
.sheet .a .av{font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.sheet .a .av.none{color:var(--dim);font-style:italic}
.sheet .a .chips{display:flex;gap:5px;flex-wrap:wrap}
.sheet .flagbox{background:var(--l2);border-radius:var(--r);padding:12px 14px;margin-bottom:18px;display:flex;flex-direction:column;gap:6px}
.sheet .flagbox .k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.sheet .flagbox .f{display:flex;gap:6px;flex-wrap:wrap}
.sheet .scorebox{background:var(--l2);border-radius:var(--r);padding:14px 16px;margin-bottom:18px}
.sheet .scorebox .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.sheet .scorebox .s{background:var(--l3);border-radius:10px;padding:8px 10px}
.sheet .scorebox .s b{font-family:var(--disp);font-size:22px;display:block;line-height:1}
.sheet .scorebox .s span{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sheet .scorebox p{font-size:13px;line-height:1.5;margin-top:6px}
.sheet .scorebox p b{color:var(--sun)}
.sheet .notes{width:100%;min-height:80px}
.sheet .links a{display:inline-flex;margin:0 8px 6px 0;font-size:13px;color:var(--blue);text-decoration:none}
.sheet .links a:hover{text-decoration:underline}
.sheet video{width:100%;border-radius:var(--r);background:#000;max-height:360px}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:39;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.on{opacity:1;pointer-events:auto}

/* login */
.gate{min-height:100vh;display:grid;place-items:center;padding:20px}
.gate form{background:var(--l1);border-radius:var(--r-lg);padding:32px;width:min(420px,100%);display:flex;flex-direction:column;gap:14px}
.gate h1{font-family:var(--disp);text-transform:uppercase;font-size:28px;line-height:.9}

/* settings */
.settings{background:var(--l1);border-radius:var(--r-lg);padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;align-items:end}
@media (max-width:760px){.settings{grid-template-columns:1fr}}
.settings .field .lbl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}