/* Mirror — shared shell for internal pages (Leaderboard, Skill Tape).
   Presentation only: row/tab/empty-state styling that consumes the same
   design tokens as the landing page. None of the data these pages render
   (rankings, scores, tape items) is computed here or changed by this file. */

.page-head { padding: var(--sp-6) 0 var(--sp-5); }
.page-head h1 {
  font-size: 26px; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px;
}
.page-head .page-sub { margin-top: 8px; color: var(--text-secondary); font-size: 14px; line-height: 1.6; max-width: 68ch; }

.tabs-row { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--sp-4) 0; }
.tab-pill {
  border: 1px solid var(--border-1); border-radius: var(--r-pill); padding: 7px 16px;
  font-size: 13px; font-weight: 700; text-decoration: none; color: var(--text-secondary);
  background: var(--surf-1); transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.tab-pill:hover { border-color: var(--border-hover); color: var(--text-primary); }
.tab-pill.-active { background: var(--accent-purple); border-color: var(--accent-purple); color: #fff; }

/* ---------- leaderboard rows ---------- */
.lhead, .lrow { display: flex; gap: 10px; align-items: center; padding: 11px 14px; }
.lhead { color: var(--text-quiet); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.lrow {
  background: var(--surf-1); border: 1px solid var(--border-1); border-radius: var(--r-md);
  margin-bottom: 8px; text-decoration: none; color: var(--text-primary);
  transition: border-color var(--t-fast) var(--ease-out);
}
.lrow:hover { border-color: var(--accent-purple); }
.lrank { width: 44px; color: var(--accent-purple); font-weight: 800; }
.lname { flex: 1; font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ltier { width: 40px; font-weight: 900; font-size: 15px; border: 1.5px solid; border-radius: 7px; text-align: center; padding: 1px 0; flex-shrink: 0; }
.lscore { width: 70px; font-weight: 800; font-size: 17px; color: var(--accent-purple); font-family: var(--font-mono); }
.lrec { width: 80px; color: var(--text-secondary); font-size: 13px; font-family: var(--font-mono); }
.lpnl { width: 120px; font-weight: 700; font-size: 13.5px; font-family: var(--font-mono); text-align: right; }
.ledge { width: 110px; color: var(--text-secondary); font-size: 12.5px; }

/* ---------- skill tape rows ----------
   Each row is two groups: .trow-top (time/trader/tier/side/amount) and
   .trow-desc (market outcome + title). Desktop keeps them on one line;
   mobile stacks them as two deliberate rows (see breakpoint below). */
.trow {
  display: flex; gap: 12px; align-items: baseline; padding: 10px 14px;
  background: var(--surf-1); border: 1px solid var(--border-1); border-radius: var(--r-md);
  margin-bottom: 6px; font-size: 13px; flex-wrap: wrap;
}
.trow-top { display: flex; gap: 12px; align-items: baseline; flex-shrink: 0; }
.trow-desc { display: flex; gap: 8px; align-items: baseline; flex: 1; min-width: 200px; }
.tago { width: 32px; color: var(--text-quiet); font-size: 11.5px; font-family: var(--font-mono); flex-shrink: 0; }
.tname {
  width: 120px; font-weight: 700; color: var(--text-primary); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tname:hover { color: var(--accent-purple); }
.ttier { border: 1.5px solid; border-radius: 6px; padding: 0 6px; font-weight: 800; font-size: 11px; flex-shrink: 0; }
.tside { width: 40px; font-weight: 800; flex-shrink: 0; }
.tout { width: 110px; color: var(--text-secondary); flex-shrink: 0; }
.tusd { width: 80px; font-weight: 700; color: var(--text-primary); text-align: right; font-family: var(--font-mono); flex-shrink: 0; }
.ttitle { flex: 1; min-width: 0; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.livedot {
  display: inline-block; width: 8px; height: 8px; border-radius: 99px; background: var(--positive);
  margin: 0 4px 1px 4px; animation: internal-blink 1.6s infinite;
}
@keyframes internal-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .livedot { animation: none; } }

/* ---------- shared useful empty state (no red — reserved for real errors) ---------- */
.empty-state {
  text-align: center; padding: var(--sp-6) var(--sp-5); margin: var(--sp-4) 0;
  background: var(--surf-1); border: 1px dashed var(--border-2); border-radius: var(--r-lg);
}
.empty-state .es-title { font-size: 18px; font-weight: 700; }
.empty-state .es-desc { margin-top: 8px; color: var(--text-secondary); font-size: 14px; line-height: 1.6; max-width: 46ch; margin-left: auto; margin-right: auto; }
.empty-state .es-ctas { margin-top: var(--sp-4); display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.es-cta-primary {
  padding: 10px 18px; border-radius: var(--r-sm); background: var(--accent-purple); color: #fff;
  font-weight: 700; font-size: 13.5px; text-decoration: none;
}
.es-cta-primary:hover { background: var(--accent-purple-dim); }
.es-cta-secondary {
  padding: 10px 18px; border-radius: var(--r-sm); background: transparent; border: 1px solid var(--border-2);
  color: var(--text-secondary); font-weight: 700; font-size: 13.5px; text-decoration: none;
}
.es-cta-secondary:hover { border-color: var(--border-hover); color: var(--text-primary); }
.empty-example-label {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-quiet); border: 1px solid var(--border-2); border-radius: var(--r-pill);
  padding: 3px 10px; margin-bottom: var(--sp-3);
}

.page-footer {
  text-align: center; color: var(--text-quiet); font-size: 11.5px;
  margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--border-1);
}
.page-footer a { color: var(--accent-purple); text-decoration: none; }
.page-footer a:hover { text-decoration: underline; }

.list-cta { text-align: center; padding: var(--sp-3) 0 0; }
.list-cta a { font-size: 12.5px; font-weight: 700; color: var(--accent-purple); text-decoration: none; }
.list-cta a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .lrec, .ledge { display: none; }
}

@media (max-width: 560px) {
  .empty-state { padding: var(--sp-5) var(--sp-3); }
  .trow { flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 12px; }
  .trow-top { width: 100%; justify-content: flex-start; gap: 8px; }
  .tago { width: auto; }
  .tname { width: auto; flex: 1; min-width: 0; }
  .ttier { padding: 0 5px; }
  .tside { width: auto; }
  .tusd { width: auto; }
  .trow-desc { width: 100%; font-size: 12.5px; gap: 6px; }
  .tout { width: auto; flex-shrink: 0; }
}