/* The Popular landing of the /sports-odds/ desk (#510, owner-approved mockup variant A): a Trending now carousel, then one block per top
   sport. A thin layer on sports-odds-v2.css (scope .crx.sov, prefix .pop-), house tokens only. Cards and rows reuse the desk's own pieces
   (.sov-fx-when, .sov-fx-teams, .sov-team, .sov-crest, .sov-fx-prices, .sov-price, .sov-share-btn); a card's and a block row's prices are
   named outcome tiles (#543, #566, .pop-tile: the tile's button is the desk's .sov-price slip toggle, its bottom edge the casino's link). The live
   marker is the desk's own (cds_sov_when / whenHTML: the #537 LIVE pill), so a restyle reaches it; no card or row carries a left bar. */

/* ---------- Popular sits on the landing: the per-sport controls step aside (the market and league menus, the margins card, Show more) ---------- */
.crx.sov.is-popular .sov-select:has(#sovMarket), .crx.sov.is-popular .sov-league, .crx.sov.is-popular #sovMargins, .crx.sov.is-popular #sovMore { display:none; }
/* No status line on Popular (owner, 2026-09-26): the empty live region leaves the layout but stays in the accessibility tree */
.crx.sov.is-popular .sov-status-row .sov-status:empty { position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.crx.sov.is-popular .sov-status-row { margin:0; }
/* No legend row ("best price · tap a price to add it to the slip") on Popular (owner, 2026-09-26); the sport views keep it */
.crx.sov.is-popular #sovLegend { display:none; }

/* ---------- section heads ---------- */
.crx.sov .sov-pop { display:grid;gap:0;min-width:0; }
.crx.sov .pop-sec-head { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 16px;margin:6px 0 12px; }
.crx.sov .pop-sec-gap { margin-top:28px; }
.crx.sov .pop-sec-title { display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;min-width:0; }
.crx.sov .pop-sec-title h2 { margin:0;font-family:var(--font-display,"Sora","Inter",sans-serif);font-size:19px;font-weight:800;letter-spacing:-.015em;color:#fff; }
.crx.sov .pop-sec-ico { display:inline-grid;width:22px;height:22px;color:var(--hi,#A78BFA);flex:0 0 auto; }
.crx.sov .pop-sec-ico svg, .crx.sov .pop-glyph svg, .crx.sov .pop-block-ico svg { display:block;width:100%;height:100%; }
.crx.sov .pop-count { font-size:12.5px;color:var(--ink-4); }
.crx.sov .pop-arrows { display:inline-flex;gap:6px; }
.crx.sov .pop-arrow { width:36px;height:36px;min-height:0;padding:0 0 2px;border-radius:999px;border:1px solid var(--hair-2);background:var(--card);color:var(--ink-2);font-size:22px;line-height:1;display:grid;place-items:center;cursor:pointer;transition:color .15s,background .15s,opacity .15s; }
.crx.sov .pop-arrow:hover:not(:disabled) { color:#fff;background:var(--card-2); }
.crx.sov .pop-arrow:disabled { opacity:.35;cursor:default; }
.crx.sov .pop-arrow:focus-visible { outline:2px solid var(--mid);outline-offset:2px; }
@media (hover:none) { .crx.sov .pop-arrows { display:none; } }

/* ---------- competition line ---------- */
.crx.sov .pop-comp { display:inline-flex;align-items:center;gap:7px;min-width:0;font-size:12.5px;color:var(--ink-3); }
.crx.sov .pop-comp b { font-weight:700;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0; }
.crx.sov .pop-glyph { display:inline-grid;width:15px;height:15px;flex:0 0 auto;color:var(--ink-3); }
.crx.sov .pop-where { display:inline-flex;align-items:center;gap:5px;white-space:nowrap;color:var(--ink-4);flex:0 0 auto; }
.crx.sov .pop-where::before { content:'·';margin-right:1px; }
.crx.sov .pop-where .sov-flag, .crx.sov .pop-block-comp .sov-flag { display:inline-block;width:16px;border-radius:2px; }

/* ---------- when: the desk's live marker or kick-off + countdown ---------- */
.crx.sov .pop-when { font-size:12.5px;color:var(--ink-3); }

/* ---------- Trending: a carousel of cards; swipes on touch, arrows with a pointer ---------- */
.crx.sov .pop-trend { margin-bottom:6px;min-width:0; }
.crx.sov .pop-rail { display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 24px) / 3);gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:2px;margin:0 -2px; }
.crx.sov .pop-rail::-webkit-scrollbar { display:none; }
.crx.sov .pop-rail:focus-visible { outline:2px solid var(--mid);outline-offset:4px;border-radius:14px; }
.crx.sov .pop-card { scroll-snap-align:start;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;gap:10px;margin:0;padding:13px 14px 11px;min-width:0;cursor:pointer; }
.crx.sov .pop-card-top { display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;cursor:default; }
.crx.sov .pop-card .pop-when { display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0; }
.crx.sov .pop-card .pop-when time { font-weight:600;color:var(--ink-2); }
.crx.sov .pop-card-teams { gap:7px; }
.crx.sov .pop-card .sov-team { font-size:15px; }
.crx.sov .pop-card .sov-fx-prices { align-self:end;cursor:default; }
.crx.sov .pop-card-foot { display:flex;align-items:center;gap:12px;padding-top:9px;border-top:1px solid var(--hair);font-size:11.5px;color:var(--ink-4);white-space:nowrap;cursor:default; }
.crx.sov .pop-card-foot > * { flex:0 0 auto; }
.crx.sov .pop-card-foot b, .crx.sov .pop-row-meta b { color:var(--ink-2);font-weight:700; }
.crx.sov .pop-card-foot > .pop-mkt { flex:0 1 auto;margin-left:auto;color:var(--ink-4);overflow:hidden;text-overflow:ellipsis;min-width:0; } /* one line, so every card's prices sit level */

/* ---------- Top sports right now: one full-width block per sport ---------- */
.crx.sov .pop-blocks { display:grid;gap:12px;min-width:0; }
.crx.sov .pop-block { margin:0;padding:0;overflow:hidden;min-width:0;container-type:inline-size; }
.crx.sov .pop-block-head { display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--hair); }
.crx.sov .pop-block-ico { width:40px;height:40px;border-radius:11px;display:grid;place-items:center;padding:9px;background:var(--card-2);border:1px solid var(--hair);color:var(--ink-2); }
.crx.sov .pop-block-name { display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;min-width:0; }
.crx.sov .pop-block-name h3 { margin:0;font-family:var(--font-display,"Sora","Inter",sans-serif);font-size:16px;font-weight:800;letter-spacing:-.01em;color:#fff; }
.crx.sov .pop-block-live { font-size:11.5px;font-weight:700;color:var(--up,#2ED47F); }
.crx.sov .pop-block-comp { flex-basis:100%;display:flex;align-items:center;gap:6px;min-width:0;font-size:12.5px;color:var(--ink-3);white-space:nowrap; }
.crx.sov .pop-block-comp b { flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2);font-weight:700; }
.crx.sov .pop-block-comp .pop-where { flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis; }
.crx.sov .pop-dim { flex:0 1 auto;min-width:0;color:var(--ink-4);overflow:hidden;text-overflow:ellipsis; }
.crx.sov .pop-dim::before { content:'· '; }
.crx.sov .pop-more { font-size:12.5px;font-weight:700;color:var(--mid);text-decoration:none;white-space:nowrap; }
.crx.sov .pop-more:hover { color:#fff;text-decoration:none; }
.crx.sov .pop-more:focus-visible { outline:2px solid var(--mid);outline-offset:3px;border-radius:6px; }
/* #543: the market the rows are priced on, named once in the header: a chip beside the competition on a narrow block; on a wide one a column
   head on the rows' own grid, centred over the tiles, so the competition line keeps the header's full width */
.crx.sov .pop-block-chip { display:inline-flex;align-items:center;flex:0 0 auto;height:19px;padding:0 6px;border-radius:5px;border:1px solid var(--hair-2);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap; }
.crx.sov .pop-block-cols { display:none; }
.crx.sov .pop-block-mkt { grid-column:3;justify-self:center;min-width:0;max-width:100%;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

/* ---------- a compact match row, sized by its block (container), not the viewport ---------- */
.crx.sov .pop-rows { display:grid;container-type:inline-size;min-width:0; }
.crx.sov .pop-row { display:grid;grid-template-columns:128px minmax(170px,1fr) minmax(0,552px) 84px;grid-template-areas:"when teams prices meta";align-items:center;gap:6px 14px;padding:10px 16px;border-top:1px solid var(--hair);cursor:pointer; }
.crx.sov .pop-rows>.pop-row:first-child { border-top:0; }
.crx.sov .pop-row.has-comp { grid-template-areas:"comp comp comp comp" "when teams prices meta"; }
.crx.sov .pop-row-comp { grid-area:comp;min-width:0;display:flex; }
.crx.sov .pop-row .pop-when { grid-area:when;display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:3px 6px;font-size:12px;min-width:0; }
.crx.sov .pop-row .pop-when time { flex-basis:100%;font-weight:600;color:var(--ink-2);white-space:nowrap; }
.crx.sov .pop-row .pop-when .sov-sep { display:none; }
.crx.sov .pop-row-teams { grid-area:teams; }
.crx.sov .pop-row .sov-team { font-size:14px; }
.crx.sov .pop-row .sov-crest { width:20px;height:20px;font-size:10px; }
.crx.sov .pop-row .pop-tiles { grid-area:prices;grid-auto-columns:minmax(0,1fr);align-items:stretch;gap:8px;cursor:default; }
.crx.sov .pop-row-meta { grid-area:meta;display:grid;justify-items:end;align-content:center;gap:2px;font-size:11.5px;color:var(--ink-4);text-align:right;white-space:nowrap;cursor:default; }
.crx.sov .pop-row-mkt { font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3); }
@container (max-width:820px) {
 .crx.sov .pop-row { grid-template-columns:104px minmax(0,1fr) minmax(0,340px);grid-template-areas:"when teams prices" "meta teams prices";row-gap:2px; }
 .crx.sov .pop-row.has-comp { grid-template-areas:"comp comp comp" "when teams prices" "meta teams prices"; }
 .crx.sov .pop-row .pop-when { align-content:end; }
 .crx.sov .pop-row-meta { justify-items:start;align-content:start;text-align:left;grid-auto-flow:column;justify-content:start;gap:6px; }
 .crx.sov .pop-row-meta .pop-xm { display:none; }
}
@container (max-width:560px) {
 .crx.sov .pop-row { grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"when meta" "teams teams" "prices prices";gap:8px 10px; }
 .crx.sov .pop-row.has-comp { grid-template-areas:"comp comp" "when meta" "teams teams" "prices prices"; }
 .crx.sov .pop-row .pop-when { align-content:center; }
 .crx.sov .pop-row .pop-when time { flex-basis:auto; }
 .crx.sov .pop-row .pop-when .sov-sep { display:inline; }
 .crx.sov .pop-row-meta { justify-items:end;text-align:right;grid-auto-flow:column;gap:8px; }
 .crx.sov .pop-row-meta .pop-xm { display:inline; }
 .crx.sov .pop-row .pop-tiles { gap:6px; }
}

/* ---------- #543, #566: the named outcome tile, the only price tile on Popular (the owner's pick A) ----------
   A Trending card and a block row, two-way or three-way, draw the same tile at every width: the outcome (a long name wraps to two lines),
   the price large, the best casino's mark and name under it, then the casino's link on the bottom edge, 32 px high: "Bet ↗". Its top is the
   slip toggle (the desk's button.sov-price, so the slip and the members layer treat it as any price box). Every tile in a card or row is as
   tall as the tallest, and its price sits at the same height. Nothing depends on hover. */
.crx.sov .pop-tile { display:flex;flex-direction:column;min-width:0;border-radius:10px;background:var(--card-2);border:1px solid var(--hair);transition:border-color .15s,background .15s; }
.crx.sov .pop-tile:has(> .pop-tile-pick:hover) { border-color:var(--hi,#A78BFA); }
.crx.sov .pop-tile:has(> .is-sel) { border-color:var(--hi,#A78BFA);background:rgba(123,77,242,.16); }
.crx.sov .pop-tile > .pop-tile-pick { flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;gap:3px;width:100%;min-width:0;min-height:0;margin:0;padding:7px 8px;border:0;border-radius:9px 9px 0 0;background:none;color:var(--ink);text-align:left; }
.crx.sov .pop-tile > .pop-tile-pick:only-child { border-radius:9px; }
.crx.sov .pop-tile > .pop-tile-pick.is-sel { background:none; }
.crx.sov .pop-tile > .pop-tile-pick:focus-visible { outline:2px solid var(--mid);outline-offset:2px; }
.crx.sov .pop-tile-name { display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;min-width:0;overflow:hidden;overflow-wrap:anywhere;font-size:13px;font-weight:600;line-height:16px;color:var(--ink-2); }
.crx.sov .pop-tile-line { display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0; }
.crx.sov .pop-tile .pop-tile-line b { flex:0 0 auto;font-family:var(--font-mono,"JetBrains Mono",ui-monospace,monospace);font-size:17px;font-weight:700;line-height:22px;letter-spacing:-.01em;color:var(--up,#2ED47F); }
.crx.sov .pop-tile .is-sel .pop-tile-line b { color:#CBB8FF; }
.crx.sov .pop-tile.is-off .pop-tile-line b { color:var(--ink-4); }
.crx.sov .pop-tile .pop-tile-book { display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:100%;font-size:10px;font-weight:700;letter-spacing:-.01em;color:var(--ink-4);white-space:nowrap; }
.crx.sov .pop-tile .pop-tile-book > span { min-width:0;overflow:hidden;text-overflow:ellipsis; }
.crx.sov .pop-tile img { width:14px;height:14px;object-fit:contain;flex:0 0 auto;border-radius:3px; }
.crx.sov .pop-tile > .sov-quote-age { padding:0 8px 5px; }
.crx.sov .pop-tile-bet { display:flex;align-items:center;justify-content:center;gap:4px;height:32px;min-width:0;padding:0 6px;border-top:1px solid var(--hair);border-radius:0 0 9px 9px;background:rgba(255,255,255,.025);color:var(--ink-2);font-size:11px;font-weight:700;white-space:nowrap;text-decoration:none; }
.crx.sov .pop-tile-arrow { flex:0 0 auto;color:var(--mid); }
.crx.sov .pop-tile-bet:hover { background:rgba(79,199,234,.08);color:#fff;text-decoration:none; }
.crx.sov .pop-tile-bet:focus-visible { outline:2px solid var(--mid);outline-offset:-2px; }

/* ---------- responsive ---------- */
@media (max-width:1240px) { .crx.sov .pop-rail { grid-auto-columns:calc((100% - 12px) / 2); } }
@media (max-width:760px) {
 .crx.sov .pop-rail { grid-auto-columns:86%;gap:10px; }
 .crx.sov .pop-card { padding:12px 12px 10px; }
 .crx.sov .pop-row { padding-left:12px;padding-right:12px; }
 .crx.sov .pop-block-head { grid-template-columns:auto minmax(0,1fr);gap:8px 12px;padding:12px; }
 .crx.sov .pop-block-head .pop-more { grid-column:2;padding:6px 0; }
 .crx.sov .pop-block-comp { flex-wrap:wrap;white-space:normal; }
 .crx.sov .pop-block-comp .pop-dim { flex-basis:100%;white-space:normal; }
 .crx.sov .pop-block-comp .pop-dim::before { content:none; }
}
/* #543: a wide block names its market over the tile column, on its own line under the header's (after the rule above) */
@container (min-width:561px) {
 .crx.sov .pop-block-head { row-gap:4px; }
 .crx.sov .pop-block-head > .pop-block-cols { display:grid;grid-column:1 / -1;grid-template-columns:104px minmax(0,1fr) minmax(0,340px);column-gap:14px;margin-bottom:-4px; }
 .crx.sov .pop-block-chip { display:none; }
}
@container (min-width:821px) { .crx.sov .pop-block-head > .pop-block-cols { grid-template-columns:128px minmax(170px,1fr) minmax(0,552px) 84px; } }
@media (prefers-reduced-motion:reduce) { .crx.sov .pop-rail { scroll-behavior:auto; } .crx.sov .pop-tile { transition:none; } }