/* AlphaPeak design tokens — kept in sync with team.alphapeak.io */
:root {
  --surface:        #0a0a0a;
  --surface-soft:   #141414;
  --surface-alt:    #0d0d0d;
  --surface-glass:  #0a0a0aeb;
  --line:           #262626;
  --line-strong:    #333;
  --heading-color:  #f5f5f5;
  --body-color:     #d4d4d4;
  --paragraph-color:#a3a3a3;
  --muted-color:    #737373;

  --gradient-red:    #ef4444;
  --gradient-orange: #f97316;
  --gradient-yellow: #eab308;
  --brand-gradient:  linear-gradient(135deg, var(--gradient-red), var(--gradient-orange), var(--gradient-yellow));
  --brand-gradient-2:linear-gradient(135deg, var(--gradient-red), var(--gradient-orange));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--surface);
  color: var(--body-color);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gradient-orange); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { color: var(--heading-color); margin: 0; letter-spacing: -0.01em; }

/* ---------- Top nav (matches team.alphapeak.io .nav-shell) ---------- */
.nav-shell {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-row {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--heading-color);
}
.brand-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.brand-text { line-height: 1.1; }
.brand-name {
  font-weight: 700;
  font-size: 1.05rem;
}
.brand-name .accent {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.brand-subtitle {
  display: block;
  margin-top: 0.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-color);
  font-size: 0.7rem;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.nav-link {
  color: var(--paragraph-color);
  border-radius: 0.6rem;
  padding: 0.5rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 500;
}
.nav-link:hover { color: var(--heading-color); text-decoration: none; background: var(--surface-soft); }
.nav-link.active {
  color: var(--heading-color);
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

/* ---------- Page hero (quieter — no gradient banner) ---------- */
.page-hero {
  background: transparent;
  margin: 1.5rem 0 0.5rem;
}
.page-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
}
.page-hero h1 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--heading-color);
  letter-spacing: -0.01em;
}
.page-hero .meet-meta {
  color: var(--paragraph-color);
  font-size: 0.82rem;
  margin-top: 0.2rem;
}

/* ---------- Layout shell ---------- */
main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 64px;
}

/* Card primitive — matches team.alphapeak.io .card */
.card {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1.4rem;
}

.card + .card { margin-top: 2.5rem; }
.card + .status,
.status + .card,
.champ-card + .card,
.status + .champ-card { margin-top: 2rem; }

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1.1rem;
}
.card-header > h2,
.card-header > .muted,
.card-header > div { flex: 1 1 60%; min-width: 240px; }
.card-header > .btn-secondary { flex: 0 0 auto; align-self: center; }
.card-header h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.card-header .muted {
  color: var(--paragraph-color);
  font-size: 0.85rem;
}

.muted { color: var(--paragraph-color); font-size: 0.85rem; margin: 0; }

/* ---------- Form ---------- */
.controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  align-items: end;
}
.controls label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--paragraph-color);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.controls label.check {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
  color: var(--body-color);
  font-weight: 500;
}
.controls select,
.controls input[type=number] {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  color: var(--heading-color);
  font: inherit;
  font-size: 0.95rem;
  padding: 0.55rem 0.7rem;
  outline: none;
  transition: border-color 0.18s;
}
.controls select:focus,
.controls input[type=number]:focus { border-color: var(--gradient-orange); }
.controls input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--gradient-orange);
}

.btn-primary {
  background: var(--brand-gradient);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  border: 0;
  border-radius: 0.75rem;
  padding: 0.72rem 1.2rem;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.6; cursor: progress; transform: none; }

.btn-secondary {
  background: var(--surface-soft);
  border: 1px solid var(--line-strong);
  color: var(--body-color);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 0.75rem;
  padding: 0.55rem 1rem;
  cursor: pointer;
}

/* ---------- In-form status line (lives inside the Configure card) ---------- */
.form-status {
  margin-top: 0.9rem;
  padding: 0.5rem 0.8rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  color: var(--paragraph-color);
  font-size: 0.82rem;
}
.form-status.error {
  border-color: #5b2530;
  background: #25171c;
  color: #ff8787;
}

/* ---------- Champion callout ---------- */
/* ---------- Projected champion callout ---------- */
.champ-card {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1.5rem 1.6rem;
  display: grid;
  grid-template-columns: minmax(220px, auto) 1fr;
  gap: 1.2rem 2rem;
  align-items: center;
}
.champ-headline { display: flex; flex-direction: column; gap: 0.35rem; }
.champ-label {
  color: var(--muted-color);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  font-weight: 700;
}
.champ-team {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  letter-spacing: -0.01em;
}
.champ-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: flex-end;
}
.champ-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 72px;
  padding: 0.5rem 0.8rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
}
.champ-stat .v {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--heading-color);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.champ-stat .l {
  color: var(--muted-color);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.65rem;
  font-weight: 600;
}
@media (max-width: 640px) {
  .champ-card { grid-template-columns: 1fr; padding: 1.25rem; }
  .champ-stats { justify-content: flex-start; }
  .champ-team { font-size: 1.7rem; }
}

/* ---------- Tables ---------- */
.table-wrap {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
th, td {
  padding: 0.6rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
th {
  background: var(--surface-soft);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--paragraph-color);
  font-weight: 600;
  position: sticky;
  top: 0;
}
tr:last-child td { border-bottom: 0; }
tr:hover td { background: rgba(249, 115, 22, 0.04); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.rank, th.rank { text-align: right; width: 36px; color: var(--muted-color); }

tr.gold   td.team { background: linear-gradient(90deg, var(--gradient-red), var(--gradient-yellow));
                    -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
tr.silver td.team { color: #d4d4d4; font-weight: 600; }
tr.bronze td.team { color: #c4a484; font-weight: 600; }

td.team { color: var(--body-color); font-weight: 500; }
td.athlete { color: var(--heading-color); font-weight: 500; }
td.athlete .grade {
  color: var(--muted-color);
  font-weight: 400;
  font-size: 0.78rem;
  margin-left: 0.4rem;
}
td.mark { font-variant-numeric: tabular-nums; color: var(--body-color); }

.win-bar {
  display: inline-block;
  width: 36px;
  height: 5px;
  background: var(--surface);
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 0.45rem;
  overflow: hidden;
}
.win-bar > span {
  display: block;
  height: 100%;
  background: var(--brand-gradient-2);
}

/* ---------- Event accordions ---------- */
#events-list { display: flex; flex-direction: column; gap: 0.5rem; }
#events-list details {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  overflow: hidden;
}
#events-list summary {
  padding: 0.85rem 1rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-weight: 500;
  color: var(--heading-color);
  list-style: none;
}
#events-list summary::-webkit-details-marker { display: none; }
#events-list summary .right {
  color: var(--paragraph-color);
  font-size: 0.8rem;
  font-weight: 400;
  text-align: right;
  flex-shrink: 0;
}
#events-list details[open] summary { border-bottom: 1px solid var(--line); }
#events-list table { margin: 0; border-radius: 0; }
#events-list table thead th { background: var(--surface-soft); }
#events-list .empty {
  padding: 1rem;
  color: var(--paragraph-color);
  font-size: 0.85rem;
}

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  gap: 0.4rem;
  margin: 1.5rem 0 1.25rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0;
  overflow-x: auto;
}
.tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--paragraph-color);
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7rem 1rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s, border-color 0.18s;
}
.tab:hover { color: var(--heading-color); }
.tab.active {
  color: var(--heading-color);
  border-bottom-color: var(--gradient-orange);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-panel.active[hidden] { display: block; }
.tab-panel:not(.active) { display: none; }

/* ---------- Sticky scoreboard (what-if tab) ---------- */
.scoreboard-sticky {
  position: sticky;
  top: 74px;        /* nav-shell min-height */
  z-index: 15;
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1.5rem;
}
/* Multi-column vertical leaderboard. Always 4 columns; on narrow
   viewports the parent .scoreboard-scroll scrolls horizontally. */
.scoreboard-scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.scoreboard-scroll::-webkit-scrollbar { height: 6px; }
.scoreboard-scroll::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
}
.scoreboard-row {
  column-count: 4;
  column-gap: 0.6rem;
  min-width: 600px;          /* phones scroll; desktops fit 4 cols comfortably */
  width: 100%;
}
.scoreboard-row .score-pill {
  display: flex;
  width: 100%;
  margin-bottom: 0.35rem;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  box-sizing: border-box;
}
.scoreboard-row .score-pill:last-child { margin-bottom: 0; }

/* Reset button sits in the top-right of the sticky scoreboard. */
.scoreboard-sticky {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.scoreboard-sticky > .btn-secondary {
  flex: 0 0 auto;
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
  border-radius: 0.5rem;
  white-space: nowrap;
}
@media (max-width: 540px) {
  .scoreboard-sticky { flex-direction: column; }
  .scoreboard-sticky > .btn-secondary { align-self: flex-end; }
}
.score-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
  color: var(--body-color);
  font-variant-numeric: tabular-nums;
  transition: transform 0.18s;
}
.score-pill .rk { color: var(--muted-color); font-size: 0.72rem; font-weight: 600; }
.score-pill .nm { font-weight: 600; }
.score-pill .pt-mc {
  color: var(--muted-color);
  font-weight: 600;
  font-size: 0.78rem;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.85;
}
.score-pill .arrow {
  color: var(--muted-color);
  font-size: 0.7rem;
  margin: 0 0.05rem;
}
.score-pill .pt { font-weight: 700; }
.score-pill .dl {
  font-size: 0.72rem;
  font-weight: 600;
  margin-left: 0.15rem;
}
.score-pill.gold .pt-mc { color: #ffffffcc; }
.score-pill.gold .arrow { color: #ffffffaa; }
.score-pill.gold {
  background: var(--brand-gradient-2);
  color: #fff;
  border-color: transparent;
}
.score-pill.gold .rk { color: #ffffffcc; }
.score-pill.gold .nm { color: #fff; }
.score-pill.bumped { transform: translateY(-1px) scale(1.04); }

/* ---------- What-if event lists with drag handles ---------- */
#whatif-list { display: flex; flex-direction: column; gap: 0.6rem; }
#whatif-list details {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  overflow: hidden;
}
#whatif-list summary {
  padding: 0.85rem 1rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-weight: 500;
  color: var(--heading-color);
  list-style: none;
}
#whatif-list summary::-webkit-details-marker { display: none; }
#whatif-list summary .right {
  color: var(--paragraph-color);
  font-size: 0.8rem;
  font-weight: 400;
  text-align: right;
  flex-shrink: 0;
}
#whatif-list summary .right.dirty {
  color: var(--gradient-orange);
}
#whatif-list details[open] summary { border-bottom: 1px solid var(--line); }
#whatif-list table { margin: 0; border-radius: 0; width: 100%; }
#whatif-list table thead th { background: var(--surface-soft); }
#whatif-list .empty {
  padding: 1rem;
  color: var(--paragraph-color);
  font-size: 0.85rem;
}

/* The drag handle column. */
.drag-cell {
  width: 36px;
  padding: 0.4rem 0.5rem;
  text-align: center;
  color: var(--muted-color);
  cursor: grab;
  user-select: none;
}
.drag-cell .grip { font-size: 1rem; line-height: 1; }
tr[draggable="true"]:hover .drag-cell { color: var(--gradient-orange); }
tr.dragging {
  opacity: 0.4;
  background: var(--surface-soft) !important;
}
tr.drop-above td { border-top: 2px solid var(--gradient-orange); }
tr.drop-below td { border-bottom: 2px solid var(--gradient-orange); }
.grip {
  font-family: ui-monospace, Menlo, monospace;
  letter-spacing: -0.05em;
}

/* The points-awarded chip (10/8/6/.../0). */
.point-chip {
  display: inline-block;
  min-width: 28px;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--paragraph-color);
  text-align: center;
}
.point-chip.scoring {
  background: var(--brand-gradient-2);
  color: #fff;
  border-color: transparent;
}
.point-chip.zero { color: var(--muted-color); opacity: 0.6; }

/* "edited" badge on dirty event rows in what-if */
tr.dirty td.athlete::after {
  content: '· edited';
  color: var(--gradient-orange);
  font-size: 0.7rem;
  font-weight: 500;
  margin-left: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--line);
  background: var(--surface-alt);
  margin-top: 3rem;
}
footer .inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem 24px;
  color: var(--muted-color);
  font-size: 0.8rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .nav-row { min-height: 64px; padding: 0 18px; }
  .brand-name { font-size: 0.95rem; }
  .brand-subtitle { display: none; }
  .page-hero-inner { padding: 1.2rem 18px; }
  .page-hero h1 { font-size: 1.2rem; }
  main { padding: 0 16px 48px; }
}