* { box-sizing: border-box; }
html, body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
  background: #F2F2F2;
}

#app {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: #F2F2F2;
  display: flex;
  flex-direction: column;
  position: relative;
}

button { font-family: inherit; }

.rc-btn { -webkit-tap-highlight-color: transparent; }
.rc-btn:active { transform: scale(0.97); }
.rc-card { transition: opacity 0.15s ease; }
.rc-card:active { opacity: 0.92; }

@keyframes rc-pop { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: scale(1); } }
@keyframes rc-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.rc-pop { animation: rc-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.rc-fade-up { animation: rc-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }

.ring-progress { transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1); }

.rc-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid #E3E3E6; border-top-color: #1C1C1E;
  animation: rc-spin 0.8s linear infinite;
}
@keyframes rc-spin { to { transform: rotate(360deg); } }

.rc-error-banner {
  background: #FDEBEA; color: #B0271C; border-radius: 14px; padding: 12px 14px;
  font-size: 13px; font-weight: 500;
}

.rc-empty {
  background: #FFFFFF; border-radius: 20px; padding: 28px 18px; text-align: center;
  color: #8E8E93; font-size: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.rc-login-input {
  width: 100%; box-sizing: border-box; border-radius: 14px; border: 1px solid #E5E5EA;
  background: #FFFFFF; padding: 15px 16px; font-size: 16px; font-family: inherit; color: #1C1C1E;
}

/* ---------------------------------------------------------------------------
   Coach dashboard: unlike the athlete app (which intentionally stays a
   phone-width column even on a bigger screen), the coach dashboard should
   take advantage of extra width on tablet/desktop. #app gets an
   "app-coach" class only while a coach is signed in (see render() in
   main.js), so none of this touches the athlete experience.
--------------------------------------------------------------------------- */
@media (min-width: 720px) {
  #app.app-coach {
    max-width: 900px;
  }
  .coach-summary-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .coach-athlete-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (min-width: 1100px) {
  #app.app-coach {
    max-width: 1200px;
  }
  .coach-athlete-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Celebration confetti — fired once when an athlete logs a race result for
   the first time (see fireConfetti() in main.js). Pure CSS/DOM, no library. */
.rc-confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.rc-confetti-piece {
  position: absolute;
  top: -24px;
  border-radius: 2px;
  animation-name: rc-confetti-fall;
  animation-timing-function: cubic-bezier(0.35, 0, 0.55, 1);
  animation-fill-mode: forwards;
}
@keyframes rc-confetti-fall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--rc-confetti-drift, 0px), 108vh, 0) rotate(var(--rc-confetti-spin, 360deg)); opacity: 0.85; }
}

/* Calendar: a vertical stack of days works everywhere, but on a wide enough
   screen a real seven-day week (Mon–Sun side by side) is much easier to scan
   at a glance — so widen into a grid only once there's room for it. */
@media (min-width: 900px) {
  .coach-calendar-week {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr);
    align-items: start;
    gap: 12px;
  }
}