/* Depends on: calendar.css -- linked as separate <link>
   tags by every template that uses this file, NOT @import-ed here.
   @import is a serialized waterfall: the browser cannot discover an
   imported file until it has downloaded and parsed the one importing
   it, so this site's deepest chain (tokens -> nav -> calendar ->
   event_detail) cost four sequential round trips before first paint.
   Separate links are all visible in the initial HTML and download in
   parallel. Templates list dependencies first, so the cascade is
   unchanged -- see core/tests/test_template_lint.py, which fails if
   an @import is reintroduced here. */
/* calendar.css supplies the shell (body, .wrap, .topbar, .brand, .btn-ghost). */

.cmp-picker-head { padding: 30px 0 14px; }
.cmp-picker-head h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }

.cmp-picker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.cmp-picker.glow-panel { padding: 18px 20px; }
.cmp-picker select { flex: 1; min-width: 160px; padding: 11px 34px 11px 13px; font-size: 13.5px; }
.cmp-vs-lbl { font-weight: 800; color: var(--text-tertiary); }

/* Two-driver header */
.cmp-heads { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin-bottom: 22px; }
.cmp-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.cmp-head.b { }
.cmp-av {
  width: 76px; height: 76px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; font-size: 28px; font-weight: 800;
  background: var(--surface-2); border: 2px solid var(--line); color: var(--text-secondary);
}
.cmp-av img { width: 100%; height: 100%; object-fit: cover; }
.cmp-av.a { border-color: var(--accent); }
.cmp-av.b { border-color: var(--aurora-cyan); }
.cmp-name { font-size: 16px; font-weight: 800; }
.cmp-head:hover .cmp-name { color: var(--accent); }
.cmp-cat { font-size: 12px; color: var(--text-tertiary); }
.cmp-vs { font-size: 15px; font-weight: 900; color: var(--text-tertiary); letter-spacing: 0.08em; }

/* Metric rows */
.cmp-table { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.cmp-row { display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; border-bottom: 1px solid var(--line-soft); }
.cmp-row:last-child { border-bottom: none; }
.cmp-lbl { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); padding: 14px 6px; }
.cmp-val { font-size: 22px; font-weight: 800; padding: 14px 20px; font-variant-numeric: tabular-nums; }
.cmp-val.a { text-align: right; }
.cmp-val.b { text-align: left; }
.cmp-val.win { color: var(--accent); }
.cmp-val.b.win { color: var(--aurora-cyan); }
.cmp-val:not(.win) { color: var(--text-secondary); }

/* Shared circuits */
.cmp-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 32px 0 14px; }
.cmp-section-head h2 { font-size: 18px; font-weight: 800; }
.cmp-track-tally { font-size: 12.5px; color: var(--text-tertiary); }
.cmp-track-tally b.a { color: var(--accent); }
.cmp-track-tally b.b { color: var(--aurora-cyan); }

.cmp-circuits { display: flex; flex-direction: column; gap: 8px; }
.cmp-circ { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px;
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 12px 16px; }
.cc-time { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.cc-time.a { text-align: right; }
.cc-time.b { text-align: left; }
.cc-time.win { color: var(--accent); }
.cc-time.b.win { color: var(--aurora-cyan); }
.cc-mid { text-align: center; min-width: 0; }
.cc-name { font-size: 13px; font-weight: 700; }
.cc-name:hover { color: var(--accent); }
.cc-gap { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }

.cmp-empty { padding: 40px 20px; text-align: center; color: var(--text-tertiary); font-size: 13.5px; }

@media (max-width: 560px) {
  .cmp-val { font-size: 18px; padding: 12px; }
  .cmp-av { width: 60px; height: 60px; font-size: 22px; }
}

.cmp-share-btn { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 8px; }
.cmp-share-btn svg { width: 14px; height: 14px; }

/* Suggested duels on the empty page: the closest two of each class, one tap to open. */
.cmp-duels { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 30px; }
.cmp-duel {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 14px;
  border: 1px solid var(--line); background: linear-gradient(175deg, var(--surface) 0%, var(--card-gradient-end) 100%);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.cmp-duel:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: 0 0 26px -12px var(--accent); }
.cmp-duel-cat { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.cmp-duel-names { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; line-height: 1.3; }
.cmp-duel-vs { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.cmp-duel-gap { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }