/* Custom styles beyond Tailwind: dropdown, charts, focus. */

html { -webkit-text-size-adjust: 100%; }
body { font-feature-settings: "cv11", "ss01"; }

#athleteList .opt {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; text-align: left;
  padding: .55rem .85rem; font-size: .875rem;
  border-bottom: 1px solid #f5f5f4;
  cursor: pointer;
}
#athleteList .opt:last-child { border-bottom: 0; }
#athleteList .opt:hover, #athleteList .opt.active { background: #f8fafc; }
#athleteList .opt .avatar {
  flex: none; height: 1.75rem; width: 1.75rem; border-radius: 9999px;
  display: grid; place-items: center;
  background: #0f172a; color: #fff; font-size: .68rem; font-weight: 600;
}

.chart-wrap { position: relative; }
.chart-wrap canvas { display: block; width: 100%; height: 220px; touch-action: pan-y; }
@media (min-width: 640px) { .chart-wrap canvas { height: 240px; } }

.stat-chip {
  display: inline-flex; align-items: baseline; gap: .4rem;
  border: 1px solid #e7e5e4; background: #fff;
  border-radius: .75rem; padding: .4rem .7rem; font-size: .75rem;
}
.stat-chip b { font-size: .95rem; font-weight: 600; }
.stat-chip span { color: #78716c; }

.dot { display:inline-block; height:.55rem; width:.55rem; border-radius:9999px; }

input[type="date"] { min-height: 42px; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }