/* =============================================================================================
   Weekly recap (features.weeklyRecap): the /recap/{week} page (Pages/Recap.razor) and the Feed's
   recap card (Components/Recap/RecapFeedCard.razor).
   Plain CSS on the sw.css tokens (Tailwind does not compile this file, so no app.min.css rebuild is
   needed for it). Linked after recruit.css by Supwell/wwwroot/index.html (app) and
   Supwell.Web/Components/App.razor (web). Unlayered, like recruit.css, so these classes beat the
   kit's layered ones and MAUI's css/mobile.css heading sizes.
   Cards are the app's one shell (.sw-surface). Numerals follow the Mileage hero (MileageHeroCard):
   Space Grotesk, olive. Olive and the ground carry it; yellow appears once, on the streak. People
   are circles (.sw-avatar), shoes are rounded squares. No motion here (the card's entrance is the
   feed's own .sw-fcard-in, which sw.css switches off under prefers-reduced-motion).
   ============================================================================================= */

/* ---- Feed card (RecapFeedCard) ----------------------------------------------------------------
   Under the Get started card, in the feed card's shell (.sw-surface .sw-fcard). At 375px the
   "See your week" line drops under the numbers, still on the right. */
.sw-rfc { padding: 14px 14px 10px; }
.sw-rfc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sw-rfc__titles { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sw-rfc__kicker {
  font: 500 var(--sw-fs-label)/1.3 var(--sw-font-mono); letter-spacing: var(--sw-tracking-label);
  text-transform: uppercase; color: var(--sw-ink-muted);
}
.sw-rfc__title {
  margin: 0; font: 400 26px/1.1 var(--sw-font-serif); font-synthesis: none; letter-spacing: -.01em;
  color: var(--sw-olive); text-wrap: balance;
}
.sw-rfc__close {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: -6px -6px 0 0; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--sw-ink-muted); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sw-rfc__open {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 12px;
  width: 100%; margin: 12px 0 0; padding: 12px 0 4px; border: 0; border-top: .5px solid var(--sw-line-2);
  background: none; color: var(--sw-ink); font: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sw-rfc__stats { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.sw-rfc__stat { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.sw-rfc__stat > b {
  font: 700 24px/1 var(--sw-font-head); letter-spacing: var(--sw-tracking); color: var(--sw-olive);
  font-variant-numeric: tabular-nums;
}
.sw-rfc__stat > span {
  font: 500 var(--sw-fs-label)/1 var(--sw-font-mono); letter-spacing: var(--sw-tracking-label);
  text-transform: uppercase; color: var(--sw-ink-muted);
}
.sw-rfc__cta {
  flex: none; display: inline-flex; align-items: center; gap: 2px; margin-left: auto;
  font: 600 14px/20px var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-olive); white-space: nowrap;
}
.sw-rfc__close:focus-visible, .sw-rfc__open:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; }

/* ---- page frame ------------------------------------------------------------------------------ */
.sw-rcp {
  max-width: 40rem; margin: 0 auto; padding: 8px 0 calc(32px + var(--sw-safe-b, 0px));
  color: var(--sw-ink); font-family: var(--sw-font-ui);
}
.sw-rcp__stack { display: flex; flex-direction: column; gap: 12px; }
.sw-rcp__head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 4px 2px 6px; }
.sw-rcp__kicker {
  font: 500 var(--sw-fs-label)/1.3 var(--sw-font-mono); letter-spacing: var(--sw-tracking-label);
  text-transform: uppercase; color: var(--sw-ink-muted);
}
/* The one accent on the page. */
.sw-rcp__streak {
  display: inline-flex; align-items: center; min-height: 24px; margin-top: 6px; padding: 0 10px;
  border-radius: var(--sw-r-pill); background: var(--sw-yellow); color: var(--sw-olive);
  font: 600 12px/1 var(--sw-font-ui); letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.sw-rcp__h {
  margin: 0; font: 700 12px/15px var(--sw-font-mono); letter-spacing: var(--sw-tracking);
  text-transform: uppercase; color: var(--sw-ink-muted);
}
.sw-rcp__more {
  display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px;
  font: 600 14px/1 var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-olive); text-decoration: none;
}
.sw-rcp__more:hover, .sw-rcp__more:visited { color: var(--sw-olive); }

/* ---- the hero: MileageHeroCard's MILES numeral and three-up stat row ------------------------- */
.sw-rcp-hero { padding: 16px 18px 6px; }
.sw-rcp-hero__label { margin: 0; font: 400 12px/12px var(--sw-font-head); letter-spacing: var(--sw-tracking); color: var(--sw-ink-muted); }
.sw-rcp-hero__num {
  margin: 8px 0 0; font: 700 58px/50px var(--sw-font-head); letter-spacing: var(--sw-tracking);
  color: var(--sw-olive); font-variant-numeric: tabular-nums;
}
.sw-rcp-hero__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; padding: 10px 0;
  border-top: 1px solid var(--sw-line-2);
}
.sw-rcp-hero__cell {
  min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 0 8px;
  border-left: 1px solid var(--sw-line-2); white-space: nowrap;
}
.sw-rcp-hero__cell:first-child { padding-left: 0; border-left: 0; }
.sw-rcp-hero__cell > b {
  overflow: hidden; text-overflow: ellipsis; font: 600 16px/18px var(--sw-font-head);
  letter-spacing: var(--sw-tracking); color: var(--sw-olive); font-variant-numeric: tabular-nums;
}
.sw-rcp-hero__cell > span { font: 400 10px/16px var(--sw-font-head); letter-spacing: var(--sw-tracking); color: var(--sw-ink-muted); }

/* ---- cards and rows -------------------------------------------------------------------------- */
.sw-rcp-card { display: flex; flex-direction: column; gap: 12px; padding: 14px; }

.sw-rcp-run {
  display: flex; align-items: center; gap: 10px; color: var(--sw-ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.sw-rcp-run:hover, .sw-rcp-run:visited { color: var(--sw-ink); }
.sw-rcp-run + .sw-rcp-run, .sw-rcp-likes + .sw-rcp-run { padding-top: 12px; border-top: .5px solid var(--sw-line-2); }
.sw-rcp-run__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.sw-rcp-run__label {
  font: 500 var(--sw-fs-label)/1.3 var(--sw-font-mono); letter-spacing: var(--sw-tracking-label);
  text-transform: uppercase; color: var(--sw-ink-muted);
}
.sw-rcp-run__t {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 16px/21px var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-ink);
}
.sw-rcp-run__m { font: 500 13px/18px var(--sw-font-ui); color: var(--sw-ink-muted); font-variant-numeric: tabular-nums; }
.sw-rcp-run__chev { flex: none; color: var(--sw-line-3); }
.sw-rcp-tag {
  display: inline-block; margin-top: 4px; padding: 3px 8px; border-radius: var(--sw-r-xs);
  background: var(--sw-olive); color: var(--sw-on-olive);
  font: 700 var(--sw-fs-micro)/14px var(--sw-font-mono); letter-spacing: .04em; text-transform: uppercase;
}

/* Share your best run: the run in a sunken well above the one action. */
.sw-rcp-share__run {
  min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
  border-radius: var(--sw-r-md); background: var(--sw-ground-2);
}

/* Likes and comments, and the likers as overlapping circles. */
.sw-rcp-likes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sw-rcp-likes__nums { display: flex; gap: 20px; }
.sw-rcp-stat { display: flex; flex-direction: column; gap: 2px; }
.sw-rcp-stat > b {
  font: 700 28px/1 var(--sw-font-head); letter-spacing: var(--sw-tracking); color: var(--sw-olive);
  font-variant-numeric: tabular-nums;
}
.sw-rcp-stat > span {
  font: 500 var(--sw-fs-micro)/14px var(--sw-font-mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--sw-ink-muted); white-space: nowrap;
}
.sw-rcp-stat--end { flex: none; align-items: flex-end; text-align: right; }
.sw-rcp-stat--end > b { font-size: 20px; }
.sw-rcp-faces { display: flex; align-items: center; margin: 0; padding: 0 0 0 8px; list-style: none; }
.sw-rcp-faces > li { margin: 0 0 0 -8px; }
.sw-rcp-face {
  display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--sw-card);
  background: var(--sw-line); color: var(--sw-ink); font: 700 13px/1 var(--sw-font-ui); text-decoration: none;
}
.sw-rcp-face:hover, .sw-rcp-face:visited { color: var(--sw-ink); }

/* Shoes worn: rounded squares, the week's miles, and the wear against the retire mark. */
.sw-rcp-shoes { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.sw-rcp-shoes > li + li { border-top: .5px solid var(--sw-line-2); }
.sw-rcp-shoe {
  display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--sw-ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.sw-rcp-shoe:hover, .sw-rcp-shoe:visited { color: var(--sw-ink); }
.sw-rcp-shoes > li:first-child > .sw-rcp-shoe { padding-top: 0; }
.sw-rcp-shoes > li:last-child > .sw-rcp-shoe { padding-bottom: 0; }
.sw-rcp-shoe__img {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden;
  border-radius: var(--sw-r-sm); background: var(--sw-ground-2); color: var(--sw-line-2);
}
.sw-rcp-shoe__img > img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--sw-card); }
.sw-rcp-shoe__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sw-rcp-shoe__kicker {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 var(--sw-fs-label)/14px var(--sw-font-mono); letter-spacing: var(--sw-tracking); text-transform: uppercase; color: var(--sw-ink-muted);
}
.sw-rcp-shoe__t {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 15px/20px var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-ink);
}
.sw-rcp-shoe__m { font: 500 12px/16px var(--sw-font-ui); color: var(--sw-ink-muted); font-variant-numeric: tabular-nums; }
.sw-rcp-bar { display: block; height: 6px; margin-top: 6px; overflow: hidden; border-radius: var(--sw-r-pill); background: var(--sw-line); }
.sw-rcp-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--sw-olive); }

.sw-rcp-run:focus-visible, .sw-rcp-shoe:focus-visible, .sw-rcp-face:focus-visible, .sw-rcp__more:focus-visible {
  outline: 2px solid var(--sw-olive); outline-offset: 2px;
}