:root {
  --bg: #0a0e14;
  --panel: #131a24;
  --panel-2: #1a2432;
  --border: #26334a;
  --text: #e9eff7;
  --muted: #94a3ba;
  --accent: #4da3ff;
  --accent-2: #7fd08a;
  --warn: #f0b429;
  --gold: #f5c542;
  --shadow-sm: 0 1px 2px rgba(2,6,14,.35), 0 2px 8px rgba(2,6,14,.22);
  --shadow-md: 0 2px 6px rgba(2,6,14,.35), 0 12px 32px rgba(2,6,14,.28);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.45;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.my-profile-btn { display: inline-block; padding: .45rem .9rem; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: .85rem;
  text-decoration: none; white-space: nowrap; margin-left: .6rem; }
.my-profile-btn:hover { filter: brightness(1.1); color: #fff; }
.my-profile-btn[hidden] { display: none; }
/* My Feed reads as site chrome, not a filled CTA (Dustin, Oct 13): the
   solid accent pill was the loudest object on the app home screen. Same
   panel treatment as the launcher tiles, with an accent label. The hex
   was already the site accent; only the treatment changes. Log in /
   Create account keep the filled accent as the header's primary CTAs. */
#my-profile-link { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--border); color: var(--accent); }
#my-profile-link:hover { color: var(--accent); filter: brightness(1.3); }
/* Account menu: My Profile + Messages + Log out in one button to keep the header compact */
.account-wrap { position: relative; display: inline-block; margin-left: .6rem; }
.account-wrap[hidden] { display: none; }
.my-profile-btn.account-btn { margin-left: 0; position: relative; overflow: hidden; cursor: pointer; background: transparent; padding: .25rem; }
.my-profile-btn.account-btn:hover { background: rgba(255,255,255,.1); filter: none; }
.account-avatar { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 999px; object-fit: cover; }
.account-avatar[hidden] { display: none; }
/* Round 5 (Oct 15): the account menu is a BOTTOM SHEET — iOS
   action-sheet style. Placement is PURE CSS against the viewport
   edges (position: fixed; bottom: 0): no JS placement math, no inline
   coordinate styles, nothing anchor-relative left to drift. The app's
   full-screen fixed overlays (workout page, modals) have never
   drifted on device; a viewport-edge-anchored sheet is that same
   layer class. Round 4's in-flow header panel was drift-proof too
   but looked like a workaround, so Dustin picked the sheet. The
   header no longer grows when the menu opens. See the drift history
   at mrrLockScroll in app.js. */
.acct-sheet-root[hidden] { display: none; }
.acct-sheet-root { pointer-events: none; }
.acct-sheet-root.open { pointer-events: auto; }
.acct-sheet-scrim { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .22s ease; }
.acct-sheet-root.open .acct-sheet-scrim { opacity: 1; }
.account-menu { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001; width: 100%; max-width: 420px; margin: 0 auto; box-sizing: border-box; background: var(--panel-2); color: var(--text); border-top: 1px solid var(--border); border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.45); padding: 4px 8px calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateY(105%); transition: transform .26s cubic-bezier(.32,.72,.24,1); }
.acct-sheet-root.open .account-menu { transform: translateY(0); }
.account-menu[hidden] { display: none; }
.acct-sheet-handle { width: 38px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.28); margin: 8px auto 10px; }
.account-menu a, .account-menu button { display: flex; align-items: center; width: 100%; min-height: 52px; box-sizing: border-box; text-align: left; padding: 6px 14px; margin: 0; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.account-menu #account-logout { border-top: 1px solid var(--border); border-radius: 0 0 12px 12px; margin-top: 6px; }
.account-menu .btn-ico { vertical-align: -2px; margin-right: .35rem; flex: none; }
.account-btn .acct-ico { width: 21px; height: 21px; display: block; }
.account-menu a:hover, .account-menu button:hover { background: rgba(255,255,255,.07); }
.account-menu a:active, .account-menu button:active { background: rgba(255,255,255,.12); }
@media (prefers-reduced-motion: reduce) {
  .acct-sheet-scrim, .acct-sheet-root .account-menu { transition: none; }
}
/* Account menu on the open web (round 6, Oct 15): the bottom sheet
   above is APP-MODE ONLY \u2014 ungated, it leaked onto the desktop
   site. In browsers, bindAccountMenu portals the same #account-menu
   element into #account-wrap (the avatar's position:relative
   wrapper) and these rules present it as a classic dropdown
   anchored under the avatar, styled after the Races nav menu:
   panel card, 12px radius, hairline border, no scrim, no grab
   handle, no slide-up. Every rule is scoped html:not(.app-mode)
   so the app build's sheet rendering cannot change. */
html:not(.app-mode) .account-menu { position: absolute; top: calc(100% + 8px); right: 0; left: auto; bottom: auto; width: 232px; max-width: calc(100vw - 24px); margin: 0; padding: 6px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); transform: none; transition: none; z-index: 300; }
html:not(.app-mode) .acct-sheet-handle { display: none; }
html:not(.app-mode) .account-menu a, html:not(.app-mode) .account-menu button { min-height: 44px; padding: 8px 12px; border-radius: 8px; font-size: .95rem; }
html:not(.app-mode) .account-menu #account-logout { border-radius: 8px; margin-top: 4px; }
.nav-races-wrap { position: relative; display: inline-block; }
.main-nav .nav-races-btn { background: none; border: 0; font: inherit; cursor: pointer; color: var(--muted); font-size: 0.95rem; padding: 0.65rem 0.55rem; display: inline-block; }
.main-nav .nav-races-btn.active { color: var(--text); font-weight: 600; }
.nav-races-caret { font-size: .7em; }
.nav-races-menu { position: absolute; min-width: 190px; max-width: calc(100vw - 24px); background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); padding: 6px; z-index: 300; }
.nav-races-menu[hidden] { display: none; }
.nav-races-menu a[hidden] { display: none; }
.nav-races-menu a { display: block; width: 100%; box-sizing: border-box; text-align: left; padding: 10px 12px; margin: 0; border-radius: 8px; background: none; color: inherit; font-size: .9rem; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.nav-races-menu a:hover { background: rgba(255,255,255,.07); }
.nav-races-menu a.active { background: rgba(255,255,255,.07); color: var(--text); }
#profile-follow.following { background: var(--accent); color: #fff; border-color: var(--accent); }
.follow-count { font-size: .85rem; color: var(--muted); margin-left: .4rem; }
/* My Profile dashboard */
/* My Profile dashboard — modern social-app styling */
.me-wrap { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.me-wrap h1 { margin: 0 0 1.25rem; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; }
.me-wrap h2 { margin: 2rem 0 1rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text); text-transform: none; }
.me-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem; border: none; border-radius: 16px; margin-bottom: 1.5rem; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.08); }
.me-card strong { font-size: 1.1rem; }
.me-meta { color: var(--muted); font-size: .85rem; }
.me-empty { color: var(--muted); font-size: .95rem; }
.me-follow-list { display: grid; gap: .6rem; }
.me-follow-item { display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1.1rem; border: none; border-radius: 12px;
  background: var(--panel); box-shadow: 0 1px 2px rgba(0,0,0,.08); transition: transform .15s, box-shadow .15s; }
.me-follow-item:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.me-follow-item a { font-weight: 600; text-decoration: none; }
/* Follow suggestions -- "Runners you keep meeting" (My Feed) */
.sugg-card { flex-direction: column; align-items: stretch; gap: 0; }
.sugg-title { margin: 0 0 .15rem; font-size: 1.05rem; }
.sugg-sub { margin: 0 0 .85rem; }
.sugg-list { display: grid; gap: .6rem; }
.sugg-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .65rem .9rem; border-radius: 12px; background: var(--panel);
  box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.sugg-info { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.sugg-name { font-weight: 600; text-decoration: none; }
.sugg-actions { display: flex; align-items: center; gap: .4rem; flex: none; }
.sugg-follow.following { background: #243354; border-color: #3a4a63; color: #fff; }
.sugg-x { background: none; border: none; color: var(--muted); font-size: 1.15rem;
  line-height: 1; cursor: pointer; padding: .3rem .45rem; border-radius: 8px; }
.sugg-x:hover { color: var(--text); background: rgba(127,148,184,.15); }
.me-feed-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; border: none; border-radius: 14px; margin-bottom: .75rem;
  background: var(--panel); box-shadow: 0 1px 2px rgba(0,0,0,.08); transition: box-shadow .15s; }
.me-feed-item:hover { box-shadow: 0 2px 12px rgba(0,0,0,.12); }
.me-feed-main { min-width: 0; flex: 1; line-height: 1.5; }
.me-feed-main > a:first-child { text-decoration: none; }
.me-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.me-cheer-btn { flex-shrink: 0; border-radius: 999px; padding: .5rem 1rem; font-weight: 600;
  transition: transform .15s; }
.me-cheer-btn:hover { transform: scale(1.05); }
.me-cheer-btn.following { background: var(--accent); color: #fff; border-color: var(--accent); }
.me-cheer-list { display: grid; gap: .4rem; }
.disc-photo { margin-top: .5rem; }
.disc-photo img { max-width: 100%; max-height: 300px; border-radius: 8px; cursor: zoom-in; }
.disc-photo-preview { margin: .5rem 0; }
.disc-photo-preview img { max-width: 200px; max-height: 150px; border-radius: 8px; display: block; margin-bottom: .4rem; }
.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
@media (min-width: 641px) {
  .header-inner { flex-wrap: nowrap; }
  .main-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .main-nav::-webkit-scrollbar { display: none; }
  .brand span { font-size: 1.05rem; }
  .brand-logo { height: 32px; width: 32px; }
}
.brand {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.brand-logo { height: 38px; width: 38px; object-fit: contain; border-radius: 8px; }
.brand:hover { text-decoration: none; }
.header-divider {
  width: 1px;
  height: 1.6rem;
  background: var(--border);
  flex: none;
}
.main-nav { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.main-nav a {
  color: var(--muted);
  font-size: 0.95rem;
  padding: 0.65rem 0.55rem; /* finger-sized tap target */
  display: inline-block;
}
.main-nav a.active { color: var(--text); font-weight: 600; }
.search-wrap { position: relative; margin-left: auto; }
#runner-search {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.45rem 0.7rem;
  width: 18rem;
  max-width: 60vw;
  font-size: 1rem;
  min-height: 44px;
}
#runner-search::placeholder { color: var(--muted); }
.search-results {
  /* In-flow since round 4 (Oct 15): static block under the search input;
     the header grows while results show. Was a positioned layer in every
     earlier drift round. Keeps its internal scroll (max-height). */
  position: static;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  max-height: 18rem;
  overflow-y: auto;
  background: #0b1220;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.search-results a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.search-results a:hover { background: rgba(96, 165, 250, 0.14); text-decoration: none; }
.search-results .sr-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-results .sr-meta { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.search-loading { padding: 0.6rem 0.75rem; color: var(--muted); font-size: 0.9rem; }
.search-section { padding: 0.5rem 0.75rem 0.15rem; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }

.view { max-width: 1800px; margin: 0 auto; padding: 1.25rem 1.5rem 3rem; }
.view h1 { font-size: 1.5rem; margin: 0 0 0.25rem; }
.view h2 { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
.subtitle { color: var(--muted); margin: 0 0 1rem; }
.ultra-note { font-weight: 600; margin: 0 0 1rem; }

.controls {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 1rem 0;
}
.dist-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.dist-tabs.box-row { margin: 0.6rem 0; }
.dist-tabs button, .controls select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.45rem 0.8rem;
  font-size: 1rem;
  cursor: pointer;
  min-height: 44px; /* finger-sized tap target */
}
.dist-tabs button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #0b1220;
  font-weight: 600;
}
/* Power Score / Times mode toggle: two prominent boxes above the distance tabs. */
.dist-tabs.mode-toggle { margin: 0.6rem 0 0.2rem; }
.dist-tabs.mode-toggle button {
  font-size: 1rem;
  font-weight: 600;
  padding: 0.55rem 1.6rem;
  border-width: 2px;
}
.dist-tabs.mode-toggle button.active {
  font-weight: 700;
}
.controls label { color: var(--muted); font-size: 0.9rem; }
.lb-find-box { display: inline-flex; vertical-align: middle; position: relative; gap: 0.5rem; }
.lb-find-box input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.45rem 0.7rem;
  font-size: 0.92rem;
  min-height: 44px;
  width: 18rem;
  max-width: 60vw;
}
.lb-find-box button {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.45rem 0.8rem;
  font-size: 0.92rem;
  cursor: pointer;
  min-height: 44px;
}
.lb-find-box button:hover { border-color: var(--accent); color: var(--accent); }
.lb-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-width: 22rem;
  max-height: 18rem;
  overflow-y: auto;
  background: #0b1220;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 50;
}
.lb-suggest-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.lb-suggest-item:last-child { border-bottom: none; }
.lb-suggest-item:hover { background: rgba(96, 165, 250, 0.14); }
.lb-suggest-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-suggest-meta { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.county-tip {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  background: #0b1220;
  color: #ffffff;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 0.3rem 0.65rem;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.lb-msg { min-height: 1.4em; margin: 0 0 0.5rem; color: var(--muted); font-size: 0.92rem; }
tr.lb-hit td { background: rgba(96, 165, 250, 0.18); }
tr.lb-hit td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

.table-scroll {
  overflow-x: auto; /* contain wide tables: they scroll inside their own box instead of sliding underneath the sticky poll sidebar */
  border: 1px solid var(--border);
  border-radius: 8px;
  max-width: 100%;
  -webkit-overflow-scrolling: touch; /* smooth swipe-scroll on iOS */
}
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; background: var(--panel); }
th, td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border); }
/* Tables inside .table-scroll opt into nowrap (they scroll horizontally instead of wrapping) */
.table-scroll th, .table-scroll td { white-space: nowrap; }
/* Profile race-history table: 10 columns, so keep padding snug to avoid h-scroll on desktop */
#tab-history th, #tab-history td { padding-left: 0.5rem; padding-right: 0.5rem; }
th {
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: sticky;
  top: 0;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--panel-2); }
td.num, th.num { text-align: right; }
td.ctr, th.ctr { text-align: center; }
.rank-cell { color: var(--muted); width: 3.5rem; white-space: nowrap; }
.rank-inner { display: inline-flex; align-items: center; gap: 0.35rem; }
.rank-inner .medal { font-size: 1.05rem; line-height: 1; }
/* Designed rank medallions (replace medal emoji): numbered metal discs. */
.rank-medal { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.35rem; height: 1.35rem; border-radius: 50%; font-size: 0.78rem; font-weight: 800; line-height: 1;
  border: 1px solid; font-variant-numeric: tabular-nums; }
.rank-medal.rm-1 { background: linear-gradient(180deg, #ffe9a8, #f5c542); border-color: #c9971c; color: #5c4300; }
.rank-medal.rm-2 { background: linear-gradient(180deg, #f2f4f7, #c3ccd6); border-color: #9aa7b8; color: #3d4756; }
.rank-medal.rm-3 { background: linear-gradient(180deg, #f3c39a, #cd7f32); border-color: #a05f24; color: #42260a; }
.accomp-card-medal .rank-medal { width: 2rem; height: 2rem; font-size: 1rem; }
.tl-dot .rank-medal { width: 1.6rem; height: 1.6rem; font-size: 0.85rem; }
.podium-medal .rank-medal { vertical-align: -0.32em; }
.pts-cell { font-weight: 700; color: var(--accent-2); }

.profile-head {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.profile-head-main { min-width: 0; }
.profile-head-qr { text-align: center; flex-shrink: 0; }
.profile-head-qr .qr-box { background: #fff; padding: 6px; border-radius: 8px; line-height: 0; display: inline-block; }
.profile-head-qr .qr-box img, .profile-head-qr .qr-box canvas { display: block; }
.profile-head-qr .qr-cap { font-size: 0.72rem; color: var(--muted); margin-top: 0.3rem; }
.strava-box { display: inline-flex; align-items: center; gap: 0.8rem; background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px; padding: 0.6rem 0.8rem; }
.strava-box-side { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.strava-name { font-size: 0.85rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.strava-stats { display: flex; gap: 0.85rem; }
.strava-stat { text-align: center; }
.strava-stat b { display: block; font-size: 1.05rem; }
.strava-stat span { font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.strava-sub { font-size: 0.74rem; font-weight: 700; color: #FC5200; white-space: nowrap; }
.strava-loc { font-size: 0.74rem; color: var(--muted); white-space: nowrap; }
.strava-clubs { font-size: 0.74rem; max-width: 190px; }
.strava-clubs > span:first-child { display: block; font-size: 0.66rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em; }
.strava-clubs a { color: var(--accent); }
.strava-more { color: var(--muted); font-size: 0.7rem; white-space: nowrap; }
.profile-head-side {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
}
.profile-prs {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  min-width: 10rem;
}
.pr-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.pr-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  padding: 0.15rem 0;
}
.pr-dist { color: var(--muted); }
.pr-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.profile-trophy {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  padding: 0 1rem;
}
.trophy-icon { line-height: 0; display: inline-flex; }
.trophy-icon svg { display: block; }
.trophy-bronze .trophy-icon { color: #cd7f32; } .trophy-bronze .trophy-icon svg { width: 3rem; height: 3rem; }
.trophy-silver .trophy-icon { color: #c0c0c0; } .trophy-silver .trophy-icon svg { width: 4rem; height: 4rem; }
.trophy-gold .trophy-icon { color: #ffd700; } .trophy-gold .trophy-icon svg { width: 5rem; height: 5rem; }
.trophy-count {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted);
  margin-top: 0.25rem;
}
.trophy-bronze .trophy-count { color: #cd7f32; }
.trophy-silver .trophy-count { color: #c0c0c0; }
.trophy-gold .trophy-count { color: #ffd700; }
.podium-medal { font-size: 0.95em; margin-right: 0.15rem; }
.profile-head h1 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.profile-meta { color: var(--muted); margin-top: 0.3rem; display: flex; gap: 1.25rem; flex-wrap: wrap; }
.profile-meta strong { color: var(--text); }
.profile-filters { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0 0.75rem; flex-wrap: wrap; }
.profile-filters label { color: var(--muted); display: flex; align-items: center; gap: 0.5rem; }
.profile-filters select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 0.35rem 0.5rem; font-size: 1rem; }
.filter-note { color: var(--muted); font-size: 0.9rem; }

.ext-mark { color: var(--warn); font-weight: 700; }
.exact-mark { color: #4caf50; font-weight: 700; cursor: help; }
/* Score exclusions: dimmed row + tag on the runner's own profile. */
#profile-tbody tr.excluded-row { opacity: 0.55; }
#profile-tbody tr.excluded-row:hover { opacity: 0.8; }
.excl-tag {
  display: inline-block; font-size: 11px; font-weight: 600;
  color: var(--muted-fg, #888); border: 1px solid var(--border, #ddd);
  border-radius: 10px; padding: 1px 8px; margin-left: 6px;
  vertical-align: middle; white-space: nowrap;
}
.result-excl-btn { margin-left: 4px; }
.footnote { color: var(--muted); font-size: 0.85rem; margin-top: 0.75rem; }

.notice {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--warn);
  border-radius: 6px;
  padding: 0.8rem 1rem;
  margin: 1rem 0;
  font-size: 0.93rem;
}
.notice strong { color: var(--text); }

/* Hype key legend (Upcoming Races tab) */
.hype-key {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.8rem 1rem;
  margin: 1rem 0;
}
.hype-key h3 { margin: 0 0 0.6rem; font-size: 0.95rem; }
.hype-key-items { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; }
.hype-key-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.93rem; }
.hype-key-item .hype { font-size: 1.25rem; line-height: 1; }
.hype-key-item small { color: var(--muted); }
@media (max-width: 640px) {
  .hype-key-items { flex-direction: column; gap: 0.5rem; }
}

/* Weekend recap box (top of the home view). */
#weekend-recap {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  padding: 0.7rem 1rem;
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 1.5;
}
#weekend-recap .recap-title { font-weight: 700; margin-bottom: 0.2rem; }
#weekend-recap .recap-fastest { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border); color: var(--muted); }
#weekend-recap .recap-fastest-head { font-weight: 700; color: var(--text); margin-bottom: 0.2rem; }
#weekend-recap .recap-race { padding: 0.35rem 0; border-top: 1px solid var(--border); }
#weekend-recap .recap-race:first-of-type { border-top: none; }
#weekend-recap .recap-rank, .beat-recap-card .recap-rank { font-weight: 700; color: var(--accent); margin-right: 0.25rem; }
#weekend-recap .recap-winners { margin-top: 0.15rem; color: var(--muted); }
.beat-recap-card summary { cursor: pointer; padding: 0.6rem 0.8rem; list-style: none; }
.beat-recap-card summary::-webkit-details-marker { display: none; }
.beat-recap-card summary:before { content: '▸ '; color: var(--muted); }
.beat-recap-card[open] summary:before { content: '▾ '; }
@media (max-width: 640px) {
  #weekend-recap { padding: 0.6rem 0.8rem; font-size: 0.88rem; }
}

.race-list { display: flex; flex-direction: column; gap: 0; }
.race-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 0.25rem;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.race-row > *:first-child { min-width: 0; }
.race-row > *:last-child { flex-shrink: 0; }
.race-row .race-name { font-weight: 600; }
.race-row .race-sub { color: var(--muted); font-size: 0.85rem; }
.no-results { color: var(--muted); font-style: italic; }

.race-filters {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 0.75rem 0 1rem;
}

.race-filters .search-input { margin: 0; flex: 1 1 220px; }

.race-sort-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.25rem 0 0.75rem;
}
.race-sort-row label { color: var(--muted); font-size: 0.9rem; }

.county-select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.55rem 0.8rem;
  font-size: 1rem;
  min-height: 44px;
  max-width: 100%;
}

.search-input {
  width: 100%;
  max-width: 420px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.55rem 0.8rem;
  font-size: 1rem;
  margin: 0.75rem 0 1rem;
  min-height: 44px;
}

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--panel);
  padding: 1.25rem 1rem 2rem;
}
.site-footer p { max-width: 1100px; margin: 0.4rem auto; }
.meta-note { color: var(--muted); font-size: 0.82rem; }
.footer-small { color: var(--muted); font-size: 0.82rem; }

.loading { color: var(--muted); padding: 2rem 0; text-align: center; }
.error { color: #ff8a8a; padding: 2rem 0; }

.about p { max-width: 70ch; }
.about ul { max-width: 70ch; }
.about li { margin-bottom: 0.5rem; }

@media (max-width: 640px) {
  .header-inner { gap: 0.6rem; }
  .search-wrap { margin-left: 0; width: 100%; }
  #runner-search { width: 100%; max-width: none; }
  .search-results { width: 100%; }
  th, td { padding: 0.55rem 0.5rem; font-size: 0.875rem; } /* keep readable without zoom */
  .view h1 { font-size: 1.3rem; }
  .controls { gap: 0.5rem; }
  .dist-tabs { width: 100%; }
  .dist-tabs button { flex: 1 1 auto; } /* full-width tappable tabs */
  .dist-tabs.box-row { width: 100%; }
  /* Profile header: stack vertically on phones so the 2026 Bests box and
     trophy sit below the name/meta instead of squeezing beside them */
  .profile-head { flex-direction: column; align-items: stretch; }
  .profile-head-side { flex-wrap: wrap; }
  .profile-head-qr { align-self: center; margin: 0.5rem 0; }
  .profile-prs { min-width: 0; flex: 1 1 12rem; }
  .profile-trophy { padding: 0; }
}

/* Wide desktop: let data tables breathe without stretching text */
@media (min-width: 1400px) {
  .view, .header-inner, .site-footer p { max-width: 1900px; }
}

/* ---------------- Counties ---------------- */
.county-picker { display: block; margin: 1rem 0; font-weight: 600; }
.county-picker select { font-size: 1rem; padding: 0.5rem; max-width: 100%; }
.county-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.county-head .back-link { margin: 0 0 0.25rem; }
.county-head h1 { margin: 0; }
.county-switch { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.9rem; }
.county-switch select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.45rem 0.8rem;
  font-size: 1rem;
  cursor: pointer;
  min-height: 44px;
  max-width: 100%;
}
.county-map { max-width: 640px; margin: 1rem auto; }
.county-map svg { width: 100%; height: auto; display: block; }
.county-shape { stroke: #ffffff; stroke-width: 1.2; transition: stroke-width 0.1s; }
.county-shape:hover { stroke: #0d5fd0; stroke-width: 2.5; }
.county-picked { stroke: var(--accent); stroke-width: 3; }
.an-county-map { margin-top: 1rem; }
.an-heat-controls { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-bottom: 1rem; }
.an-heat-controls .analytics-grains { margin-bottom: 0; }
.an-hstat { font-size: 0.95rem; color: var(--text); }
.an-heat-layout { display: flex; gap: 1.5rem; align-items: flex-start; }
.an-heat-list { flex: 0 0 300px; min-width: 0; }
.an-heat-list h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.heat-toplist { margin: 0; padding-left: 1.4rem; }
.heat-toplist li { margin: 0.3rem 0; }
.heat-toplist .muted { font-size: 0.9em; }
.an-heat-mapwrap { flex: 1; min-width: 0; }
@media (max-width: 760px) {
  .an-heat-layout { flex-direction: column; }
  .an-heat-mapwrap { order: -1; width: 100%; }
  .an-heat-list { flex: none; width: 100%; }
}
#an-heatmap, .an-county-map { max-width: 560px; margin-left: auto; margin-right: auto; }
.map-legend { text-align: center; color: #555; font-size: 0.9rem; margin-bottom: 1rem; }
.legend-swatch { display: inline-block; width: 1.6rem; height: 0.8rem; margin: 0 0.3rem;
  vertical-align: middle; border: 1px solid #ccc; }
.heat-gradient { display: inline-block; width: 9rem; height: 0.8rem; margin: 0 0.5rem;
  vertical-align: middle; border: 1px solid #ccc; border-radius: 3px; }
.medal { font-size: 1rem; line-height: 1; vertical-align: -0.1em; }
.accomp-list .medal { margin-right: 0.3rem; }
.profile-tabs { display: flex; gap: 0.5rem; margin: 1.25rem 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tabs .ptab { flex-shrink: 0; }
.ptab {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px 8px 0 0;
  padding: 0.55rem 1.25rem;
  font-size: 0.95rem;
  cursor: pointer;
  border-bottom: none;
}
.ptab.active { background: var(--panel); color: var(--accent); font-weight: 600; }
.ptab:hover { color: var(--accent); }
.accomp-list { list-style: none; padding: 0; margin: 0.5rem 0 1.5rem; }
.accomp-list li {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
}
.accomp-list li a { font-weight: 500; }
.accomp-scope { color: var(--muted); font-size: 0.85rem; }
#tab-accomp h3 { margin: 1.25rem 0 0.25rem; font-size: 1.1rem; }
#tab-accomp h4 { margin: 1rem 0 0.25rem; font-size: 0.95rem; color: var(--muted); }
.muted { color: var(--muted); }
.site-visits { color: var(--muted); font-size: 0.8rem; margin-top: 2.5rem; }

/* Upcoming races tab */
.month-head { margin: 1.6rem 0 0.4rem; font-size: 1.25rem; }
.hype { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ctext x='3' y='23' font-size='22'%3E%F0%9F%94%A5%3C/text%3E%3C/svg%3E") 14 14, pointer; }

/* Mega-hype flames render blue */
.mega-hype { filter: hue-rotate(195deg) saturate(1.7); }
td.nowrap { white-space: nowrap; }

/* Feedback form + admin inbox */
.fb-box { width: 100%; max-width: 40rem; padding: 0.6rem; font-size: 1rem; font-family: inherit; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); color: var(--text); }
.fb-input { width: 100%; max-width: 24rem; padding: 0.5rem 0.6rem; font-size: 1rem; font-family: inherit; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); color: var(--text); }
.fb-select { padding: 0.5rem 0.6rem; font-size: 1rem; font-family: inherit; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); color: var(--text); }
.fb-label { font-weight: 600; font-size: 0.95rem; }
.btn { padding: 0.55rem 1.3rem; font-size: 1rem; cursor: pointer; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: #0b1220; font-weight: 600; }
.btn:hover { background: #a9cdf5; }
.fb-item { border: 1px solid var(--border); border-radius: 6px; padding: 0.6rem 0.8rem; margin-bottom: 0.6rem; }
.fb-head { cursor: pointer; display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.fb-cat { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: #eef; border: 1px solid #ccd; border-radius: 4px; padding: 0.1rem 0.4rem; }
.fb-ip { font-size: 0.75rem; }
.fb-body { max-height: 3.4em; overflow: hidden; white-space: pre-wrap; margin-top: 0.35rem; }
.fb-item.open .fb-body { max-height: none; }
.fb-del { margin-left: auto; font-size: 0.8rem; cursor: pointer; border: 1px solid var(--border); border-radius: 4px; background: #fff; padding: 0.15rem 0.5rem; }
.fb-del:hover { background: #fdd; }

/* About page */
.about-page .subtitle { margin-top: -0.5rem; }
.about-toc { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 1.5rem; }
.about-toc a { display: inline-block; padding: 0.35rem 0.8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--text); text-decoration: none; font-size: 0.9rem; }
.about-toc a:hover { border-color: var(--accent); color: var(--accent); }
.about-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; }
.about-card h2 { margin: 0 0 0.6rem; font-size: 1.25rem; }
.about-card h3 { margin: 1.1rem 0 0.4rem; font-size: 1.05rem; color: var(--muted); }
.about-card p { margin: 0.6rem 0; line-height: 1.55; }
.about-card ul { margin: 0.6rem 0; padding-left: 1.25rem; line-height: 1.55; }
.about-card li { margin-bottom: 0.35rem; }
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.tier-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 0.8rem 0.5rem; text-align: center; }
.tier-card .tier-pts { font-size: 1.7rem; font-weight: 800; color: var(--accent); line-height: 1.2; }
.tier-card .tier-field { color: var(--muted); font-size: 0.88rem; margin-top: 0.2rem; }
.formula { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 0.6rem 0.8rem; overflow-x: auto; font-size: 0.92rem; }
.stat-chips { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.9rem 0; }
.stat-chip { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 1rem; min-width: 7rem; }
.stat-chip b { display: block; font-size: 1.35rem; color: var(--accent); }
.stat-chip span { color: var(--muted); font-size: 0.85rem; }
.key-list { list-style: none; padding-left: 0; }
.key-list li { display: flex; gap: 0.6rem; align-items: flex-start; }
.key-ico { font-size: 1.15rem; line-height: 1.4; white-space: nowrap; }

/* Merge-request fields on the feedback form */
.fb-merge { display: none; }
.fb-merge.on { display: block; }

/* Runner hover tooltip: highest accomplishment */
.acc-tip {
  position: fixed;
  z-index: 9999;
  display: none;
  max-width: 320px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  line-height: 1.45;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.acc-tip .accomp-scope { color: var(--muted); }
.acc-tip .medal { margin-right: 0.15rem; }

/* Exception report: reviewed flags (tri-state: red = needs review, yellow = in review, green = reviewed) */
.exc-review {
  width: 1.4rem; height: 1.4rem; padding: 0; cursor: pointer;
  border: 2px solid #e05252; border-radius: 4px; background: transparent;
  color: #fff; font-size: 0.95rem; line-height: 1; vertical-align: middle;
}
.exc-review.wip { border-color: #e0a83c; background: rgba(224, 168, 60, 0.25); color: #f5c542; }
.exc-review.done { background: #2e9e5b; border-color: #2e9e5b; color: #fff; }
.exc-review:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.exc-review:disabled { opacity: 0.5; cursor: default; }
tr.exc-wip > td { background: rgba(224, 168, 60, 0.07); }
tr.exc-done > td { background: rgba(46, 158, 91, 0.10); }
.fb-item.exc-wip { border-color: #e0a83c; background: rgba(224, 168, 60, 0.06); }
.fb-item.exc-done { border-color: #2e9e5b; background: rgba(46, 158, 91, 0.07); }
.exc-count .rv-wip { color: #f5c542; }
.exc-count .rv-done { color: #7fd6a0; }
.exc-city-in { padding: 0.35rem 0.45rem; max-width: 9rem; width: 100%; box-sizing: border-box; }
.exc-city-save { padding: 0.35rem 0.6rem; white-space: nowrap; }
.exc-city-msg { margin-left: 0.4rem; }
.exc-county-sel { padding: 0.35rem; max-width: 9rem; }
.exc-county-msg { margin-left: 0.4rem; }

/* Analytics: head-to-head runner comparison */
.analytics-add { position: relative; max-width: 30rem; margin-bottom: 0.75rem; }
.analytics-add .fb-input { width: 100%; }
.analytics-results { position: absolute; left: 0; top: calc(100% + 4px); width: 100%; max-height: 18rem; overflow-y: auto; background: #0b1220; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 100; }
.analytics-hit { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; width: 100%; padding: 0.5rem 0.75rem; background: none; border: none; border-bottom: 1px solid var(--border); color: var(--text); font-size: 0.92rem; cursor: pointer; text-align: left; font-family: inherit; }
.analytics-hit:hover:not(:disabled) { background: rgba(96, 165, 250, 0.14); }
.analytics-hit:disabled { opacity: 0.55; cursor: default; }
.analytics-hit .sr-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.analytics-hit .sr-meta { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.analytics-nores { padding: 0.6rem 0.75rem; color: var(--muted); font-size: 0.9rem; }
.analytics-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.analytics-chips:empty { margin-bottom: 0; }
.runner-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.35rem 0.3rem 0.7rem; background: rgba(96, 165, 250, 0.14); border: 1px solid var(--border); border-radius: 999px; font-size: 0.9rem; }
.runner-chip button { border: none; background: none; color: var(--muted); font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0.15rem 0.45rem; border-radius: 999px; font-family: inherit; }
.runner-chip button:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }
.chip-dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; flex: none; }
.analytics-table th:first-child { text-align: left; color: var(--muted); font-weight: 600; white-space: nowrap; }
.analytics-table td.best { font-weight: 700; color: #4ade80; }
.analytics-empty { color: var(--muted); }
.analytics-grains { margin-bottom: 1rem; }
.ct-who { color: var(--muted); font-size: 0.78rem; font-weight: 400; white-space: nowrap; }

/* Analytics county table: clickable row labels that re-shade the picker map. */
.analytics-table th.maplink { cursor: pointer; }
.analytics-table th.maplink:hover { color: #8ecaff; text-decoration: underline; }
.map-metric { color: #9fb3c8; font-size: 13px; margin: 18px 0 8px; }
.map-metric strong { color: #d7e3f4; }
.legend-dim { color: #9fb3c8; font-size: 12px; margin-left: 10px; }

/* Monetization: ad placements + affiliate disclosure. Slots render only after
   the AdSense publisher ID is configured; until then they output nothing. */
.ad-slot { margin: 1rem auto; text-align: center; max-width: 970px; min-height: 90px; }
html.app-mode .ad-slot, html.app-mode ins.adsbygoogle { display: none !important; }
#footer-ad .ad-slot { margin-top: 0; }
.aff-note { font-size: .8em; color: #8a94a6; white-space: nowrap; }

/* ---- Accomplishments: stat strip, cards, podium timeline ---- */
.accomp-stats { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.accomp-stat { padding: .35rem .8rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel-2); font-size: .9rem; }
.accomp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .7rem; margin: .5rem 0 1.5rem; }
.accomp-card { border: 1px solid var(--border); border-radius: 10px; padding: .8rem;
  background: var(--panel-2); }
.accomp-card-top { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.accomp-card-medal { font-size: 1.7rem; line-height: 1; }
.accomp-card-rank { font-size: 1.3rem; font-weight: 700; }
.accomp-card-what { font-weight: 600; font-size: .95rem; }
.accomp-card-sub { color: var(--muted); font-size: .85rem; margin-top: .2rem; }
.podium-timeline { position: relative; margin: .5rem 0 1.5rem; padding-left: 2.2rem; }
.podium-timeline::before { content: ''; position: absolute; left: .7rem; top: .5rem; bottom: .5rem;
  width: 2px; background: var(--border); border-radius: 2px; }
.tl-item { position: relative; margin-bottom: .7rem; }
.tl-dot { position: absolute; left: -2.2rem; top: -.1rem; width: 1.6rem; text-align: center;
  font-size: 1.15rem; line-height: 1.4; }
.tl-card { border: 1px solid var(--border); border-radius: 10px; padding: .6rem .8rem;
  background: var(--panel-2); }
.tl-date { font-size: .8rem; color: var(--muted); }
.tl-title { font-size: 1.05rem; font-weight: 700; margin: .1rem 0; }
.tl-race a { font-weight: 500; }

/* Profile share button. */
.share-btn { margin-top: .6rem; height: 32px; padding: 0 .9rem; border: 1px solid #3a4a63;
  background: #1b2740; color: #cfe0f5; border-radius: 999px; cursor: pointer; font-size: .85rem;
  display: inline-flex; align-items: center; gap: .4rem; }
.share-btn[hidden] { display: none; }
.share-btn:hover { background: #243354; }

/* Profile claiming (Strava verification). */
.claim-wrap { display: inline-flex; align-items: center; margin-top: .6rem; margin-left: .5rem; vertical-align: middle; gap: .5rem; }
.claim-btn { background: var(--accent); border: none; padding: .55rem 1rem; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; color: #fff; font-size: .9rem; font-weight: 600; }
.claim-btn[hidden] { display: none; }
.claim-btn b { font-weight: 800; margin-left: .3rem; letter-spacing: .02em; }
.claim-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(77,163,255,.4); }
.verified-badge { display: inline-block; margin-left: .6rem; padding: .15rem .6rem; border-radius: 999px;
  background: #123f2a; color: #7ee2a8; font-size: .8rem; font-weight: 600; vertical-align: middle; }
.profile-name-row { display: flex; align-items: center; gap: .8rem; }
.profile-avatar-lg { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }
.strava-link { margin-left: .5rem; font-size: .85rem; color: #FC5200; font-weight: 700; }
.claim-notice { margin-top: .6rem; padding: .5rem .8rem; border-radius: 8px;
  background: #123f2a; color: #a9e8c3; font-size: .9rem; max-width: 34rem; }

/* ---- Verified-runner bio ---- */
#profile-bio-wrap { margin: 0.9rem 0 0; }
.profile-bio { max-width: 44rem; padding: 0.7rem 0.9rem; border-left: 3px solid #FC5200;
  background: var(--panel-2); border-radius: 0 8px 8px 0; font-size: 0.95rem; line-height: 1.5;
  white-space: pre-wrap; word-wrap: break-word; }
.bio-edit-row { margin-top: 0.5rem; }
.bio-btn { padding: 0.35rem 0.9rem; border: 1px solid #3a4a63; background: #1b2740; color: #cfe0f5;
  border-radius: 999px; cursor: pointer; font-size: 0.85rem; }
.bio-btn:hover { background: #243354; }
.bio-btn.primary { background: #FC5200; border-color: #FC5200; color: #fff; font-weight: 600; }
.bio-btn.primary:hover { background: #e04a00; }
#bio-form { margin-top: 0.6rem; max-width: 44rem; }
#bio-form textarea { width: 100%; box-sizing: border-box; padding: 0.6rem; font: inherit;
  font-size: 1rem; border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
  color: var(--text); resize: vertical; }
.bio-form-row { margin-top: 0.5rem; display: flex; gap: 0.5rem; align-items: center; }
.bio-msg { font-size: 0.85rem; color: var(--muted); }

/* ---- Race discussion (verified runners only) ---- */
#race-discussion { margin-top: 2.5rem; border-top: 1px solid var(--border); padding-top: 1rem; }
#race-discussion h2 { margin-bottom: .8rem; }
.disc-comment { display: flex; gap: .7rem; padding: .8rem 0; border-bottom: 1px solid var(--border); }
.disc-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.disc-body { flex: 1; min-width: 0; }
.disc-head { margin-bottom: .25rem; font-size: .9rem; }
.disc-head .verified-badge { margin-left: .3rem; font-size: .75rem; }
.disc-time { color: var(--muted, #888); font-size: .8rem; margin-left: .4rem; }
.disc-text { white-space: normal; word-wrap: break-word; line-height: 1.5; }
.disc-form { margin-top: 1rem; max-width: 44rem; }
.disc-label { display: block; font-weight: 600; margin-bottom: .4rem; }
.disc-form textarea { width: 100%; box-sizing: border-box; padding: .6rem; font: inherit; font-size: 1rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg, #fff); color: inherit; resize: vertical; }
.disc-actions { margin-top: .5rem; display: flex; align-items: center; gap: .6rem; }
.disc-actions button { padding: .5rem 1.1rem; font-size: .95rem; cursor: pointer;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; font-weight: 600; }
.disc-verify-note { margin-top: 1rem; padding: .8rem 1rem; border: 1px dashed var(--border); border-radius: 8px; max-width: 44rem; }
.enable-comments-btn { margin-left: .6rem; font-size: .8rem; padding: .25rem .7rem; cursor: pointer; border-radius: 999px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border); font-weight: 600; }
.enable-comments-btn:hover { border-color: var(--accent); color: var(--accent); }
.adm-clist { margin-top: .5rem; }
@media (max-width: 640px) {
  .disc-avatar { width: 30px; height: 30px; }
}

/* ---------------- Profile extras (MySpace layer) ---------------- */
.profile-cover { height: 300px; border-radius: 10px 10px 0 0; background-size: cover;
  background-position: center; border: 1px solid var(--border); border-bottom: none;
  margin-bottom: -1.25rem; }
@media (max-width: 700px) { .profile-cover { height: 180px; } }
.profile-cover + .profile-head { border-top-left-radius: 0; border-top-right-radius: 0; }
.extras-edit-row { margin: .4rem 0; }
#extras-form { margin: .6rem 0 1rem; padding: .8rem; border: 1px solid var(--border);
  border-radius: 10px; max-width: 40rem; display: grid; gap: .6rem; }
#extras-form[hidden] { display: none; }
.extras-upload-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cover-report-link { background: none; border: none; color: var(--muted); font-size: .75rem;
  cursor: pointer; padding: .2rem 0; display: block; margin: 0 auto .4rem; }
.cover-report-link:hover { color: var(--accent); text-decoration: underline; }
/* Photo gallery tab */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .6rem; margin-top: .6rem; }
.gallery-item { position: relative; margin: 0; border-radius: 8px; overflow: hidden;
  aspect-ratio: 4/3; background: var(--card, #f4f4f4); cursor: zoom-in; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-del, .gallery-flag { position: absolute; top: .3rem; right: .3rem; width: 1.7rem; height: 1.7rem;
  border-radius: 50%; border: none; cursor: pointer; font-size: 1rem; line-height: 1;
  background: rgba(0,0,0,.55); color: #fff; }
.gallery-del:hover { background: rgba(180,0,0,.8); }
.gallery-flag { font-size: .8rem; }
.gallery-flag:disabled { opacity: .5; }
#gallery-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 9999;
  display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
#gallery-lightbox[hidden] { display: none; }
#gallery-lightbox img { max-width: 94vw; max-height: 94vh; border-radius: 8px; }
.cover-opt { cursor: pointer; min-width: 0; }
.cover-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cover-opt img { width: 100%; height: 68px; object-fit: cover; border-radius: 8px;
  border: 2px solid transparent; display: block; }
.cover-opt input:checked + img { border-color: var(--accent); }
.cover-opt.cover-none span { display: flex; align-items: center; justify-content: center;
  width: 100%; height: 68px; border-radius: 8px; border: 1px dashed var(--border);
  color: var(--muted); font-size: .8rem; box-sizing: border-box; }
.cover-opt input:checked + span { border-color: var(--accent); border-style: solid; }
#extras-trainingfor-in, #extras-favdist-in, #extras-trainingfor-sel { font: inherit; padding: .5rem .6rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg, #fff); color: inherit;
  width: 100%; box-sizing: border-box; }
#extras-trainingfor-in[hidden] { display: none; }
.extras-cover-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; }

/* ---------------- Badges ---------------- */
.bflair { display: inline-block; font-size: .68rem; font-weight: 700; padding: .08rem .42rem;
  margin-left: .35rem; border-radius: 999px; background: rgba(245,197,66,.13);
  border: 1px solid rgba(245,197,66,.5); color: #f5c542; vertical-align: .08em; white-space: nowrap; }
/* Head-to-head rivals on profiles */
.rivals-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 1rem 1.2rem; margin: 1rem 0; }
.rivals-card h3 { margin: 0 0 .7rem; font-size: 1.05rem; }
.rivals-list { display: flex; flex-direction: column; gap: .45rem; }
.rival-row { display: flex; align-items: center; gap: .8rem; padding: .5rem .8rem;
  background: rgba(255,255,255,.04); border-radius: 8px; text-decoration: none;
  border-left: 3px solid transparent; }
.rival-row:hover { background: rgba(255,255,255,.07); }
.rival-winning { border-left-color: #51cf66; }
.rival-losing { border-left-color: #ff6b6b; }
.rival-tied { border-left-color: #fcc419; }
.rival-name { flex: 1; font-weight: 600; color: #7fb3e8; }
.rival-rec { font-weight: 700; font-size: .95rem; }
.rival-n { color: rgba(255,255,255,.5); font-size: .85rem; }
.rivals-more { margin-top: .5rem; color: rgba(255,255,255,.5); font-size: .9rem; }
.rival-optout-btn { float: right; font-size: .75rem; padding: .2rem .6rem; border-radius: 6px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.7); cursor: pointer; }
.rival-optout-btn:hover { background: rgba(255,107,107,.2); border-color: rgba(255,107,107,.4); color: #fff; }
.rivals-empty { color: rgba(255,255,255,.5); font-size: .9rem; margin: .5rem 0; }
/* Head-to-head comparison view */
.h2h-wrap { max-width: 900px; margin: 0 auto; padding: 1rem; }
.h2h-wrap h2 { text-align: center; margin-bottom: .5rem; }
.h2h-head { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin: 1rem 0 .3rem; }
.h2h-runner { font-size: 1.2rem; font-weight: 700; color: #7fb3e8; text-decoration: none; }
.h2h-score { font-size: 2rem; font-weight: 800; }
.h2h-sub { text-align: center; color: rgba(255,255,255,.55); margin-bottom: 1.2rem; }
.h2h-table { width: 100%; border-collapse: collapse; }
.h2h-table th, .h2h-table td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,.07); }
.h2h-table th { color: rgba(255,255,255,.55); font-size: .85rem; text-transform: uppercase; }
.h2h-win { font-weight: 700; color: #51cf66; }
.h2h-pace { font-size: 0.8em; color: var(--muted); font-weight: 400; }
/* Per-badge color themes: county champs keep the gold pill, state top-10 gets blue,
   state podium gets a bold orange. */
.bflair-cc { color: #fff; }
.bflair-sp { background: rgba(56,189,248,.22); border-color: rgba(125,211,252,.75); color: #fff; }
.bflair-st { background: rgba(59,91,219,.28); border-color: rgba(91,141,239,.75); color: #fff; }
.bflair-bq { background: rgba(59,91,219,.22); border-color: rgba(240,70,85,.75); color: #fff; }
.bflair-marathoner { background: rgba(18,38,130,.5); border-color: #e63946; color: #ffd43b; }
.bflair-ultra { background: rgba(132,94,247,.16); border-color: rgba(132,94,247,.65); color: #c4b5fd; }
.bflair-r25, .bflair-r50, .bflair-r100 { background: rgba(173,181,189,.12);
  border-color: rgba(173,181,189,.5); color: #e9ecef; }
.badge-shelf { display: flex; flex-wrap: wrap; gap: .7rem; margin: .9rem 0 1.2rem; }
.badge-card { display: flex; gap: .6rem; align-items: center; padding: .6rem .9rem;
  border: 1px solid var(--border); border-radius: 10px; background: rgba(245,197,66,.06); }
.badge-card-bq { border-color: rgba(240,70,85,.55); background: rgba(59,91,219,.09); }
.badge-card-bq .badge-yr { color: #a8bfff; }
.badge-card-marathoner { border-color: rgba(230,57,70,.55); background: rgba(18,38,130,.2); }
.badge-card-marathoner .badge-yr { color: #ffd43b; }
.badge-card-ultra { border-color: rgba(132,94,247,.55); background: rgba(132,94,247,.08); }
.badge-card-ultra .badge-yr { color: #c4b5fd; }
.badge-card-r25 .badge-yr, .badge-card-r50 .badge-yr, .badge-card-r100 .badge-yr { color: #e9ecef; }
.badge-card-cc .badge-yr { color: #fff; }
.badge-ico { font-size: 1.7rem; }
.badge-name { font-weight: 700; }
.badge-yr { color: #f5c542; }
.badge-detail { font-size: .82rem; color: var(--muted); }
#profile-badges h3 { margin: .4rem 0 .2rem; }

/* ---------------- Cheers (📣) ---------------- */
.cheer-btn { background: none; border: none; padding: 0 .1rem; cursor: pointer; font-size: .85rem; line-height: 1;
  opacity: .5; vertical-align: baseline; }
.cheer-btn:hover { opacity: 1; }
.cheer-btn.mine { opacity: 1; }
.cheer-btn.mine .cheer-n { font-weight: 700; color: var(--accent); }
.cheer-btn:disabled { cursor: default; opacity: .35; }
.cheer-n { font-size: .8rem; color: var(--muted); margin-left: .15rem; }
.cheer-note { font-size: .8rem; color: var(--muted); margin-left: .4rem; white-space: nowrap; }
.cheer-pop { animation: cheerpop .35s ease; }
@keyframes cheerpop { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* ---------------- Race reviews ---------------- */
#race-reviews { margin-top: 2.5rem; }
.rev-summary-line { font-size: 1.05rem; }
.rev-stars { color: #c9971c; letter-spacing: .1rem; }
.rev-filters { margin: .5rem 0; }
.rev-chip { border: 1px solid var(--border); background: none; color: inherit; border-radius: 999px;
  padding: .2rem .8rem; margin: .15rem .25rem .15rem 0; cursor: pointer; font-size: .85rem; }
.rev-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.rev-item { padding: .8rem 0; border-bottom: 1px solid var(--border); }
.rev-head { margin-bottom: .3rem; }
.rev-text { line-height: 1.55; max-width: 46rem; }
.rev-actions { margin-top: .3rem; }
.rev-report { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .8rem; padding: 0; text-decoration: underline; }
.rev-flagged { font-size: .78rem; color: #a33; border: 1px solid #d99; border-radius: 999px; padding: .05rem .5rem; }
.rev-flagged-item { border-left: 3px solid #d99; padding-left: .6rem; }
.rev-form { margin-top: 1.2rem; max-width: 44rem; }
.rev-form h3 { margin-bottom: .5rem; }
.rev-form textarea { width: 100%; box-sizing: border-box; padding: .6rem; font: inherit; font-size: 1rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg, #fff); color: inherit; resize: vertical; }
.rev-pick { background: none; border: none; font-size: 1.6rem; cursor: pointer; color: #c9971c; padding: 0 .1rem; }
.rev-pick-label { font-weight: 600; }
#rev-post { padding: .5rem 1.1rem; font-size: .95rem; cursor: pointer; }

/* ---------------- Race-day weather ---------------- */
#race-weather:empty { display: none; }
.wx-card { margin: .6rem 0 1rem; padding: .6rem .9rem; border: 1px solid #b9c8d8; border-radius: 10px;
  background: #f7fafd; color: #1c2b3a; max-width: 34rem; }
.wx-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.wx-ico { font-size: 1.6rem; }
.wx-sub { color: #5a6b7d; font-size: .85rem; }
.wx-row { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: baseline; }
.wx-temp { font-size: 1.25rem; font-weight: 700; color: #1c2b3a; }

/* ---------------- Collapsible admin sections ---------------- */
.adm-sec { cursor: pointer; user-select: none; margin-top: 2rem; }
.adm-sec:hover { color: var(--accent); }
.adm-arrow { font-size: .8em; color: var(--muted); margin-left: .3rem; }

/* ---------------- Updates (admin blog) ---------------- */
.update-post { border-top: 1px solid var(--line, #e3e8ef); padding: 1.25rem 0; }
.update-post:first-of-type { border-top: none; padding-top: 0.25rem; }
.update-date { color: var(--muted); font-size: 0.85rem; margin-bottom: 0.15rem; }
.update-title { margin: 0 0 0.6rem; font-size: 1.25rem; }
.update-body p { margin: 0 0 0.75rem; line-height: 1.55; }
.update-video { position: relative; padding-bottom: 56.25%; height: 0; margin: 0.9rem 0 0.25rem; max-width: 720px; }
.update-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }
.updates-page .tiktok-embed { margin: 0.9rem 0 0.25rem !important; }

/* ---------------- Gold Standard (USATF-certified courses) ---------------- */
.gold-chip { display: inline-block; font-size: 0.72rem; font-weight: 700; color: var(--gold);
  background: rgba(245,197,66,.12); border: 1px solid rgba(245,197,66,.45);
  border-radius: 999px; padding: 0.08rem 0.5rem; margin-left: 0.35rem; white-space: nowrap; vertical-align: 1px; }
.bq-chip { color: #ffd94d; background: linear-gradient(180deg, #14507e, #0b3557); border-color: #ffd94d; }
.gold-block { margin: 0.4rem 0 0.9rem; padding: 0.55rem 0.8rem; border: 1px solid rgba(245,197,66,.45);
  border-left: 4px solid var(--gold); border-radius: 10px; background: var(--panel-2); color: var(--text); font-size: 0.92rem; line-height: 1.9; }
.gold-seal { font-weight: 800; color: var(--gold); }
/* Gold seal mark (CSS rosette — replaces the medal emoji in USATF chips). */
.seal-ico { display: inline-block; width: 0.95em; height: 0.95em; border-radius: 50%; vertical-align: -0.12em;
  background: radial-gradient(circle at 50% 38%, #ffe9a8, #f5c542 62%, #d9a92c); border: 1px solid #c9971c;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.gold-sub { color: var(--muted); }
.gold-item { display: inline-block; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.05rem 0.45rem; margin: 0.1rem 0.15rem; white-space: nowrap; }
.gold-item .gold-why { color: var(--muted); }
.gold-code { font-family: monospace; font-size: 0.82em; color: var(--gold); }
.gold-why { font-size: 0.82rem; margin-left: 0.3rem; }
.gold-only-label { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600;
  color: #a8d8ff; cursor: pointer; white-space: nowrap; padding: .25rem .65rem;
  border-radius: 999px; background: rgba(124,196,255,.12); border: 1px solid rgba(124,196,255,.45); }
.gold-only-label input { accent-color: #7cc4ff; width: 1rem; height: 1rem; }
@media (max-width: 640px) {
  .gold-block { font-size: 0.85rem; }
}

/* Result photos on race history */
.result-photos { display: flex; gap: .3rem; margin-top: .3rem; flex-wrap: wrap; align-items: center; }
.result-photo-thumb { width: 60px; height: 45px; object-fit: cover; border-radius: 4px; }
.result-photo-del { background: rgba(0,0,0,.6); color: #fff; border: none; border-radius: 50%;
  width: 2rem; height: 2rem; font-size: .9rem; cursor: pointer; }

/* Post composer + posts in feed — modern */
.me-composer { border: none; border-radius: 16px; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
  background: var(--panel); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.08); }
.me-composer h2 { margin: 0 0 .75rem; font-size: 1.05rem; font-weight: 700; }
.me-composer textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; padding: .8rem 1rem;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg, #fff); color: inherit;
  resize: vertical; min-height: 80px; line-height: 1.5; }
.me-composer textarea:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(77,163,255,.15); }
.me-composer-actions { display: flex; align-items: center; gap: .6rem; margin-top: .75rem; flex-wrap: wrap; }
.me-composer-actions .bio-btn { border-radius: 999px; padding: .5rem 1.1rem; font-weight: 600; }
.me-composer-actions .bio-btn.primary { background: var(--accent); color: #fff; border: none;
  box-shadow: 0 2px 8px rgba(2,6,14,.35); }
.me-composer-actions .bio-btn.primary:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 4px 12px rgba(77,163,255,.35); }
.me-post-preview { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.me-post-thumb-wrap { position: relative; }
.me-post-thumb { width: 100px; height: 75px; object-fit: cover; border-radius: 6px; }
.me-post-thumb-x { position: absolute; top: -.4rem; right: -.4rem; width: 2rem; height: 2rem;
  border-radius: 50%; border: none; background: rgba(0,0,0,.7); color: #fff; cursor: pointer; font-size: .9rem; }
.me-post-text { margin-top: .4rem; white-space: pre-wrap; }
.me-post-photos { display: flex; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; }
.me-post-photo { max-width: 200px; max-height: 150px; border-radius: 8px; object-fit: cover; }
.me-feed-item.me-post { align-items: flex-start; }

/* Discussion photos */
.disc-photo { margin-top: .5rem; }
.disc-photo img { max-width: 100%; max-height: 300px; border-radius: 8px; }
.disc-photo-preview { margin: .5rem 0; }
.disc-photo-preview img { max-width: 200px; max-height: 150px; border-radius: 8px; display: block; margin-bottom: .4rem; }

/* My Feed profile card with avatar */
.me-card-id { display: flex; align-items: center; gap: .9rem; }
.me-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--accent, #4da3ff); }

/* Google verify button (fallback next to Strava) */
.google-claim-btn { padding: .55rem 1rem; border-radius: 999px; font-size: .9rem;
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  font-size: .82rem; font-weight: 600; cursor: pointer; transition: all .15s; }
.google-claim-btn:hover { color: var(--text); border-color: var(--muted); transform: translateY(-1px); }

/* Post comments */
.me-post-comments { margin-top: .75rem; }
.me-comment-toggle { font-size: .82rem; padding: .35rem .8rem; }
.me-comment-list { margin-top: .6rem; display: grid; gap: .5rem; }
.me-comment { background: var(--bg); border-radius: 10px; padding: .6rem .8rem; font-size: .9rem; line-height: 1.4; }
.me-comment-form { display: flex; gap: .5rem; margin-top: .6rem; }
/* The class display rules above defeat the hidden attribute (a class
   beats the UA [hidden] rule), which left the comment list + form laid
   out under every feed post and forced post cards ~489px wide on
   phones. Guard hidden explicitly, and stack post-card children
   vertically instead of squeezing them into the result-row flex. */
.me-comment-list[hidden], .me-comment-form[hidden] { display: none; }
.me-feed-item.me-post { flex-direction: column; align-items: stretch; }
.me-feed-item.me-post .me-post-comments { width: 100%; }
.me-feed-item.me-post .me-post-del { align-self: flex-start; }
.wk-feed-actions { display: flex; gap: .5rem; margin-top: .55rem; flex-wrap: wrap; }
.wk-feed-detail { width: 100%; margin-top: .6rem; }
.wk-feed-detail[hidden] { display: none; }
.wk-feed-map { height: 240px; border-radius: 12px; margin-top: .5rem; }
.wk-name-edit { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .7rem; }
.wk-name-input { flex: 1; min-width: 150px; }
.me-comment-input { min-width: 0; }
.me-comment-input { flex: 1; padding: .5rem .8rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg); color: inherit; font: inherit; font-size: .9rem; }
.me-comment-input:focus { outline: none; border-color: var(--accent); }
.me-comment-send { border-radius: 999px; padding: .5rem 1rem; font-size: .85rem; }

/* Result comments on profile race history */
.result-comments { margin-top: .5rem; display: grid; gap: .4rem; }
.result-comments[hidden] { display: none; }

/* My Feed profile name link */
.me-name-link { text-decoration: none; }
.me-name-link strong { color: var(--link, #4da3ff); }
.me-name-link:hover strong { text-decoration: underline; }
.me-avatar-link { display: inline-block; line-height: 0; }
.me-avatar-link:hover .me-avatar { opacity: .85; }

/* Direct messages */
.dm-wrap { max-width: 1000px; }
.dm-layout { display: grid; grid-template-columns: 300px 1fr; gap: 1rem; min-height: 500px; }
.dm-threads { display: flex; flex-direction: column; gap: .4rem; }
.dm-thread { text-align: left; padding: .7rem .9rem; border: none; border-radius: 12px;
  background: var(--panel); cursor: pointer; display: flex; flex-direction: column; gap: .2rem; }
.dm-thread:hover { background: var(--panel-2); }
.dm-thread.active { outline: 2px solid var(--accent, #4da3ff); }
.dm-thread-name { font-weight: 700; color: var(--text); }
.dm-thread-preview { font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-unread { background: var(--accent, #4da3ff); color: #fff; font-size: .72rem; font-weight: 700;
  border-radius: 999px; padding: .1rem .45rem; margin-left: .3rem; }
.dm-convo { display: flex; flex-direction: column; background: var(--panel); border-radius: 16px; padding: 1rem; min-height: 500px; }
.dm-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; max-height: 450px; }
.dm-msg { display: flex; }
.dm-msg.mine { justify-content: flex-end; }
.dm-bubble { max-width: 70%; padding: .6rem .9rem; border-radius: 16px; background: var(--bg);
  color: var(--text); line-height: 1.4; word-wrap: break-word; }
.dm-msg.mine .dm-bubble { background: var(--accent, #4da3ff); color: #fff; }
.dm-input-row { display: flex; gap: .5rem; }
.dm-input { flex: 1; padding: .6rem .9rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg); color: inherit; font: inherit; }
.dm-input:focus { outline: none; border-color: var(--accent, #4da3ff); }
@media (max-width: 700px) {
  .dm-layout { grid-template-columns: 1fr; }
  .dm-threads { flex-direction: row; overflow-x: auto; }
  .dm-thread { min-width: 200px; }
}

/* Click-to-edit profile avatar */
.profile-avatar-edit { position: relative; background: none; border: none; padding: 0; cursor: pointer; line-height: 0; }
.profile-avatar-edit .profile-avatar-lg { transition: opacity .15s; }
.profile-avatar-edit:hover .profile-avatar-lg { opacity: .7; }
.profile-avatar-edit-hint { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.7); color: #fff; font-size: .72rem; font-weight: 600;
  padding: .2rem .6rem; border-radius: 999px; white-space: nowrap;
  opacity: 0; transition: opacity .15s; pointer-events: none; }
@media (hover: none) { .profile-avatar-edit-hint { opacity: 1; } }
.profile-avatar-edit:hover .profile-avatar-edit-hint { opacity: 1; }

/* Race schedule */
.schedule-card { background: var(--panel); border-radius: 16px; padding: 1.25rem 1.5rem;
  margin: 1rem 0; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.08); }
.schedule-card h3 { margin: 0 0 .8rem; font-size: 1.05rem; font-weight: 700; }
.schedule-list { display: grid; gap: .5rem; margin-bottom: .8rem; }
.schedule-item { display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .8rem; background: var(--bg); border-radius: 10px; cursor: pointer; }
.schedule-right { display: flex; align-items: center; gap: .55rem; }
.sched-expand-hint { color: var(--muted); font-size: .75rem; transition: transform .15s; }
.schedule-item[aria-expanded="true"] .sched-expand-hint { transform: rotate(90deg); }
.schedule-detail { padding: .1rem .8rem .6rem; }
.sched-det-row { display: flex; gap: .7rem; font-size: .86rem; padding: .18rem 0; }
.sched-det-row .me-meta { min-width: 88px; flex-shrink: 0; }
.sched-det-links { display: flex; gap: 1rem; margin-top: .45rem; flex-wrap: wrap; font-size: .86rem; }
.sched-det-note { margin: .4rem 0 0; font-size: .78rem; }

/* Race schedule: thumbnails, click affordance, add-a-race callout. */
.sched-item-left { display: flex; gap: .6rem; align-items: center; min-width: 0; }
.sched-thumb { width: 38px; height: 38px; flex-shrink: 0; border-radius: 8px;
  overflow: hidden; background: rgba(255,255,255,.06); }
.sched-thumb img { width: 100%; height: 100%; object-fit: contain; }
.schedule-item { border: 1px solid transparent; transition: background .15s, border-color .15s; }
.schedule-item:hover { filter: brightness(1.25); border-color: var(--border); }
.schedule-item:hover .sched-expand-hint { color: var(--accent, #4da3ff); }
.schedule-item:focus-visible { outline: 2px solid var(--accent, #4da3ff); outline-offset: 1px; }
.schedule-add { border: 1.5px dashed var(--border); border-radius: 12px; padding: .7rem .8rem; }
.schedule-add-title { font-weight: 600; font-size: .9rem; margin-bottom: .55rem; }

/* Race history: logo thumbnails. */
.race-cell-flex { display: flex; gap: .6rem; align-items: flex-start; }
.race-thumb { width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px;
  overflow: hidden; background: rgba(255,255,255,.06); display: none; margin-top: .1rem; }
.race-thumb.has-logo { display: block; }
.race-thumb img { width: 100%; height: 100%; object-fit: contain; }
.race-cell-main { min-width: 0; flex: 1; }

.schedule-pl-btn .pl-btn-label { margin-left: .35rem; font-size: .8rem; }
.schedule-pl-btn.on .pl-btn-label { display: none; }
.pl-setup-head { font-size: 1rem; margin: 0 0 .3rem; }
.pl-pick-wrap { display: inline-flex; align-items: stretch; margin: 0 .35rem .35rem 0; }
.pl-pick-wrap .pl-pick { border-top-right-radius: 0; border-bottom-right-radius: 0; margin: 0; }
.pl-pick-wrap .pl-unfollow { border-top-left-radius: 0; border-bottom-left-radius: 0;
  margin: 0 0 0 -1px; padding-left: .5rem; padding-right: .5rem; color: var(--muted); }
.pl-pick-wrap .pl-unfollow:hover { color: #ff6b6b; border-color: #ff6b6b; }
.pl-share-runners.is-shared { border-color: var(--spotify-green, #1DB954); color: var(--spotify-green, #1DB954); }
.pl-others { margin-top: .8rem; }
.pl-others-head { font-size: .95rem; margin: 0 0 .4rem; }
.pl-other-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 8px; margin-bottom: .4rem; }
.pl-other-meta { min-width: 0; }
.pl-others-note { margin-top: .3rem; }
.sched-pl-pub { margin: .3rem 0 .6rem; }
.pl-pub-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .35rem .6rem; border: 1px dashed var(--border); border-radius: 8px; font-size: .9rem; }
.clone-picker-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 1rem; }
.clone-picker { background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  max-width: 420px; width: 100%; max-height: 80vh; overflow-y: auto; padding: 1.2rem; }
.clone-picker h3 { margin: 0 0 .4rem; }
.clone-pick-row { display: block; padding: .4rem .2rem; cursor: pointer; }
.clone-pick-row input { margin-right: .5rem; }
.clone-pick-actions { margin-top: .8rem; }

/* Race thumbnails on past/upcoming race listings. */
.race-thumb-sm { width: 34px; height: 34px; flex-shrink: 0; border-radius: 7px;
  overflow: hidden; background: rgba(255,255,255,.06); display: none; margin-top: .1rem; }
.race-thumb-sm.has-logo { display: block; }
.race-thumb-sm img { width: 100%; height: 100%; object-fit: contain; }

/* Race history: sortable columns + progression chart. */
.history-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.history-head h2 { margin: 0 0 .5rem; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--accent, #4da3ff); }
th.sortable .sort-ind { opacity: .45; font-size: .85em; }
.profile-filters { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.gold-filter-label { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; white-space: nowrap; }
.sort-ind { font-size: .75em; }
.prog-chart { flex-shrink: 0; background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: .6rem .7rem .4rem; }
.prog-chart-title { font-size: .8rem; font-weight: 600; margin-bottom: .3rem; color: var(--muted); }
.prog-chart svg { display: block; max-width: 100%; height: auto; }
@media (max-width: 640px) { .history-head { flex-direction: column; } }
.schedule-del { padding: .2rem .5rem; font-size: .8rem; }
.schedule-add { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* Race schedule add button — blue to match site accent */
.schedule-add-btn { background: var(--accent, #4da3ff); border-color: var(--accent, #4da3ff); color: #fff; font-weight: 600; }
.schedule-add-btn:hover { filter: brightness(1.1); }

/* Race-day playlist builder */
.schedule-btns { display: flex; gap: .35rem; align-items: center; }
.schedule-pl-btn { padding: .2rem .5rem; font-size: .8rem; }
.schedule-pl-btn.on { border-color: #1DB954; color: #1DB954; background: rgba(29,185,84,.12); }
.spotify-ico { width: 15px; height: 15px; vertical-align: -2px; }
.schedule-pl-btn .spotify-ico, .result-playlist-btn .spotify-ico { color: #1DB954; }
.pl-songs-toggle { margin: .5rem 0; }
.pl-toggle-arrow { display: inline-block; width: 1.1em; }
.schedule-pl-panel { padding: .7rem .8rem; background: var(--bg); border-radius: 10px; margin-top: -.25rem; }
.schedule-pl-panel .bio-btn { margin: .15rem .25rem .15rem 0; }
.pl-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.pl-head .pl-unlink { margin-left: auto; padding: .2rem .5rem; font-size: .75rem; }
.pl-track-list { display: grid; gap: .35rem; margin-bottom: .6rem; max-height: 320px; overflow-y: auto; }
.pl-track-list[hidden] { display: none; }
.pl-track { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem; background: var(--panel); border-radius: 8px; }
.pl-track-img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex: none; }
.pl-track-noimg { display: flex; align-items: center; justify-content: center; background: var(--panel-2); font-size: 1.1rem; }
.pl-track-noimg .spotify-ico { width: 20px; height: 20px; }
.pl-track-meta { flex: 1; min-width: 0; }
.pl-track-meta strong { font-size: .9rem; }
.pl-track .bio-btn { padding: .2rem .55rem; font-size: .85rem; flex: none; }
.pl-search-input { width: 100%; box-sizing: border-box; margin-bottom: .4rem; }
.pl-search-results { display: grid; gap: .35rem; }
.pl-link-list { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0; }
.pl-link-list[hidden] { display: none; }
.pl-search-results[hidden] { display: none; }
/* Profile calendar */
.cal-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: .9rem 1rem; margin-bottom: 1rem; }
.cal-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.cal-head strong { font-size: 1.05rem; min-width: 9rem; text-align: center; }
.cal-nav { padding: .1rem .6rem; font-size: 1.1rem; line-height: 1.2; }
.cal-gcal-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem;
  font-size: .85rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-weekdays { margin-bottom: 4px; }
.cal-weekdays span { text-align: center; font-size: .75rem; color: var(--muted); padding: .2rem 0; }
.cal-day { min-height: 3.4rem; padding: .25rem .3rem; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: inherit; text-align: left; vertical-align: top; cursor: pointer;
  display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.cal-day:hover { border-color: var(--border); }
.cal-blank { cursor: default; }
.cal-blank:hover { border-color: transparent; }
.cal-num { font-size: .8rem; color: var(--muted); }
.cal-today .cal-num { color: var(--accent, #4da3ff); font-weight: 700; }
.cal-today { border-color: var(--accent, #4da3ff); }
.cal-sel { border-color: var(--accent, #4da3ff); background: rgba(77,163,255,.08); }
.cal-has-race { background: rgba(29,185,84,.1); border-color: rgba(29,185,84,.35); }
.cal-has-gev { background: rgba(77,163,255,.07); border-color: rgba(77,163,255,.3); }
.cal-race { font-size: .68rem; line-height: 1.25; color: #7ce3a3; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.cal-gev { font-size: .68rem; line-height: 1.25; color: #9db8d8; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.cal-more { font-size: .65rem; color: var(--muted); }
.cal-detail { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--border); }
.cal-det-race, .cal-det-gev { padding: .3rem 0; font-size: .9rem; }
.cal-det-hol { padding: .3rem 0; font-size: .9rem; }
.cal-hol { font-size: .85em; }
@media (max-width: 640px) {
  .cal-day { min-height: 2.6rem; padding: .15rem .2rem; }
  .cal-race, .cal-gev { font-size: .6rem; }
  .cal-head strong { min-width: 0; font-size: .95rem; }
}
.pl-pick { font-size: .8rem; }

/* Dark theme for schedule inputs */
.me-train-input { background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: .5rem .7rem; font: inherit; font-size: 1rem; }
.me-train-input:focus { outline: none; border-color: var(--accent, #4da3ff); }
select.me-train-input option { background: var(--panel); color: var(--text); }

/* Searchable race picker */
.schedule-search-box { position: relative; flex: 1 1 300px; min-width: 200px; }
.schedule-search-box .me-train-input { width: 100%; box-sizing: border-box; }
.schedule-search-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  margin-top: .25rem; max-height: 260px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.schedule-search-item { display: block; width: 100%; text-align: left; background: none; border: none;
  padding: .55rem .8rem; font: inherit; font-size: .88rem; color: var(--text); cursor: pointer; }
.schedule-search-item:hover { background: var(--bg); }
.schedule-search-empty { padding: .55rem .8rem; font-size: .85rem; color: var(--muted); }

/* Verified runner mark on leaderboards */
.lb-verified { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; vertical-align: middle; }
.lb-verified-thumb { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.lb-verified-check { display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%; background: #22c55e; color: #fff;
  font-size: 9px; font-weight: 700; line-height: 1; }

/* Verified tooltip */
.lb-verified { position: relative; }
.lb-verified-tip { position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%);
  background: #16a34a; color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  padding: .3rem .6rem; border-radius: 6px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .12s; z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.lb-verified-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #16a34a; }
.lb-verified:hover .lb-verified-tip { opacity: 1; }

/* Michigan Beat */
.beat-page h2 { margin: 1.8rem 0 .8rem; font-size: 1.2rem; }
.beat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.beat-card { background: var(--panel); border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.08); }
.beat-card-body { padding: .7rem .9rem; font-size: .88rem; line-height: 1.35; }
.beat-thumb { position: relative; cursor: pointer; aspect-ratio: 16/9; background: #000; }
.beat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.beat-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.beat-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-size: 2.2rem; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); pointer-events: none; }
.beat-list { display: grid; gap: .5rem; }
.beat-row { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem;
  background: var(--panel); border-radius: 10px; padding: .7rem .9rem;
  text-decoration: none; color: inherit; font-size: .9rem; line-height: 1.4; }
.beat-row:hover { background: var(--bg); }
.beat-ext { color: var(--muted); flex-shrink: 0; }

.beat-mi-badge { display: inline-block; background: #16a34a; color: #fff; font-size: .68rem;
  font-weight: 700; padding: .1rem .45rem; border-radius: 999px; margin-left: .35rem;
  vertical-align: middle; white-space: nowrap; }

.beat-creator-links { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.beat-creator-links .bio-btn { font-size: .78rem; padding: .3rem .7rem; text-decoration: none; }

.beat-creator-name { font-weight: 700; color: var(--accent, #4da3ff); text-decoration: none; }
.beat-creator-name:hover { text-decoration: underline; }

.beat-creator-photo { aspect-ratio: 16/9; overflow: hidden; background: #000; }
.beat-creator-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.beat-row-thumb { flex-shrink: 0; width: 120px; aspect-ratio: 16/10; border-radius: 8px;
  overflow: hidden; background: var(--bg); }
.beat-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.beat-row > div { flex: 1; min-width: 0; }

.beat-cta-card { margin-top: 1rem; padding: 1rem 1.25rem; background: var(--panel);
  border-radius: 12px; text-align: center; font-size: .95rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.08); }
.beat-cta-card a { font-weight: 700; color: var(--accent, #4da3ff); }

/* External race results (out-of-state / missing races) */
.extres-card { margin: 1rem 0; padding: 1rem 1.25rem; background: var(--panel);
  border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.08); }
.extres-card h3 { margin: 0 0 .75rem; font-size: 1.05rem; }
.extres-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.extres-table th { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--border, #ddd);
  font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted, #666); }
.extres-table td { padding: .5rem; border-bottom: 1px solid var(--border, #eee); vertical-align: top; }
.extres-table tr:last-child td { border-bottom: none; }
.extres-add { margin-top: .75rem; }
.extres-tabs { display: flex; gap: .25rem; margin: .75rem 0; }
.extres-tabs .ptab { padding: .4rem .8rem; border: 1px solid var(--border, #ddd); background: transparent;
  border-radius: 8px 8px 0 0; cursor: pointer; font-size: .85rem; }
.extres-tabs .ptab.active { background: var(--panel); border-bottom-color: transparent; font-weight: 700; }
#extres-form .me-train-input { display: block; width: 100%; max-width: 420px; margin: .4rem 0;
  padding: .5rem .6rem; border: 1px solid var(--border, #ddd); border-radius: 8px;
  background: var(--bg, #fff); color: inherit; font-size: .9rem; }
#extres-form .bio-btn { margin: .4rem .25rem .4rem 0; }
.extres-cand { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .4rem 0; border-bottom: 1px solid var(--border, #eee); font-size: .9rem; }
.bio-btn.sm { font-size: .8rem; padding: .45rem .8rem; }
#extres-msg { margin-top: .5rem; min-height: 1.2em; }

/* Result share card editor */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1000;
  display: none; align-items: center; justify-content: center; padding: 1rem; }
.modal-backdrop.open { display: flex; }
.modal.share-modal { background: var(--panel); border-radius: 16px; padding: 1.5rem;
  max-width: 600px; width: 100%; max-height: 92vh; overflow-y: auto; text-align: center; }
.modal.share-modal h2 { margin: 0 0 .25rem; }
.share-photo-pick { display: flex; gap: .5rem; justify-content: center; margin: .75rem 0; flex-wrap: wrap; }
.file-btn { cursor: pointer; }
.share-stage { position: relative; margin: .5rem auto; max-width: 440px; }
.share-stage canvas { width: 100%; height: auto; border-radius: 12px; display: block; }
#share-overlay { position: absolute; inset: 0; }
.share-el { position: absolute; transform: translate(-50%, -50%); cursor: grab;
  border: 2px dashed transparent; border-radius: 8px;
  touch-action: none; user-select: none; }
.share-el:hover { border-color: rgba(245,197,66,.7); background: rgba(245,197,66,.08); }
.share-el.sel { border-color: #f5c542; background: rgba(245,197,66,.12); }
.share-el-list { margin: .75rem auto 0; max-width: 440px; display: flex; flex-direction: column; gap: .3rem; }
.share-el-row { display: flex; align-items: center; gap: .5rem; font-size: .85rem;
  padding: .3rem .5rem; border-radius: 8px; background: rgba(255,255,255,.04); }
.share-el-row span { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-el-row.sel { outline: 1px solid #f5c542; }
.share-add-row { margin-top: .6rem; }
.share-actions { margin-top: 1rem; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.bio-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.bio-btn.primary:hover { background: var(--accent); border-color: var(--accent); filter: brightness(1.1); }
.bio-btn.primary:disabled { opacity: .5; cursor: default; }
.bio-btn.sm { font-size: .78rem; padding: .45rem .8rem; }
.bio-btn.danger { color: #ff6b6b; }

.result-comment-btn.open { background: var(--accent); border-color: var(--accent); color: #fff; }

.result-photo-btn, .result-share-btn, .result-comment-btn {
  margin: .12rem .18rem; white-space: nowrap;
  border: 1.5px solid #5a7194; display: inline-flex; align-items: center; gap: .35rem;
}
.result-photo-btn:hover, .result-share-btn:hover, .result-comment-btn:hover { border-color: #8fb4e8; }
.btn-ico { width: 15px; height: 15px; flex-shrink: 0; }
/* Race-history action pills: uniform size. inline-flex equalizes the
   icon+text rows so every pill renders the same height. */
.race-actions { margin-top: .3rem; display: flex; gap: .3rem; flex-wrap: wrap; }
.race-actions .bio-btn.sm { display: inline-flex; align-items: center; gap: .32rem;
  padding: .3rem .6rem; font-size: .78rem; line-height: 1.25; white-space: nowrap; }
.race-actions .btn-ico, .race-actions .spotify-ico { width: 14px; height: 14px; flex-shrink: 0; }

/* Share card style panel */
.share-style-panel { margin: .75rem auto 0; max-width: 440px; padding: .8rem 1rem;
  border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(245,197,66,.35); text-align: left; }
.ssp-title { font-weight: 700; font-size: .9rem; margin-bottom: .6rem; color: #f5c542; }
.ssp-row { display: flex; align-items: center; gap: .6rem; margin: .5rem 0; }
.ssp-label { width: 52px; flex-shrink: 0; font-size: .8rem; color: var(--muted, #999); }
.ssp-swatches { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.ssp-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0; }
.ssp-swatch.active { border-color: #fff; box-shadow: 0 0 0 2px #f5c542; }
.ssp-custom { width: 30px; height: 26px; border: none; border-radius: 6px; cursor: pointer;
  background: none; padding: 0; }
.ssp-fonts { display: flex; gap: .35rem; flex-wrap: wrap; }
.ssp-font { padding: .3rem .7rem; border-radius: 999px; border: 1px solid #5a7194;
  background: transparent; color: inherit; font-size: .8rem; cursor: pointer; }
.ssp-font.active { border-color: #f5c542; color: #f5c542; font-weight: 700; }
.ssp-size { flex: 1; accent-color: #f5c542; }
.ssp-sizeval { font-size: .8rem; min-width: 44px; text-align: right; color: var(--muted, #999); }

.pcard-acc-row { display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin: .6rem 0; flex-wrap: wrap; }
.pcard-acc-row label { font-size: .85rem; font-weight: 600; }
.pcard-acc-row .me-train-input { max-width: 300px; padding: .45rem .6rem; border: 1px solid var(--border, #3a4a63);
  border-radius: 8px; background: var(--bg, #1b2740); color: inherit; font-size: .85rem; }

/* Modern heading icons */
.h-ico { width: 20px; height: 20px; vertical-align: -4px; margin-right: .45rem;
  stroke: #f5c542; }

.pcard-toggle { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem;
  cursor: pointer; margin: .4rem 0 .2rem; color: var(--muted, #9fb2c8); }
.pcard-toggle input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

/* ---- 2026 Season in Review story ---- */
#recap-overlay { position: fixed; inset: 0; z-index: 9999; background: #060b14;
  display: flex; flex-direction: column; }
.recap-progress { display: flex; gap: 6px; padding: 14px 16px 0; }
.recap-progress span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.22); }
.recap-progress span.done { background: #fff; }
.recap-progress span.active { background: rgba(255,255,255,.65); }
.recap-close { position: absolute; top: 34px; right: 18px; background: rgba(255,255,255,.12);
  color: #fff; border: 0; border-radius: 50%; width: 38px; height: 38px; font-size: 17px;
  cursor: pointer; z-index: 3; }
.recap-cardwrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; }
.recap-card { width: min(92vw, 430px); min-height: 62vh; max-height: 88vh; overflow-y: auto; border-radius: 22px; padding: 44px 30px;
  background: linear-gradient(165deg, #0d1b2e 0%, #1b3a5c 55%, #274b73 100%);
  border: 1px solid rgba(127,179,232,.25);
  display: flex; flex-direction: column; justify-content: center; text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,.5); }
.recap-anim { animation: recapIn .45s cubic-bezier(.2,.9,.3,1.2); }
@keyframes recapIn { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
.recap-kicker { color: #7fb3e8; font-size: .78rem; letter-spacing: .22em; font-weight: 700; margin-bottom: 22px; }
.recap-num { color: #ffd75e; font-size: 4.2rem; font-weight: 800; line-height: 1; margin-bottom: 10px; }
.recap-big { color: #fff; font-size: 1.5rem; font-weight: 700; margin-bottom: 14px; }
.recap-sub { color: #9fb2c8; font-size: .98rem; line-height: 1.5; }
.recap-brand { margin-top: 34px; color: #7fb3e8; font-size: .85rem; font-weight: 600; }
.recap-tap { position: absolute; top: 80px; bottom: 90px; width: 32%; z-index: 2; }
.recap-tap-l { left: 0; } .recap-tap-r { right: 0; }
.recap-actions { padding: 0 20px 30px; display: flex; justify-content: center; }
.recap-share { background: var(--accent); color: #fff; border: 0; border-radius: 999px;
  padding: .8rem 2.2rem; font-size: 1rem; font-weight: 700; cursor: pointer; }
.recap-share:active { transform: scale(.97); }

/* Claim-profile modal */
.claim-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(4,8,16,.72);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.claim-modal { position: relative; width: min(92vw, 380px); max-height: 92vh; overflow-y: auto; background: #101c30;
  border: 1px solid rgba(127,179,232,.25); border-radius: 18px; padding: 30px 26px 26px;
  box-shadow: 0 24px 80px rgba(0,0,0,.55); animation: recapIn .3s ease; }
.claim-modal h3 { margin: 0 0 8px; color: #fff; font-size: 1.25rem; }
.claim-sub { color: #9fb2c8; font-size: .9rem; line-height: 1.5; margin: 0 0 20px; }
.claim-x { position: absolute; top: 12px; right: 14px; background: none; border: 0;
  color: #9fb2c8; font-size: 16px; cursor: pointer; padding: 12px; }
.claim-opt { display: block; width: 100%; text-align: left; margin-bottom: 12px;
  padding: 14px 16px; border-radius: 12px; cursor: pointer; border: 1px solid rgba(127,179,232,.3);
  background: #1b2740; color: #e8f0fa; }
.claim-opt:last-child { margin-bottom: 0; }
.claim-opt:hover { border-color: var(--accent); }
.claim-opt-t { display: block; font-size: 1rem; }
.claim-opt-d { display: block; font-size: .82rem; color: #9fb2c8; margin-top: 3px; }
.claim-strava .claim-opt-t b { color: #fc4c02; }
.claim-runsignup .claim-opt-t b { color: var(--accent); }
.claim-facebook .claim-opt-t b { color: #1877f2; }

/* ---- Public accounts (create / sign in / link / onboarding) ---- */
.create-acct-btn { background: #4da3ff; color: #0b1526; }
.create-acct-btn:hover { filter: brightness(1.08); color: #0b1526; }
.acct-flash { margin-bottom: 1rem; }
.me-card.acct-card { display: block; }
.acct-prov-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-top: 1px solid rgba(127,179,232,.14); }
.acct-prov-row:first-child { border-top: 0; }
.acct-danger { margin-top: 1rem; border-top: 1px solid rgba(127,179,232,.14); padding-top: 1rem; }
#acct-del-panel { margin-top: .6rem; }
.acct-modal .schedule-search-box { margin-bottom: 1rem; }
.acct-gate-card { margin-top: 1rem; }

/* ---- Integrations tab (owner-only profile tab) ---- */
.integ-head { margin: 24px 0 2px; font-size: 17px; }
.integ-head + .me-meta { margin-top: 0; }
.integration-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 14px 0; }
.integration-tile { background: #101c30; border: 1px solid rgba(127,179,232,.22); border-radius: 14px; padding: 18px; }
.integration-tile h3 { margin: 0 0 8px; color: #fff; font-size: 1.05rem; }
.integration-status { font-weight: 600; color: #9fb2c8; margin: 0 0 6px; }
.integration-status.on { color: #4ade80; }
.integration-tile .me-meta { margin: 0 0 12px; }
.integration-tile .bio-btn { margin-right: 8px; margin-bottom: 4px; }

/* ---- Spotify race-day playlists ---- */
.result-playlist { margin-top: 8px; max-width: 520px; }
.spotify-embed { border-radius: 12px; border: 0; display: block; }
.playlist-list { max-height: 320px; overflow-y: auto; }
.playlist-list .claim-opt { margin-bottom: 8px; }
/* Result song chip: one song per past race. */
.result-song { display: flex; align-items: center; gap: .6rem; margin-top: .45rem;
  padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.result-song img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.result-song-meta { flex: 1; min-width: 0; font-size: .85rem; line-height: 1.35; }
.result-song-meta strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-song a { font-size: .8rem; color: #1DB954; font-weight: 600; white-space: nowrap; }
.playlist-remove { margin-top: 10px; }

/* ---- Training & racing (Phase 2) ---- */
.training-race-list { margin-top: 10px; }
.training-race-row { padding: 10px 0; border-top: 1px solid rgba(127,179,232,.14); }
.training-race-row:first-child { border-top: 0; }
.training-race-date { color: #9fb2c8; font-size: .85rem; margin-right: 6px; }
.strava-section h4 { margin: 14px 0 4px; color: #fff; font-size: .95rem; }

/* ---- Recent workouts (Phase 5) ---- */
.workout-list { display: flex; flex-direction: column; }
.workout-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 4px; border: 0; border-top: 1px solid rgba(127,179,232,.14);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.workout-row:first-child { border-top: 0; }
.workout-row:active { opacity: .7; }
.workout-date { color: #9fb2c8; font-size: .85rem; min-width: 52px; }
.workout-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.workout-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workout-chev { color: #9fb2c8; font-size: 1.2rem; }
.workout-detail-card { margin-top: 12px; padding: 14px; border: 1px solid rgba(127,179,232,.2); border-radius: 10px; background: rgba(10,22,40,.5); }
.workout-detail-card h4 { margin: 0 0 10px; color: #fff; }
.workout-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.workout-stat { display: flex; flex-direction: column; padding: 8px 6px; border-radius: 8px; background: rgba(127,179,232,.08); text-align: center; }
.workout-stat strong { font-size: 1.02rem; color: #fff; }
.workout-stat span { font-size: .72rem; color: #9fb2c8; margin-top: 2px; }
.workout-chart-wrap { margin: 4px 0 8px; }
#workout-chart { max-width: 100%; height: auto; display: block; }
.chart-legend { margin-top: 6px; }
.lg-hr { color: #e5484d; font-weight: 700; }
.lg-pace { color: #3e8ef7; font-weight: 700; }

/* ---- Page layout with sidebar ---- */
/* Full-bleed: no max-width cap, so the content takes the whole screen and the
   poll sits at the far right edge instead of crowding the tables. */
.page-layout { display: flex; gap: 1.5rem; margin: 0 auto; padding: 0 1rem; align-items: flex-start; }
.page-layout .view { flex: 1; min-width: 0; max-width: 100%; }
.sidebar { display: none; }
.sidebar.on { display: block; width: 300px; flex-shrink: 0; position: sticky; top: 70px; }
/* Below 1800px the widest tables (profile race history) cannot fit beside the
   300px poll, so the sidebar stacks below the content instead of overlaying
   it or forcing a scrollbar. */
@media (max-width: 1800px) {
  .page-layout { flex-direction: column; }
  .sidebar.on { width: 100%; position: static; }
}

/* ---- Weekend poll ---- */
.poll-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 1.1rem 1.1rem 1rem; margin-bottom: 1rem; }
.poll-card h3 { margin: 0 0 .3rem; font-size: 1.02rem; }
.poll-card .poll-sub { color: var(--muted); font-size: .82rem; margin: 0 0 .8rem; }
.poll-opt { display: block; width: 100%; text-align: left; margin-bottom: .5rem;
  padding: .6rem .75rem; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: .88rem; }
.poll-opt:hover { border-color: var(--accent); }
.poll-opt .poll-date { display: block; font-size: .76rem; color: var(--muted); margin-top: 2px; }
.poll-opt.voted { border-color: var(--accent); background: rgba(77,163,255,.08); }
.poll-result { margin-bottom: .6rem; }
.poll-result .poll-rname { font-size: .85rem; margin-bottom: 3px; display: flex; justify-content: space-between; ; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
.poll-result .poll-bar { height: 8px; border-radius: 4px; background: var(--bg);
  border: 1px solid var(--border); overflow: hidden; }
.poll-result .poll-fill { height: 100%; background: var(--accent); border-radius: 4px;
  transition: width .5s ease; }
.poll-total { font-size: .8rem; color: var(--muted); margin-top: .6rem; }
.poll-nudge { margin-top: .8rem; padding: .7rem; border-radius: 10px; font-size: .82rem;
  background: rgba(77,163,255,.08); border: 1px solid rgba(77,163,255,.3); color: var(--text); }
.poll-nudge a { color: var(--accent); font-weight: 600; }
.poll-added { margin-top: .6rem; font-size: .82rem; color: #4caf50; }

.poll-writein { display: flex; gap: .5rem; margin-bottom: .8rem; }
.poll-writein[hidden] { display: none; }
.poll-writein input { flex: 1; min-width: 0; padding: .55rem .7rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 1rem; }
.poll-writein button { padding: .55rem 1rem; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; font-weight: 600; font-size: .88rem; }

/* Leaderboard tables: all columns fit, no horizontal scroll. Race names truncate. */
.table-scroll table { width: 100%; }
.table-scroll td:last-child, .table-scroll th:last-child { white-space: nowrap; }

.poll-list { max-height: 380px; overflow-y: auto; margin-bottom: .5rem; padding-right: 4px; }
.poll-list::-webkit-scrollbar { width: 6px; }
.poll-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.poll-ico { width: 18px; height: 18px; vertical-align: -3px; margin-right: 2px; }
.poll-search { width: 100%; padding: .55rem .7rem; border-radius: 10px; margin-bottom: .6rem;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 1rem; }
.poll-empty { font-size: .85rem; color: var(--muted); padding: .6rem 0; text-align: center; }

/* RaceJoy live-tracking button + modal */
.racejoy-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .6rem;
  border: 1px solid #2f6fdd; background: rgba(47,111,221,.12); color: #7fb0ff;
  border-radius: 999px; font-size: .74rem; font-weight: 600; cursor: pointer;
  vertical-align: 1px; white-space: nowrap; }
.racejoy-btn:hover { background: rgba(47,111,221,.25); color: #a8c8ff; }
.rj-ico { width: 14px; height: 14px; }
.modal.rj-modal { background: var(--panel); border-radius: 16px; padding: 1.5rem;
  max-width: 480px; width: 100%; max-height: 92vh; overflow-y: auto; text-align: left; }
.modal.rj-modal h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.rj-steps { margin: .9rem 0; padding-left: 1.3rem; }
.rj-steps li { margin-bottom: .8rem; line-height: 1.5; }
.rj-stores { display: inline-flex; gap: .5rem; margin-top: .4rem; }

/* Leaderboard tables share the row with the poll sidebar: badge flair wraps
   below the runner name (and among itself) instead of stretching the row
   wider than the view, which slid tables underneath the sidebar. Each pill
   stays intact; only the line breaks move. */
.table-scroll .bflair-wrap { display: block; white-space: normal; margin-top: .15rem; }
.table-scroll .bflair-wrap .bflair { margin-left: 0; margin-right: .35rem; }
/* Column headers may wrap; a nowrap "Marathon Power Score" header alone can
   force the table wider than the space beside the poll. */
.page-layout .table-scroll th { white-space: normal; }
/* Race names truncate with ellipsis. max-width on the td itself is ignored
   by auto table layout, so the cap lives on an inline-block wrapper. */
.race-name-in, td.race-name > a, a.race-name {
  display: inline-block; max-width: 300px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
/* Event names truncate with ellipsis, same pattern as race names. The profile
   race-history table has 10 columns; an untruncated event like
   "Half Marathon (13.35 miles with certified half marathon split)" forced the
   table wider than the space beside the poll, sliding it underneath. */
.event-name-in {
  display: inline-block; max-width: 220px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
/* Snug padding on the leaderboard tables that sit beside the poll. */
.page-layout .table-scroll th, .page-layout .table-scroll td { padding: .5rem .55rem; }

/* Logout: clear and visible on My Feed and your own profile. */
.me-head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.me-head-row h1 { margin: 0; }
.logout-btn {
  background: none; border: 1px solid var(--border); color: var(--text);
  padding: .45rem 1rem; border-radius: 8px; font-size: .88rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.logout-btn:hover { border-color: #e5484d; color: #e5484d; }
button#profile-logout.share-btn.logout-btn { margin-left: .5rem; }

/* Private Strava dashboard (owner's profile Strava tab only — never on public
   profiles, never in the feed). display:block overrides .me-card's flex, which
   otherwise scatters the dashboard's sections as wrapped flex items. */
.strava-card { display: block; }
.strava-card h2 { margin-top: 0; }
.strava-private {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #f5c542; border: 1px solid rgba(245,197,66,.5); border-radius: 999px;
  padding: .15rem .55rem; vertical-align: .15em; white-space: nowrap;
}
.strava-perms { margin: .6rem 0 1rem; padding-left: 1.2rem; color: var(--muted); font-size: .88rem; }
.strava-perms li { margin-bottom: .3rem; }
.strava-notice { padding: .6rem .8rem; border-radius: 8px; background: rgba(77,163,255,.1);
  border: 1px solid rgba(77,163,255,.35); font-size: .9rem; margin: 0 0 1rem; }
.strava-notice.ok { background: rgba(76,175,80,.1); border-color: rgba(76,175,80,.4); }
.strava-totals { display: flex; gap: .8rem; flex-wrap: wrap; margin: .8rem 0 1.2rem; }
.strava-total { flex: 1 1 140px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: .8rem 1rem; }
.strava-total-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.strava-total-mi { font-size: 1.5rem; font-weight: 800; margin: .2rem 0; }
.strava-total-mi span { font-size: .9rem; font-weight: 400; color: var(--muted); }
.strava-total-sub { font-size: .8rem; color: var(--muted); }
.strava-bars { display: flex; align-items: flex-end; gap: 6px; margin: .6rem 0 1.4rem;
  padding: .8rem; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
.strava-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.strava-bar-fill { width: 100%; max-width: 34px; background: var(--accent); border-radius: 4px 4px 0 0; }
.strava-bar-label { font-size: .68rem; color: var(--muted); margin-top: 4px; white-space: nowrap; }
.strava-ach { padding: .45rem 0; border-bottom: 1px solid var(--border); font-size: .92rem; }
.strava-ach:last-of-type { border-bottom: 0; }
.strava-powered { margin-top: 1rem; font-size: .8rem; color: var(--muted); }
.strava-card h3 { margin: 1.2rem 0 .4rem; font-size: 1rem; }
.strava-section { display: block; margin: 0 0 1.2rem; }
.strava-section > h3 { margin-top: 0; }
.strava-ach-list { display: block; }
/* Feed notice pointing to the dashboard's new home on the profile. */
/* Login modal extras. */
.login-sep { display: flex; align-items: center; gap: .6rem; margin: 1rem 0; color: var(--muted); font-size: .85rem; }
.login-sep::before, .login-sep::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.login-btn { cursor: pointer; border: none; font-family: inherit; }

/* Poll race logos: shown when the race has one, omitted otherwise. */
.poll-opt { display: flex; align-items: center; gap: .6rem; text-align: left; }
.poll-opt-text { flex: 1; min-width: 0; }
.poll-logo { width: 32px; height: 32px; border-radius: 7px; object-fit: cover; flex-shrink: 0; background: var(--bg); }
.poll-rname-left { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.poll-rname-left .poll-logo { width: 24px; height: 24px; border-radius: 6px; }

.h2h-back { background: #2a2a2a; border: 1px solid #444; color: #ccc; padding: 6px 12px; border-radius: 4px; cursor: pointer; margin-bottom: 12px; font-size: 0.9em; }
.h2h-back:hover { background: #3a3a3a; color: #fff; }

.h2h-main-flex { display: flex; gap: 24px; align-items: flex-start; }
.h2h-main { flex: 1 1 0; min-width: 0; }
.h2h-sidebar { width: 200px; min-width: 200px; max-width: 200px; flex-shrink: 0; background: #1a1a1a; border-radius: 8px; padding: 12px; order: -1; margin-top: 180px; }
.h2h-table { table-layout: fixed; }
.h2h-table th:nth-child(2), .h2h-table td:nth-child(2) { width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2h-sidebar h3 { margin: 0 0 10px 0; font-size: 0.95em; color: #ccc; }
.h2h-side-list { display: flex; flex-direction: column; gap: 4px; max-height: 500px; overflow-y: auto; }
.h2h-side-row { display: flex; justify-content: space-between; padding: 8px 10px; border-radius: 4px; text-decoration: none; color: #ddd; font-size: 0.9em; }
.h2h-side-row:hover { background: #2a2a2a; }
.h2h-side-row.active { background: #2a4a6a; color: #fff; }
.h2h-side-rec { color: #888; font-size: 0.85em; }
.h2h-side-row.active .h2h-side-rec { color: #ccc; }
@media (max-width: 768px) {
  .h2h-main-flex { flex-direction: column; }
  .h2h-sidebar { width: 100%; }
  .h2h-side-list { max-height: 200px; }
}
.h2h-explainer { color: #888; font-size: 0.9em; margin: 0 0 16px 0; }
.h2h-trophy-count { font-size: 0.75em; color: #888; font-weight: 400; }
.h2h-div { font-size: 0.75em; color: #888; font-weight: 400; }

/* Rivals (H2H) table: card layout on mobile */
@media (max-width: 640px) {
  .h2h-table thead { display: none; }
  .h2h-table, .h2h-table tbody { display: block; width: 100%; }
  .h2h-table tr {
    display: block; width: 100%;
    background: #1c1c1e; border-radius: 10px;
    margin-bottom: 12px; padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.08);
  }
  .h2h-table td {
    display: flex; justify-content: space-between; align-items: baseline;
    width: 100% !important; border: none;
    padding: .3rem 0; text-align: right;
    white-space: normal; overflow: visible; text-overflow: clip;
  }
  .h2h-table td::before {
    content: attr(data-label);
    font-size: .75rem; text-transform: uppercase;
    color: rgba(255,255,255,.5); font-weight: 600;
    margin-right: 12px; flex-shrink: 0; text-align: left;
  }
  .h2h-table td[data-label="Race"] { font-weight: 600; }
  .h2h-table td[data-label="Race"]::before { align-self: center; }
  /* Sidebar stacks below on mobile */
  .h2h-main-flex { flex-direction: column; }
  .h2h-sidebar { width: 100%; min-width: 0; max-width: none; order: 2; margin-top: 16px; }
  .h2h-side-list { max-height: 220px; }
}

@media (max-width: 640px) { .h2h-table td { min-width: 0; overflow-wrap: break-word; } }

/* ===== App mode (Capacitor shell) ===== */
html.app-mode { -webkit-text-size-adjust: 100%; }
html.app-mode body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
html.app-mode .site-header { padding-top: env(safe-area-inset-top, 0px); }
html.app-mode footer, html.app-mode .site-footer { padding-bottom: env(safe-area-inset-bottom, 0px); }
html.app-mode input, html.app-mode select, html.app-mode textarea { font-size: 16px; }
html.app-mode .table-scroll { -webkit-overflow-scrolling: touch; }

html.app-mode .main-nav { display: none; }

html.app-mode { background: var(--bg); }
html.app-mode body { touch-action: manipulation; }
html.app-mode a, html.app-mode button { -webkit-touch-callout: none; }
#ptr-pill[hidden] { display: none !important; }
html.app-mode #ptr-pill { position: fixed; top: calc(0.6rem + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 950; background: var(--accent); color: #fff; font-weight: 600; font-size: 0.85rem; padding: 0.45rem 0.95rem; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,0.4); }


#app-home-btn[hidden] { display: none !important; }
html.app-mode #app-home-btn { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px)); z-index: 900; background: var(--accent); color: #fff; font-weight: 700; padding: 0.7rem 1.3rem; border-radius: 999px; box-shadow: 0 4px 16px rgba(0,0,0,0.45); text-decoration: none; font-size: 0.95rem; }
html.app-mode body:not(.app-home) { padding-bottom: 4.2rem; }

#app-launcher[hidden] { display: none !important; }
html.app-mode #app-launcher { padding: 1rem; max-width: 640px; margin: 0 auto; }
html.app-mode body.app-home #view, html.app-mode body.app-home #sidebar { display: none; }
.app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.app-grid a, .app-grid .app-tile-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 0.65rem; padding: 0.95rem; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--border); border-radius: 16px; color: inherit; font-weight: 600; font-size: 0.98rem; text-decoration: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.app-grid a:active, .app-grid .app-tile-btn:active { transform: scale(0.97); filter: brightness(1.25); }
.app-grid .ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(77, 163, 255, 0.14); color: #4da3ff; }
.app-grid .ic svg { width: 22px; height: 22px; }
.app-grid a[href="#/legends"] .ic { background: rgba(245, 192, 78, 0.15); color: var(--gold); }
.app-grid .app-tile-btn { font: inherit; text-align: left; cursor: pointer; width: 100%; }
.app-grid[hidden] { display: none; }
.app-tile-chev { color: var(--muted); font-weight: 700; }
.app-submenu[hidden] { display: none; }
.app-submenu-back { display: inline-flex; align-items: center; gap: .3rem; padding: .5rem .9rem; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); color: inherit; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.app-submenu-title { margin: .9rem 0 .2rem; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; }
.app-submenu-row { display: flex; align-items: center; gap: .85rem; padding: .95rem; margin-top: .6rem; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--border); border-radius: 16px; color: inherit; text-decoration: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.app-submenu-row:active { transform: scale(0.98); filter: brightness(1.25); }
.app-submenu-row .ic { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: rgba(77, 163, 255, 0.14); color: #4da3ff; }
.app-submenu-row .ic svg { width: 22px; height: 22px; }
.app-submenu-row.gold .ic { background: rgba(245, 192, 78, 0.15); color: var(--gold); }
.app-submenu-txt { display: flex; flex-direction: column; gap: .15rem; }
.app-submenu-txt strong { font-size: .98rem; font-weight: 600; }
.app-submenu-txt small { color: var(--muted); font-size: .82rem; font-weight: 500; }
#app-home-btn svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 5px; }

@media (max-width: 640px) {
  html.app-mode .table-scroll table { font-size: 0.9rem; }
  html.app-mode .table-scroll th, html.app-mode .table-scroll td { padding-left: 0.45rem; padding-right: 0.45rem; }
}

/* Weekend Recap: on mobile it lives behind its own tab in the distance-tab
   row (the app included); desktop keeps it on top of the boards. */
#recap-tab[hidden] { display: none !important; }
@media (min-width: 641px) {
  #recap-tab { display: none !important; }
}
@media (max-width: 640px) {
  #weekend-recap { display: none; }
  #view.show-recap #weekend-recap { display: block; }
  #view.show-recap #lb-subtitle,
  #view.show-recap .mode-toggle,
  #view.show-recap .ad-slot,
  #view.show-recap .controls,
  #view.show-recap #ultra-subtabs,
  #view.show-recap #lb-msg,
  #view.show-recap #lb-ultra-note,
  #view.show-recap #lb-body { display: none; }
}

/* Training view (profile tab + #/training): trends, charts, heatmap, VO2. */
.training-h { margin: 1.1rem 0 0.5rem; font-size: 1.02rem; }
.trend-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-top: 0.8rem; }
@media (max-width: 640px) { .trend-row { grid-template-columns: repeat(2, 1fr); } }
.trend-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.7rem; }
.trend-label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.trend-value { font-size: 1.45rem; font-weight: 700; margin: 0.15rem 0; }
.trend-delta { font-size: 0.82rem; }
.trend-vs { color: var(--muted); }
.trend-up { color: var(--accent-2); font-weight: 600; }
.trend-down { color: #e5484d; font-weight: 600; }
.trend-flat { color: var(--muted); }
.training-svg { width: 100%; height: auto; display: block; }
.training-svg .svg-bar-val { fill: var(--text); font-size: 12px; text-anchor: middle; font-weight: 600; }
.training-svg .svg-axis { fill: var(--muted); font-size: 11px; text-anchor: middle; }
.training-svg .svg-legend { fill: #7fd08a; font-size: 12px; }
.heat-grid { display: grid; grid-template-rows: repeat(7, 1fr); grid-auto-flow: column; gap: 3px; }
.heat-cell { width: 100%; aspect-ratio: 1; min-width: 8px; border-radius: 3px; background: #202b3a; }
.heat-0 { background: #202b3a; }
.heat-1 { background: #17457e; }
.heat-2 { background: #1d6fd1; }
.heat-3 { background: #4da3ff; }
.heat-4 { background: #a8d4ff; }
.heat-legend { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 0.8rem; margin-top: 0.45rem; }
.heat-legend .heat-cell { width: 11px; height: 11px; min-width: 11px; display: inline-block; }
.vo2-card { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.9rem; margin-top: 0.8rem; }
.vo2-main { display: flex; flex-direction: column; }
.vo2-label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.vo2-value { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.vo2-unit { font-size: 0.8rem; color: var(--muted); }
.vo2-spark { width: 260px; max-width: 100%; height: 48px; }

/* Training view detail + labeled heatmap. */
.heat-wrap { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: 15px 1fr; gap: 3px; }
.heat-months { display: grid; grid-template-columns: repeat(26, 1fr); gap: 3px; font-size: 10px; color: var(--muted); align-items: end; }
.heat-days { display: grid; grid-template-rows: repeat(7, 1fr); font-size: 10px; color: var(--muted); align-items: center; text-align: right; padding-right: 2px; }
.wk-list { display: flex; flex-direction: column; gap: 0.55rem; }
.wk-item { border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(160deg, var(--panel-2), var(--panel)); overflow: hidden; }
.wk-head { width: 100%; display: flex; align-items: center; gap: 0.7rem; background: none; border: 0; color: var(--text); font: inherit; text-align: left; padding: 0.6rem 0.7rem; cursor: pointer; }
.wk-head:hover { background: rgba(255, 255, 255, 0.03); }
.wk-thumb { flex: none; width: 64px; height: 64px; border-radius: 12px; background: rgba(77, 163, 255, 0.08); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wk-thumb-svg { width: 100%; height: 100%; display: block; }
.wk-thumb-ico { font-size: 30px; line-height: 1; }
/* Photo media band on Training list cards (photo'd workouts only —
   the card grows to fit it; photo-less cards keep the compact row). */
.wk-card-media { display: block; margin-top: .55rem; }
.wk-card-photo { display: block; width: 100%; height: 170px; object-fit: cover; border-radius: 12px; background: var(--panel-2); }
/* Desktop cap for the card photo bands (Oct 15: built mobile-first,
   the Training band stretched the full width of a wide PC card at
   170px tall \u2014 "monstrous"). At >=768px both card surfaces (the
   Training .wk-card-photo band and the My Feed .wk-photo figure
   inside .me-workout-card, the same component) become a bounded
   accent: capped width, shorter crop, cover + rounded corners
   kept. Phone widths are untouched, and the workout DETAIL page /
   photo editor figure (.wk-photo outside .me-workout-card) keeps
   its full-size rendering. */
@media (min-width: 768px) {
  .wk-card-media { max-width: 380px; }
  .wk-card-photo { height: 140px; }
  .me-workout-card .wk-photo { max-width: 380px; }
  .me-workout-card .wk-photo img, .me-workout-card .wk-photo-ph { aspect-ratio: auto; height: 150px; }
}
/* Workout photo figure (Training + followers' feed share one renderer):
   photo, optional route-outline overlay, caption with the owner's
   chosen stats. */
.wk-photo { position: relative; margin: 0.35rem 0 0.6rem; border-radius: 14px; overflow: hidden; background: var(--panel-2); }
.wk-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.wk-photo-ph { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 0.9rem; padding: 1rem; text-align: center; }
.wk-photo-route { position: absolute; left: 6%; top: 7%; width: 88%; height: 58%; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.wk-photo-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.7rem 0.8rem 0.6rem; background: linear-gradient(180deg, rgba(4,10,20,0), rgba(4,10,20,.88) 55%); color: #fff; }
.wk-photo-trow { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.wk-photo-title { font-weight: 800; font-size: 1.02rem; text-shadow: 0 1px 3px rgba(0,0,0,.5); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-photo-brand { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.wk-photo-stats { font-size: 0.86rem; font-weight: 600; margin-top: 0.15rem; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.wk-photo-actions { margin: 0.45rem 0 0.2rem; }
.wk-photo-modal .wk-photo { margin-top: 0.5rem; }
.me-workout-card .wk-photo { margin: 0 0 0.55rem; }
.wk-opt-dis { opacity: 0.55; }
.wk-feed-toprow { display: flex; gap: 0.7rem; align-items: flex-start; }
.wk-feed-topmain { flex: 1; min-width: 0; }
.wk-card-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.wk-card-trow { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.wk-card-title { font-weight: 700; font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-card-sub { color: var(--muted); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-card-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.85rem; font-variant-numeric: tabular-nums; margin-top: 0.15rem; }
.wk-stat-dist { font-size: 1.08rem; font-weight: 800; }
.wk-card-stats .wk-stat { font-size: 0.88rem; }
.wk-card-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 0.4rem; }
.wk-item .wk-detail { padding: 0 0.7rem 0.8rem; }
.wk-caret { color: var(--muted); flex: none; }
.wk-detail { padding: 0.4rem 0.15rem 0.8rem; }
.wk-h { margin: 0.8rem 0 0.35rem; font-size: 0.95rem; }
.route-svg { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--border); }
.wk-chart { width: 100%; height: auto; display: block; }
.wk-chart .chart-lab { fill: var(--muted); font-size: 11px; }
table.wk-splits { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.wk-splits th, table.wk-splits td { padding: 0.3rem 0.5rem; text-align: left; border-bottom: 1px solid var(--border); }
table.wk-splits th { color: var(--muted); font-weight: 600; }

/* Workout route map (Leaflet + Esri World Street Map tiles). */
.route-map { width: 100%; height: 320px; border-radius: 10px; border: 1px solid var(--border); position: relative; z-index: 0; background: #10161f; }
.route-map .leaflet-control-attribution { background: rgba(13, 18, 25, 0.85) !important; color: #8fa3b8 !important; font-size: 9px; }
.route-map .leaflet-control-attribution a { color: #8fa3b8 !important; }
.vo2-empty { border-style: dashed; opacity: 0.85; }

/* VO2 full chart + workout filter. */
.vo2-full { flex-direction: column; align-items: stretch; }
.vo2-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.vo2-ranges { display: flex; gap: 0.35rem; }
.vo2-range-btn { background: var(--panel); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 0.2rem 0.65rem; font-size: 0.8rem; cursor: pointer; }
.vo2-range-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.vo2-svg { width: 100%; height: auto; display: block; margin-top: 0.4rem; }
.vo2-svg .chart-lab { fill: var(--muted); font-size: 11px; }
.wk-list-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.wk-filter { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 0.35rem 0.5rem; font-size: 0.9rem; margin-bottom: 0.5rem; }

/* Integrations push (2026-10-15): the Training "Get set up" checklist
   card and the one-line Spotify connect offers. Compact by design —
   the checklist sits under the Today card and must never crowd it. */
.setup-card { border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem 0.9rem 0.55rem; margin: 0 0 0.95rem; background: var(--panel); }
.setup-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.setup-head h3 { margin: 0; font-size: 0.98rem; }
.setup-x { background: none; border: none; color: var(--muted); font-size: 0.95rem; cursor: pointer; padding: 0.15rem 0.35rem; line-height: 1; }
.setup-x:hover { color: inherit; }
.setup-step { display: flex; align-items: center; gap: 0.55rem; padding: 0.32rem 0; }
.setup-check { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; border: 1px solid var(--border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; color: transparent; }
.setup-step.done .setup-check { border-color: #4caf7d; color: #4caf7d; }
.setup-step.done .setup-label { color: var(--muted); }
.setup-label { flex: 1 1 auto; min-width: 0; }
.setup-act { flex: 0 0 auto; }
.setup-msg { display: block; margin-top: 0.25rem; }
.spotify-offer { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 10px; padding: 0.5rem 0.7rem; margin: 0 0 0.8rem; background: var(--panel); font-size: 0.92rem; }
.spotify-offer[hidden] { display: none; }
.spotify-offer-txt { flex: 1 1 auto; min-width: 0; }
.spotify-offer-txt .spotify-ico { color: #1DB954; }
.spotify-offer-x { background: none; border: none; color: var(--muted); font-size: 0.9rem; cursor: pointer; padding: 0.15rem 0.3rem; line-height: 1; }
.spotify-offer-x:hover { color: inherit; }
.spotify-offer-msg { flex: 1 1 100%; }

/* Workout sharing toggle + feed workout cards. */
.wk-share-row { margin-top: 0.9rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }
.wk-consent-card { margin-top: 0.9rem; border: 1px solid var(--accent, #4da3ff); border-radius: 12px; padding: 0.9rem 1rem 0.35rem; background: rgba(77, 163, 255, 0.07); }
.wk-consent-h { margin: 0 0 0.35rem; font-size: 1.02rem; }
.wk-share-label { display: flex; gap: 0.5rem; align-items: center; font-weight: 600; cursor: pointer; }
.wk-share-label input { width: 18px; height: 18px; accent-color: var(--accent); }
.me-workout-card .wk-feed-line { font-size: 1.02rem; margin-top: 0.25rem; }

/* Workout labels + share-card options. */
.wk-label-chip { display: inline-block; background: var(--accent); color: #fff; border-radius: 999px; padding: 0.05rem 0.55rem; font-size: 0.75rem; font-weight: 700; vertical-align: 1px; }
.wk-label-row { display: flex; gap: 0.5rem; align-items: center; margin: 0.5rem 0 0.1rem; }
.wk-label-sel { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 0.3rem 0.45rem; font-size: 0.88rem; }
.wk-gear-sel, .wk-legends-county, .exc-county-sel { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 0.3rem 0.45rem; font-size: 0.88rem; }
.wk-card-opts { border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.7rem; margin-top: 0.6rem; }
.wk-opt-row { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin-bottom: 0.4rem; }
.wk-opt-lab { font-size: 0.8rem; color: var(--muted); font-weight: 700; margin-right: 0.3rem; min-width: 74px; }
.wk-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; }
.wk-swatch.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--accent); }
.wk-opt-chip { display: inline-flex; gap: 0.3rem; align-items: center; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 0.15rem 0.55rem; font-size: 0.82rem; cursor: pointer; }
.wk-opt-chip input { accent-color: var(--accent); }

/* Race readiness card. */
.ready-card { border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem 1rem; margin-bottom: 1rem; background: var(--panel); }
.today-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.today-pill { flex: none; font-size: 0.78rem; font-weight: 700; padding: 0.18rem 0.6rem; border-radius: 999px; border: 1px solid; }
.today-pill.ok { color: #7fd08a; border-color: rgba(127, 208, 138, 0.45); background: rgba(127, 208, 138, 0.1); }
.today-pill.warn { color: #f5c542; border-color: rgba(245, 197, 66, 0.45); background: rgba(245, 197, 66, 0.1); }
.today-pill.flat { color: #94a3ba; border-color: rgba(148, 163, 186, 0.4); background: rgba(148, 163, 186, 0.1); }
.today-nums { margin: 0.35rem 0 0; }
.today-plan-line { margin: 0.45rem 0 0; }
.today-race-line { margin: 0.3rem 0 0; }
.today-wx-line { margin: 0.3rem 0 0; }
.today-wx-line[hidden] { display: none; }
.today-plan-cta { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; }
.today-done { color: #7fd08a; font-weight: 700; }
/* Training tabs — Workouts | Profile segmented control under the pinned
   Today card. Panes and the tab-gated shell controls toggle via [hidden];
   the guards below keep the attribute winning over any display rule. */
.training-tabs { display: flex; gap: 0.3rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem; margin-bottom: 1rem; }
.training-tab-btn { flex: 1 1 0; background: transparent; border: 0; border-radius: 999px; padding: 0.5rem 1rem; font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.training-tab-btn.active { background: var(--accent); color: #0b1220; }
.training-pane[hidden], .training-ctl[hidden], .training-record-row[hidden], #strava-panel-body[hidden] { display: none; }
/* Data check panel (Training): reconciles the merged workout pool against
   its Strava + Apple Health sources and lists every pairing a human should
   eyeball. Muted card styling like the rest of Training. */
.data-audit-panel { border: 1px solid var(--border); border-radius: 12px; background: var(--panel); padding: 0.9rem 1rem 0.4rem; margin-bottom: 1rem; }
.data-audit-panel[hidden] { display: none; }
.data-audit-h { margin-top: 0; }
.data-audit-counts { margin: 0.3rem 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.data-audit-verdict { font-weight: 700; margin: 0.45rem 0; }
.data-audit-warn { color: #f5c542; font-weight: 600; }
.data-audit-sub { margin: 0.9rem 0 0.3rem; font-size: 0.95rem; }
.data-audit-item { border-top: 1px solid var(--border); padding: 0.5rem 0 0.2rem; }
.data-audit-item-h { font-weight: 700; margin: 0 0 0.25rem; }
.data-audit-line { margin: 0.15rem 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.data-audit-actions { margin-top: 0.7rem; }
.proj-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.8rem; padding: 0.45rem 0; border-bottom: 1px solid var(--border); }
.proj-row:last-of-type { border-bottom: 0; }
.proj-dist { font-weight: 700; padding-top: 0.25rem; }
.proj-right { text-align: right; }
.proj-time { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.proj-pace { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.proj-est { color: var(--muted); font-size: 0.85rem; }
.proj-delta { display: block; font-size: 0.82rem; color: var(--muted); margin-top: 0.1rem; }
.proj-delta.ok { color: #7fd08a; }
.proj-basis { margin: 0.55rem 0 0; }
/* Training PRs trophy case (Profile pane, under Recovery). Rows are
   buttons that open the workout through its list card. */
.pr-head { display: inline-flex; align-items: center; gap: 0.45rem; }
.pr-trophy { display: inline-flex; color: var(--gold); }
.pr-trophy svg { width: 19px; height: 19px; }
.pr-rows { margin-top: 0.3rem; }
.pr-row { display: flex; align-items: center; gap: 0.7rem; width: 100%; box-sizing: border-box; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); padding: 0.55rem 0.1rem; font: inherit; color: inherit; cursor: pointer; }
.pr-row:last-child { border-bottom: 0; }
.pr-row:active { filter: brightness(1.3); }
.pr-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.pr-label { font-weight: 600; font-size: 0.95rem; }
.pr-sub { color: var(--muted); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-value { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-row .wk-caret { color: var(--muted); flex: 0 0 auto; }
/* Season milestones (Workouts pane, above the trend cards): road-to
   progress bar + milestone record rows. Reuses pr-* row typography. */
.ms-head { display: inline-flex; align-items: center; gap: 0.45rem; }
.ms-ico { display: inline-flex; color: var(--accent); }
.ms-ico svg { width: 19px; height: 19px; }
.ms-road { margin-top: 0.45rem; }
.ms-road-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.ms-road-title { font-weight: 800; font-size: 1.12rem; }
.ms-track { height: 10px; margin-top: 0.4rem; }
.ms-proj { margin: 0.4rem 0 0; }
.ms-proj strong { color: var(--text); }
.ms-rows { margin-top: 0.35rem; }
.ms-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.1rem; border-bottom: 1px solid var(--border); }
.ms-row:last-child { border-bottom: 0; }
.ms-new { display: inline-block; background: rgba(77, 163, 255, 0.14); color: var(--accent); border: 1px solid var(--border); border-radius: 999px; padding: 0 0.45rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; vertical-align: 2px; }
.proj-note { margin: 0.25rem 0 0; }
.ready-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.ready-sub { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.92rem; }
.ready-score { font-size: 2.1rem; font-weight: 800; line-height: 1; }
.ready-score-max { font-size: 0.95rem; color: var(--muted); font-weight: 600; }
.ready-verdict { font-weight: 700; margin: 0.45rem 0 0.3rem; }
.ready-row { margin: 0.5rem 0; }
.ready-row-top { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; flex-wrap: wrap; }
.ready-track { height: 8px; background: var(--panel-2); border-radius: 99px; overflow: hidden; margin-top: 0.25rem; }
.ready-fill { height: 100%; border-radius: 99px; }
.ready-gap { margin-top: 0.6rem; }

/* ============ Training plans ============ */
.plan-card { margin-bottom: 1rem; }
.plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.plan-status { font-weight: 700; margin: 0.5rem 0 0.25rem; }
.plan-week { margin-top: 0.4rem; }
.plan-day { display: flex; gap: 0.9rem; padding: 0.55rem 0; border-top: 1px solid var(--border); align-items: flex-start; }
.plan-day-h { flex: 0 0 5.4rem; display: flex; flex-direction: column; padding-top: 0.15rem; }
.plan-day-n { font-weight: 700; font-size: 0.92rem; }
.plan-day.today .plan-day-n { color: #4da3ff; }
.plan-sess { flex: 1; min-width: 0; display: flex; gap: 0.65rem; align-items: flex-start; text-align: left;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.7rem; cursor: pointer; color: inherit; font: inherit; width: 100%; }
.plan-sess:hover { border-color: #4da3ff; }
.plan-check { flex: 0 0 1.3rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 2px solid var(--muted);
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; line-height: 1; color: #fff; margin-top: 0.1rem; }
.plan-sess.done .plan-check { background: #4da3ff; border-color: #4da3ff; }
.plan-sess-main { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.plan-sess-t { font-weight: 600; }
.plan-sess.done .plan-sess-t { color: var(--muted); }
.plan-sess-tgt { font-size: 0.88rem; color: #4da3ff; font-weight: 600; }
.plan-sess-d { font-size: 0.88rem; color: var(--muted); }
.plan-rest { flex: 1; margin: 0; padding-top: 0.2rem; color: var(--muted); font-size: 0.92rem; }
.plan-note { margin: 0.55rem 0 0; }
.plan-head-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; flex: 0 0 auto; }
.plan-adaptive { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--muted); cursor: pointer; user-select: none; }
.plan-adaptive-input { appearance: none; -webkit-appearance: none; width: 2.05rem; height: 1.2rem; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); position: relative; cursor: pointer; margin: 0; flex: 0 0 auto; transition: background 0.15s ease; }
.plan-adaptive-input::after { content: ''; position: absolute; top: 50%; left: 0.14rem; transform: translateY(-50%); width: 0.86rem; height: 0.86rem; border-radius: 50%; background: var(--muted); transition: left 0.15s ease, background 0.15s ease; }
.plan-adaptive-input:checked { background: var(--accent); border-color: var(--accent); }
.plan-adaptive-input:checked::after { left: 0.95rem; background: #fff; }
.plan-adapt-summary { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.9rem; }
.plan-adapt-chip { align-self: flex-start; margin-top: 0.2rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); color: var(--muted); font-size: 0.75rem; font-weight: 600; }
.plan-picked-note { border: 1px solid #4da3ff; border-radius: 10px; padding: 0.55rem 0.7rem; }
.plan-opt { display: flex; gap: 0.65rem; align-items: flex-start; border: 1px solid var(--border); border-radius: 10px;
  padding: 0.6rem 0.7rem; margin: 0.5rem 0; cursor: pointer; background: var(--panel-2); }
.plan-opt:hover { border-color: #4da3ff; }
.plan-opt input { margin-top: 0.25rem; accent-color: #4da3ff; }
.plan-opt-main { display: flex; flex-direction: column; gap: 0.12rem; }
.plan-opt-t { font-weight: 600; }
.plan-opt-d { font-size: 0.88rem; color: var(--muted); }
.plan-form-row { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.7rem 0 0.2rem; }
.plan-form-row label { font-size: 0.9rem; }
.plan-form-row input, .plan-form-row select { margin-top: 0.25rem; padding: 0.4rem 0.5rem; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel-2); color: inherit; font: inherit; }

/* ============ Training calendar ============ */
.cal-card { margin-bottom: 1rem; }
.cal-head { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.cal-card .cal-title-h { margin: 0; }
.cal-nav { display: inline-flex; align-items: center; gap: 0.45rem; }
.cal-month { font-weight: 700; font-size: 0.95rem; min-width: 7.6rem; text-align: center; }
.cal-nav-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 1.05rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.cal-nav-btn:disabled { opacity: 0.35; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) 1.7rem; gap: 3px; margin-top: 0.6rem; }
.cal-dow { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 0.15rem 0; }
.cal-dow-tot { text-align: right; }
.cal-cell { min-height: 54px; border: 1px solid transparent; border-radius: 8px; background: var(--panel-2); color: var(--text); font: inherit; text-align: left; padding: 3px 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; cursor: pointer; min-width: 0; overflow: hidden; }
.cal-cell.tint1 { background: rgba(77, 163, 255, 0.07); }
.cal-cell.tint2 { background: rgba(77, 163, 255, 0.13); }
.cal-cell.tint3 { background: rgba(77, 163, 255, 0.20); }
.cal-cell.tint4 { background: rgba(77, 163, 255, 0.28); }
.cal-cell.sel { border-color: var(--accent); background: rgba(77, 163, 255, 0.16); }
.cal-blank { background: none; cursor: default; }
.cal-dnum { font-size: 0.72rem; font-weight: 600; color: var(--muted); padding: 0 3px; border-radius: 999px; }
.cal-cell.today .cal-dnum { color: var(--accent); font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--accent); }
.cal-mi { font-size: 0.8rem; font-weight: 800; line-height: 1.1; }
.cal-dots { display: inline-flex; align-items: center; gap: 2px; }
.cal-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(233, 239, 247, 0.55); }
.cal-dots em { font-style: normal; font-size: 0.58rem; color: var(--muted); }
.cal-chip { font-size: 0.6rem; font-weight: 700; line-height: 1.2; border-radius: 4px; padding: 0 3px; max-width: 100%; }
.cal-chip.hard { color: var(--accent); background: rgba(77, 163, 255, 0.14); }
.cal-chip.long { color: var(--accent-2); background: rgba(127, 208, 138, 0.13); }
.cal-chip.race { color: var(--gold); background: rgba(245, 197, 66, 0.14); }
.cal-chip.easy { color: var(--muted); background: rgba(148, 163, 186, 0.12); }
.cal-chip.done { opacity: 0.55; }
.cal-race { font-size: 0.6rem; font-weight: 700; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; border-top: 2px solid rgba(245, 197, 66, 0.55); padding-top: 1px; width: 100%; }
.cal-wtot { font-size: 0.7rem; font-weight: 700; color: var(--muted); text-align: right; align-self: center; }
.cal-detail { margin-top: 0.7rem; border-top: 1px solid var(--border); padding-top: 0.55rem; }
.cal-detail-h { font-weight: 700; font-size: 0.92rem; margin-bottom: 0.25rem; }
.cal-wk { display: flex; align-items: center; gap: 0.7rem; width: 100%; box-sizing: border-box; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); padding: 0.5rem 0.1rem; font: inherit; color: inherit; cursor: pointer; }
.cal-wk .cal-wk-main { font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-wk .cal-wk-stats { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.cal-plan-line { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.5rem 0.1rem; font-size: 0.9rem; }
.cal-plan-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; margin-top: 0.35rem; background: var(--muted); }
.cal-plan-dot.hard { background: var(--accent); }
.cal-plan-dot.long { background: var(--accent-2); }
.cal-plan-dot.race { background: var(--gold); }
.cal-plan-tgt { color: var(--accent); font-weight: 600; }
.cal-plan-state { color: var(--accent-2); font-weight: 700; }
.cal-race-line { display: flex; gap: 0.55rem; align-items: center; padding: 0.5rem 0.1rem; font-weight: 600; color: var(--gold); font-size: 0.9rem; }
a.cal-race-line:hover { text-decoration: underline; }
.cal-race-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.cal-empty { margin: 0.3rem 0 0; }


/* ============ Design modernization (2026-10-12) ============
   Foundation polish applied site-wide: glass header, professional
   tables, unified buttons/cards, themed scrollbars, launcher tiles. */
.training-card { display: block; }
.training-card h2 { margin-top: 0; }
h1, h2, h3 { letter-spacing: -0.015em; }
td, .wk-sum, .trend-value, .vo2-value, .ready-score, .me-time { font-variant-numeric: tabular-nums; }
::selection { background: rgba(77,163,255,.35); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a:hover { text-underline-offset: 3px; }

.site-header { background: rgba(12,18,27,.94); box-shadow: 0 8px 28px rgba(2,6,14,.25); }

table { font-size: .93rem; }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--muted); background: var(--panel-2); padding-top: .65rem; padding-bottom: .65rem; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: rgba(77,163,255,.055); }
.table-scroll thead th { position: sticky; top: 0; z-index: 2; }

.bio-btn { border-radius: 10px; font-weight: 600; transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease, color .14s ease; }
.bio-btn:hover { border-color: var(--accent); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); text-decoration: none; }
.bio-btn:active { transform: translateY(0) scale(.98); box-shadow: none; }

.dist-tabs button { border-radius: 999px; font-weight: 600; padding: .45rem .95rem; transition: all .14s ease; }
.dist-tabs button:hover { border-color: var(--accent); color: #fff; }
.dist-tabs button.active { box-shadow: 0 2px 12px rgba(77,163,255,.35); }

.me-card { border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.vo2-card { box-shadow: var(--shadow-sm); }
.trend-card { border-radius: 14px; box-shadow: var(--shadow-sm); }
.ready-card { box-shadow: var(--shadow-sm); }
.claim-modal { border-radius: 18px; box-shadow: var(--shadow-md); border: 1px solid var(--border); }

.controls select, .me-select, .wk-filter, .wk-label-sel { border-radius: 10px; }

html.app-mode .app-grid a, html.app-mode .app-grid .app-tile-btn { background: linear-gradient(160deg, var(--panel-2), var(--panel)); border-radius: 18px; box-shadow: var(--shadow-sm); padding: 1.3rem 0.5rem; transition: transform .14s ease, box-shadow .14s ease; }
html.app-mode .app-grid a:active, html.app-mode .app-grid .app-tile-btn:active { transform: scale(.97); filter: none; box-shadow: var(--shadow-md); }
/* Launcher layout (Oct 13): Training hero on top (double height), then three
   2-across rows, stretched to fill the whole launch screen — no dead space,
   no scrolling. Order: Training / Leaderboards, Counties / Races, Analytics /
   Michigan Beat, More. */
/* App home is a fixed, fitted screen (Dustin, Oct 15: NO scrolling on the
   launcher). The body is pinned to the viewport while home shows and the
   root scroller is locked (html gets .app-home-lock from the inline sync);
   the grid rows are minmax(0, fr) so tiles COMPRESS to fit instead of
   overflowing past the bottom the way plain fr rows did at their
   min-content floor. Padding absorbs the squeeze first, tile height
   second; icons keep their size. */
html.app-mode body.app-home { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
html.app-mode.app-home-lock { overflow: hidden; }
/* Header-dropdown scroll lock (see mrrLockScroll in app.js): while a
   dropdown is open the page is frozen so its document-coordinate
   placement cannot go stale; body top is set inline by the helper. */
html.mrr-scroll-lock { overflow: hidden; }
body.mrr-scroll-lock { position: fixed; left: 0; right: 0; }
html.app-mode body.app-home #app-launcher { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; box-sizing: border-box; padding: .8rem .9rem 1rem; }
html.app-mode .app-grid { flex: 1 1 auto; min-height: 0; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: .65rem; }
html.app-mode .app-grid a, html.app-mode .app-grid .app-tile-btn { align-items: center; justify-content: center; text-align: center; padding: .7rem .3rem .65rem; gap: .5rem; font-size: .95rem; line-height: 1.15; min-height: 0; overflow: hidden; }
html.app-mode .app-grid .ic { width: 38px; height: 38px; border-radius: 12px; flex: none; }
html.app-mode .app-submenu { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
html.app-mode .app-grid .ic svg { width: 21px; height: 21px; }
html.app-mode .app-grid .app-tile-hero { grid-column: 1 / -1; font-size: 1.2rem; font-weight: 700; }
html.app-mode .app-grid .app-tile-hero .ic { width: 58px; height: 58px; border-radius: 17px; }
html.app-mode .app-grid .app-tile-hero .ic svg { width: 31px; height: 31px; }
/* The launch screen is the whole home screen in the app — no site footer under it. */
html.app-mode body.app-home .site-footer { display: none; }
html.app-mode .app-grid .ic { font-size: 1.9rem; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2b3a52; border-radius: 99px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: #2b3a52 transparent; }

/* Width discipline for dashboard cards (2026-10-12): content was
   stretching across ultrawide monitors once the card layout was fixed.
   Cap the cards and keep charts near their natural size. */
.training-card, .strava-card { max-width: 1120px; margin-left: auto; margin-right: auto; }
.training-body svg { max-width: 780px; }
.vo2-svg { max-width: 720px; }

/* Coach's Take (on-device workout intelligence) + effort. */
.take-box { border: 1px solid var(--border); border-left: 3px solid var(--gold); background: var(--panel-2); border-radius: 12px; padding: 0.7rem 0.9rem; margin: 0.6rem 0; }
.take-box p { margin: 0.25rem 0 0; line-height: 1.5; }
.take-head { font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

/* Your loops (Training Profile): learned route record books. */
.loops-card .loop-items { margin-top: 0.3rem; }
.loop-item { border-bottom: 1px solid var(--border); }
.loop-item:last-child { border-bottom: 0; }
.loop-head { display: flex; align-items: center; gap: 0.7rem; width: 100%; box-sizing: border-box; text-align: left; background: none; border: 0; padding: 0.55rem 0.1rem; font: inherit; color: inherit; cursor: pointer; }
.loop-head:active { filter: brightness(1.3); }
.loop-head .wk-caret { color: var(--muted); flex: 0 0 auto; }
.loop-main { display: flex; flex-direction: column; gap: 0.1rem; flex: 1 1 auto; min-width: 0; }
.loop-name { font-weight: 700; overflow-wrap: anywhere; }
.loop-meta { color: var(--muted); font-size: 0.82rem; }
.loop-detail { padding: 0.15rem 0.1rem 0.7rem; }
.loop-detail-meta { color: var(--muted); font-size: 0.82rem; }
.loop-trend-svg { width: 100%; max-width: 420px; height: auto; display: block; margin: 0.35rem 0 0.1rem; }
.loop-trend-cap { margin-bottom: 0.3rem; }
.loop-rename-row { display: flex; align-items: center; gap: 0.6rem; margin: 0.45rem 0 0.2rem; }
.loop-edit[hidden] { display: none; }
.loop-runs { margin-top: 0.35rem; }
.loop-run { display: flex; align-items: center; gap: 0.7rem; padding: 0.35rem 0; border-top: 1px solid var(--border); font-size: 0.9rem; flex-wrap: wrap; }
.loop-run-date { flex: 1 1 auto; color: var(--muted); white-space: nowrap; }
.loop-run-time { font-weight: 700; white-space: nowrap; }
.loop-run-pace { color: var(--muted); white-space: nowrap; }
.loop-best-chip { flex: 0 0 auto; }
.take-eff { background: var(--accent); color: #fff; border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.8rem; font-weight: 700; }
.take-summary { margin: 0 0 1rem; }

/* Fitness Score card (Profile tab) + merged season verdict line. */
.fit-main { display: flex; align-items: baseline; gap: 0.45rem; margin-top: 0.15rem; }
.fit-score { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.fit-score-max { color: var(--muted); font-weight: 600; }
.fit-delta { font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.recap-fitline { font-weight: 600; }
.week-recap-card .recap-x { flex: none; }
.season-verdict-line { margin-top: 0.45rem; }

/* Fitness/fatigue chips, gear card, mini buttons (2026-10-12). */
.fit-chips { display: inline-flex; gap: 0.6rem; font-size: 0.85rem; font-weight: 700; }
.gear-row { margin: 0.55rem 0; }
.gear-add { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.65rem; }
.gear-add input[type="text"] { flex: 1 1 180px; }
.gear-add input[type="number"] { width: 92px; }
.wk-mini-btn { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 0.05rem 0.55rem; font-size: 0.78rem; cursor: pointer; margin-left: 0.35rem; }
.wk-mini-btn:hover { border-color: var(--accent); }

/* Weekly load bars, season chips, sticker chip active state (2026-10-12). */
.wl-wrap { margin-top: 0.55rem; }
.bar-plot { position: relative; display: flex; align-items: flex-end; gap: 6px; }
.bar-labs { display: flex; gap: 6px; }
.bar-plot > svg.bar-wire { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.training-body .hr-plot > svg.wk-chart { max-width: none; }
.bar-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff; border: 2px solid #10151d; transform: translate(-50%, 50%); pointer-events: none; z-index: 2; }
.strava-chart { margin: .6rem 0 1.4rem; }
.strava-labcell { flex: 1; min-width: 0; text-align: center; font-size: .68rem; color: var(--muted); margin-top: 4px; white-space: nowrap; }
.hr-plot { position: relative; touch-action: pan-y; }
.hr-mark { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.45); pointer-events: none; }
.hr-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #e5484d; border: 2px solid #fff; transform: translate(-50%, -50%); pointer-events: none; }
.ready-why { margin: 0.3rem 0 0.15rem; }
.ready-dist-row { margin: 0.4rem 0 0.55rem; }
.ready-dist-sel { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 0.22rem 0.45rem; font-size: 0.85rem; }
.wl-col { flex: 1; text-align: center; min-width: 0; }
.wl-bar { background: #4da3ff; border-radius: 4px 4px 0 0; margin: 0 auto; width: 70%; }
.wl-bar.wl-now { background: var(--gold); }
.wl-val { font-size: 0.78rem; font-weight: 700; margin-top: 3px; }
.wl-lab { font-size: 0.66rem; color: var(--muted); }
.rec-chip { display: inline-block; border: 1px solid var(--border); border-radius: 999px; padding: 0.05rem 0.55rem; margin-right: 0.3rem; font-size: 0.85rem; }
.wk-bg-btn.active { border-color: var(--accent); color: var(--accent); }

/* Audit fixes (2026-10-12): H1 contrast, M2 focus zoom, M4 touch
   targets, P2 gold text, P9 landscape safe areas. */
.vo2-range-btn.active, .wk-label-chip, .take-eff, #profile-follow.following, .me-cheer-btn.following { color: #0b1220; }
.gold-code, .gold-chip { color: var(--gold); }
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px !important; }
}
@media (pointer: coarse) {
  .vo2-range-btn { min-height: 40px; padding: 0.45rem 0.85rem; }
  .training-tab-btn { min-height: 40px; }
  .wk-swatch { width: 36px; height: 36px; }
  .wk-opt-chip { min-height: 36px; display: inline-flex; align-items: center; }
  .wk-mini-btn { min-height: 32px; padding: 0.3rem 0.7rem; }
  .result-photo-del { width: 40px; height: 40px; }
  .runner-chip button { min-width: 32px; min-height: 32px; }
}
html.app-mode .view, html.app-mode .page-layout { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* Workout event page (detail view) */
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 0.55rem; margin: 0.4rem 0 0.6rem; }
.ev-tile { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.65rem; min-width: 0; }
.ev-lab { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ev-val { font-size: 1.16rem; font-weight: 700; margin: 0.1rem 0; overflow-wrap: break-word; }
.ev-sub { font-size: 0.78rem; color: var(--muted); }
/* Compact stat tiles on the WORKOUT DETAIL surfaces only (Dustin,
   2026-10-15: "make them a bit smaller so the workout snapshot is a
   little more concise"). The .ev-* classes are shared with the My Feed
   expanded workout detail (.wk-feed-detail), which keeps the original
   sizing — so the tightening is scoped to the two containers the
   workout page renders into: #wk-page (app full page) and .wk-detail
   (web inline expansion), both fed by loadDetail/hkEventHtml/
   detailHtml. Same boxes, same contents — padding, type and spacing
   only. Measured: 84px -> ~54px tall per tile at 390px. */
#wk-page .ev-grid, .wk-detail .ev-grid { gap: 0.45rem; }
#wk-page .ev-tile, .wk-detail .ev-tile { padding: 0.26rem 0.5rem; border-radius: 9px; }
#wk-page .ev-lab, .wk-detail .ev-lab { font-size: 0.64rem; line-height: 1.15; }
#wk-page .ev-val, .wk-detail .ev-val { font-size: 0.94rem; line-height: 1.15; margin: 0.04rem 0; }
#wk-page .ev-sub, .wk-detail .ev-sub { font-size: 0.68rem; line-height: 1.2; }
@media (min-width: 900px) {
  #wk-page .ev-tile, .wk-detail .ev-tile { padding: 0.3rem 0.55rem; }
  #wk-page .ev-val, .wk-detail .ev-val { font-size: 1.02rem; }
}
.ev-sec { font-weight: 700; margin: 0.95rem 0 0.35rem; font-size: 0.95rem; }
.ev-title { font-size: 1.15rem; font-weight: 800; margin: 0.2rem 0 0.3rem; }
.ev-notes { white-space: pre-wrap; margin: 0.2rem 0 0.5rem; }
.ev-be { margin: 0.2rem 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ev-be-chip { background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.65rem; font-size: 0.88rem; }
div.wk-splits { margin: 0.2rem 0 0.4rem; }
.wk-split { display: flex; justify-content: space-between; gap: 1rem; padding: 0.28rem 0.1rem; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
.wk-split-fast { color: var(--gold); font-weight: 600; }
.zone-row { display: flex; align-items: center; gap: 0.5rem; margin: 0.22rem 0; font-size: 0.85rem; }
.zone-lab { flex: 0 1 10.5rem; min-width: 0; }
.zone-bar { flex: 1 1 auto; min-width: 30px; height: 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.zone-fill { display: block; height: 100%; }
.zone-t { flex: 0 0 5.4rem; text-align: right; color: var(--muted); }
.ev-meta-edit input[type="text"], .ev-meta-edit textarea { width: 100%; box-sizing: border-box; margin: 0.25rem 0; padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; }

.hr-h, .hr-s { color: var(--muted); }
/* Workout source: quiet muted label with a small brand dot (was full alarm-color text). */
.src-apple, .src-strava { color: var(--muted); font-weight: 500; font-size: 0.85em; white-space: nowrap; }
.src-apple::before, .src-strava::before { content: ""; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: 0.35em; vertical-align: 1px; }
.src-apple::before { background: #ff2d55; }
.src-strava::before { background: #fc4c02; }

.wk-new-banner { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; background: rgba(245, 192, 78, 0.1); border: 1px solid rgba(245, 192, 78, 0.45); border-radius: 12px; padding: 0.7rem 0.9rem; margin-bottom: 0.9rem; font-size: 0.92rem; }
.wk-new-actions { display: inline-flex; gap: 0.45rem; }

.gear-add { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin-top: 0.55rem; }
.gear-add select { padding: 0.45rem 0.55rem; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 0.92rem; max-width: 100%; }

.take-facts { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; }
.take-fact { background: rgba(77, 163, 255, 0.1); border: 1px solid var(--border); border-radius: 999px; padding: 0.18rem 0.6rem; font-size: 0.82rem; font-weight: 600; }

.shoe-dots { display: inline-flex; gap: 3px; margin-right: 0.4rem; vertical-align: 1px; }
.shoe-dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); display: inline-block; }
.gear-swatches { display: inline-flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.gear-sw { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); cursor: pointer; padding: 0; }
.gear-sw.sel { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245, 192, 78, 0.35); }
.gear-edit { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin-top: 0.5rem; }
.gear-edit[hidden] { display: none; }

#wk-page { position: fixed; inset: 0; z-index: 900; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#wk-page[hidden] { display: none; }

/* Native workout recorder overlay (v1.1, app only — opened from the
   Training Record button, which renders only when the MrrTracker
   plugin is in the build). Muted button palette only, no accent fills. */
#record-overlay { position: fixed; inset: 0; z-index: 950; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: calc(0.8rem + env(safe-area-inset-top)) 1rem calc(1.2rem + env(safe-area-inset-bottom)); box-sizing: border-box; }
#record-overlay[hidden] { display: none; }
.training-record[hidden] { display: none; }
/* Relocated Oct 15: Record is a full-width row under the Training
   heading instead of a peer in the bottom Sync/Data-check row. */
.training-record { display: block; width: 100%; min-height: 48px; margin: 0.1rem 0 0.9rem; padding: 0.55rem 1rem; font-size: 1rem; }
.rec-head { display: flex; align-items: center; justify-content: space-between; max-width: 560px; margin: 0 auto 0.6rem; }
.rec-title { font-weight: 700; font-size: 1.1rem; }
.rec-prime, .rec-live, .rec-summary { max-width: 560px; margin: 0 auto; }
.rec-h { margin: 0.7rem 0 0.5rem; font-size: 1.02rem; }
.rec-recovery { border: 1px solid var(--gold, #f5c04e); border-radius: 12px; padding: 0.7rem 0.9rem; margin-bottom: 1rem; }
.rec-types { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.9rem; }
.rec-type-btn { padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid #3a4a63; background: #1b2740; color: #cfe0f5; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
.rec-type-btn.on { background: #243354; border-color: #3a4a63; color: #fff; }
.rec-priming { color: var(--muted, #9db2cc); line-height: 1.5; font-size: 0.95rem; }
.rec-big { padding: 0.7rem 1.6rem; font-size: 1.02rem; }
.rec-live-type { text-align: center; color: var(--muted, #9db2cc); font-weight: 600; margin-top: 0.6rem; }
.rec-clock { text-align: center; font-size: 4.2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; margin: 0.4rem 0 0.8rem; }
.rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 0.9rem; }
.rec-stat { background: #1b2740; border: 1px solid #3a4a63; border-radius: 12px; padding: 0.7rem 0.5rem; text-align: center; }
.rec-stat-v { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rec-stat-l { color: var(--muted, #9db2cc); font-size: 0.82rem; margin-top: 0.15rem; }
.rec-gps { text-align: center; min-height: 1.2em; }
.rec-actions { display: flex; gap: 0.7rem; justify-content: center; margin-top: 1rem; }
.rec-warn { border: 1px solid var(--gold, #f5c04e); border-radius: 12px; padding: 0.65rem 0.9rem; line-height: 1.45; }
.rec-err { color: #ff9d9d; min-height: 1.2em; }
html.wk-page-open { overflow: hidden; }
.wk-page-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 0.7rem; padding: calc(0.55rem + env(safe-area-inset-top)) 0.9rem 0.55rem; background: rgba(9, 14, 24, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.wk-page-back { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 0.38rem 0.85rem; font-weight: 700; font-size: 0.92rem; cursor: pointer; flex: none; }
.wk-page-title { font-weight: 700; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-page-body { padding: 0.9rem 0.9rem 2.4rem; max-width: 880px; margin: 0 auto; }

.wx-strip { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0.45rem 0 0.1rem; }
.wx-strip:empty { display: none; }
.wx-chip { background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 0.18rem 0.6rem; font-size: 0.82rem; font-weight: 600; }
.wx-src { font-size: 0.72rem; color: var(--muted); margin-left: 0.25rem; }
.ev-when { margin: 0.15rem 0 0.35rem; }

.refresh-line { font-size: 0.8rem; color: var(--muted); margin: 0.05rem 0 0.45rem; letter-spacing: 0.01em; }
.refresh-line[hidden] { display: none; }

.rp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.55rem 0 0.15rem; }
.rp-bar:empty { display: none; }
.rp-play { background: #4da3ff; color: #08131f; border: none; border-radius: 999px; padding: 0.42rem 0.95rem; font-weight: 800; font-size: 0.88rem; cursor: pointer; }
.rp-scrub { flex: 1 1 130px; accent-color: var(--accent); }
.rp-clock { font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rp-stats { font-size: 0.88rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-speeds { display: inline-flex; gap: 0.3rem; margin-left: auto; }
.rp-spd { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 0.28rem 0.6rem; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.rp-spd.on { background: var(--accent); color: #08131f; border-color: var(--accent); }
.rp-arrow-wrap { background: none; border: none; }
.rp-arrow { width: 18px; height: 18px; }

/* Reviewer demo entry in the login modal */
.login-demo { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; text-align: center; }
.login-demo-link { background: none; border: 0; color: var(--muted); font-size: 13px; text-decoration: underline; cursor: pointer; font: inherit; }
.login-demo-form { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.login-demo-form[hidden] { display: none; }
.login-demo-input { background: #0d1622; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 8px 10px; font-size: 14px; width: 170px; text-transform: uppercase; }
.login-demo-go { background: var(--accent); color: #08131f; border: 0; border-radius: 8px; padding: 8px 14px; font-weight: 700; cursor: pointer; font: inherit; }
.login-demo-err { color: #ff9c9c; font-size: 13px; width: 100%; margin: 4px 0 0; }

/* Reduced motion (modernization queue, 2026-10-13): honor the OS
   prefers-reduced-motion setting — entrance animations (recap cards,
   cheer pop) and transitions collapse to instant. User-driven motion
   stays: the route replay is play/pause/scrub controlled, and smooth
   scrolling is gated in JS via mrrReducedMotion(). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Community moderation (Guideline 1.2, 2026-10-13): report/block
   affordances stay quiet until needed — small muted text buttons under
   the content they belong to. */
.mrr-action-row { display: flex; gap: 0.65rem; flex-wrap: wrap; align-items: center; margin-top: 0.35rem; }
.mrr-mini-btn { background: none; border: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 0.8rem; padding: 0.15rem 0.2rem; text-decoration: underline; }
.mrr-mini-btn:hover { color: var(--accent); }
.mrr-mini-btn.is-blocked { color: #ff9c9c; }
.profile-head .mrr-action-row { display: inline-flex; margin-top: 0; vertical-align: middle; }
.dm-convo-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  flex-wrap: wrap; margin-bottom: 0.5rem; }
.dm-msg .mrr-action-row { margin-top: 0.15rem; }
.result-photos .mrr-mini-btn { display: block; padding-left: 0; }
.mrr-report-modal .mrr-report-label { display: block; margin: 0.7rem 0 0; font-size: 0.92rem; }
.mrr-report-modal select, .mrr-report-modal textarea { width: 100%; box-sizing: border-box; margin-top: 0.3rem;
  background: #0d1622; border: 1px solid var(--line); color: var(--ink); border-radius: 8px;
  padding: 0.5rem 0.6rem; font: inherit; }
.mrr-report-modal .mrr-report-block { display: block; margin-top: 0.7rem; font-size: 0.92rem; }
.adm-mod-item { border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.85rem; margin: 0.6rem 0; }
.adm-mod-status { display: inline-block; border-radius: 999px; padding: 0.08rem 0.55rem; font-size: 0.78rem;
  font-weight: 700; background: var(--panel-2); color: var(--text); }
.adm-mod-open { background: #7a4b12; color: #ffd9a0; }
.adm-mod-resolved { background: #1d4d2e; color: #a9e6bd; }
.adm-mod-dismissed { background: #3a3f4a; color: #c3cad4; }
.adm-mod-meta { margin-top: 0.4rem; font-size: 0.92rem; line-height: 1.45; }
.adm-mod-text { margin-top: 0.5rem; background: var(--bg); border-radius: 8px; padding: 0.6rem 0.75rem;
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.92rem; }
.adm-mod-details { margin-top: 0.45rem; font-size: 0.92rem; }
.adm-mod-actions { margin-top: 0.55rem; display: flex; gap: 0.45rem; flex-wrap: wrap; }

/* ============ Tier A polish (2026-10-13): form-control base ============
   One token-driven skin for every form control, so no control can ever
   render as a naked OS widget again. Components may size controls; the
   skin (background / border / text color) comes from here. */
select,
textarea,
input[type="text"], input[type="search"], input[type="email"], input[type="url"],
input[type="number"], input[type="date"], input[type="password"], input:not([type]) {
  background-color: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
}
select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.45rem 2rem 0.45rem 0.7rem;
  cursor: pointer;
}
/* Custom chevron. Several select classes set `background:` shorthand,
   which resets background-image — so the chevron is re-asserted for them. */
select,
.controls select, .county-select, .county-picker select, .county-switch select,
.fb-select, .profile-filters select, .gear-add select, .plan-form-row select,
.wk-filter, .wk-label-sel, .wk-gear-sel, .wk-legends-county, .exc-county-sel,
.ready-dist-sel, select.me-train-input, .mrr-report-modal select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3ba' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  padding-right: 2rem;
}
select:focus, textarea:focus,
input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus,
input[type="url"]:focus, input[type="number"]:focus, input[type="date"]:focus {
  border-color: var(--accent);
  outline: none;
}
button { font: inherit; }

/* ===== Light-blue fill removal (2026-10-13, Dustin's call) =====
   No solid var(--accent) (#4da3ff) fills on interactive controls anywhere:
   every primary button, CTA, and active/toggle state uses the muted panel
   treatment instead. This block intentionally supersedes the scattered
   .primary / accent-fill rules above. Accent remains for text, links, and
   data displays (chart bars, poll fills, heat cells, DM bubbles). */
.bio-btn.primary, .btn, .claim-btn, .my-profile-btn, .create-acct-btn,
.schedule-add-btn, .rp-play, .login-demo-go, .recap-share,
.poll-writein button, html.app-mode #app-home-btn, html.app-mode #ptr-pill {
  background: #1b2740; border-color: #3a4a63; color: #cfe0f5;
}
.bio-btn.primary:hover, .btn:hover, .claim-btn:hover, .my-profile-btn:hover,
.create-acct-btn:hover, .schedule-add-btn:hover, .rp-play:hover,
.login-demo-go:hover, .recap-share:hover, .poll-writein button:hover {
  background: #243354; border-color: #3a4a63; color: #cfe0f5; filter: none;
}
.me-composer-actions .bio-btn.primary {
  background: #1b2740; color: #cfe0f5; border: 1px solid #3a4a63; box-shadow: none;
}
.me-composer-actions .bio-btn.primary:hover {
  background: #243354; filter: none; box-shadow: none;
}
.dist-tabs button.active, .training-tab-btn.active, .rev-chip.on,
.vo2-range-btn.active, .rp-spd.on, .result-comment-btn.open,
#profile-follow.following, .me-cheer-btn.following {
  background: #243354; border-color: #3a4a63; color: #fff;
}

/* ===== Header personal row (2026-10-14, Dustin's call) =====
   Avatar circle + My Feed + Log in / Create account form one personal
   cluster: on phones it takes its own row under the brand with the avatar
   immediately left of My Feed; on desktop it sits inline after the brand.
   The account menu anchors left and opens inward (never off-screen). */
.header-personal { display: flex; align-items: center; gap: .5rem; flex: 1 1 100%; }
.header-personal .account-wrap, .header-personal .my-profile-btn { margin-left: 0; }
@media (min-width: 641px) { .header-personal { flex: 0 1 auto; } }
@media (max-width: 640px) { .header-divider { display: none; } }

/* Achievements: muted trophy pill shared by Training cards, the
   workout page, and followers' feed cards; record-book lists ride the
   Personal Records card. No solid fills — panel + border like the
   weather / best-effort chips. */
.ach-trophy { display: inline-flex; color: var(--gold); flex: none; }
.ach-trophy svg { width: 12px; height: 12px; }
.ach-chip { display: inline-flex; align-items: center; gap: 0.32rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 0.16rem 0.6rem; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.ach-chip-row { display: block; margin-top: 0.3rem; }
.ach-feed-row { margin-top: 0.35rem; }
.ev-be-chip .ach-trophy { margin-right: 0.3rem; vertical-align: -1px; }
.ev-be-chip .ach-trophy svg { width: 13px; height: 13px; }
.ach-lists { margin-top: 0.75rem; border-top: 1px solid var(--border); padding-top: 0.6rem; }
.ach-book-head { font-weight: 700; font-size: 0.95rem; }
.ach-group { margin-top: 0.5rem; }
.ach-group-head { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.1rem; }
.ach-group-head .me-meta { font-weight: 400; }
.ach-row { padding-top: 0.35rem; padding-bottom: 0.35rem; }
.ach-rank { flex: 0 0 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }
.ach-row .pr-label { font-variant-numeric: tabular-nums; }

/* ---- My Upcoming Races ---- */
/* Auth-gated entries: the class display rules would otherwise defeat the
   `hidden` attribute (see AGENTS.md trap) — the My Upcoming Races menu
   entries must stay fully hidden while signed out. */
.app-submenu-row[hidden], .main-nav a[hidden] { display: none; }
.myraces-list { display: grid; gap: 0.6rem; margin-top: 1rem; }
.myrace-row { display: flex; gap: 0.8rem; align-items: flex-start; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 0.85rem 0.95rem; }
.myrace-main { flex: 1 1 auto; min-width: 0; }
.myrace-name { font-weight: 700; }
.myrace-name a { color: inherit; text-decoration: none; }
.myrace-name a:hover { text-decoration: underline; }
.myrace-meta { color: var(--muted); font-size: 0.88rem; margin-top: 0.15rem; }
.myrace-addr { font-size: 0.88rem; margin-top: 0.25rem; }
.myrace-addr a { color: var(--accent); text-decoration: none; }
.myrace-addr a:hover { text-decoration: underline; }
.myrace-pickup { margin-top: 0.45rem; }
.myrace-pickup-label { color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.myrace-pickup-text { color: var(--muted); font-size: 0.85rem; margin-top: 0.15rem; }
.myrace-pickup a { color: var(--accent); font-size: 0.88rem; text-decoration: none; }
.myrace-pickup a:hover { text-decoration: underline; }
.myrace-count { color: var(--muted); font-size: 0.85rem; font-weight: 600; margin-top: 0.35rem; }
.myrace-wx { color: var(--muted); font-size: 0.85rem; margin-top: 0.2rem; }
.myrace-rsu { display: inline-block; margin-top: 0.35rem; font-size: 0.88rem; }
.myrace-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.45rem; flex: 0 0 auto; }
.myrace-badge { background: #1b2740; border: 1px solid #3a4a63; color: #cfe0f5; border-radius: 999px; padding: 0.14rem 0.55rem; font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.myrace-reg { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; color: var(--muted); cursor: pointer; white-space: nowrap; }
.myrace-reg input { width: 1.05rem; height: 1.05rem; accent-color: #4da3ff; flex: 0 0 auto; }
.myrace-reg input:disabled { cursor: default; }
.myraces-tail-head { margin-top: 1.6rem; }
.myraces-updated { margin-top: 1rem; }
/* Integrations push (2026-10-15): the RunSignup value card that
   replaces the bare connect line when RunSignup isn't connected. */
.myraces-rsu-card { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 0.95rem 1rem 0.45rem; margin: 0 0 0.9rem; }
.myraces-rsu-head { font-size: 1.12rem; margin: 0 0 0.3rem; }
.myraces-rsu-actions { margin: 0.55rem 0 0.35rem; }
@media (max-width: 480px) {
  .myrace-row { flex-direction: column; }
  .myrace-side { flex-direction: row; align-items: center; }
}

/* Next-race readiness panel (My Upcoming Races): muted panel treatment,
   one per page, above the race rows. */
.mr-ready { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 0.9rem 0.95rem; margin: 0 0 0.9rem; }
.mr-ready-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.mr-ready-title { margin: 0; font-size: 1.05rem; }
.mr-ready-sub { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.88rem; }
.mr-ready-score { font-size: 2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.mr-ready-max { font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.mr-ready-verdict { margin: 0.35rem 0 0.2rem; font-weight: 700; }
.mr-ready-svg { width: 100%; height: auto; display: block; margin-top: 0.25rem; }
/* Desktop ceiling for the readiness graph (Oct 15: on My Upcoming
   Races, outside .training-body, the SVG stretched the full wide
   card and scaled ginormous). Same 780px convention as
   .training-body svg; phone widths keep the full-width render. */
@media (min-width: 768px) {
  .mr-ready-svg { max-width: 780px; }
}
.wm-svg { width: 100%; height: auto; display: block; margin-top: 0.25rem; }
.wm-val { fill: var(--text); font-size: 10px; font-weight: 700; text-anchor: middle; }
.weekly-miles-card .wm-summary { margin-top: 0.1rem; }
.mr-ready-lab { fill: #8fa3bd; font-size: 8.5px; }
.mr-ready-legend { margin: 0.1rem 0 0.45rem; color: var(--muted); font-size: 0.78rem; }
.mr-ready-take-line { margin: 0 0 0.3rem; font-size: 0.92rem; line-height: 1.4; }
.mr-ready-take-line:last-child { margin-bottom: 0; }
.mr-ready-disc { margin: 0.5rem 0 0; }
.mr-ready-slim { padding: 0.7rem 0.95rem; }

/* Race Day mode (Oct 15): the assembled next-race card atop Training
   and #/my-races. Panel language matches .mr-ready, with a gold left
   edge so race morning reads as the main event. */
.raceday-card { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid #f5c542; border-radius: 14px; padding: 0.9rem 0.95rem; margin: 0 0 0.9rem; }
.raceday-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.raceday-eyebrow { margin: 0; color: #f5c542; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.raceday-title { margin: 0.15rem 0 0; font-size: 1.2rem; line-height: 1.25; }
.raceday-sub { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.9rem; }
.raceday-ready { text-align: right; flex: 0 0 auto; }
.raceday-score { font-size: 2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.raceday-max { font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.raceday-verdict { margin: 0.25rem 0 0; font-weight: 700; font-size: 0.88rem; }
.raceday-count { margin: 0.55rem 0 0; font-size: 1.05rem; font-weight: 700; }
.raceday-coach { margin: 0.3rem 0 0; font-size: 0.95rem; line-height: 1.45; }
.raceday-venue { margin: 0.55rem 0 0; font-size: 0.92rem; }
.raceday-pickup { margin-top: 0.55rem; }
.raceday-wx { margin: 0.6rem 0 0; }
.raceday-wx[hidden] { display: none; }
.raceday-wx-lab { margin: 0 0 0.3rem; color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.raceday-wx-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.raceday-wx-chip { background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.65rem; font-size: 0.85rem; white-space: nowrap; }
.raceday-wx-h { color: var(--muted); font-weight: 600; }
.raceday-best { margin: 0.6rem 0 0; font-weight: 600; font-size: 0.95rem; }
.raceday-playlist { margin: 0.55rem 0 0; font-size: 0.92rem; }
.raceday-rj { margin: 0.7rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.raceday-rj-head { margin: 0; font-weight: 700; font-size: 0.95rem; }
.raceday-rj-sub { margin: 0.2rem 0 0; }
.raceday-rj-links { margin: 0.45rem 0 0.3rem; line-height: 2; }

/* Photo-pick controls are <label>s bound to their file inputs (the tap
   itself activates the picker \u2014 no JS in between); make a label
   render exactly like the .bio-btn button it replaced. */
label.bio-btn { display: inline-block; cursor: pointer; }

/* App-mode leaderboard pass (Oct 15): card rows in place of the desktop
   table, a sticky compact filter bar, a jump-to-me pill, and 50-row
   render windows. Everything is scoped to html.app-mode — the web
   boards keep their tables exactly as they were. */
html.app-mode .lb-bar { position: sticky; top: 0; z-index: 40; background: var(--bg);
  padding: 0.5rem 0 0.55rem; border-bottom: 1px solid var(--border); }
html.app-mode .lb-bar-row { display: flex; gap: 0.5rem; align-items: center; }
html.app-mode .lb-bar .dist-tabs.box-row { margin: 0; flex: 1 1 auto; min-width: 0; width: auto;
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; }
html.app-mode .lb-bar .dist-tabs.box-row::-webkit-scrollbar { display: none; }
html.app-mode .lb-bar .dist-tabs button { flex: 0 0 auto; }
html.app-mode .lb-bar #ultra-subtabs, html.app-mode .lb-bar #c-ultra-subtabs { margin: 0.45rem 0 0; }
html.app-mode .lb-filters-btn { flex: 0 0 auto; background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 999px; padding: 0.45rem 0.95rem; font: inherit; font-size: 0.95rem;
  font-weight: 600; min-height: 44px; cursor: pointer; }
html.app-mode .lb-filters-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
html.app-mode .lb-filters { padding-top: 0.3rem; }
html.app-mode .lb-filters[hidden] { display: none; }
html.app-mode .lb-filters .dist-tabs.mode-toggle { margin-top: 0.35rem; }
html.app-mode .lb-filters .controls { margin: 0.55rem 0 0.2rem; }
html.app-mode #view.show-recap .lb-filters-btn,
html.app-mode #view.show-recap .lb-filters { display: none; }
html.app-mode .lb-cards { display: flex; flex-direction: column; gap: 0.45rem; }
html.app-mode .lb-card { display: flex; align-items: center; gap: 0.7rem; box-sizing: border-box;
  min-height: 60px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 0.5rem 0.8rem; }
html.app-mode .lb-card-rank { flex: 0 0 2.1rem; text-align: center; font-weight: 700;
  color: var(--muted); font-variant-numeric: tabular-nums; }
html.app-mode .lb-card-main { flex: 1 1 auto; min-width: 0; }
html.app-mode .lb-card-name { font-weight: 600; font-size: 0.98rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
html.app-mode .lb-card-name a { color: var(--text); }
html.app-mode .lb-card-meta { color: var(--muted); font-size: 0.82rem; margin-top: 0.1rem; }
html.app-mode .lb-card-score { flex: 0 0 auto; text-align: right; }
html.app-mode .lb-card-score-num { display: block; font-size: 1.12rem; font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1.15; }
html.app-mode .lb-card-score-lbl { display: block; font-size: 0.66rem; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
html.app-mode .lb-card.lb-hit { background: rgba(96, 165, 250, 0.18); border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent); }
html.app-mode .lb-more { display: block; width: 100%; margin-top: 0.6rem; padding: 0.8rem;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
html.app-mode .lb-me-pill { position: fixed; right: 1rem; z-index: 60;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); background: var(--accent); color: #fff;
  border: 0; border-radius: 999px; padding: 0.6rem 1.05rem; font: inherit; font-weight: 700;
  font-size: 0.92rem; box-shadow: 0 4px 16px rgba(0,0,0,0.45); cursor: pointer; }
html.app-mode .lb-me-pill[hidden] { display: none; }

/* Ran-with tags + suggestions (Training cards, workout page, feed).
   One muted social line everywhere: brand blue is reserved for the
   partner name links (text/link accent, never a fill). */
.wk-with-row { display: block; margin-top: 0.3rem; font-size: 0.82rem; color: var(--muted); }
.wk-with-link { color: #4da3ff; text-decoration: none; font-weight: 600; }
.wk-with-line { margin-top: 0.3rem; font-size: 0.85rem; color: var(--muted); }
.wk-with-line a { color: #4da3ff; text-decoration: none; font-weight: 600; }
.rw-sec { margin-top: 0.9rem; }
.rw-box { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.rw-tag { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem 0.35rem 0.2rem 0.65rem; font-size: 0.85rem; }
.rw-tag a { color: #4da3ff; text-decoration: none; font-weight: 600; }
.rw-tag-x { background: none; border: none; color: var(--muted); font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0.1rem 0.2rem; }
.rw-tag-x:hover { color: inherit; }
.rw-sugg { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; width: 100%; background: var(--panel-2); border: 1px dashed var(--border); border-radius: 10px; padding: 0.55rem 0.7rem; }
.rw-sugg-txt { font-size: 0.88rem; }
.rw-sugg-txt a { color: #4da3ff; text-decoration: none; }
.rw-sugg-btns { display: inline-flex; gap: 0.4rem; margin-left: auto; }

/* ---------------- App Store announcement strip ----------------
   Slim banner under the header announcing the iOS app on the web
   home view. Visibility is driven by the inline script in
   index.html: web only, home route only, hidden for good once
   dismissed. The html.app-mode rule is a belt-and-braces guard —
   the script already never unhides it in app mode. In-flow, so it
   pushes page content down by exactly its own height and never
   overlaps the sticky header/nav. */
.app-store-strip { background: var(--panel-2); border-bottom: 1px solid var(--border); }
.app-store-strip[hidden] { display: none; }
html.app-mode .app-store-strip { display: none; }
.app-store-strip-inner { max-width: 1100px; margin: 0 auto; padding: 0.55rem 1rem; display: flex; align-items: center; gap: 0.75rem; }
@media (min-width: 1400px) { .app-store-strip-inner { max-width: 1900px; } }
.app-store-strip-icon { width: 38px; height: 38px; border-radius: 9px; flex: none; display: block; }
.app-store-strip-text { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 0.95rem; }
.app-store-strip-short { display: none; }
.app-store-strip-btn { flex: none; padding: .45rem .95rem; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; font-size: .85rem; white-space: nowrap; }
.app-store-strip-btn:hover { filter: brightness(1.1); color: #fff; text-decoration: none; }
.app-store-strip-close { flex: none; background: none; border: 0; color: var(--muted); font-size: 1.3rem; line-height: 1; padding: 0.3rem 0.45rem; cursor: pointer; border-radius: 8px; font-family: inherit; }
.app-store-strip-close:hover { color: var(--text); background: rgba(255,255,255,.07); }
@media (max-width: 640px) {
  /* Phones: one slim row — the brand name sits in the header directly
     above, so the strip copy shortens to the announcement itself. */
  .app-store-strip-inner { gap: 0.55rem; padding: 0.5rem 0.7rem; }
  .app-store-strip-icon { width: 30px; height: 30px; border-radius: 8px; }
  .app-store-strip-text { font-size: 0.85rem; }
  .app-store-strip-full { display: none; }
  .app-store-strip-short { display: inline; }
  .app-store-strip-btn { padding: .38rem .65rem; font-size: .78rem; }
  .app-store-strip-close { padding: 0.25rem 0.35rem; }
}

/* ---------- Season switcher (Phase C, 2026-11-05) ----------
   The <select id="season-switch"> element is injected by app.js into
   .header-inner (before .search-wrap) ONLY when seasons.json lists
   more than one season. On the legacy single-season tree it is never
   in the DOM, so these rules are inert there. */
.season-switch {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
  font-size: 0.95rem;
  min-height: 44px;
  flex: none;
}