/* WEEKLY: the weekly trial's title line (#wkTitle in #tExtra), its board screen (#sWeekly) and the results' post form
 * (#wkPost in #rExtra). Nothing here shows unless ui/weekly.js found the shared board on. Neutral colours: a board is
 * not a reward (gold stays for rewards), and "unverified" is always in plain view. */
.wk-title{display:grid;gap:6px;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.03);text-align:center}
.wk-title p{margin:0}
.wk-eyebrow{font:8px/1.6 var(--pix);letter-spacing:.06em;color:var(--bronze)}
.wk-unv{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:6px;border:1px solid var(--line);color:var(--dim);font:7px/1.6 var(--pix);letter-spacing:.06em;vertical-align:middle}
.wk-line{font-size:15px;font-weight:600;color:var(--ink)}
.wk-top{font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}
.wk-title .xrow{margin-top:2px}

/* the board screen */
.wk-board{width:min(100%,560px)}
.panel .wk-sub{margin:0 0 6px;font-size:14px;color:var(--ink)}
.panel .wk-man{margin:0 0 12px;font-size:14px}
.panel .wk-note{margin:0 0 12px;padding:8px 12px;border-radius:10px;border:1px dashed var(--line);font-size:13px;color:var(--dim)}
.wk-rows{margin:0 0 14px;text-align:left;min-height:48px}
.panel .wk-none{margin:6px 0;text-align:center;font-size:13px;color:var(--faint)}
.wk-list{list-style:none;margin:0;padding:0;display:grid;gap:3px;max-height:min(52vh,560px);overflow:auto;overscroll-behavior:contain}
.wk-list li{display:grid;grid-template-columns:44px 56px minmax(0,1fr);grid-template-areas:"r n s" "r n d";align-items:baseline;column-gap:10px;padding:5px 10px;
  border-radius:8px;border:1px solid transparent;background:rgba(255,255,255,.03)}
.wk-list li.me{border-color:var(--bronze);background:rgba(243,196,142,.08)}
.wk-r{grid-area:r;font:9px/1 var(--pix);color:var(--faint)}
.wk-n{grid-area:n;font:12px/1 var(--pix);font-weight:400;color:var(--ink);letter-spacing:.06em}
.wk-s{grid-area:s;justify-self:end;font-weight:700;font-variant-numeric:tabular-nums}
.wk-d{grid-area:d;justify-self:end;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.wk-list li:nth-child(-n+3) .wk-r{color:var(--bronze)}

/* the results: post a weekly run's score */
.wk-post{padding:10px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);text-align:center}
.wk-post h3{margin:0 0 8px}
.wk-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.wk-form label{font:8px/1.5 var(--pix);color:var(--dim);letter-spacing:.04em}
.wk-form input{width:96px;height:44px;border-radius:10px;border:2px solid var(--line);background:rgba(5,5,12,.7);color:var(--ink);text-align:center;
  font:16px/1 var(--pix);text-transform:uppercase;letter-spacing:.12em;-webkit-user-select:text;user-select:text}
.wk-form input:focus-visible{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(61,242,255,.22)}
.wk-form .btn{min-height:44px}
.panel .wk-msg{margin:8px 0 0;font-size:13px;color:var(--dim)}
.panel .wk-msg.ok{color:var(--ink)}
.panel .wk-msg.err{color:var(--orange)}
.wk-post .xrow{margin-top:8px}

@media (max-width:640px){
  .wk-line{font-size:14px}
  .wk-list li{grid-template-columns:36px 48px minmax(0,1fr);column-gap:8px;padding:4px 8px}
  .wk-list{max-height:48vh}
}
@media (max-height:560px){
  .wk-top{display:none}
  .wk-list{max-height:40vh}
}