/*
 * Match list + prediction pills for the server-rendered /predictions and match
 * pages. A port of capper_angular's match list (src/styles.scss: LEAGUE GROUPS,
 * MATCH ROW and the .m-actions pill rules, plus shared/provider-icon,
 * capper-icon and alien-icon), so the public pages and /app read as one
 * product. Keep the two in step when the SPA's row or pills change.
 *
 * Everything is scoped under .feed (the list) or .pred-stack (the pills, also
 * used on the match page): landing.css owns bare .predict / .pred-result / .flag
 * for the home-page wall cards.
 */

.feed { margin-top: 8px; }
.feed .sr-only,
.pred-stack .sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============ LEAGUE GROUPS ============ */
.feed .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.feed .group { margin-bottom: 14px; }
.feed .group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  list-style: none;
}
.feed .group-head::-webkit-details-marker { display: none; }
.feed .group:not([open]) .group-head { border-bottom: none; }
.feed .flag {
  width: 19px; height: 14px;
  border-radius: 3px;
  flex: none;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--border);
}
/* Colourful globe for international groups that have no flag — same fallback as the SPA. */
.feed .gicon {
  width: 18px; height: 18px;
  flex: none;
  display: grid; place-items: center;
  font-size: 16px;
  line-height: 1;
}
.feed .group-head .gtitle {
  margin: 0;
  font-size: 13px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3;
}
.feed .group-head .gtitle .region { color: var(--text-2); font-weight: 600; }
.feed .group-head .chev { color: var(--text-3); display: inline-flex; margin-left: auto; transition: transform 0.15s ease; }
.feed .group-head .chev svg { width: 16px; height: 16px; }
.feed .group:not([open]) .chev { transform: rotate(180deg); }
.feed .group-head:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }

/* ============ MATCH ROW ============ */
/* Fixed tracks, not auto, so every row resolves to the same columns and the
   score digits stay on one vertical line; the pill track is a width budget
   widened for the whole list at once (.has-odds / .has-lock). No favourite
   star here, so one track fewer than the SPA row. */
.feed .match {
  display: grid;
  --pred-col: 210px;
  grid-template-columns: 60px minmax(0, 1fr) 30px 30px var(--pred-col);
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  min-height: 60px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.feed .match.has-odds { --pred-col: 236px; }
.feed .match.has-lock { --pred-col: 220px; }
.feed .match:last-child { border-bottom: none; }
.feed .match:hover { background: var(--surface-hover); }

.feed .m-status {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-size: 11px; font-weight: 600;
  color: var(--text-3);
}
.feed .m-status .live-min { color: var(--accent-text); font-weight: 700; }
.feed .m-status .live-min .tick { animation: feed-live-tick 1s steps(1, end) infinite; }
@keyframes feed-live-tick { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .feed .m-status .live-min .tick { animation: none; } }

.feed .m-teams { margin: 0; min-width: 0; font-size: inherit; line-height: normal; }
.feed .m-teams a {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  color: inherit; text-decoration: none;
}
.feed .m-teams a:hover .tname { text-decoration: underline; text-underline-offset: 3px; }
.feed .team { display: flex; align-items: center; gap: 9px; min-width: 0; }
.feed .team .tlogo { width: 18px; height: 18px; object-fit: contain; flex: none; }
.feed .team .tname {
  font-size: 13.5px; font-weight: 500;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feed .team.winner .tname { font-weight: 700; }
/* Red-card badge after the team name: a card-shaped red block, the count only from two up. */
.feed .team .card-red {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 9px; height: 12px; border-radius: 2px; background: #e5383b;
  color: #fff; font-size: 9px; font-weight: 700; line-height: 1;
}

.feed .m-scores,
.feed .m-agg { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.feed .m-score {
  font-size: 14px; font-weight: 700; line-height: 18px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.feed .m-score.dim { color: var(--text-3); font-weight: 600; }
.feed .m-agg .agg { font-size: 12px; color: var(--text-3); line-height: 18px; font-variant-numeric: tabular-nums; }

.feed .m-actions { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }

/* Waiting on a scheduled run, or nothing on this market at all. */
.feed .pred-eta {
  display: inline-flex; align-items: center; gap: 6px;
  height: 25px; padding: 0 11px 0 9px;
  border-radius: 980px;
  border: 1px solid var(--border);
  background: var(--chip);
  color: var(--text-3);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.feed .pred-eta svg { width: 13px; height: 13px; flex: none; }
.feed .pred-none {
  display: inline-flex; align-items: center; justify-content: center;
  height: 25px; min-width: 34px;
  color: var(--text-3);
  font-size: 13px; font-weight: 600;
}

/* ============ PREDICTION STACK ============ */
/* One row per pick: provider avatar(s) + a pill. A 2-column grid so avatars share
   a column and every pill is as wide as the widest one; the alien mark gets an
   implicit third column only on stacks that have one. */
.pred-stack {
  display: grid;
  grid-template-columns: max-content minmax(96px, max-content);
  column-gap: 7px;
  row-gap: 4px;
  align-items: center;
  margin: 0;
  padding: 5px 8px;
  list-style: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.pred-stack .pred-row { display: contents; }
.pred-stack .pred-row > .prov-stack { grid-column: 1; justify-self: end; }

/* Avatar stack: capper ball first, then the capper's own avatar, then everyone
   else, each next one tucked behind by half its width. z-index is inline. */
.pred-stack .prov-stack { display: flex; align-items: center; }
.pred-stack .prov-stack > .prov-host,
.pred-stack .prov-stack > .stack-capper,
.pred-stack .prov-stack > .prov-more { position: relative; }
.pred-stack .prov-stack > .prov-host + .prov-host,
.pred-stack .prov-stack > .stack-capper + .prov-host,
.pred-stack .prov-stack > .prov-host + .prov-more {
  margin-left: calc(var(--prov-size, 20px) * -0.5);
}
.pred-stack .prov-host { display: inline-flex; flex: none; }
.pred-stack .prov-stack.multi > .prov-host.ring .prov-icon,
.pred-stack .stack-capper .capper-icon {
  box-shadow: 0 0 0 1px var(--border), 0 0 0 2.5px var(--surface-2);
}

/* Provider disc (shared/provider-icon). */
:is(.pred-stack, .ptable) .prov-icon {
  width: var(--prov-size, 20px);
  height: var(--prov-size, 20px);
  flex: none;
  border-radius: 50%;
  background: #fff;
  padding: 3px;
  box-sizing: border-box;
  box-shadow: 0 0 0 1px var(--border);
  display: grid;
  place-items: center;
}
:is(.pred-stack, .ptable) .prov-icon-img { width: 100%; height: 100%; object-fit: contain; display: block; }
:is(.pred-stack, .ptable) .prov-icon--openai { padding: 3.5px; color: #0d0d0d; }
:is(.pred-stack, .ptable) .prov-icon--anthropic { background: #d97757; color: #fff; }
:is(.pred-stack, .ptable) .prov-icon--anthropic img.prov-icon-img { filter: brightness(0) invert(1); }
:is(.pred-stack, .ptable) .prov-icon--google { background: #1f2038; color: #a8b4ff; padding: 4px; }
:is(.pred-stack, .ptable) .prov-icon--ph { padding: 0; background: hsl(var(--prov-hue) 55% 45%); color: #fff; }
:is(.pred-stack, .ptable) .prov-icon--blank { background: transparent; box-shadow: none; }
:is(.pred-stack, .ptable) .prov-icon-initial {
  font-size: calc(var(--prov-size, 20px) * 0.55);
  font-weight: 700; line-height: 1; letter-spacing: 0;
  user-select: none;
}
:is(.pred-stack, .ptable) .prov-icon--avatar { padding: 0; overflow: hidden; background: var(--surface); }
:is(.pred-stack, .ptable) .prov-icon--avatar .prov-icon-img { object-fit: cover; border-radius: 50%; }

/* Capper mark (shared/capper-icon): the brand ball as one more stack member. */
.pred-stack .stack-capper { display: inline-flex; flex: none; }
:is(.pred-stack, .ptable) .capper-icon {
  width: var(--prov-size, 20px);
  height: var(--prov-size, 20px);
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  box-sizing: border-box;
  background: #abca23;
  display: block;
}
:is(.pred-stack, .ptable) .capper-icon-img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.34); }

/* "+N" bubble closing a folded stack — phones only (see the 560px block). */
.pred-stack .prov-more {
  display: none;
  align-items: center; justify-content: flex-end;
  box-sizing: border-box;
  height: var(--prov-size, 20px);
  min-width: calc(var(--prov-size, 20px) + 4px);
  padding: 0 3px 0 calc(var(--prov-size, 20px) * 0.5 + 2px);
  border-radius: 999px;
  background: var(--surface-hover);
  box-shadow: 0 0 0 1px var(--border) inset;
  color: var(--text-2);
  font-size: calc(var(--prov-size, 20px) * 0.5);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  z-index: 0;
}

/* Pills. Every rule restates the box so landing.css's larger wall-card pills never leak in. */
.pred-stack .predict,
.pred-stack .pred-result,
.pred-stack .pred-locked {
  grid-column: 2 / 4;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: inline-flex; align-items: center; gap: 6px;
  height: 25px; padding: 0 11px 0 9px;
  border-radius: 980px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
.pred-stack .predict.alien,
.pred-stack .pred-result.alien { grid-column: 2; }
.pred-stack .pred-row > .alien-ic { grid-column: 3; }
.pred-stack .predict > svg,
.pred-stack .pred-result > svg,
.pred-stack .pred-locked > svg { width: 13px; height: 13px; flex: none; }
.pred-stack .ou-label { flex: none; white-space: nowrap; }
.pred-stack .odd {
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
  padding-left: 6px;
  margin-left: auto;
  border-left: 2px solid color-mix(in srgb, currentColor, transparent 65%);
}

/* Pending pick — the neon AI pill. */
.pred-stack .predict {
  border: 1px solid color-mix(in srgb, var(--accent), transparent 60%);
  background: color-mix(in srgb, var(--accent), transparent 88%);
  color: var(--accent-text);
}
:root[data-theme="light"] .pred-stack .predict {
  background: color-mix(in srgb, var(--accent), white 52%);
  border-color: color-mix(in srgb, var(--accent), black 14%);
  color: color-mix(in srgb, var(--accent), black 58%);
}

/* Settled: green won, red lost, grey push (stake returned). */
.pred-stack .pred-result { border: 1px solid transparent; }
.pred-stack .pred-result.hit {
  background: color-mix(in srgb, #30d158, transparent 87%);
  border-color: color-mix(in srgb, #30d158, transparent 62%);
  color: var(--good);
}
.pred-stack .pred-result.miss {
  background: color-mix(in srgb, #ff3b30, transparent 88%);
  border-color: color-mix(in srgb, #ff3b30, transparent 64%);
  color: var(--bad);
}
.pred-stack .pred-result.push {
  background: color-mix(in srgb, #8e8e93, transparent 86%);
  border-color: color-mix(in srgb, #8e8e93, transparent 60%);
  color: var(--text-2);
}

/* Locked paid pick — dashed teaser linking to the pricing page. */
.pred-stack .pred-locked {
  border: 1px dashed var(--border-strong);
  background: var(--surface);
  color: var(--text-3);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.pred-stack .pred-locked .odd { color: var(--accent-text); opacity: 1; }
.pred-stack .pred-locked:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent), transparent 40%);
  background: color-mix(in srgb, var(--accent), transparent 90%);
}
.pred-stack .pred-locked:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

/* Alien — the capper's exact bet shared by 2+ others: the floating head outside the pill. */
.pred-stack .alien-ic {
  --alien-size: 13px;
  display: inline-flex;
  color: var(--text);
  animation: feed-alien-float 2s ease-in-out infinite;
}
:is(.pred-stack, .ptable) .alien-svg { width: var(--alien-size); height: var(--alien-size); display: block; }
@keyframes feed-alien-float {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--text), transparent 55%)); }
  50% { transform: translateY(-1.5px); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--text), transparent 20%)); }
}
@media (prefers-reduced-motion: reduce) {
  .pred-stack .alien-ic { animation: none; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--text), transparent 40%)); }
}

/* ============ PROFIT BY DAY ============ */
/* Port of capper_angular's rail day-profit card + shared/profit-table (dense
   variant), open above the league cards. Keep in step with the SPA. */
.feed .day-profit .dp-pin {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 2px 8px;
  white-space: nowrap;
}
.feed .day-profit .dp-pin + .chev { margin-left: 0; }
.feed .day-profit .dp-state { margin: 0; padding: 16px; font-size: 12px; color: var(--text-3); }
/* The table scrolls sideways on phones; the sticky Model column keeps rows attributable. */
.ptable-wrap { overflow-x: auto; }
.ptable {
  width: 100%;
  border-collapse: collapse;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
  font-size: 12.5px;
}
.ptable th { color: var(--text-3); font-weight: 500; border-bottom: 1px solid var(--border); padding: 7px 8px; }
.ptable td { padding: 8px; color: var(--text-2); border-bottom: 1px solid var(--border); }
.ptable tbody tr:last-child > * { border-bottom: none; }
.ptable .c-model {
  text-align: left;
  padding-left: 16px;
  white-space: nowrap;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
}
.ptable tbody .c-model { color: var(--text); font-weight: 400; vertical-align: middle; }
.ptable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptable tr > :last-child { padding-right: 16px; }
.ptable .prov-cell { --prov-size: 18px; --alien-size: 18px; display: inline-flex; margin-right: 8px; vertical-align: middle; }
.ptable .model-name { font-size: 12px; color: var(--text-2); vertical-align: middle; }
.ptable .alien-ic { color: var(--text); animation: feed-alien-float 2s ease-in-out infinite; }
.ptable .alien-name { color: var(--accent-text); font-weight: 700; letter-spacing: 0.02em; }
@media (prefers-reduced-motion: reduce) { .ptable .alien-ic { animation: none; } }
/* A model in profit reads green off its % cell — the only figure everyone sees. */
.ptable td.c-pct.pos { color: var(--good); font-weight: 500; }
.ptable td.c-profit,
.ptable td.c-roi { font-weight: 500; }
.ptable td.c-profit.pos,
.ptable td.c-roi.pos { color: var(--good); }
.ptable td.c-profit.neg,
.ptable td.c-roi.neg { color: var(--bad); }

/* ============ PHONE ============ */
/* Same one-row phone layout as the SPA: tighter tracks, smaller type, and a stack
   of 3+ backers folds to two avatars plus a "+N" bubble (PredictionGroups::MAX_STACK_AVATARS). */
@media (max-width: 560px) {
  .ptable { font-size: 11.5px; }
  .ptable th, .ptable td { padding: 6px 5px; }
  .ptable .c-model { padding-left: 10px; }
  .ptable tr > :last-child { padding-right: 10px; }
  .ptable .prov-cell { --prov-size: 14px; --alien-size: 14px; margin-right: 6px; }
  .ptable .model-name { font-size: 11px; }
  .feed .group { margin-bottom: 10px; }
  .feed .group-head { padding: 9px 10px; gap: 8px; }
  .feed .group-head .gtitle { font-size: 12px; }
  .feed .group-head .chev svg { width: 14px; height: 14px; }
  .feed .flag { width: 17px; height: 13px; }

  .feed .match {
    --pred-col: 164px;
    grid-template-columns: 30px minmax(0, 1fr) 18px 14px var(--pred-col);
    gap: 2px;
    padding: 2px 8px;
    min-height: 52px;
  }
  .feed .match.has-odds { --pred-col: 197px; }
  .feed .match.has-lock { --pred-col: 178px; }
  .feed .m-status { font-size: 10.5px; align-items: center; }
  .feed .m-teams { margin-left: 4px; }
  .feed .m-teams a { gap: 4px; }
  .feed .team { gap: 6px; }
  .feed .team .tlogo { width: 16px; height: 16px; }
  .feed .team .tname { font-size: 12.5px; }
  .feed .team .card-red { display: none; }
  .feed .m-scores, .feed .m-agg { gap: 4px; }
  .feed .m-score { font-size: 13px; line-height: 16px; }
  .feed .m-agg .agg { font-size: 11px; line-height: 16px; }
  .feed .pred-eta { height: 22px; padding: 0 6px; gap: 4px; font-size: 10px; }
  .feed .pred-eta svg { width: 11px; height: 11px; }

  .pred-stack {
    grid-template-columns: max-content minmax(72px, max-content);
    column-gap: 4px;
    row-gap: 3px;
    padding: 4px;
    border-radius: 9px;
    --prov-size: 16px;
  }
  .pred-stack .prov-stack > .prov-host.folded { display: none; }
  .pred-stack .prov-stack > .prov-more { display: inline-flex; }
  .pred-stack .predict,
  .pred-stack .pred-result,
  .pred-stack .pred-locked { height: 22px; padding: 0 6px; gap: 4px; font-size: 10px; }
  .pred-stack .predict > svg,
  .pred-stack .pred-result > svg,
  .pred-stack .pred-locked > svg { width: 11px; height: 11px; }
  .pred-stack .alien-ic { --alien-size: 10px; }
  .pred-stack .odd { padding-left: 3px; }
}

@media (max-width: 400px) {
  .feed .match { padding: 2px 6px; gap: 2px; --pred-col: 155px; }
  .feed .match.has-odds { --pred-col: 187px; }
  .feed .match.has-lock { --pred-col: 168px; }
  .feed .team { gap: 5px; }
  .feed .team .tlogo { width: 15px; height: 15px; }
  .feed .team .tname { font-size: 12px; }
  .pred-stack { padding: 3px; --prov-size: 15px; }
  .pred-stack .predict,
  .pred-stack .pred-result,
  .pred-stack .pred-locked,
  .feed .pred-eta { padding: 0 5px; font-size: 9.5px; }
}