/* api/static/css/profile.css
 *
 * Profile tab ("profile-*") styles. Extracted from styles.css in #2257.
 * Modify in place. Bump api/static/sw.js CACHE_NAME on every change.
 */

.profile-surface {
  padding: var(--space-5) var(--space-4) 80px;
  overflow-y: auto;
  height: calc(100vh - 44px);
  height: calc(100dvh - 44px);
  margin-top: 44px;
  background: var(--slate-50);
}
.profile-container {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.profile-back {
  background: transparent;
  border: 1px solid var(--slate-200);
  color: var(--slate-600);
  padding: 6px var(--space-3);
  border-radius: 6px;
  font-size: 13px;
  align-self: flex-start;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.profile-back:hover { color: var(--slate-900); border-color: var(--slate-400); }

.profile-hero {
  background: var(--white);
  border: 0.5px solid var(--slate-100);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.profile-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ember-500);
  color: var(--white);
  font-weight: 700; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.profile-name { margin: 0; font-size: 20px; color: var(--slate-900); }
.profile-subtitle { color: var(--slate-600); font-size: 13px; margin-top: var(--space-1); }
.profile-accent { color: var(--ember-500); font-weight: 600; }

.profile-section {
  background: var(--white);
  border: 0.5px solid var(--slate-100);
  border-radius: 12px;
  padding: 18px 20px;
}
.profile-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
  gap: var(--space-3);
}
.profile-section-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--slate-900); }
.profile-section-sub {
  color: var(--slate-400); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.5px;
}

.profile-season-selector {
  display: flex; align-items: center; gap: var(--space-2);
}
.profile-season-year {
  display: flex; flex-direction: column; align-items: center;
  min-width: 72px; line-height: 1.1;
}
.profile-season-year-value {
  font-size: 14px; font-weight: 600; color: var(--slate-900);
  font-variant-numeric: tabular-nums;
}
.profile-season-arrow {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  color: var(--slate-700);
  font-size: 20px; line-height: 1; font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  padding: 0;
}
.profile-season-arrow:hover:not(:disabled) {
  background: var(--slate-100);
  border-color: var(--slate-300);
  color: var(--slate-900);
}
.profile-season-arrow:focus-visible {
  outline: 2px solid var(--ember-500);
  outline-offset: 2px;
}
.profile-season-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
@media (max-width: 640px) {
  .profile-season-arrow { width: 40px; height: 40px; font-size: 22px; }
  .profile-season-year { min-width: 64px; }
  .profile-season-year-value { font-size: 13px; }
  .profile-section-head { flex-wrap: wrap; }
}

.profile-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: var(--space-4);
}
.profile-tile {
  background: var(--slate-50);
  border-radius: 8px;
  padding: var(--space-3);
  text-align: center;
}
.profile-tile-value { font-size: 18px; font-weight: 700; color: var(--slate-900); }
.profile-tile-label {
  font-size: 10px; color: var(--slate-600);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-top: var(--space-1);
}
/* Delta-vs-prior-year sub-line under each season tile (#2249). Colour
   inherited from .baseline-* added by the JS. */
.profile-tile-delta {
  font-size: 12px;
  margin-top: 4px;
}

.profile-sport-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.profile-sport-table th {
  text-align: left; color: var(--slate-600); font-weight: 500;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 6px 0;
}
.profile-sport-table th.num, .profile-sport-table td.num { text-align: right; }
.profile-sport-table tbody tr { border-top: 1px solid var(--slate-100); }
.profile-sport-table td { padding: var(--space-2) 0; color: var(--slate-800); vertical-align: middle; }

/* Share-of-total bar under each sport name (#2251) */
.profile-sport-bar {
  height: 4px;
  border-radius: 2px;
  margin-top: 4px;
  width: var(--w, 0%);
  max-width: 100%;
}
.profile-sport-bar--run   { background: var(--ember-100); }
.profile-sport-bar--brick { background: var(--ember-100); }
.profile-sport-bar--ride  { background: var(--blue-50); border: 1px solid var(--blue-600); }
.profile-sport-bar--swim  { background: var(--teal-50); border: 1px solid var(--teal-400); }
.profile-sport-bar--other { background: var(--slate-200); }

/* Inline streak badge next to season heading (#2253) */
.profile-section-streak-inline {
  font-size: 12px;
  font-weight: 400;
  color: var(--ember-500);
  margin-left: var(--space-2);
  white-space: nowrap;
  vertical-align: baseline;
}

.profile-empty, .profile-empty-mini {
  color: var(--slate-600); font-size: 13px; padding: var(--space-2) 0;
}

.profile-conn-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px var(--space-3);
  background: var(--slate-50);
  border-radius: 8px;
  margin-bottom: var(--space-2);
}
.profile-conn-row:last-child { margin-bottom: 0; }
.profile-conn-left, .profile-conn-right {
  display: flex; align-items: center; gap: 10px;
}
.profile-conn-icon {
  width: 28px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-weight: 700; font-size: 12px;
}
.profile-conn-icon--strava { background: #fc4c02; }
.profile-conn-icon--oura { background: #6b46c1; }
.profile-conn-name { color: var(--slate-900); font-size: 14px; }
.profile-conn-badge {
  background: var(--slate-100); color: var(--slate-600);
  padding: 3px var(--space-2); border-radius: 4px; font-size: 11px; font-weight: 600;
}
.profile-conn-badge--ok {
  background: var(--teal-50); color: var(--teal-600);
}
.profile-conn-sync { color: var(--slate-600); font-size: 11px; }

.profile-skeleton {
  color: var(--slate-600); font-size: 13px; padding: var(--space-5); text-align: center;
}

@media (max-width: 639px) {
  .profile-tiles { grid-template-columns: 1fr 1fr; }
  .profile-hero { padding: var(--space-4); }
  .profile-section { padding: 14px var(--space-4); }
  .profile-container { gap: 24px; }
}