/* Testers page: the board's theme (/wizard/styles.css) plus the card grid.
   Static styling only; everything data-driven is inline in testers.js. */

.t-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.t-card {
  display: flex;
  flex-direction: column;
  background: rgba(15, 20, 36, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 140ms ease;
}
.t-card:hover { border-color: rgba(77, 227, 255, 0.3); }
.t-card.done { border-color: rgba(110, 231, 168, 0.35); }
.t-card.blocked { border-color: rgba(255, 92, 122, 0.45); }
/* The card a #table= deep link points at. */
.t-card.focus { border-color: #4de3ff; box-shadow: 0 0 0 2px rgba(77, 227, 255, 0.45), 0 0 28px rgba(77, 227, 255, 0.25); }

.t-art {
  aspect-ratio: 2 / 3;
  max-height: 240px;
  width: 100%;
  object-fit: cover;
  background: #0a0e1a;
  display: block;
}

.t-btn { transition: background 140ms ease, border-color 140ms ease, color 140ms ease; }
.t-btn:hover:not(:disabled) { background: rgba(77, 227, 255, 0.16) !important; border-color: #4de3ff !important; color: #9df0ff !important; }
.t-btn.signed:hover:not(:disabled) { background: rgba(255, 92, 122, 0.12) !important; border-color: #ff5c7a !important; color: #ff8fa3 !important; }
.t-btn:disabled { cursor: progress; opacity: 0.6; }

/* Small secondary buttons: the flag, cancel, and clearing a blocker. */
.t-flag, .t-ghost, .t-mini, .t-danger {
  border-radius: 8px; cursor: pointer; background: #0d1220; color: #c3cbdb;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: 'Orbitron', sans-serif; font-weight: 700; letter-spacing: 0.12em; font-size: 10px; text-transform: uppercase;
}
.t-flag { width: 38px; min-height: 38px; display: flex; align-items: center; justify-content: center; padding: 0; }
.t-ghost { min-height: 38px; padding: 0 12px; }
.t-mini { padding: 4px 8px; font-size: 9px; flex: none; }
.t-danger { min-height: 38px; border-color: rgba(255, 92, 122, 0.5); background: rgba(255, 92, 122, 0.1); color: #ff5c7a; }
.t-btn.t-flag:hover:not(:disabled), .t-btn.t-danger:hover:not(:disabled), .t-btn.t-mini:hover:not(:disabled) {
  background: rgba(255, 92, 122, 0.14) !important; border-color: #ff5c7a !important; color: #ff8fa3 !important;
}
.t-btn.t-danger:disabled { cursor: not-allowed; }

.t-blockers {
  border-radius: 8px; padding: 10px; background: rgba(255, 92, 122, 0.06); border: 1px solid rgba(255, 92, 122, 0.35);
}
.t-reason { padding: 8px 10px; resize: vertical; font: inherit; font-size: 12.5px; line-height: 1.4; }

/* Tables / Leaderboard switch. */
.t-tabs { display: flex; gap: 6px; margin-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.t-tab {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px; margin-bottom: -1px; cursor: pointer;
  background: transparent; border: 0; border-bottom: 2px solid transparent; color: #8d97ad;
  font-family: 'Orbitron', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.t-tab:hover { color: #c3cbdb; }
.t-tab.on { color: #4de3ff; border-bottom-color: #4de3ff; }
.t-tab-note { font-family: 'Manrope', sans-serif; font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 600; color: #8d97ad; }

.t-board-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(15, 20, 36, 0.97); }
.t-board { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.t-board th {
  text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'Orbitron', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; color: #4a5266; text-transform: uppercase;
}
.t-board td { padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); white-space: nowrap; }
.t-board tbody tr:last-child td { border-bottom: 0; }
.t-board tr.me td { background: rgba(77, 227, 255, 0.07); }
.t-board tr.gap td { text-align: center; color: #4a5266; padding: 2px; }
.t-board .t-num { text-align: right; font-variant-numeric: tabular-nums; }
.t-board .t-points { font-family: 'Orbitron', sans-serif; font-weight: 900; color: #e6ebf5; }
.t-rank { width: 56px; font-family: 'Orbitron', sans-serif; font-weight: 700; }
.t-avatar {
  position: relative; overflow: hidden; flex-shrink: 0;
  display: inline-flex; width: 26px; height: 26px; margin-right: 10px; vertical-align: middle; border-radius: 999px;
  align-items: center; justify-content: center; background: #5865f2; color: #fff;
  font-family: 'Orbitron', sans-serif; font-size: 10px; font-weight: 900;
}

.t-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-avatar-header { margin-right: 0; }

.t-ctl { min-height: 38px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.12); background: #0d1220; color: #e6ebf5; padding: 0 12px; }
.t-ctl:focus { border-color: #4de3ff; outline: none; }

@media (max-width: 600px) {
  .t-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .t-art { max-height: 200px; }
  .t-board .t-wide { display: none; }
  .t-board th, .t-board td { padding-left: 10px; padding-right: 10px; }
}