/* ===========================================================================
   Runaway — styles. Vanilla CSS, no build. Red-aligned athletic theme.
   =========================================================================== */
:root {
  --bg: #f9f9f9;
  --card: #ffffff;
  --ink: #0f0f0f;
  --muted: #606060;
  --line: #e5e5e5;
  --brand: #ff0000;
  --brand-ink: #ffffff;
  --brand-soft: #ffe5e5;
  --accent: #f59e0b;
  --danger: #dc2626;
  --shadow: 0 1px 3px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .04);
  --radius: 14px;
  --switch-bg: #e5e5e5;
  --switch-handle: #ff0000;
  --transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  --bg: #0f0f0f;
  --card: #1f1f1f;
  --ink: #ffffff;
  --muted: #aaaaaa;
  --line: #2d2d2d;
  --brand: #ff4545;
  --brand-ink: #ffffff;
  --brand-soft: #4a1010;
  --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
  --switch-bg: #2d2d2d;
  --switch-handle: #ff4545;
}

* { box-sizing: border-box; }
html {
  margin: 0;
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition), color var(--transition);
}
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.85rem; font-weight: 700; color: var(--muted); }
[hidden] { display: none !important; }
code { background: var(--bg); padding: 2px 6px; border-radius: 5px; font-size: .85rem; color: var(--ink); }

/* ---- Boot loader (covers the screen until Supabase restores the session, so a
   page refresh never flashes the login gate before dropping the user back in) ---- */
.boot {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.boot-spinner {
  width: 42px; height: 42px; border-radius: 50%;
  border: 4px solid var(--line); border-top-color: var(--brand);
  animation: boot-spin 0.8s linear infinite;
}
@keyframes boot-spin { to { transform: rotate(360deg); } }

/* ---- Sign-in logo ---- */
.gate-logo {
  width: 96px; height: 96px;
  object-fit: contain;
  border-radius: 22px;
  margin: 0 auto 14px;
  display: block;
}

/* ---- Buttons ---- */
.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  padding: 9px 16px; border-radius: 10px; transition: var(--transition);
}
.btn:hover { background: var(--bg); }
.btn-primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn-primary:hover { background: #cc0000; border-color: #cc0000; }
.btn-primary:disabled { opacity: .6; cursor: default; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--bg); color: var(--ink); }
.btn-sm { padding: 5px 11px; font-size: .82rem; }
.btn-block { width: 100%; padding: 12px; font-size: 1rem; }

/* ---- Fields ---- */
.field { display: flex; flex-direction: column; gap: 5px; }
.field > span { font-size: .8rem; font-weight: 600; color: var(--muted); }
.field > span em { font-style: normal; font-weight: 400; opacity: .7; }
.field input, .filter-select {
  font: inherit; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--card); color: var(--ink);
  transition: border var(--transition), background var(--transition);
}
.field input:focus, .filter-select:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }

/* ===========================================================================
   Gate
   =========================================================================== */
.gate {
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(1200px 600px at 50% -10%, var(--brand-soft) 0%, var(--bg) 65%);
}
.gate-card {
  width: 100%; max-width: 380px; background: var(--card);
  border-radius: 20px; box-shadow: var(--shadow); padding: 35px 28px;
  display: flex; flex-direction: column; gap: 16px; text-align: center;
}
.gate-card .field { text-align: left; }
.gate-emoji { font-size: 2.8rem; margin-bottom: -5px; }
.gate-card h1 { font-size: 1.8rem; }
.gate-sub { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.4; }
.gate-error { margin: 0; color: var(--danger); font-size: .85rem; font-weight: 600; }
.gate-hint { margin: 0; color: var(--muted); font-size: .78rem; }

/* ---- Google Login Button ---- */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 12px; font-size: 0.95rem; font-weight: 600;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card);
  color: var(--ink); cursor: pointer; transition: var(--transition);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.btn-google:hover { background: var(--bg); border-color: #bbbbbb; }
.btn-google img { display: block; }

/* ===========================================================================
   App shell
   =========================================================================== */
.app-container {
  max-width: 900px; margin: 0 auto; padding: 18px 16px 80px;
  display: flex; flex-direction: column; gap: 16px;
}
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 5px;
}
.brand h1 { font-size: 1.5rem; }
.brand p { margin: 2px 0 0; color: var(--muted); font-size: .82rem; }
.header-right { display: flex; align-items: center; gap: 12px; }
.user-profile { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 8px; border-radius: 8px; transition: var(--transition); }
.user-profile:hover { background: var(--line); }
.avatar { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--brand); object-fit: cover; }
.who { font-size: .9rem; color: var(--muted); }
.who strong { color: var(--ink); }

.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
.live-dot.on { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
.live-dot.off { background: #f59e0b; }

/* ---- App Navigation Tabs ---- */
.app-nav { display: flex; gap: 6px; border-bottom: 1.5px solid var(--line); padding-bottom: 4px; margin-bottom: 4px; }
.nav-btn {
  font: inherit; font-size: 0.9rem; font-weight: 600; border: 0; background: transparent;
  color: var(--muted); padding: 8px 16px; border-radius: 8px; cursor: pointer; transition: var(--transition);
}
.nav-btn:hover { background: var(--line); color: var(--ink); }
.nav-btn.active { background: var(--brand-soft); color: var(--brand); }
/* Incoming-request count badge on the Friends tab */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 50px; background: var(--brand); color: var(--brand-ink);
  font-size: .68rem; font-weight: 800; line-height: 1; vertical-align: middle;
}

/* ---- Theme Switch (Draggable Segmented) ---- */
.theme-seg {
  position: relative;
  display: inline-flex;
  width: 110px;
  background: var(--switch-bg);
  border: 1px solid var(--line);
  border-radius: 50px;
  padding: 2px;
  gap: 0;
  user-select: none;
  cursor: pointer;
}
.theme-seg-btn {
  position: relative;
  z-index: 2;
  flex: 1;
  text-align: center;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 4px 0;
  border-radius: 50px;
  transition: color 0.2s ease;
  user-select: none;
  -webkit-user-drag: none;
  outline: none;
}
.theme-seg-btn.active {
  color: #fff;
  font-weight: 700;
}
.theme-seg-handle {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  z-index: 1;
  background: var(--switch-handle);
  border-radius: 50px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transform: translate3d(var(--handle-offset, 0px), 0, 0) scaleX(var(--handle-scale-x, 1));
  transform-origin: var(--handle-origin, left center);
  pointer-events: none;
}
.theme-seg.seg-ready .theme-seg-handle {
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), transform-origin 0s;
}
.theme-seg.dragging .theme-seg-handle {
  transition: none;
}

/* ---- Cards ---- */
.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
  transition: background var(--transition);
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---- Run form ---- */
.run-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.run-form > .field { min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.run-msg { font-size: .85rem; color: var(--muted); }

/* ---- Activity file import ---- */
.import-row { gap: 7px; }
.import-btn {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  padding: 10px 14px; border: 1px dashed var(--brand); border-radius: 10px;
  background: var(--brand-soft); color: var(--brand); font-weight: 600;
  font-size: .88rem; cursor: pointer; transition: var(--transition);
}
.import-btn:hover { filter: brightness(.95); }
.import-msg { font-size: .82rem; color: var(--muted); min-height: 1em; }
.import-hint { font-size: .76rem; color: var(--muted); opacity: .85; }
.import-hint strong { color: var(--ink); }

/* ---- Segmented control ---- */
.seg { display: inline-flex; background: var(--bg); border-radius: 9px; padding: 3px; }
.seg-btn {
  font: inherit; font-size: .78rem; font-weight: 600; border: 0; background: transparent;
  color: var(--muted); padding: 5px 10px; border-radius: 7px; cursor: pointer; transition: var(--transition);
}
.seg-btn.active { background: var(--card); color: var(--brand); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ---- Leaderboard ---- */
.leaderboard { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lb-row {
  display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px; background: var(--bg);
  transition: background var(--transition);
}
.lb-row.is-me { background: var(--brand-soft); }
.lb-rank { font-size: 1.05rem; text-align: center; font-weight: 700; color: var(--muted); }
.lb-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-runs { font-size: .76rem; color: var(--muted); }
.lb-km { font-weight: 800; color: var(--ink); }

/* Grey "You" pill shown after the current user's name in the pool list. */
.you-chip {
  display: inline-block; margin-left: 6px; padding: 1px 9px;
  border-radius: 50px; background: var(--switch-bg); color: var(--muted);
  font-size: 0.68rem; font-weight: 700; vertical-align: middle;
}

/* ---- Baht Pool Indicators ---- */
.baht-badge { padding: 4px 10px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; }
.baht-gain { color: #22c55e; background: rgba(34, 197, 94, 0.1); }
.baht-lose { color: var(--brand); background: var(--brand-soft); }
.baht-neutral { color: var(--muted); background: var(--line); }

/* ---- Recent runs ---- */
.mine-toggle { font-size: .8rem; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.run-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow: auto; }
.run-item { position: relative; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.run-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.run-km { font-weight: 800; color: var(--ink); font-size: 1.05rem; }
.run-runner { font-weight: 600; }
.run-pace { font-size: .76rem; color: var(--accent); font-weight: 700; background: #fffbeb; padding: 1px 7px; border-radius: 20px; }
[data-theme="dark"] .run-pace { background: #3b2c00; color: #fbbf24; }
.run-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); margin-top: 4px; }
.run-notes { font-style: italic; }
.run-del {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 6px;
  border: 0; background: transparent; color: #cbd5e1; cursor: pointer; font-size: .9rem;
}
.run-del:hover { background: #fee2e2; color: var(--danger); }
[data-theme="dark"] .run-del:hover { background: #3c1414; }

.empty { color: var(--muted); font-size: .88rem; padding: 14px; text-align: center; list-style: none; }

/* ---- Modal Dialog Overlay ---- */
/* Flex + `margin: auto` on the card instead of `place-items: center`: a centred
   grid/flex item that is taller than the viewport overflows in BOTH directions,
   so its top is clipped and unreachable. Auto margins centre the same way but
   collapse under overflow, so a tall modal stays scrollable to the top. */
.modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(4px);
  display: flex; overflow-y: auto; padding: 20px; z-index: 100;
}
.modal-card {
  margin: auto;
  width: 100%; max-width: 440px; background: var(--card);
  border-radius: 20px; box-shadow: var(--shadow); padding: 30px 24px;
  display: flex; flex-direction: column; gap: 14px; text-align: center;
  animation: modalEntrance 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--line);
}
@keyframes modalEntrance {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.modal-emoji { font-size: 2.8rem; }
.modal-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }

/* ---- Floating Action Button (FAB) ---- */
.fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 90;
  background: var(--brand); color: var(--brand-ink); border: 0;
  padding: 14px 24px; border-radius: 50px; font-weight: 700; font-size: 1rem;
  box-shadow: 0 4px 16px rgba(255, 0, 0, 0.35); cursor: pointer;
  display: flex; align-items: center; gap: 8px; transition: var(--transition);
}
.fab:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 0, 0, 0.5); }
.fab:active { transform: translateY(0); }

/* ---- Friends & Groups specific ---- */
.friend-share, .friend-add-manual { display: flex; flex-direction: column; gap: 8px; }
.section-desc { margin: 0; color: var(--muted); font-size: .88rem; }
.uid-hint { margin: 4px 0 0; font-size: .78rem; color: var(--muted); }
.uid-hint code { font-family: monospace; font-size: .82rem; }
.copy-box { display: flex; gap: 8px; margin-top: 6px; }
.copy-box input {
  flex: 1; font: inherit; font-size: .85rem; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--muted);
}
.copy-box input:focus { outline: 0; }
.requests-container h3 { font-size: .85rem; font-weight: 700; color: var(--muted); margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.05em; }
.run-item-action { display: flex; gap: 6px; margin-top: 8px; }

.app-footer { text-align: center; font-size: .74rem; color: var(--muted); }

/* ---- Avatar Edit ---- */
.avatar-edit-container {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}
.avatar-edit-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0;
  transition: opacity var(--transition);
  cursor: pointer;
  pointer-events: none;
}
.avatar-edit-container:hover .avatar-edit-overlay {
  opacity: 1;
}

/* ---- Avatar Cropper (pan + zoom) ---- */
.cropper {
  position: relative; width: 280px; height: 280px; margin: 4px auto 0;
  border-radius: 12px; overflow: hidden; background: var(--bg);
  touch-action: none; /* let pointer drag work on touch without page scroll */
}
.crop-canvas { display: block; width: 280px; height: 280px; cursor: grab; touch-action: none; }
.crop-canvas:active { cursor: grabbing; }
/* Circular preview window: the huge spread shadow darkens everything outside the
   inscribed circle so the user frames the round avatar. */
.crop-ring {
  position: absolute; inset: 0; pointer-events: none; border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45);
}
.crop-zoom { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.crop-zoom input[type="range"] { flex: 1; accent-color: var(--brand); }

/* ---- Responsive ---- */
@media (max-width: 680px) {
  .grid-2 { grid-template-columns: 1fr; }

  /* Run form stacks to a single column, except Duration + Date, which share one
     row (Duration on the left, Date on the right). Duration follows Date in the
     DOM, so `dense` back-fills the left cell to keep them side by side. */
  .run-form { grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; }
  .run-form > * { grid-column: 1 / -1; }
  .run-form > .field:has(#f-duration) { grid-column: 1 / 2; }
  .run-form > .field:has(#f-date) { grid-column: 2 / 3; }

  /* Mobile leaderboard adjustments */
  .lb-row {
    grid-template-columns: 20px 1fr auto auto;
    gap: 6px;
    padding: 8px 6px;
  }
  .lb-rank {
    text-align: left;
    font-size: 0.95rem;
  }
  .lb-row .user-profile {
    padding: 0;
  }
  .lb-name {
    font-size: 0.88rem;
  }
  .lb-runs {
    font-size: 0.72rem;
    white-space: nowrap;
  }
  .lb-km {
    font-size: 0.9rem;
    white-space: nowrap;
  }
  .lb-row .avatar {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Owner badge in member lists */
.owner-chip {
  display: inline-block; margin-left: 6px; padding: 1px 9px;
  border-radius: 50px; background: var(--brand-soft); color: var(--brand);
  font-size: 0.68rem; font-weight: 700; vertical-align: middle;
}

/* ===========================================================================
   Share Preview & Card Templates
   =========================================================================== */
/* The preview is sized from a HEIGHT cap, not from 100% width. At 100% width a
   9:16 frame inside the 400px modal is ~551px tall on a phone, which pushed the
   share buttons below the fold of an unscrollable modal — the 9:16 option was
   effectively unusable. Deriving width from the cap keeps the whole modal on
   screen in both ratios. */
.share-preview-frame {
  --preview-max-h: 44vh;
  width: min(100%, calc(var(--preview-max-h) * 9 / 16));
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  background: var(--bg);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
  position: relative;
  /* Outline, not border: a border would shrink the content box so that it no
     longer matches the 9:16 aspect box, leaving a hairline of backdrop along the
     bottom edge once the card is scaled by width. Outlines take no layout space. */
  outline: 1px solid var(--line);
  outline-offset: -1px;
}
.share-preview-frame.post-ratio {
  width: min(100%, var(--preview-max-h));
  aspect-ratio: 1 / 1;
}

/* Scale is measured at runtime (fitPreview in share.js) rather than hard-coded:
   the old fixed 0.24/0.29 pair only lined up at one exact frame width, so the
   9:16 card floated in a letterbox and the 1:1 card overflowed and got clipped.
   Anchoring at top left means scale = frameWidth / 1080 fills the frame exactly,
   because both frames share the card's aspect ratio. */
#share-preview-render {
  position: absolute;
  top: 0;
  left: 0;
  width: 1080px;
  height: 1920px;
  transform-origin: top left;
  transform: scale(var(--preview-scale, 0.24));
  pointer-events: none;
}

.theme-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform var(--transition), border-color var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.theme-dot:hover {
  transform: scale(1.1);
}
.theme-dot.active {
  border-color: var(--brand);
  transform: scale(1.15);
}

/* Instagram-branded primary share button. */
.btn-ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  border: 0;
  color: #fff;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 1rem;
}
.btn-ig:hover { filter: brightness(1.05); }
.btn-ig:disabled { filter: grayscale(0.4); opacity: 0.8; }

.share-hint {
  margin: 0 4px 2px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
}

/* 1080p rendering layout (html2canvas capture target).
   Sizes here are in px, not rem: the card is a fixed 1080px canvas, so tying it
   to the root font size would let a user's browser zoom setting distort the
   exported PNG.
   html2canvas 1.4.1 rasterises text itself, so paint-only CSS it cannot
   reproduce is avoided throughout this section: no background-clip:text, no
   filter/backdrop-filter, no mix-blend-mode, no -webkit-line-clamp (long text is
   trimmed in share.js instead). Layout is safe — the node is cloned into a real
   iframe, so flex, grid and gap are laid out by the browser. */
.share-card-layout {
  width: 1080px;
  height: 1920px;
  box-sizing: border-box;
  padding: 96px 84px;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.share-card-layout.post-format {
  height: 1080px;
  padding: 68px 64px;
}

/* Mesh gradients: a directional base with two off-centre radial highlights.
   The old two-stop 135deg ramps read as generic stock gradients; layering gives
   the card depth and a focal point behind the hero number. Each theme keeps a
   dark quadrant at the bottom so the footer and metrics stay legible without
   blanketing the whole card in text-shadow. */
.share-theme-sunrise {
  background:
    radial-gradient(78% 55% at 15% 8%, #ffd166 0%, rgba(255, 209, 102, 0) 60%),
    radial-gradient(70% 50% at 92% 26%, #ff5f6d 0%, rgba(255, 95, 109, 0) 62%),
    linear-gradient(168deg, #ff8a3d 0%, #ef4d5e 48%, #8e2a63 100%);
}
.share-theme-carbon {
  background:
    radial-gradient(70% 48% at 20% 12%, #3f4550 0%, rgba(63, 69, 80, 0) 62%),
    radial-gradient(64% 46% at 88% 30%, #ff5a3c 0%, rgba(255, 90, 60, 0) 58%),
    linear-gradient(170deg, #23262d 0%, #15171c 55%, #0b0c0f 100%);
}
.share-theme-electric {
  background:
    radial-gradient(72% 50% at 12% 10%, #7b5cff 0%, rgba(123, 92, 255, 0) 60%),
    radial-gradient(68% 48% at 90% 28%, #ff3d8b 0%, rgba(255, 61, 139, 0) 60%),
    linear-gradient(172deg, #4a2ec9 0%, #a3238e 52%, #3a1152 100%);
}
.share-theme-forest {
  background:
    radial-gradient(74% 52% at 16% 10%, #4ade80 0%, rgba(74, 222, 128, 0) 60%),
    radial-gradient(66% 46% at 90% 30%, #22d3ee 0%, rgba(34, 211, 238, 0) 58%),
    linear-gradient(170deg, #0f9b8e 0%, #0b6b62 52%, #04302f 100%);
}

/* Initial-letter placeholder shown when a runner has no avatar (see share.js). */
.card-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: #475569;
  font-weight: 800;
  text-shadow: none;
}

/* ---- Card header: identity on the left, mark on the right ---- */
.card-header-brand {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 24px;
}
.card-logo {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  object-fit: contain;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.10);
  flex-shrink: 0;
}
.card-runner-profile {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}
.card-runner-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  object-fit: cover;
  flex-shrink: 0;
}
.card-runner-name {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
/* Small uppercase caption used under the runner name and above the hero stat. */
.card-eyebrow {
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.72;
}

/* ---- Hero stat: one number doing all the work ----
   The old card gave distance, duration and pace equal weight in a bordered
   label/value list, which read like a receipt. A single oversized figure is the
   convention every running app converged on because it survives being viewed
   thumbnail-sized in a Story feed. */
.card-hero {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card-hero-value {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-size: 280px;
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
}
.card-hero-unit {
  font-size: 76px;
  font-weight: 600;
  letter-spacing: -0.02em;
  opacity: 0.8;
}
.post-format .card-hero-value { font-size: 190px; gap: 14px; }
.post-format .card-hero-unit { font-size: 56px; }

/* ---- Metric strip: secondary stats as equal-width tiles ---- */
.card-metrics {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 16px;
  margin-top: 48px;
}
.card-metric {
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.card-metric-label {
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.72;
}
.card-metric-value {
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.post-format .card-metrics { margin-top: 34px; gap: 12px; }
.post-format .card-metric { padding: 20px 18px; border-radius: 20px; }
.post-format .card-metric-value { font-size: 36px; }

/* Notes are trimmed to a character budget in share.js, so no line-clamp here. */
.card-notes {
  font-size: 30px;
  line-height: 1.45;
  font-weight: 400;
  opacity: 0.92;
  margin-top: 34px;
  padding-left: 22px;
  border-left: 4px solid rgba(255, 255, 255, 0.45);
}
.post-format .card-notes { font-size: 24px; margin-top: 24px; }

/* ---- Footer ---- */
.card-footer {
  margin-top: auto;
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.card-footer-logo-text {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.22em;
}
.card-footer-date {
  font-size: 24px;
  opacity: 0.8;
  font-weight: 500;
}

/* ---- Leaderboard card ---- */
.card-leaderboard-list {
  list-style: none;
  padding: 0;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card-leaderboard-row {
  display: grid;
  grid-template-columns: 78px 84px 1fr auto;
  align-items: center;
  gap: 22px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 22px 28px;
  border-radius: 26px;
}
/* Leader gets a brighter tile so the winner is readable at thumbnail size. */
.card-leaderboard-row.is-leader {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.42);
}
.card-leaderboard-rank {
  font-size: 44px;
  font-weight: 800;
  opacity: 0.7;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.is-leader .card-leaderboard-rank { opacity: 1; }
.card-leaderboard-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  object-fit: cover;
}
.card-leaderboard-name {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.01em;
  min-width: 0;
}
.card-leaderboard-km {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.post-format .card-leaderboard-list { gap: 12px; }
.post-format .card-leaderboard-row { padding: 16px 22px; gap: 18px; grid-template-columns: 62px 66px 1fr auto; }
.post-format .card-leaderboard-rank { font-size: 34px; }
.post-format .card-leaderboard-avatar { width: 66px; height: 66px; }
.post-format .card-leaderboard-name { font-size: 28px; }
.post-format .card-leaderboard-km { font-size: 32px; }

/* Run share button in items list */
.run-share {
  position: absolute;
  top: 8px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  padding: 0;
}
.run-share:hover {
  background: var(--brand-soft);
  color: var(--brand);
}
[data-theme="dark"] .run-share:hover {
  background: #3c1414;
}