/* Wheel Time — design tokens and shell.
   Palette, type scale and layout rules are documented in DESIGN.md. */

:root{
  /* ---- surfaces ---- */
  --vf:#080b0d;
  --ground:#0e1316;
  --panel:#141b1f;
  --panel-2:#1b242a;
  --panel-3:#222d34;
  --rule:#2a373f;
  --rule-2:#3a4d55;

  /* ---- ink ---- */
  --ink:#dfe7e6;
  --ink-mid:#a3b4ba;
  --ink-dim:#7f9299;

  /* ---- signal: graphic value / text value ----
     The graphic values are the SMPTE-bar originals and are used for canvas shapes.
     The -ink values exist because the originals do not clear 4.5:1 as type. */
  --cyan:#00a3ad;   --cyan-ink:#19cbd6;
  --mag:#b0407f;    --mag-ink:#d07fb0;
  --yel:#c9b119;    --yel-ink:#e0c62a;
  --tally:#e2453c;  --tally-ink:#ef6a60;

  /* ---- type ---- */
  --disp:"Barlow Condensed","Oswald","Arial Narrow",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ---- space ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px;

  /* ---- z ---- */
  --z-base:0; --z-hud:10; --z-overlay:20; --z-scrim:30; --z-dialog:40; --z-toast:50;

  /* ---- motion ---- */
  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:120ms; --t:180ms;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--mono);
  font-size:13px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding:var(--s3);
}
h1,h2,h3{font-family:var(--disp);letter-spacing:.05em;text-transform:uppercase;margin:0;font-weight:700}

/* Live-updating readouts must not reflow as digits change width. Static hero
   figures use proportional figures; anything that ticks during a round is tabular. */
.tnum{font-variant-numeric:tabular-nums}

.shell{max-width:1180px;margin:0 auto}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

:where(button,select,input,summary,a,[tabindex]):focus-visible{
  outline:2px solid var(--yel-ink);outline-offset:-2px;
}

/* ============ top bar ============ */
.topbar{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
        border-bottom:1px solid var(--rule);padding-bottom:var(--s3)}
.topbar h1{font-size:30px;line-height:1;letter-spacing:.06em}
.topbar .sub{color:var(--ink-dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.topbar .spacer{margin-left:auto}
.clock-total{display:flex;align-items:baseline;gap:var(--s2)}
.clock-total .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}
.clock-total .v{font-family:var(--disp);font-size:24px;line-height:1;color:var(--cyan-ink);
                font-variant-numeric:tabular-nums}
.bars{display:flex;height:14px;width:84px;border:1px solid var(--rule);flex:0 0 auto}
.bars i{flex:1}

/* ============ rig ============ */
.rig{display:grid;grid-template-columns:132px minmax(0,1fr) 132px;gap:var(--s3);
     margin-top:var(--s3);align-items:start}

.tach{background:var(--panel);border:1px solid var(--rule);padding:var(--s3) var(--s2);text-align:center}
.tach .lbl{font-family:var(--disp);font-size:15px;letter-spacing:.18em;color:var(--ink-mid);
           text-transform:uppercase}
.tach svg{display:block;width:100%;height:auto;margin-top:var(--s2);max-width:120px;margin-inline:auto}
.tach .val{font-size:12px;color:var(--ink-mid);margin-top:var(--s2);font-variant-numeric:tabular-nums}

/* ============ viewfinder ============ */
.vf{position:relative;background:var(--vf);border:1px solid var(--rule);aspect-ratio:16/9}
.vf canvas{display:block;width:100%;height:100%;background:var(--vf);touch-action:none}
.vf-overlay{position:absolute;inset:0;pointer-events:none;z-index:var(--z-hud);
            display:flex;flex-direction:column;justify-content:space-between;
            padding:var(--s2) var(--s3);font-size:11px;letter-spacing:.12em;color:var(--ink-mid)}
.vf-row{display:flex;justify-content:space-between;gap:var(--s3)}
.vf-row span{font-variant-numeric:tabular-nums}
.tally{color:var(--tally-ink);font-weight:600}
.tally.off{color:var(--ink-dim)}
.tally.on::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--tally);margin-right:6px;vertical-align:baseline;animation:pulse 1.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.veil{position:absolute;inset:0;z-index:var(--z-overlay);display:grid;place-content:center;
      gap:var(--s3);text-align:center;background:rgba(8,11,13,.9);padding:var(--s5)}
.veil[hidden]{display:none}
.veil .big{font-family:var(--disp);font-size:26px;letter-spacing:.08em;text-transform:uppercase}
.veil .small{color:var(--ink-mid);font-size:12px;max-width:56ch;margin:0 auto;text-wrap:pretty}
.veil kbd{font-family:var(--mono);font-size:11px;background:var(--panel-2);
          border:1px solid var(--rule-2);padding:1px 5px;color:var(--ink)}
#engage{cursor:pointer}

/* report card */
#report .grade{font-family:var(--disp);font-size:80px;line-height:.9;color:var(--yel-ink)}
#report .grade.na{font-size:34px;color:var(--ink-mid)}
#report .lines{color:var(--ink-mid);font-size:12px;line-height:2.1;margin:var(--s2) 0 var(--s4)}
#report .lines b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
#report .caveat{color:var(--yel-ink);font-size:11px;max-width:54ch;margin:0 auto var(--s3);
                text-wrap:pretty;line-height:1.7}
.veil .row{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap}

button.go{background:var(--cyan);color:#04191b;border:1px solid var(--cyan);padding:9px 22px;
  font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.12em;cursor:pointer;
  text-transform:uppercase;transition:background var(--t-fast) var(--ease)}
button.go:hover{background:var(--cyan-ink);border-color:var(--cyan-ink)}
button.go.ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
button.go.ghost:hover{background:var(--panel-2)}
button.go:disabled{opacity:.4;cursor:not-allowed}

/* ============ readout rail ============ */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:1px;
       background:var(--rule);border:1px solid var(--rule);margin-top:var(--s3)}
.cell{background:var(--panel);padding:var(--s2) var(--s3)}
.cell .k{font-size:11px;letter-spacing:.14em;color:var(--ink-dim);text-transform:uppercase}
.cell .v{font-family:var(--disp);font-size:26px;line-height:1.15;margin-top:2px;
         font-variant-numeric:tabular-nums}
.cell .v small{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-mid)}
.v.cy{color:var(--cyan-ink)} .v.mg{color:var(--mag-ink)} .v.yl{color:var(--yel-ink)}

/* ============ drill rail ============ */
/* Fixed at four columns rather than auto-fit: eight drills divide evenly into 4x2 at
   every supported width, and auto-fit produced a six-wide row with two dead cells. */
.drills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
        background:var(--rule);border:1px solid var(--rule);margin-top:var(--s3)}
.drill{background:var(--panel);border:none;color:var(--ink-mid);text-align:left;
       padding:var(--s3);cursor:pointer;font-family:var(--mono);font-size:12px;
       display:grid;grid-template-columns:auto 1fr;gap:0 var(--s2);align-items:baseline;
       transition:background var(--t-fast) var(--ease)}
.drill:hover{background:var(--panel-2)}
.drill .i{font-family:var(--disp);font-size:15px;color:var(--ink-dim)}
.drill .n{font-family:var(--disp);font-size:19px;letter-spacing:.06em;color:var(--ink);
          text-transform:uppercase}
.drill .d{grid-column:2;font-size:11.5px;line-height:1.55;margin-top:2px;text-wrap:pretty}
.drill .best{grid-column:2;font-size:11px;color:var(--ink-dim);margin-top:var(--s1);
             font-variant-numeric:tabular-nums}
.drill[aria-pressed="true"]{background:var(--panel-2);box-shadow:inset 0 -3px 0 var(--cyan)}
.drill[aria-pressed="true"] .i{color:var(--cyan-ink)}

/* ============ tabs ============ */
.tabs{margin-top:var(--s3);border:1px solid var(--rule);background:var(--panel)}
.tablist{display:flex;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.tab{background:transparent;border:none;border-right:1px solid var(--rule);color:var(--ink-dim);
     font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
     padding:10px var(--s4);cursor:pointer;transition:color var(--t-fast) var(--ease)}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink);background:var(--panel-2);box-shadow:inset 0 -2px 0 var(--cyan)}
.tabpanel{padding:var(--s4)}
.tabpanel[hidden]{display:none}

/* ============ forms ============ */
.grid-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:var(--s4) var(--s5)}
.fld{display:block}
.fld .k{font-size:11px;letter-spacing:.14em;color:var(--ink-dim);text-transform:uppercase;
        display:flex;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s1)}
.fld .k b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.fld .hint{font-size:11px;color:var(--ink-dim);margin-top:var(--s1);line-height:1.6;text-wrap:pretty}
input[type=range]{width:100%;accent-color:var(--cyan)}
select,input[type=text],input[type=number],input[type=email],input[type=password]{
  width:100%;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--rule-2);padding:6px var(--s2);font-family:var(--mono);font-size:12px}
input[type=checkbox]{accent-color:var(--mag);width:14px;height:14px}
.checks{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center}
.checks label{display:flex;gap:6px;align-items:center;color:var(--ink-mid);font-size:12px;cursor:pointer}
.btnrow{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4);
        border-top:1px solid var(--rule);padding-top:var(--s4)}

.note{color:var(--ink-mid);font-size:12px;line-height:1.8;max-width:68ch;text-wrap:pretty}
.note + .note{margin-top:var(--s3)}
.note b{color:var(--ink);font-weight:500}
.note code{color:var(--yel-ink);font-size:11.5px}

/* ============ history ============ */
.hist-head{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s3)}
.hist-head h3{font-size:19px}
.hist-head .meta{color:var(--ink-dim);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.spark{width:100%;height:auto;max-height:230px;display:block;overflow:visible}
.spark-empty{color:var(--ink-mid);font-size:12px;padding:var(--s6) 0;text-align:center;text-wrap:pretty}
table.runs{width:100%;border-collapse:collapse;margin-top:var(--s4);font-size:12px;
           font-variant-numeric:tabular-nums}
table.runs th,table.runs td{text-align:right;padding:5px var(--s2);border-bottom:1px solid var(--rule)}
table.runs th{color:var(--ink-dim);font-weight:500;font-size:11px;letter-spacing:.12em;
              text-transform:uppercase;white-space:nowrap}
table.runs td{color:var(--ink-mid)}
table.runs th:first-child,table.runs td:first-child{text-align:left}
table.runs td.g{color:var(--ink)}
.table-wrap{overflow-x:auto}

/* ============ wizard dialog ============ */
dialog.wiz{background:var(--panel-3);color:var(--ink);border:1px solid var(--rule-2);
  padding:0;width:min(620px,94vw);font-family:var(--mono);font-size:13px}
dialog.wiz::backdrop{background:rgba(4,7,9,.86)}
.wiz-head{display:flex;align-items:baseline;gap:var(--s3);padding:var(--s4);
          border-bottom:1px solid var(--rule)}
.wiz-head h2{font-size:22px}
.wiz-head .step{color:var(--ink-dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
                margin-left:auto;font-variant-numeric:tabular-nums}
.wiz-body{padding:var(--s5) var(--s4);min-height:230px}
.wiz-body h3{font-size:18px;color:var(--ink);margin-bottom:var(--s2)}
.wiz-body p{color:var(--ink-mid);margin:0 0 var(--s3);max-width:60ch;text-wrap:pretty}
.wiz-foot{display:flex;gap:var(--s2);padding:var(--s3) var(--s4);border-top:1px solid var(--rule);
          align-items:center;flex-wrap:wrap}
.wiz-foot .spacer{margin-left:auto}
.meter{height:10px;background:var(--panel);border:1px solid var(--rule-2);margin:var(--s3) 0;
       position:relative;overflow:hidden}
.meter i{display:block;height:100%;background:var(--cyan);width:0;
         transition:width var(--t-fast) linear}
.meter.warn i{background:var(--yel)}
.readback{font-variant-numeric:tabular-nums;color:var(--ink);font-size:12px;line-height:2}
.readback b{color:var(--cyan-ink);font-weight:500}
.readback .bad{color:var(--tally-ink)}
.axis-bar{display:grid;grid-template-columns:76px 1fr;gap:var(--s2);align-items:center;
          margin-bottom:var(--s1);font-size:11px;color:var(--ink-dim)}
.axis-bar .track{height:8px;background:var(--panel);border:1px solid var(--rule);position:relative}
.axis-bar .track i{position:absolute;top:0;bottom:0;background:var(--mag);left:50%;width:0}

/* ============ hardware gate (small screens) ============ */
#gate{display:none}
@media (max-width:759px){
  .rig,.strip,.drills,.tabs{display:none!important}
  #gate{display:block;border:1px solid var(--rule);background:var(--panel);
        padding:var(--s6) var(--s4);margin-top:var(--s4)}
  #gate h2{font-size:22px;margin-bottom:var(--s3)}
}

/* ============ responsive reflow ============ */
/* Below 1080px the tachs move under the viewfinder side by side rather than
   disappearing. They are gauges the operator reads; hiding them removes
   information instead of adapting to the viewport. */
@media (max-width:1079px) and (min-width:760px){
  .rig{grid-template-columns:1fr 1fr;grid-template-areas:"vf vf" "tach-l tach-r"}
  .rig > .vf{grid-area:vf}
  .rig > .tach--pan{grid-area:tach-l}
  .rig > .tach--tilt{grid-area:tach-r}
  .tach{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
        gap:var(--s3);text-align:left}
  .tach svg{max-width:64px;margin:0}
  .tach .val{margin-top:0;text-align:right}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
                       transition-duration:.001ms!important}
}

/* ============ account + leaderboard ============ */
.acct{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;
      border:1px solid var(--rule);background:var(--panel-2);padding:var(--s3) var(--s4);
      margin-bottom:var(--s4)}
.acct-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.acct-who .k{font-size:11px;letter-spacing:.14em;color:var(--ink-dim);text-transform:uppercase}
.acct-who .v{font-family:var(--disp);font-size:20px;letter-spacing:.04em}
.acct-note{font-size:11px;color:var(--ink-dim);max-width:52ch;line-height:1.6}
.acct-actions{margin-left:auto;display:flex;gap:var(--s2);flex-wrap:wrap}
.board-head{display:flex;gap:var(--s4);align-items:flex-end;flex-wrap:wrap;margin-bottom:var(--s3)}
.board-head .note{font-size:11px;color:var(--ink-dim);max-width:56ch}
table.board{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
table.board th,table.board td{padding:6px var(--s2);border-bottom:1px solid var(--rule);text-align:right}
table.board th{color:var(--ink-dim);font-weight:500;font-size:11px;letter-spacing:.12em;
               text-transform:uppercase;white-space:nowrap}
table.board td{color:var(--ink-mid)}
table.board th:nth-child(2),table.board td:nth-child(2){text-align:left;width:100%}
table.board td.rank{color:var(--ink-dim);width:1%}
table.board td.who{color:var(--ink)}
table.board tr.you td{background:rgba(0,163,173,.10);color:var(--ink)}
table.board tr.you td.who::after{content:" — you";color:var(--cyan-ink);font-size:11px}
table.board td.val{color:var(--mag-ink);font-weight:500}

/* ============ account button + modal ============ */
.acct-btn{display:flex;align-items:center;gap:var(--s2);background:var(--panel);
  border:1px solid var(--rule-2);color:var(--ink);padding:5px 12px 5px 6px;cursor:pointer;
  font-family:var(--mono);font-size:12px;transition:background var(--t-fast) var(--ease)}
.acct-btn:hover{background:var(--panel-2)}
.acct-btn .avatar{width:26px;height:26px;display:grid;place-content:center;background:var(--panel-2);
  border:1px solid var(--rule-2);color:var(--cyan-ink);font-family:var(--disp);font-size:15px;
  line-height:1;text-transform:uppercase}
.acct-btn[data-in="true"] .avatar{background:var(--cyan);color:#04191b;border-color:var(--cyan)}
.acct-btn-label{max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.acct-dlg{width:min(560px,94vw)}
.acct-dlg .wiz-body{min-height:0}
.acct-msg{font-size:11.5px;color:var(--ink-mid);max-width:44ch;line-height:1.5}
.acct-msg.err{color:var(--tally-ink)}
.acct-msg.ok{color:var(--cyan-ink)}

.prov{display:grid;gap:var(--s2);margin-bottom:var(--s4)}
.prov button{display:flex;align-items:center;justify-content:center;gap:var(--s2);
  width:100%;padding:11px;border:1px solid var(--rule-2);background:var(--panel-2);
  color:var(--ink);font-family:var(--mono);font-size:13px;cursor:pointer;
  transition:background var(--t-fast) var(--ease)}
.prov button:hover{background:var(--panel-3)}
.prov button svg{width:17px;height:17px;flex:0 0 auto}
.prov button.apple{background:#000;border-color:#000;color:#fff}
.prov button.apple:hover{background:#1a1a1a}

.sep{display:flex;align-items:center;gap:var(--s3);margin:var(--s4) 0;
  color:var(--ink-dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--rule)}

.acct-form{display:grid;gap:var(--s3)}
.acct-form .fld .k{margin-bottom:3px}
.acct-form textarea{width:100%;background:var(--panel-2);color:var(--ink);
  border:1px solid var(--rule-2);padding:6px var(--s2);font-family:var(--mono);
  font-size:12px;line-height:1.6;resize:vertical;min-height:74px}
.acct-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media (max-width:520px){ .acct-form .row2{grid-template-columns:1fr} }
.linkish{background:none;border:none;color:var(--cyan-ink);font-family:var(--mono);
  font-size:11.5px;cursor:pointer;padding:0;text-align:left}
.linkish:hover{text-decoration:underline}
.acct-section{border-top:1px solid var(--rule);margin-top:var(--s5);padding-top:var(--s4)}
.acct-section h3{font-size:16px;margin-bottom:var(--s2)}
.acct-section .hint{font-size:11px;color:var(--ink-dim);line-height:1.6;display:block;
  margin-bottom:var(--s2);max-width:56ch}
.acct-meta{display:flex;gap:var(--s4);flex-wrap:wrap;font-size:11.5px;color:var(--ink-dim);
  margin-bottom:var(--s4)}
.acct-meta b{color:var(--ink);font-weight:500}
.chipset{display:flex;gap:6px;flex-wrap:wrap}
.chipset span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rule-2);color:var(--ink-mid);padding:2px 7px}
.danger{color:var(--tally-ink);border-color:var(--tally)!important}
.danger:hover{background:rgba(226,69,60,.12)!important}