/* UTMB Index — style.css */

/* ── ENTRIES COURSES ─────────────────────────────── */
.race-entry {
  background: var(--ink-1); border: 1px solid var(--rim-1);
  border-radius: var(--r-xl); padding: 1rem 1.125rem;
  display: flex; flex-direction: column; gap: .875rem;
}
.race-entry__header {
  display: flex; align-items: center; gap: .5rem;
}
.race-entry__num {
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  color: var(--lime); letter-spacing: .06em; text-transform: uppercase;
}
.race-entry__required {
  font-family: var(--mono); font-size: .58rem; color: var(--dim);
  background: var(--ink-2); border: 1px solid var(--rim-1);
  border-radius: var(--r-pill); padding: 1px 7px;
}
.race-entry__fields {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.race-entry__fields .pm-field:last-child {
  grid-column: 1 / -1;
}

/* ── SCORE HERO ──────────────────────────────────── */
.score-hero {
  background: var(--ink-1); border-radius: var(--r-xl);
  padding: 1.5rem 1.25rem 1.25rem;
}
.score-display {
  display: flex; align-items: center; gap: 1rem;
  margin: .5rem 0 1rem; flex-wrap: wrap;
}
.score-value {
  font-family: var(--mono); font-size: 3.5rem; font-weight: 500;
  letter-spacing: -.04em; color: var(--lime); line-height: 1;
}
.score-stones {
  display: flex; flex-direction: column; gap: .25rem;
}
.stones-row {
  display: flex; align-items: center; gap: .375rem;
  font-family: var(--mono); font-size: .72rem;
}
.stone {
  font-size: 1rem; line-height: 1;
  transition: opacity 200ms;
}
.stone.filled { color: var(--lime); }
.stone.empty  { color: var(--faint); }
.stones-label {
  font-family: var(--mono); font-size: .65rem; color: var(--dim);
  letter-spacing: .04em; white-space: nowrap;
}

/* Barre de progression 0-1000 */
.stones-bar {
  height: 6px; background: var(--rim-1); border-radius: var(--r-pill);
  overflow: hidden; margin-bottom: .625rem;
  position: relative;
}
.stones-bar-fill {
  height: 100%; background: var(--lime); border-radius: var(--r-pill);
  width: 0%; transition: width 600ms cubic-bezier(.34,1.4,.64,1);
}
/* Marqueurs de seuils */
.stones-bar-mark {
  position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rim-2);
}
.score-label {
  font-family: var(--mono); font-size: .68rem; color: var(--dim);
  letter-spacing: .04em;
}

/* ── DÉTAIL COURSES ──────────────────────────────── */
#courses-rows {
  display: flex; flex-direction: column; gap: 1px; margin-top: .75rem;
}
.course-row {
  background: var(--ink-2); border-radius: 0;
  padding: .75rem 1rem;
  display: grid; grid-template-columns: 1fr auto;
  gap: .75rem; align-items: start;
}
.course-row:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
.course-row:last-child  { border-radius: 0 0 var(--r-md) var(--r-md); }
.course-row:only-child  { border-radius: var(--r-md); }
.course-row-name {
  font-size: .83rem; font-weight: 700; color: var(--txt); margin-bottom: .25rem;
}
.course-row-meta {
  display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .25rem;
}
.course-row-tag {
  font-family: var(--mono); font-size: .58rem; font-weight: 600;
  padding: 2px 7px; border-radius: 3px;
}
.course-row-score {
  text-align: right;
  font-family: var(--mono); font-size: 1.25rem; font-weight: 500;
  color: var(--lime); line-height: 1;
}
.course-row-stones-small {
  font-family: var(--mono); font-size: .75rem; color: var(--lime);
  text-align: right; margin-top: .25rem; white-space: nowrap;
}

/* ── QUALIFICATION ───────────────────────────────── */
#qualif-list {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--rim-1); border-radius: var(--r-md);
  overflow: hidden; margin-top: .75rem;
}
.qualif-row {
  display: flex; align-items: center; gap: .875rem;
  padding: .75rem 1rem; background: var(--ink-2);
}
.qualif-row.eligible { background: var(--lime-lo); }
.qualif-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.qualif-icon.yes { background: var(--lime); }
.qualif-icon.no  { background: var(--rim-2); }
.qualif-icon svg { width: 12px; height: 12px; }
.qualif-body { flex: 1; min-width: 0; }
.qualif-name {
  font-size: .83rem; font-weight: 700; color: var(--txt); margin-bottom: .15rem;
}
.qualif-row.eligible .qualif-name { color: var(--lime); }
.qualif-req {
  font-family: var(--mono); font-size: .65rem; color: var(--dim);
}
.qualif-gap {
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  white-space: nowrap;
}
.qualif-row.eligible .qualif-gap { color: var(--lime); }

/* ── NEXT STEPS ──────────────────────────────────── */
#next-list {
  display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem;
}
.next-item {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .75rem; background: var(--ink-2); border-radius: var(--r-md);
  font-size: .8rem; color: var(--dim); line-height: 1.5;
}
.next-item strong { color: var(--txt); }
.next-num {
  font-family: var(--mono); font-size: .65rem; font-weight: 700;
  color: var(--lime); background: var(--lime-lo);
  border: 1px solid rgba(200,240,90,.2);
  border-radius: 50%; width: 20px; height: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

/* Desktop */
@media (min-width: 900px) {
  .race-entry__fields { grid-template-columns: 1fr 1fr 2fr; }
  .race-entry__fields .pm-field:last-child { grid-column: auto; }
}