/* CuratedBets — /mlb/today "Compact Card Grid" (design variant 1a).
   Built on the shared public design tokens already defined in public-brand.css
   (the same token set the prototype was designed against). Component-scoped:
   every selector is prefixed cb-board-* / cb-mc-* / cb-statstrip-* / cb-filter-*
   so it never collides with the rest of the public stylesheet. */

/* ---------------------------------------------------------------- header */
.cb-board-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:22px; margin:0 0 26px;
}
.cb-board-head-text{min-width:0;}
.cb-board-eyebrow-row{display:flex; align-items:center; gap:9px; margin-bottom:10px; flex-wrap:wrap;}
.cb-board-eyebrow{
  font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-strong);
}
.cb-live-pill{
  display:inline-flex; align-items:center; gap:6px; height:21px; padding:0 9px;
  border-radius:var(--radius-pill); background:var(--cb-positive-soft); color:var(--cb-positive);
  font-family:var(--font-display); font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
}
.cb-live-dot{width:6px; height:6px; border-radius:50%; background:var(--cb-positive);}
.cb-board-h1{
  margin:0 0 8px; font-family:var(--font-display); font-weight:800; font-size:33px;
  line-height:1.03; letter-spacing:-0.025em; color:var(--text-strong);
}
.cb-board-sub{margin:0 0 8px; max-width:580px; font-family:var(--font-text); font-size:14px; line-height:1.5; color:var(--text-muted);}
.cb-board-head .cb-compliance-note{margin:0; max-width:580px; font-family:var(--font-text); font-size:11.5px; line-height:1.5; color:var(--text-faint);}

/* frosted glass stat strip */
.cb-statstrip{
  display:flex; align-items:center; padding:14px 8px; flex:none;
  background:var(--surface-glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--border-hairline); border-radius:16px; box-shadow:var(--shadow-sm);
}
.cb-statstrip-item{display:flex; flex-direction:column; gap:3px; padding:0 17px;}
.cb-statstrip-item + .cb-statstrip-item{border-left:1px solid var(--border-hairline);}
.cb-statstrip-num{font-family:var(--font-display); font-weight:800; font-size:24px; line-height:1; letter-spacing:-0.02em; color:var(--text-strong); font-variant-numeric:tabular-nums;}
.cb-statstrip-num.is-accent{color:var(--accent-strong);}
.cb-statstrip-label{font-family:var(--font-display); font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); white-space:nowrap;}
.cb-statstrip-clock{display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--text-body); white-space:nowrap;}
.cb-statstrip-clock .cb-i{width:13px; height:13px; color:var(--text-faint);}

/* --------------------------------------------------------------- controls */
.cb-board-controls{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin:0 0 18px;}
.cb-filter-chips{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.cb-filter-chip{
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 13px;
  border-radius:var(--radius-pill); border:1px solid var(--border-soft); background:var(--surface-raised);
  box-shadow:var(--shadow-xs); font-family:var(--font-text); font-size:12.5px; font-weight:700;
  letter-spacing:.01em; color:var(--text-body); white-space:nowrap; cursor:pointer;
  transition:background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.cb-filter-chip:hover{border-color:var(--border-strong);}
.cb-filter-chip .cb-i{width:14px; height:14px;}
.cb-filter-count{
  font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--text-faint);
  background:var(--surface-sunken); border-radius:var(--radius-pill); padding:1px 6px; min-width:18px; text-align:center;
}
.cb-filter-chip.is-active{color:#fff; background:var(--accent-strong); border-color:transparent; box-shadow:var(--shadow-sm);}
.cb-filter-chip.is-active .cb-filter-count{color:#fff; background:rgba(255,255,255,0.22);}

.cb-sort{display:flex; align-items:center; gap:9px;}
.cb-sort-label{font-family:var(--font-display); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted);}
.cb-sort-select-wrap{position:relative; display:inline-flex; align-items:center;}
.cb-sort-select{
  appearance:none; -webkit-appearance:none; height:34px; padding:0 32px 0 14px;
  border-radius:var(--radius-pill); border:1px solid var(--border-soft); background:var(--surface-raised);
  box-shadow:var(--shadow-xs); font-family:var(--font-text); font-size:12.5px; font-weight:700; color:var(--text-strong); cursor:pointer;
}
.cb-sort-select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--cb-blue-50);}
.cb-sort-select-wrap .cb-i{position:absolute; right:11px; width:15px; height:15px; color:var(--text-muted); pointer-events:none;}

/* ------------------------------------------------------------------- grid */
.cb-board-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(342px,1fr)); gap:14px;}
.cb-board-empty-filter{margin:18px 0 0; text-align:center; font-family:var(--font-text); font-size:13.5px; color:var(--text-muted);}

/* ------------------------------------------------------------ matchup card */
.cb-mc{
  position:relative; display:flex; flex-direction:column; background:var(--surface-raised);
  border:1px solid var(--border-hairline); border-radius:18px; box-shadow:var(--shadow-md);
  padding:15px 17px 14px 19px; cursor:pointer;
  transition:transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s cubic-bezier(.22,.61,.36,1);
}
.cb-mc:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.cb-mc-cover{position:absolute; inset:0; z-index:1; border-radius:18px;}
.cb-mc-cover:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.cb-mc-stripe{position:absolute; left:0; top:15px; bottom:15px; width:3px; border-radius:0 3px 3px 0; background:var(--border-strong);}
.cb-mc[data-att="Monitor"] .cb-mc-stripe{background:var(--cb-info);}
.cb-mc[data-att="Active"] .cb-mc-stripe{background:var(--cb-blue-400);}
.cb-mc[data-att="High Signal"] .cb-mc-stripe{background:var(--accent-strong);}

.cb-mc-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.cb-mc-teams{display:flex; flex-direction:column; gap:7px; min-width:0;}
.cb-mc-team{display:flex; align-items:center; gap:9px; min-width:0;}
.cb-mc-roundel{
  width:32px; height:32px; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-display); font-weight:800; font-size:10.5px; letter-spacing:.01em;
  border:2px solid #fff; box-shadow:0 1px 3px rgba(15,34,56,.22), 0 0 0 1px var(--border-hairline);
}
.cb-mc-abbr{font-family:var(--font-display); font-weight:800; font-size:15px; letter-spacing:.01em; color:var(--text-strong); min-width:34px;}
.cb-mc-pitcher{font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.cb-mc-status{display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none;}
.cb-mc-time{font-family:var(--font-mono); font-size:11.5px; font-weight:600; color:var(--text-body); white-space:nowrap;}
.cb-mc-time.is-live{color:var(--cb-positive);}
.cb-mc-time.is-halted{font-family:var(--font-text); color:var(--text-faint);}
.cb-mc-score{font-family:var(--font-mono); font-size:12.5px; font-weight:700; color:var(--text-strong); white-space:nowrap;}
.cb-mc-lineup{font-family:var(--font-text); font-size:10px; font-weight:600; color:var(--text-faint); white-space:nowrap;}
.cb-mc-lineup.is-confirmed{color:var(--cb-positive);}
.cb-mc-att{display:flex; align-items:center; gap:7px; margin-top:1px;}
.cb-mc-bars{display:flex; align-items:flex-end; gap:2px; height:14px;}
.cb-mc-bars i{width:3px; border-radius:2px; background:var(--cb-gray-200); align-self:flex-end;}
.cb-mc-bars i:nth-child(1){height:5px;} .cb-mc-bars i:nth-child(2){height:7px;}
.cb-mc-bars i:nth-child(3){height:9px;} .cb-mc-bars i:nth-child(4){height:11.5px;}
.cb-mc-bars i:nth-child(5){height:14px;}
.cb-mc-bars i.is-lit{background:var(--accent-strong);}
.cb-mc[data-att="Quiet"] .cb-mc-bars i.is-lit{background:var(--cb-gray-400);}
.cb-mc-badge{
  display:inline-flex; align-items:center; height:21px; padding:0 9px; border-radius:6px;
  font-family:var(--font-display); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap; color:var(--text-muted); background:var(--surface-sunken); border:1px solid var(--border-soft);
}
.cb-mc[data-att="Monitor"] .cb-mc-badge{color:var(--cb-info); background:var(--cb-info-soft); border-color:transparent;}
.cb-mc[data-att="Active"] .cb-mc-badge{color:#fff; background:var(--cb-blue-400); border-color:transparent;}
.cb-mc[data-att="High Signal"] .cb-mc-badge{color:#fff; background:var(--accent-strong); border-color:transparent; box-shadow:0 3px 10px rgba(46,139,255,.34);}

/* metric columns */
.cb-mc-metrics{position:relative; display:flex; margin:14px 0 2px; padding-top:13px; border-top:1px solid var(--border-hairline);}
.cb-mc-col{flex:1; display:flex; flex-direction:column; gap:9px; min-width:0;}
.cb-mc-col-sig{padding-right:10px;}
.cb-mc-col-prop{padding-left:14px; border-left:1px solid var(--border-hairline);}
.cb-mc-col-head{display:flex; align-items:center; gap:10px;}
.cb-mc-headnums{display:flex; flex-direction:column; gap:2px; min-width:0;}
.cb-mc-num{font-family:var(--font-display); font-weight:800; font-size:21px; line-height:1; letter-spacing:-0.02em; color:var(--text-strong); font-variant-numeric:tabular-nums;}
.cb-mc-collabel{font-family:var(--font-display); font-size:8.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; line-height:1.25; color:var(--text-muted);}
/* Player/context breakdown under the Total Signals headline number, e.g.
   "14 Player · 4 Context" — a single muted line, never the raw signal text. */
.cb-mc-sigbreak{font-family:var(--font-text); font-size:11px; font-weight:600; color:var(--text-muted);}
/* Prop Mentions supporting summary, e.g. "8 players · 10 unique props". */
.cb-mc-propsum{font-family:var(--font-text); font-size:11px; font-weight:600; color:var(--text-muted);}

.cb-mc-players{display:flex; flex-direction:column;}
.cb-mc-prow{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:3px 7px; margin:0 -7px; border-radius:7px; cursor:pointer; text-decoration:none;
  transition:background .12s ease;
}
a.cb-mc-prow:hover{background:var(--surface-sunken);}
.cb-mc-pname{font-family:var(--font-text); font-size:12px; font-weight:600; color:var(--text-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1 1 auto;}
.cb-mc-pcount{font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--accent-strong); flex:none;}
.cb-mc-col-empty{font-family:var(--font-text); font-size:11.5px; color:var(--text-faint); padding:3px 7px;}

/* Signposts that the full signal list lives on Game Intelligence, not on this
   compact card. Plain text, not a link — the whole card (.cb-mc-cover) is
   already the click target that opens that page. */
.cb-mc-viewlink{display:block; margin-top:8px; font-family:var(--font-text); font-size:11px; font-weight:700; color:var(--accent-strong); text-align:right;}

/* 3D animated metric coins (placeholder logo glyphs) */
.cb-coin-wrap{width:26px; height:26px; flex:none; perspective:240px; display:inline-block;}
.cb-coin{
  position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  border-radius:8px; color:#fff; transform-style:preserve-3d; will-change:transform;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5), 0 3px 8px rgba(46,139,255,.4);
  animation:cbCoinTilt 3.6s ease-in-out infinite;
}
.cb-coin .cb-i{width:14px; height:14px;}
.cb-coin-sig{background:linear-gradient(150deg, var(--cb-blue-400), var(--cb-blue-600));}
.cb-coin-prop{background:linear-gradient(150deg, var(--cb-blue-300), var(--cb-blue-500)); animation-delay:-2.4s;}
@keyframes cbCoinTilt{
  0%{transform:rotateX(14deg) rotateY(-34deg);}
  50%{transform:rotateX(14deg) rotateY(34deg);}
  100%{transform:rotateX(14deg) rotateY(-34deg);}
}
@media (prefers-reduced-motion: reduce){
  .cb-coin{animation:none; transform:rotateX(14deg);}
  .cb-mc{transition:none;}
}

/* --------------------------------------------------------------- responsive */
/* Stat-strip keep-priority (highest first): Prop Mentions > Unique Props > Games
   > Players Mentioned > Sources Counted > Updated. The lower-priority stats sit
   at the DOM tail and drop from the end so the top three never hide: Sources
   Counted + Updated (--optional) go first at <=900px, then Players Mentioned
   (--optional-sm) at <=640px. Prop Mentions / Unique Props / Games always stay. */
@media (max-width:900px){
  .cb-statstrip-item--optional{display:none;}
}
@media (max-width:640px){
  .cb-board-head{gap:16px;}
  .cb-board-h1{font-size:28px;}
  .cb-statstrip{width:100%; justify-content:space-between;}
  .cb-statstrip-item{padding:0 12px;}
  .cb-statstrip-item--optional-sm{display:none;}
}