/* ── Odds CTA — FAMILY 1: V1 / V2 / V3, neutral surfaces ──────────────────────
   Rewritten 2026-07-30 to the ART-378 spec signed off 2026-07-29. What this
   replaced (all explicitly retired — do not reintroduce):
     · the 4px .modd-rail brand rail and the .modd-brand wordmark caption, and --brand
     · the dark #1A1A1A stacked card with a win-probability % (.modd-pc)
     · .moddgrid[data-variant="v1"] CSS branches
   V3 is what ships on /analysis. V2 and V3 are markup-identical — only the data
   differs. data-variant on .moddgrid is for tracking/compliance ONLY; nothing here
   branches on it, which is why V1 carries its own .modd--solo modifier instead.

   Family 2 (.bodd — V4/V5) lives in component-brand.css and shares no CSS with this
   file. The @keyframes modd-shim below is the one thing it borrows.

   Two documented renames from the spec text, both forced by the library's prefix
   invariant (every class must start with the component prefix — enforced by
   tools/test_build.py):  .bk-<operator> → .modd-bk-<operator>   ·   .cs → .is-cs
   The operator suffix still matches the asset filename exactly, which is the part
   that matters: .modd-bk-stoiximan ↔ rectangle/stoiximan.svg.
   ──────────────────────────────────────────────────────────────────────────── */

.moddgrid{display:flex;align-items:flex-start;gap:8px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.moddgrid::-webkit-scrollbar{display:none;}

/* ── shell ──
   overflow:hidden is what rounds the tile. The border is never recoloured in any
   state — recolouring it produced a visibly broken edge. */
.modd{flex:0 0 auto;box-sizing:border-box;width:72px;text-decoration:none;
  display:flex;flex-direction:column;align-items:stretch;
  background:#FFFFFF;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  transition:box-shadow .16s,transform .16s;}

/* Width is a property of the MARKET, not the card: every card inside one market
   carries the same class, picked from that market's longest label. So a mobile slide
   is always uniform and a desktop row only steps width at a .modd-div. */
.modd.is-w{width:92px;}    /* 5-8 chars:  O 2.5 · U 2.5 · G/G Ναι · G/G Όχι */
.modd.is-xw{width:112px;}  /* 9-14 chars: Γκολ 2-3, HT/FT, handicap          */

/* ── V2/V3 top block — WHITE, 26px fixed, label and odd side by side on one row.
   The odd is the hero at 1.5x the label. ── */
.modd-card{flex:0 0 auto;height:26px;
  display:flex;align-items:center;justify-content:center;gap:5px;padding:0 6px;
  background:#FFFFFF;transition:background .16s;}
.modd-lbl{font-family:var(--body);font-size:10px;font-weight:600;line-height:1;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.modd-lbl.is-cs{font-size:9px;}   /* correct-score, the longest labels */
.modd-od{flex:0 0 auto;font-family:var(--num);font-size:15px;font-weight:700;
  line-height:1;color:var(--ink);letter-spacing:.2px;white-space:nowrap;}

/* ── the operator tile ──
   THE RULE THAT MATTERS: height is a hard 36px for every market at every width.
   NEVER aspect-ratio — a ratio makes the tile grow taller as the card widens, so
   «O 2.5» ends up taller than «1» and the row's baseline breaks. Total card height
   is therefore always 26+36. The logo stays 100% tall and centred; the brand colour
   fills the leftover width, which is why --bk must agree with the artwork. ── */
.modd-bk{flex:0 0 auto;height:36px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--bk,var(--fill));}
.modd-bk img{display:block;height:100%;width:auto;object-fit:contain;}
/* Light tiles bleed into the white 26px block above, so they need a hairline. The
   light set comes from the ARTWORK, measured against white: bwin #FFD300 (1.44),
   interwetten #FFD200 (1.45), pamestoixima #D0D2D3 (1.52). winmasters is NOT in it —
   its artwork is red #EB1C24 (4.45), despite the spec table calling it white. */
.modd-bk.is-lt{box-shadow:inset 0 1px 0 var(--line);}

/* ── V1 standalone — REPLACED 2026-07-30 from Figma «Odds CTA» node 10001:631
   (file 3WPl5hbxZSHKpxebR7n1Ua). White card, 41px tall, radius 8, outer glow, and a
   1px hairline between label and odd. No tile. Supersedes the old 100px #F2F2F2
   36px block — do not reintroduce it, nor the --acc orange odd.

   Width HUGS instead of being fixed. The frame is 88.67px wide for a 1X2 card, and
   that is carried as a min-width, not a cap: the Figma frame only ever shows «1», so
   a fixed 24px label slot would have silently dropped «O 2.5» / «G/G Όχι» /
   «Γκολ 2-3», which V1 has always had to carry. 24px and 46px are therefore floors.
   Confirmed with Vasilis 2026-07-30.

   Height: the frame is 41px INCLUDING its stroke, and .modd already carries a 1px
   border, so the card is 39 and not 41 — measured, not derived. Figma's 12px vertical
   padding is not used either: 1 + 12 + 17 + 12 + 1 renders 43. A fixed card height
   with the 17px line centred is what reproduces the frame exactly. ── */
.modd--solo{width:auto;min-width:88.67px;border-radius:8px;
  box-shadow:0 0 10px rgba(0,0,0,.1);}
/* V1 hugs, so the market width steps must not apply to it. */
.modd--solo.is-w,.modd--solo.is-xw{width:auto;}
.modd--solo .modd-card{height:39px;gap:2px;padding:0 4px;background:#FFFFFF;}
/* Figma drops Roboto Mono and the --acc orange here: both parts are Roboto Bold 14
   in --ink. The odd loses tabular alignment as a result — confirmed, not an
   oversight. Contrast rises 4.76:1 → 18.1:1. */
.modd--solo .modd-lbl{min-width:24px;font-size:14px;font-weight:700;
  color:var(--ink);text-align:center;}
.modd--solo .modd-od{min-width:46px;font-family:var(--body);font-size:14px;
  font-weight:700;color:var(--ink);letter-spacing:0;text-align:center;}
.modd-sel{display:flex;align-items:center;min-width:0;}
/* the hairline. A pseudo-element, so no consumer markup changes — and it rides on
   .modd-sel, which only V1 has, so it can never leak into V2/V3. 17px, not stretched:
   in Figma it matches the text box, not the card. */
.modd--solo .modd-sel::after{content:"";flex:0 0 auto;width:1px;height:17px;
  margin-left:2px;background:var(--line);}
/* label-less V1: the consumer already captions the market (predictions does, in
   .prd-ttl), so the card carries only the odd — and with no label there is nothing
   for the hairline to divide. */
.modd.is-bare .modd-card{gap:0;}
.modd--solo.is-bare .modd-sel::after{display:none;}

/* ── per-operator tile colour. ONE declaration per operator. The class suffix must
   match the asset filename exactly — a mismatch shows as a visible seam where the
   artwork's baked-in background meets the CSS fill. ── */
.modd-bk-stoiximan{--bk:#0055FF;}
.modd-bk-bet365{--bk:#005440;}          /* NOT #027B5B — that is the V4/V5 fill */
.modd-bk-fonbet{--bk:#D42B28;}
.modd-bk-betsson{--bk:#F26722;}
.modd-bk-sportingbet{--bk:#1E87C9;}
.modd-bk-vistabet{--bk:#F05722;}
.modd-bk-novibet{--bk:#303540;}
.modd-bk-netbet{--bk:#333743;}
.modd-bk-n1casino{--bk:#212121;}
.modd-bk-bwin{--bk:#FFD300;}
.modd-bk-pamestoixima-long{--bk:#B92128;}
.modd-bk-winmasters,
.modd-bk-winmasters-2{--bk:#EB1C24;}
.modd-bk-interwetten{--bk:#FFD200;}
.modd-bk-pamestoixima{--bk:#D0D2D3;}
/* elabet is the ONE exception: its rectangle artwork carries a real linearGradient
   (#11143E -> #142169 -> #172B89), so the fill is set directly rather than via --bk.
   The manifest records a flat #1367FF for it, which is a sampling artifact of the
   dominant solid inside the artwork, not the tile background. */
.modd-bk-elabet{background:linear-gradient(180deg,#11143E 0%,#142169 54.7%,#172B89 100%);}

/* ── hover — the tint starts at the TOP. Bottom-up was almost invisible, especially
   on V2/V3 where the white block is only 26px tall. The tile is NEVER tinted in any
   state: the operator's colour must stay true. The card is never translated. ── */
@media (hover:hover){
  .modd:hover{box-shadow:0 2px 8px rgba(26,26,26,.08);}
  .modd:hover .modd-card{background:linear-gradient(180deg,#FFEBE6 0%,#FFFFFF 100%);}
}
.modd:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(253,58,1,.40);}
.modd:active{transform:scale(.97);}

.modd.is-loading{pointer-events:none;}
.modd.is-loading .modd-od{color:transparent;min-width:38px;border-radius:4px;
  background:linear-gradient(90deg,#E6E6E6 25%,#F7F7F7 37%,#E6E6E6 63%);
  background-size:400% 100%;animation:modd-shim 1.4s ease-in-out infinite;}
@keyframes modd-shim{0%{background-position:100% 0;}100%{background-position:0 0;}}

/* suspended — the dashed edge goes on the SHELL, and the tile greyscales. */
.modd.is-susp{cursor:not-allowed;border-style:dashed;}
.modd.is-susp .modd-card{border:0;opacity:.6;}
.modd.is-susp .modd-od{color:var(--mut);}
.modd.is-susp .modd-bk{filter:grayscale(1);opacity:.6;}
.modd.is-susp:hover{box-shadow:none;transform:none;}
.modd.is-susp:hover .modd-card{background:#FFFFFF;}
.modd--solo.is-susp:hover .modd-card{background:#FFFFFF;}

/* 21+ line — REQUIRED for V2 and V3. */
.modd-rg{display:block;margin-top:8px;text-align:center;font-family:var(--body);
  font-size:10px;font-weight:600;letter-spacing:.5px;color:var(--mut);text-transform:uppercase;}
/* market grouping hairline, desktop */
.modd-div{flex:0 0 auto;align-self:stretch;width:1px;margin:0 4px;background:var(--line);}

@media (prefers-reduced-motion:reduce){
  .modd,.modd-card{transition:none;}
  .modd.is-loading .modd-od{animation:none;background:#E6E6E6;}
}

/* ── mobile carousel (folded in from the foxbet-responsive page) ── */
@media (max-width:1199px){
  .modd-slide{display:flex;flex:0 0 100%;justify-content:center;gap:8px;
    scroll-snap-align:center;}
  .moddgrid{scroll-snap-type:x mandatory;}
  .modd-swipe{display:flex;align-items:center;justify-content:center;position:absolute;
    top:calc(50% - 8px);right:0;transform:translateY(-50%);width:20px;height:20px;
    padding:0;border:none;background:none;cursor:pointer;color:rgba(30,42,58,.5);
    font-family:var(--num);font-size:16px;font-weight:700;line-height:1;z-index:5;
    opacity:.85;animation:modd-nudge 2.2s ease-in-out infinite;transition:opacity .2s;}
  .modd-swipe.modd-end{opacity:0;pointer-events:none;}
  @keyframes modd-nudge{0%,100%{transform:translateY(-50%) translateX(0);}
    50%{transform:translateY(-50%) translateX(2px);}}
}
@media (min-width:1200px){
  .modd-slide{display:contents;}
  .modd-swipe{display:none;}
  .modd-slide.modd-only-m{display:none;}
}