/*
 * home.css
 * spikefan.com's home page (index.html): a fixed header, a scrolling finite feed, the fixed bottom bar from the
 * shared shell. Built on the shared look (/css/tokens.css, components.css); only the feed's own parts are here.
 * Every colour is a token, so dark mode is the tokens' job. Phone first; the tablet / PC layout is the last block of this file.
 */

[hidden] { display: none !important; }

.wordmark {
  flex: none;
  margin: 0 0 0 var(--sf-2);
  font: var(--sf-w-bold) 26px/1 var(--sf-font-num);
  letter-spacing: 0.01em;
  color: var(--sf-ink);
}

.wordmark span { color: var(--sf-accent); }

.sf-icon {
  inline-size: 24px;
  block-size: 24px;
  flex: none;
  stroke: currentColor;
}

/* Header and bar stay put; only the feed scrolls (N1). body.sf-bar-own tells the shell the page pads its own scroller. */
.feed-page {
  display: flex;
  flex-direction: column;
  block-size: 100dvh;
  overflow: hidden;
}

.feed-page .sf-header { flex: none; }

/* grid-auto-rows keeps the overflow:hidden cards from collapsing to ~15px inside a grid scroller. */
.feed {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow-y: auto;
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 14px;
  padding: 14px max(16px, calc((100% - 560px) / 2)) calc(var(--sf-bar-h) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 600px) {
  .feed { padding-block-end: var(--sf-6); }
}

.feed-block { display: grid; gap: var(--sf-2); min-width: 0; }

/* Phone: the two column wrappers vanish, so the blocks flow in their own order (Live, Last meet, Season, Coach, Week). */
.feed-cols, .feed-col { display: contents; }

.feed-hero__pitch, .feed-hero__find { display: grid; gap: var(--sf-3); min-width: 0; }

.feed-label {
  margin: 0;
  font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-ink-3);
}

/* Follow chips / invite row */
.feed-follow:empty { display: none; }

.feed-invite {
  display: flex;
  align-items: center;
  gap: var(--sf-3);
  padding: var(--sf-2) var(--sf-3);
  background: var(--sf-paper);
  border: 1px solid var(--sf-line);
  border-radius: calc(var(--sf-r-md) + 2px);
}

.feed-invite__text { flex: 1 1 0; min-width: 0; font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); color: var(--sf-ink-2); }


/* Section label row: the label on the left, the team chip (first row only) at the right end. 36 tall, so the chip adds no row of its own. */
.feed-labelrow { display: flex; align-items: center; gap: var(--sf-3); min-block-size: 36px; min-width: 0; }
.feed-labelrow .feed-label { flex: none; }
.feed-labelrow__slot { flex: 1 1 0; min-width: 0; display: flex; justify-content: flex-end; }
.feed-labelrow__slot:empty { display: none; }
/* The chip lives in the header from 1024 (PC) and on the first label before that. */
.feed-chiphost { display: none; min-width: 0; }
.feed-chiphost:empty { display: none; }

/* Next meet / Today: a card per team-meet */
.feed-next { display: grid; gap: var(--sf-2); min-width: 0; }
#blockNext { gap: 14px; }
.feed-nextlabel { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--sf-accent-ink); }
.feed-nextlabel--today { color: var(--sf-stop-ink); }
.feed-nextlabel__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--sf-stop); flex: none; }
.feed-next__card { border: 1.5px solid var(--sf-line); border-radius: 12px; }
.feed-next__card--accent { border-color: var(--sf-accent); }
.feed-next__card--live { border-color: var(--sf-stop); }
.feed-next__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sf-3); align-items: start; min-block-size: var(--sf-tap); padding: 12px 14px; }
.feed-next__open { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sf-3); align-items: start; min-block-size: var(--sf-tap); color: inherit; text-decoration: none; }
.feed-next__open:hover { background: var(--sf-page); }
.feed-next__open:active { background: var(--sf-sunk); }
.feed-next__open:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.feed-next__chev { align-self: center; inline-size: 22px; block-size: 22px; color: var(--sf-ink-3); }
.feed-next__text { min-width: 0; display: grid; gap: 3px; align-content: start; }
.feed-next__name { font: var(--sf-w-bold) 19px/1.2 var(--sf-font-ui); overflow-wrap: anywhere; }
.feed-next__place { font-size: var(--sf-text-sm); color: var(--sf-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-next__meta { display: flex; align-items: center; gap: var(--sf-2); flex-wrap: wrap; min-width: 0; }
.feed-next__line { font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); color: var(--sf-accent-ink); }

/* One 56px row per race: time · name + status · right side · chevron */
.feed-race {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) auto 18px; gap: 10px; align-items: center; min-block-size: 56px; padding: 4px 10px 4px 14px;
  border-top: 1px solid var(--sf-line-soft); color: inherit; text-decoration: none; touch-action: manipulation;
}
.feed-race:hover { background: var(--sf-page); color: inherit; }
.feed-race:active { background: var(--sf-sunk); }
.feed-race:focus-visible { outline: 3px solid var(--sf-focus); outline-offset: -3px; }
.feed-race.is-live { background: color-mix(in oklab, var(--sf-stop-soft) 45%, transparent); }
.feed-race__time { font: var(--sf-w-bold) 14px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink-2); }
.feed-race__text { min-width: 0; display: grid; gap: 2px; }
.feed-race__name { font: var(--sf-w-semi) 15px/1.25 var(--sf-font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-race__sub { display: flex; align-items: center; gap: 6px; font-size: var(--sf-text-xs); color: var(--sf-ink-3); min-width: 0; }
.feed-race__chip { display: inline-flex; align-items: center; gap: 4px; block-size: 24px; padding: 0 8px; border-radius: var(--sf-r-pill); white-space: nowrap; min-width: 0; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); }
.feed-race__chip svg { inline-size: 13px; block-size: 13px; stroke-width: 2.5; }
.feed-race__chip--live { background: var(--sf-stop-soft); color: var(--sf-stop-ink); }
.feed-race__chip--soon { background: var(--sf-accent-soft); color: var(--sf-accent-ink); }
.feed-race__chip--sched { background: var(--sf-sunk); color: var(--sf-ink-2); }
.feed-race__dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--sf-stop); flex: none; }
.feed-race__right { text-align: end; min-width: 0; }
.feed-race__go { font: var(--sf-w-semi) var(--sf-text-sm)/1 var(--sf-font-ui); color: var(--sf-accent-ink); }
.feed-race__clock { font: var(--sf-w-bold) 17px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-stop-ink); }
.feed-race__late { font: var(--sf-w-semi) var(--sf-text-xs)/1.2 var(--sf-font-ui); color: var(--sf-warn-ink); } /* display only: the scheduled time never changes */
.feed-race__chev { inline-size: 16px; block-size: 16px; color: var(--sf-ink-3); }

/* Season arc */
.feed-arc__head { display: flex; align-items: baseline; gap: var(--sf-2); }
.feed-arc__title { flex: 1 1 auto; min-width: 0; font: var(--sf-w-bold) 15px/1.2 var(--sf-font-ui); overflow-wrap: anywhere; }
.feed-arc__note { font-size: var(--sf-text-xs); color: var(--sf-ink-3); white-space: nowrap; }
.feed-arc__plot { position: relative; block-size: 96px; }
.feed-arc__svg { display: block; inline-size: 100%; block-size: 100%; }
.feed-arc__area { fill: var(--sf-accent-soft); }
.feed-arc__line { stroke: var(--sf-accent); stroke-width: 2.5px; }
.feed-arc__dot { position: absolute; inline-size: 9px; block-size: 9px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--sf-accent); border: 2px solid var(--sf-paper); box-sizing: content-box; }
.feed-arc__dot--last { background: var(--sf-go); }
.feed-arc__faster { position: absolute; inset-block-start: 0; inset-inline-end: 0; font: var(--sf-w-bold) 13px/1 var(--sf-font-num); color: var(--sf-go); }
.feed-arc__labels { display: flex; justify-content: space-between; gap: var(--sf-1); font: var(--sf-w-semi) 11px/1 var(--sf-font-ui); color: var(--sf-ink-3); }
.feed-arc__sum { font-size: 13px; line-height: 1.4; color: var(--sf-ink-2); }
.feed-arc__sumv { font: var(--sf-w-bold) 15px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.feed-arc__sumv--go { color: var(--sf-go); }

/* From your coach: 60px rows */
.feed-route { display: grid; grid-template-columns: auto minmax(0, 1fr) var(--sf-tap); gap: var(--sf-3); padding-inline-start: var(--sf-3); align-items: center; border-top: 1px solid var(--sf-line-soft); }
.feed-route:first-child { border-top: 0; }
.feed-route__link { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-block-size: 60px; padding: var(--sf-2) 0; color: inherit; text-decoration: none; touch-action: manipulation; }
.feed-route__link:hover { background: var(--sf-page); color: inherit; }
.feed-route__tile { inline-size: var(--sf-tap); block-size: var(--sf-tap); align-self: center; border-radius: var(--sf-r-md); }
.feed-route__tile.sf-mapthumb { inline-size: var(--sf-tap); block-size: var(--sf-tap); border-radius: var(--sf-r-md); }
.feed-route__tile .sf-mapthumb__badge { display: none; }
.feed-route__text { display: grid; gap: 2px; min-width: 0; }
.feed-route__name { font: var(--sf-w-semi) 15px/1.25 var(--sf-font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-route__desc { font-size: var(--sf-text-sm); color: var(--sf-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-route__dist { font: var(--sf-w-bold) 14px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; color: var(--sf-ink); }
.feed-route--skel .feed-route__link:hover { background: none; }
.feed-route__skel { block-size: 14px; inline-size: 60%; }
.feed-route__skel--short { block-size: 11px; inline-size: 35%; }
.feed-route__more { margin: var(--sf-2) var(--sf-3) var(--sf-3); inline-size: calc(100% - 2 * var(--sf-3)); }
.feed-route__remove { color: var(--sf-ink-3); border-radius: var(--sf-r-sm); }
.feed-route__remove:hover { background: var(--sf-sunk); color: var(--sf-ink); }
.feed-route__remove:active { background: var(--sf-line); }
.feed-route__remove:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: -3px; }

/* This week near you: 60px rows */
.feed-week { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--sf-3); align-items: center; min-block-size: 60px; padding: var(--sf-2) var(--sf-3); border-top: 1px solid var(--sf-line-soft); }
.feed-week:first-child { border-top: 0; }
.feed-week__date { text-align: center; }
.feed-week__dow { font: var(--sf-w-bold) 11px/1.2 var(--sf-font-ui); letter-spacing: 0.06em; color: var(--sf-ink-3); }
.feed-week__day { font: var(--sf-w-bold) 22px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }
.feed-week__text { min-width: 0; }
.feed-week__name { font: var(--sf-w-semi) 15px/1.25 var(--sf-font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-week__sub { font-size: var(--sf-text-sm); color: var(--sf-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-week__act { display: inline-grid; place-items: center; min-block-size: var(--sf-tap-min); font: var(--sf-w-bold) 13px/1 var(--sf-font-ui); color: var(--sf-link); text-decoration: none; white-space: nowrap; }
.feed-week__act--go { color: var(--sf-go); }

/* Live now: the full card (a follow is racing) and the compact 48px row */
#blockLive { gap: var(--sf-2); }
/* The live card (.sf-livecard) is shared: css/components.css. */

.feed-live-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sf-3); align-items: center; min-block-size: var(--sf-tap); padding: 0 14px; background: var(--sf-paper); border: 1px solid var(--sf-line); border-radius: calc(var(--sf-r-md) + 2px); color: var(--sf-ink); text-decoration: none; min-width: 0; }
.feed-live-row:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 2px; }
.feed-live-row__text { display: grid; min-width: 0; }
.feed-live-row__title { font: var(--sf-w-semi) 15px/1.25 var(--sf-font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-live-row__sub { font-size: var(--sf-text-xs); color: var(--sf-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-live-row__clock { font: var(--sf-w-bold) 18px/1 var(--sf-font-num); font-variant-numeric: tabular-nums; }

/* End cap */
.feed-end { display: grid; justify-items: center; gap: var(--sf-1); padding: var(--sf-4) 0 var(--sf-1); text-align: center; }
.feed-end__icon { color: var(--sf-go); inline-size: 22px; block-size: 22px; }
.feed-end__title { font: var(--sf-w-bold) 15px/1.2 var(--sf-font-ui); }
.feed-end__sub { font-size: 13px; color: var(--sf-ink-3); }
.feed-end__body { display: grid; justify-items: center; gap: var(--sf-1); }
.feed-end__body[hidden] { display: none; }
.feed-end__follow { margin-top: var(--sf-3); }
.feed-end__sub a { color: var(--sf-link); font-weight: var(--sf-w-semi); }

/* Latest results (first visit): two slim roundups */
.feed-stack { display: grid; gap: 14px; min-width: 0; }
/* First visit: the hero. Ink card; paper text flips with the theme so it reads in light and dark. */
.feed-hero { display: grid; gap: var(--sf-3); padding: 18px 16px; background: var(--sf-ink); color: var(--sf-paper); border-radius: calc(var(--sf-r-md) + 2px); min-width: 0; }
.feed-hero__title { margin: 0; font: var(--sf-w-bold) 30px/1.05 var(--sf-font-num); text-wrap: balance; }
.feed-hero__sub { font-size: var(--sf-text-sm); line-height: 1.45; opacity: 0.85; }
.feed-hero__search {
  display: flex; align-items: center; gap: var(--sf-2); min-block-size: var(--sf-tap); padding: 0 var(--sf-3);
  border: 0; border-radius: var(--sf-r-sm); background: var(--sf-paper); color: var(--sf-ink-2); cursor: pointer; text-align: start;
  font: var(--sf-w-reg) var(--sf-text-md)/1 var(--sf-font-ui);
}
.feed-hero__search:focus-visible, .feed-hero__pill:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 2px; }
.feed-hero__near { display: flex; align-items: center; gap: var(--sf-2); min-width: 0; }
.feed-hero__neartext { flex: 1 1 auto; min-width: 0; font-size: var(--sf-text-sm); }
.feed-hero__pill {
  flex: none; block-size: 36px; padding: 0 var(--sf-3); border: 1.5px solid currentColor; border-radius: var(--sf-r-pill);
  background: none; color: inherit; cursor: pointer; font: var(--sf-w-semi) 13px/1 var(--sf-font-ui);
}
.feed-hero__pill[disabled] { opacity: 0.7; cursor: default; }
.feed-hero__pill.is-busy { pointer-events: none; }

/* First visit: the location nudge (dashed card) */
.feed-nudge { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sf-3); padding: var(--sf-3) 14px; border: 1.5px dashed var(--sf-line-strong); border-radius: calc(var(--sf-r-md) + 2px); color: var(--sf-ink-2); }
.feed-nudge__text { font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); }
.feed-nudge .sf-btn { grid-column: 1 / -1; justify-self: start; }

/* Live now with no follows: 56px rows */
.feed-live-row--tall { min-block-size: 56px; }

/* Follow sheet: full screen on a phone, a centred modal from 600px. Built on .sf-modal. */
.sf-modal.follow-sheet { inline-size: 100%; block-size: 100dvh; max-block-size: none; border-radius: 0; display: flex; flex-direction: column; }
.follow-sheet .sf-modal__head { min-block-size: 56px; padding-inline-start: var(--sf-1); }
.follow-sheet__top { display: grid; gap: 10px; padding: 12px 16px; }
.follow-sheet__list { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--sf-line-soft); }
.follow-chips { padding: 0; }
.follow-chip { min-block-size: 40px; border-radius: var(--sf-r-pill); gap: var(--sf-1); }
.follow-chip svg { inline-size: 16px; block-size: 16px; }
.follow-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-3); padding: var(--sf-2) 16px; border-bottom: 1px solid var(--sf-line-soft); color: var(--sf-ink-2); font: var(--sf-w-semi) var(--sf-text-sm)/1.3 var(--sf-font-ui); }
.follow-summary__clear { flex: none; min-block-size: var(--sf-tap-min); padding: 0 var(--sf-2); border: 0; background: none; color: var(--sf-accent-ink); font: var(--sf-w-bold) var(--sf-text-sm)/1 var(--sf-font-ui); cursor: pointer; touch-action: manipulation; }
.follow-group { padding: var(--sf-4) 16px var(--sf-2); color: var(--sf-ink-3); font: var(--sf-w-bold) var(--sf-text-xs)/1 var(--sf-font-ui); text-transform: uppercase; letter-spacing: 0.06em; }
.follow-more { display: flex; align-items: center; inline-size: 100%; min-block-size: var(--sf-tap-min); padding: 0 16px; border: 0; border-bottom: 1px solid var(--sf-line-soft); background: none; color: var(--sf-accent-ink); font: var(--sf-w-bold) 15px/1 var(--sf-font-ui); text-align: start; cursor: pointer; touch-action: manipulation; }
.follow-hint { padding: var(--sf-4) 16px; color: var(--sf-ink-2); font-size: var(--sf-text-sm); }
.follow-pane__search { padding: var(--sf-2) 16px; }
.follow-pane__opt { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-3); inline-size: 100%; min-block-size: var(--sf-tap); padding: 0 16px; border: 0; border-bottom: 1px solid var(--sf-line-soft); background: none; color: var(--sf-ink); font: var(--sf-w-semi) var(--sf-text-md)/1.2 var(--sf-font-ui); text-align: start; cursor: pointer; touch-action: manipulation; }
.follow-pane__opt[aria-selected="true"] { color: var(--sf-accent-ink); font-weight: var(--sf-w-bold); }
.follow-pane__opt svg { inline-size: 20px; block-size: 20px; }
.follow-sheet__foot { flex-direction: column; gap: var(--sf-2); padding: 12px 16px 16px; }
.follow-sheet__done { min-block-size: 52px; }
.follow-sheet__note { font-size: var(--sf-text-xs); color: var(--sf-ink-3); text-align: center; }
.follow-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sf-3); align-items: center; min-block-size: 64px; padding: var(--sf-2) 16px; border-bottom: 1px solid var(--sf-line-soft); }
.follow-row__badge { display: grid; place-items: center; inline-size: 40px; block-size: 40px; background: var(--sf-accent-soft); color: var(--sf-accent-ink); }
.follow-row__badge--team { border-radius: var(--sf-r-md); }
.follow-row__badge--runner { border-radius: 50%; }
.follow-row__badge svg { inline-size: 20px; block-size: 20px; }
.follow-row .sf-followtoggle { min-inline-size: 112px; justify-content: center; }
.follow-row__text { min-width: 0; }
.follow-row__name { font: var(--sf-w-bold) 17px/1.25 var(--sf-font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.follow-row__sub { font-size: 14px; color: var(--sf-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.follow-row--mine { grid-template-columns: minmax(0, 1fr) auto; }
.follow-row--mine .follow-row__name { font-weight: var(--sf-w-semi); font-size: var(--sf-text-md); overflow: visible; white-space: normal; overflow-wrap: anywhere; }
.follow-row__pick { display: flex; align-items: center; gap: var(--sf-3); min-block-size: var(--sf-tap); min-width: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: start; touch-action: manipulation; }
.follow-row__pick:focus-visible { outline: 3px solid var(--sf-accent); outline-offset: 2px; }
.follow-row__mark { inline-size: 20px; block-size: 20px; color: var(--sf-ink-3); }
.follow-row__pick[aria-pressed="true"] .follow-row__mark { color: var(--sf-go); }
.follow-row__pick[aria-pressed="true"] .follow-row__name { font-weight: var(--sf-w-bold); }
.follow-sheet__add[hidden] { display: none; }
.follow-empty { padding: var(--sf-6) 16px; text-align: center; color: var(--sf-ink-2); font-weight: var(--sf-w-semi); }
@media (min-width: 600px) {
  .sf-modal.follow-sheet { inline-size: min(480px, 92vw); block-size: min(720px, 90dvh); border-radius: var(--sf-r-md); }
}

/*
 * Tablet and PC (>= 600, no bottom bar). The feed's content is a 1080 box centred in the scroller; padding is 20/24 on
 * a tablet and 28/32 on a PC (>= 1024). Two equal columns from 720 up (below that a column would be under 300px, so
 * 600-719 keeps the phone's single column): LEFT = Live + Last meet, RIGHT = Season + From your coach + This week.
 * The follow chips and the end cap span both. Every cell has min-width 0 so nothing can push the page sideways.
 */
.feed {
  --feed-max: 720px; /* tablet: one column, like the phone */
  --feed-gap: 18px;
  --feed-pad-x: var(--sf-6);
  --feed-pad-y: var(--sf-5);
  --feed-arc-h: 96px;
}

@media (min-width: 600px) {
  .feed {
    gap: var(--feed-gap);
    padding: var(--feed-pad-y) max(var(--feed-pad-x), calc((100% - var(--feed-max)) / 2 + var(--feed-pad-x))) var(--sf-6);
  }
  .feed > * { min-width: 0; }
  .feed-arc__plot { block-size: var(--feed-arc-h); }
  .feed-end { display: flex; justify-content: center; align-items: center; gap: var(--sf-2); padding-block: var(--sf-2) 0; }
  #endCaught { display: flex; flex-direction: row; align-items: center; gap: var(--sf-2); }
}

/* PC (>= 1024): two columns, Today | Last meet side by side, and the team chip moves into the header (before search). */
@media (min-width: 1024px) {
  .feed-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--feed-gap); align-items: start; min-width: 0; }
  .feed-col { display: grid; grid-auto-rows: max-content; gap: var(--feed-gap); align-content: start; min-width: 0; }
  .feed-chiphost--head { display: flex; flex: 0 1 auto; margin-inline-end: var(--sf-2); }
  .feed-labelrow__slot { display: none; }
}

@media (min-width: 1024px) {
  .feed {
    --feed-max: 1080px;
    --feed-gap: var(--sf-6);
    --feed-pad-x: var(--sf-8);
    --feed-pad-y: 28px;
    --feed-arc-h: 140px;
  }
}

/* First visit (the hero is showing): full-width blocks in one column; Latest results is two cards wide. */
@media (min-width: 720px) {
  .feed--first .feed-cols { grid-template-columns: minmax(0, 1fr); }
  .feed--first .feed-col { display: contents; }
  .feed--first .feed-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--feed-gap); align-items: stretch; }
}

/* First visit on a PC: the hero splits into the pitch (left, 44) and the search (right, 52). A tablet keeps it stacked. */
@media (min-width: 1024px) {
  .feed-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sf-8); align-items: center; padding: var(--sf-8); }
  .feed-hero__title { font-size: 44px; }
  .feed-hero__search { min-block-size: 52px; }
}

/* Results card: one team. Head, KPIs, pace change chart, footer 52. */
.feed-rc { container-type: inline-size; display: flex; flex-direction: column; }
.feed-rc .sf-kpi { padding: 12px 10px; }
.feed-rc .sf-kpi__v { font-size: 24px; white-space: nowrap; }
.feed-rc .sf-cardfoot__cell { min-block-size: 52px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-rc__long { display: none; }
@container (min-width: 400px) {
  .feed-rc__long { display: inline; }
  .feed-rc__short { display: none; }
}
.feed-stack { align-items: stretch; }
.feed-stack > .sf-card { display: flex; flex-direction: column; }