/* SharpCast Tip Card — canonical component styles per UI/UX spec v1.1 §12.
   Companion stylesheet to /static/css/tokens.css and /static/css/base.css.
   Six variants share a common .tc base; variant classes layer on top. */

/* ── Common tip-card base ──────────────────────────────────────────── */
.tc {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.tc-vs    { color: var(--text-dim); font-size: 0.85em; font-weight: 400; }
.tc-vs-sm { color: var(--text-dim); font-size: 0.8em; }

.tc-fixture {
  font-family: 'Titillium Web', system-ui, sans-serif;
  font-size: 28px; font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text);
  margin: var(--space-2) 0 var(--space-3);
  line-height: 1.15;
}

.tc-pick-line {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: var(--space-3);
}
.tc-pick-label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
/* SHARPCAST PICK badge — leads every recommended bet across the site so
   the user knows *which* market we back, not just what the probabilities
   are. Per James 2026-05-06: "we need to give them what we think". */
.sc-pick-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent;
  color: var(--brand);
  border: 0;
  padding: 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
}
.sc-pick-badge-img { width: 18px; height: 18px; display: block; flex: none; }
.sc-pick-badge.sc-pick-badge-sm {
  font-size: 8.5px; letter-spacing: .12em; gap: 5px;
}
.sc-pick-badge.sc-pick-badge-sm .sc-pick-badge-img { width: 13px; height: 13px; }
.tc-pick-text {
  font-family: 'Titillium Web', system-ui, sans-serif;
  font-size: 20px; font-weight: 600;
  color: var(--text);
}
/* Demote book odds visually — they're a cross-reference, not the headline.
   Probability + edge stay prominent. */
.tc-kpi.tc-kpi-secondary .tc-kpi-num { font-size: 18px; color: var(--text-muted); font-weight: 500; }
.tc-kpi.tc-kpi-secondary .tc-kpi-lab { color: var(--text-dim); }

.tc-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: var(--space-3) 0;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
}
/* Subtle column dividers between the three KPIs — modern dashboard signature */
.tc-hero .tc-kpis > .tc-kpi:not(:first-child) {
  position: relative;
  padding-left: var(--space-3);
}
.tc-hero .tc-kpis > .tc-kpi:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border), transparent);
}
.tc-kpi { text-align: left; }
.tc-kpi-num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 26px; font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.tc-kpi-num.tc-kpi-pos { color: var(--positive); }
.tc-kpi-num.tc-kpi-neg { color: var(--negative); }
.tc-kpi-lab {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 4px;
}

.tc-stake {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: var(--space-2);
  letter-spacing: .02em;
}
.tc-stake-ret { color: var(--text); }
.tc-stake-pft { color: var(--positive); }

.tc-conviction-row {
  display: flex; gap: var(--space-2); align-items: center;
  margin-top: var(--space-3); flex-wrap: wrap;
}

.tc-head {
  display: flex; align-items: center; gap: var(--space-3);
  flex-wrap: wrap;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .04em;
}
.tc-comp {
  background: var(--bg-elev-2);
  color: var(--text-muted);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tc-kickoff { color: var(--text-dim); }

/* ── Hero variant (v1.3 §5.4 — Today's top pick) ──────────────────────
   Reserved for the marquee position on /picks. Larger padding, display-
   weight pick text, mini data strip showing model %, book odds, edge,
   conviction tier. Watchlist star sits top right (handled by the macro). */
.tc-hero {
  max-width: 720px;
  margin: 0 auto var(--space-3);
  padding: 1.75rem 2rem;
  background: var(--bg-elev);
  background-image:
    radial-gradient(ellipse 70% 90% at 100% 0%, rgba(74,158,255,0.12), transparent 60%),
    radial-gradient(ellipse 60% 70% at 0% 100%, rgba(46,204,113,0.06), transparent 55%),
    var(--grad-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.tc-hero::before {
  /* Hairline highlight along the top edge — premium dark UI signature */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
  pointer-events: none;
}
.tc-hero .tc-fixture {
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* v5.7.219 — Hero crest row. 3-col grid: home crest · match name · away crest.
   Crest geometry mirrors the match-head card on /fixture/<id> (.fh-crest)
   and the row pattern on /picks (.pi-crest), so the visual brand reads
   consistently from / → /picks → /fixture/<id>. Hue is deterministic per
   team via team_crest_hue Jinja filter; initials come from team_initials. */
.tc-hero-fixture-row {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 16px;
  margin: 12px 0 6px;
}
.tc-hero-fixture-row .tc-fixture {
  margin: 0;
  text-align: center;
}
.tc-hero-crest {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: hsl(var(--crest-hue, 200), 60%, 38%);
  color: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Titillium Web', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 6px 14px rgba(0, 0, 0, 0.25);
}
/* v5.7.320 — img variant when a real club logo is cached. Selector
   specificity (img + class) wins over the monogram rules above. */
img.tc-hero-crest {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  object-fit: contain;
  padding: 4px;
}
@media (max-width: 540px) {
  .tc-hero-fixture-row { grid-template-columns: 44px 1fr 44px; gap: 12px; }
  .tc-hero-crest { width: 44px; height: 44px; font-size: 13px; }
  img.tc-hero-crest { padding: 3px; }
}
.tc-hero .tc-pick-text {
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tc-hero .tc-kpi-num {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
@media (max-width: 540px) {
  .tc-hero { padding: var(--space-4) var(--space-4); }
  .tc-hero .tc-fixture { font-size: 1.25rem; }
  .tc-hero .tc-pick-text { font-size: 1.25rem; }
  .tc-kpi-num { font-size: 22px; }
}

/* Build-a-bet sibling card under the Hero. */
.tc-bab {
  max-width: 720px;
  margin: var(--space-2) auto var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, rgba(46,204,113,0.06), rgba(74,158,255,0.04));
  border-color: rgba(46,204,113,0.25);
}
.tc-bab-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); }
.tc-bab-title {
  font-family: 'Titillium Web', system-ui, sans-serif;
  font-size: 18px; font-weight: 400; letter-spacing: .04em; color: var(--text);
}
.tc-bab-sub {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--text-muted); margin-top: 2px;
  letter-spacing: .03em;
}
.tc-bab-legs { display: flex; flex-direction: column; gap: 4px; margin: var(--space-2) 0; }
.tc-bab-leg {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: 14px; color: var(--text);
}
.tc-bab-num {
  flex-shrink: 0; width: 22px; height: 22px; line-height: 22px;
  text-align: center;
  background: var(--bg-elev-2); color: var(--text-muted);
  border-radius: 50%;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 700;
}

.tc-safer {
  max-width: 720px;
  margin: 0 auto var(--space-5);
  padding: var(--space-2) var(--space-4);
  font-size: 12px; color: var(--text-muted);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .02em;
}
.tc-safer-lab { color: var(--text-dim); text-transform: uppercase; font-size: 10px; letter-spacing: .08em; }

/* ── Detail variant ───────────────────────────────────────────────── */
.tc-detail .tc-head { justify-content: flex-start; }
/* v5.7.200 — touch-target bump (WCAG 2.5.5 / iOS HIG ≥ 44×44).
   Visual mark stays 28×28 but the clickable area extends with negative
   margin so the ~44×44 hit zone doesn't push neighbouring layout. */
.tc-star {
  margin-left: auto;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); width: 28px; height: 28px;
  min-width: 44px; min-height: 44px;
  border-radius: var(--radius-sm); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.tc-star.tc-star-on { color: var(--warning); border-color: var(--warning); }
.tc-star:hover { color: var(--warning); border-color: var(--warning); }
.tc-audit {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10.5px; color: var(--text-dim);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  letter-spacing: .03em;
}
.tc-audit code { color: var(--text-muted); }

/* ── Row variant ──────────────────────────────────────────────────── */
.tc-row-link, .tc-compact-link, .tc-mini-link, .tc-settled-link { display: block; text-decoration: none; color: inherit; }
.tc-settled-link:hover .tc-settled { border-color: var(--border-strong); background: var(--bg-elev-2); }

/* v1.3 §14.2 — scroll-restore flash. When the user comes back from a
   fixture detail to the list, the originating card briefly highlights
   so they can re-anchor. */
.sc-scroll-flash > .tc { box-shadow: 0 0 0 2px var(--brand); transition: box-shadow 200ms var(--ease-out); }
.sc-scroll-flash > .tc-row,
.sc-scroll-flash > .tc-settled,
.sc-scroll-flash > .tc-compact,
.sc-scroll-flash > .tc-mini { box-shadow: 0 0 0 2px var(--brand); }
@media (prefers-reduced-motion: reduce) {
  .sc-scroll-flash > .tc-row,
  .sc-scroll-flash > .tc-settled,
  .sc-scroll-flash > .tc-compact,
  .sc-scroll-flash > .tc-mini { box-shadow: none; }
}
/* ── Tip Card Row (v1.3 §5.1-5.3) ───────────────────────────────────────
   Three lines, eight elements. The Row answers exactly one question:
   is this fixture worth clicking into? Stripped of probability, edge
   value, book odds, build-a-bet preview, status pill, conviction badges
   — all of which now live on the fixture-detail SharpCast pick card. */
/* v5.7.216 — pick-item list pattern (per user-provided fixture-detail
   mockup). Replaces the legacy .tc-row layout. Each row is a 3-column
   grid: dual-crest column on the left, content stack in the middle,
   side stack (watchlist star + edge + tier dot + chevron) on the right.
   Crest circles use the same hue-from-name pattern as the match-head
   card on /fixture/<id> so the visual identity reads consistently
   from the list page through to the detail page. */
.pick-item-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.pick-item {
  display: grid;
  /* v5.7.320 — SofaScore-style three-column row: kickoff-time column
     on the left, content stack (comp + two team rows + pick) in the
     middle, edge / conviction / chevron on the right. The time
     column is conditionally rendered (compact + settled variants
     omit it via :not([data-no-time-col])-style overrides below). */
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
}
/* Compact + settled rows don't carry a .pi-time-col, so the grid
   collapses to two columns automatically. The first column then
   holds the .pi-content stack. No CSS needed for that case — the
   browser ignores the missing first track. */
.pi-time-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  padding-right: 8px;
  border-right: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}
.pi-time-hhmm {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
}
.pi-time-date {
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.pick-item-link:hover .pick-item { background: var(--bg-elev, rgba(255, 255, 255, 0.02)); }
.pick-item-link:last-child .pick-item { border-bottom: 0; }
.pi-crest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-family: 'Titillium Web', system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: -0.02em;
  color: #fff;
  background: hsl(var(--crest-hue, 200), 60%, 38%);
  border: 1px solid hsla(var(--crest-hue, 200), 50%, 50%, 0.40);
  user-select: none;
}
/* v5.7.320 — img variant when a real club logo is cached. */
img.pi-crest {
  background: transparent;
  border: none;
  border-radius: 0;
  object-fit: contain;
  padding: 1px;
}
.pi-content { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pi-meta {
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.pi-sep { color: var(--text-dim); margin: 0 4px; }
.pi-comp { color: var(--text-muted); }
/* v5.7.285 — intel chip on row meta. Same colour map as
   .mp-intel-tag-* on /fixture/<id> so the same kind reads the same
   colour on every surface. Only LINEUP is plumbed for the list view
   currently; other kinds need per-fixture API hits. */
.pi-intel {
  display: inline-block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 1px 6px;
  border-radius: 3px;
  vertical-align: 1px;
}
.pi-intel-lineup { background: var(--brand-soft, rgba(47, 240, 214, 0.10)); color: var(--brand, #2ff0d6); }
/* v5.7.320 — SofaScore-style team rows. Two stacked rows, each one
   "[crest] Team Name" reading left to right. Replaces the previous
   single-line "Home vs Away" layout. */
.pi-teams {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0;
  min-width: 0;
}
.pi-team-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pi-team {
  font-family: 'Titillium Web', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* .pi-vs retained for any remaining legacy callers; no longer rendered
   by the row / compact / settled macros after v5.7.320. */
.pi-vs { color: var(--text-dim); font-weight: 400; font-size: 12px; }
.pi-pick {
  font-family: 'Titillium Web', system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--text-muted);
  letter-spacing: 0;
}
/* v5.7.37x — forecast gating is now server-side: non-pro users never
   receive the pick / edge / conviction values in the markup (see
   tip_card_row + the picks route). The old CSS blur left the real data
   in the DOM and was bypassable from the dev console, so it was removed.
   These rules style the locked placeholders the macro renders instead. */
.pi-pick-locked {
  color: var(--brand);
  font-weight: 600;
  letter-spacing: .02em;
}
.pi-pick-locked::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  vertical-align: baseline;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10V8a6 6 0 0 1 12 0v2h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h1zm2 0h8V8a4 4 0 0 0-8 0v2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10V8a6 6 0 0 1 12 0v2h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h1zm2 0h8V8a4 4 0 0 0-8 0v2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pi-conv-locked {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 4px;
  padding: 2px 5px;
  opacity: .85;
}
.pi-pick-num {
  display: inline-block;
  margin-left: 8px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.pi-pick-odds { color: var(--text); font-weight: 500; }
/* v5.7.285 — per-row "why" line, ports the v1.2.2 mp-blurb pattern from
   /fixture/<id> to /picks list rows. Single sentence, dim text, clipped
   to one line so the row height stays predictable on long blurbs. */
.pi-why {
  font-family: 'Titillium Web', system-ui, sans-serif;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-dim);
  margin-top: 4px;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 540px) { .pi-why { display: none; } }
.pi-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.pi-star {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  padding: 12px 6px;
  min-width: 36px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pi-star:hover { color: var(--text-muted); }
.pi-star.on { color: var(--brand); }
.pi-edge {
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 50px;
  text-align: right;
}
.pi-edge.pos { color: var(--positive, #4ADE80); }
.pi-edge.neg { color: var(--bad, #d04d3a); font-weight: 500; }
/* Legacy bare-dot tier indicator. Kept as a fallback for callsites
   that don't supply a numeric conviction score (older tip dicts).
   New tip rows render the .pi-conv pill below instead. */
.pi-tier {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
}
.pi-tier-strong   { background: var(--positive, #4ADE80); }
.pi-tier-healthy  { background: var(--brand); }
.pi-tier-modest   { background: var(--text-muted); }
.pi-tier-slight   { background: var(--text-dim); }

/* v5.7.263 — conviction pill on /picks rows. Mirrors the fixture-page
   .sc-slip-conv-tier vocabulary (number + tier label, mono numerals)
   so the visual identity reads consistently across the listing and
   the detail page. */
.pi-conv {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  cursor: help;
  line-height: 1;
}
.pi-conv-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.pi-conv-tier {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.pi-conv-strong       { background: rgba(74, 222, 128, 0.10); border-color: rgba(74, 222, 128, 0.30); }
.pi-conv-strong  .pi-conv-num,
.pi-conv-strong  .pi-conv-tier { color: var(--positive, #4ADE80); }
.pi-conv-healthy      { background: rgba(47, 240, 214, 0.10); border-color: rgba(47, 240, 214, 0.30); }
.pi-conv-healthy .pi-conv-num,
.pi-conv-healthy .pi-conv-tier { color: var(--brand, #2ff0d6); }
.pi-conv-modest       { background: rgba(255, 255, 255, 0.05); border-color: var(--border); }
.pi-conv-modest  .pi-conv-num   { color: var(--text); }
.pi-conv-modest  .pi-conv-tier  { color: var(--text-muted); }
.pi-conv-slight       { background: rgba(255, 255, 255, 0.03); border-color: var(--border); }
.pi-conv-slight  .pi-conv-num   { color: var(--text-muted); }
.pi-conv-slight  .pi-conv-tier  { color: var(--text-dim); }
.pi-conv-under_review { background: rgba(255, 255, 255, 0.03); border-color: var(--border); opacity: 0.7; }
.pi-conv-under_review .pi-conv-num   { color: var(--text-dim); }
.pi-conv-under_review .pi-conv-tier  { color: var(--text-faint, var(--text-dim)); }
@media (max-width: 540px) {
  .pi-conv { padding: 3px 6px; gap: 4px; }
  .pi-conv-num  { font-size: 12px; }
  .pi-conv-tier { font-size: 8px; letter-spacing: .10em; }
}
.pi-chev {
  font-family: 'Titillium Web', system-ui, sans-serif;
  color: var(--text-faint);
  font-size: 18px;
  line-height: 1;
  transition: color 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}
.pick-item-link:hover .pi-chev {
  color: var(--text-muted);
  transform: translateX(2px);
}
@media (max-width: 540px) {
  .pick-item { gap: var(--space-3); padding: var(--space-3); }
  .pi-match { font-size: 13.5px; }
  .pi-pick { font-size: 12px; }
  .pi-edge { font-size: 12.5px; min-width: 44px; }
}

/* v5.7.219 — settled-variant pick-item (used by tip_card_settled on
   /results, /member dashboard, /competitions/<slug>, /picks past-strip).
   Adds: outcome tinting (subtle left border), final-score chip in meta,
   backed/close/CLV chip row under the pick. The status pill on the right
   carries the dominant W/L visual; the left border is a quieter cue so
   the row scans clean even in a long settled list. */
.pick-item-settled-w     { border-left: 3px solid color-mix(in srgb, var(--positive, #4ADE80) 80%, transparent); }
.pick-item-settled-l     { border-left: 3px solid color-mix(in srgb, var(--bad, #d04d3a) 80%, transparent); }
.pick-item-settled-push  { border-left: 3px solid color-mix(in srgb, var(--text-muted) 60%, transparent); }
.pick-item-settled-link  { display: block; text-decoration: none; color: inherit; }
.pi-final {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pi-settled-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: 4px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-muted);
}
.pi-settled-num { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pi-settled-clv {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.pi-settled-clv.pos { color: var(--positive, #4ADE80); }
.pi-settled-clv.neg { color: var(--bad, #d04d3a); }
.pick-item-settled .pi-side { align-items: flex-end; }

/* Legacy .tc-row preserved for surfaces that still import it (none in
   the active /picks render path; keeping for safety until I sweep). */
.tc-row {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 4px;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s, background 0.15s;
}
.tc-row-link:hover .tc-row { border-color: var(--border-strong); background: var(--bg-elev-2); }

/* Line 1 — kickoff · comp [···································] star */
.tc-row-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.875rem;  /* 14px */
  color: var(--text-muted);
}
.tc-row-time { font-family: var(--font-mono); font-feature-settings: "tnum"; color: var(--text-muted); }
.tc-row-sep  { color: var(--text-dim); }
.tc-row-comp { color: var(--text-muted); }
/* Watchlist star pushed to the right of line 1. v1.3 §5.2 element 4
   makes this required on every row; pre-watchlist-backend it renders
   as a static affordance. */
/* v5.7.200 — touch-target bump (WCAG 2.5.5 / iOS HIG ≥ 44×44).
   Star glyph stays visually small but the clickable button reaches
   minimum-tap-target dimensions via padding. */
.tc-row-star {
  margin-left: auto;
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  padding: 12px 10px;
  min-width: 44px; min-height: 44px;
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tc-row-star:hover { color: var(--text-muted); }
.tc-row-star.on { color: var(--brand); }

/* Line 2 — match (e.g. "Bayern vs PSG"). Display-weight, the visual
   anchor of the row. */
.tc-row-fixture {
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.125rem;  /* 18px */
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
}
.tc-row-fixture .tc-vs-sm {
  color: var(--text-dim);
  font-weight: 400;
  font-size: 0.875rem;
  margin: 0 0.25em;
}

/* Line 3 — pick text [································] tier chip → */
.tc-row-pick {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: 1rem;  /* 16px */
}
.tc-row-pick-text {
  color: var(--text);
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-row-pick-end {
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.tc-row-chevron {
  color: var(--text-dim);
  font-size: 0.875rem;
  line-height: 1;
}

@media (max-width: 540px) {
  .tc-row-fixture { font-size: 1rem; }
  .tc-row-pick { font-size: 0.9375rem; }
}

/* Voting widget CSS removed in v5.7.116 alongside the markup (Phase 8 audit
   v5.7.114 removed the buttons; this drops the now-dead ~40 lines of CSS).
   Spec amendments §7.5: voting buttons are out of scope for v1. The
   picks_votes table and /api/picks/.../vote endpoint remain. Re-enabling
   the UI would restore the macro blocks in tip_card.html plus this CSS. */
.tc-star {
  margin-left: auto;
}
@media (max-width: 540px) {
  .tc-row-meta, .tc-row-pick { font-size: 12.5px; gap: var(--space-2); }
}

/* ── Compact variant ──────────────────────────────────────────────── */
.tc-compact {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  transition: border-color 0.15s, background 0.15s;
}
.tc-compact-link:hover .tc-compact { border-color: var(--border-strong); background: var(--bg-elev-2); }
.tc-compact-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: 4px; }
.tc-compact-comp { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase; }
.tc-compact-kickoff { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; color: var(--text-dim); }
.tc-compact-fixture {
  font-family: 'Titillium Web', system-ui, sans-serif;
  font-size: 16px; font-weight: 600;
  color: var(--text);
  margin: 4px 0;
}
.tc-compact-pick { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: 13px; }
.tc-compact-pick-text { color: var(--text); }
.tc-compact-numbers { display: flex; gap: var(--space-3); align-items: center; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; }
.tc-compact-prob { color: var(--positive); }
.tc-compact-edge.pos { color: var(--warning); }
.tc-compact-edge.neg { color: var(--text-dim); }

/* ── Mini variant ─────────────────────────────────────────────────── */
.tc-mini {
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}
.tc-mini-link:hover .tc-mini { border-color: var(--border-strong); }
.tc-mini-meta { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; color: var(--text-dim); letter-spacing: .08em; text-transform: uppercase; }
.tc-mini-fixture { font-size: 14px; font-weight: 600; color: var(--text); margin: 2px 0; }
.tc-mini-pick { font-size: 12px; color: var(--text-muted); }

/* ── Settled variant ──────────────────────────────────────────────── */
.tc-settled {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
}
.tc-settled-meta { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: var(--text-muted); letter-spacing: .03em; }
.tc-settled-date { color: var(--text-dim); }
.tc-settled-comp { color: var(--text-muted); }
.tc-settled-fixture { color: var(--text); font-family: 'Titillium Web', system-ui, sans-serif; font-size: 14px; font-weight: 600; }
.tc-settled-pick { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; font-size: 13px; }
.tc-settled-pick-text { color: var(--text); }
.tc-settled-num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: var(--text-muted); }
.tc-settled-clv { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; }
.tc-settled-clv.pos { color: var(--positive); }
.tc-settled-clv.neg { color: var(--negative); }