/* ============ PREVIEWS: the Showroom content pass ============
   Cards join the jewellery system; meta layer gold; probability bars in
   brand tones (red is reserved for LOSS, never for a low chance). */

/* match cards: gradient hairline frame, bloom + sheen on hover */
.preview-card {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent !important;
    background:
        linear-gradient(#0B0B0B, #0B0B0B) padding-box,
        linear-gradient(135deg, rgba(212, 175, 55, 0.45), rgba(212, 175, 55, 0.07) 45%, rgba(230, 200, 96, 0.28)) border-box !important;
    box-shadow: none !important;
    transition: transform 140ms ease, box-shadow 140ms ease;
}
.preview-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -18px rgba(212, 175, 55, 0.4) !important;
    background:
        linear-gradient(#0D0D0D, #0B0B0B) padding-box,
        linear-gradient(135deg, #D4AF37, rgba(212, 175, 55, 0.25) 45%, #E6C860) border-box !important;
}
.preview-card::after {
    content: "";
    position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
    background: linear-gradient(105deg, transparent, rgba(230, 200, 96, 0.07), transparent);
    transform: skewX(-18deg);
    transition: left 480ms ease;
    pointer-events: none;
}
.preview-card:hover::after { left: 130%; }

/* meta layer: league + kickoff in the gold mono voice */
.preview-league {
    color: #E6C860 !important;
    font-family: ui-monospace, Consolas, monospace !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    background: transparent !important;
    border: 1px solid rgba(230, 200, 96, 0.3) !important;
    border-radius: 0 !important;
    padding: 3px 9px !important;
}
.preview-kickoff {
    color: #E6C860 !important;
    font-family: ui-monospace, Consolas, monospace !important;
    font-weight: 600 !important;
}

/* teams: ivory, the vs quiet */
.preview-teams { color: #F0EDE6 !important; }
.preview-teams .vs { color: #8A867D !important; }

/* probability rows: hairline tracks, brand fills, no red for low chance */
.preview-mini-bar-row .bar-label {
    color: #BDB9AF !important;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.preview-mini-bar-row .bar-track {
    background: rgba(255, 255, 255, 0.07) !important;
    border-radius: 0 !important;
}
.preview-mini-bar-row .bar-fill { border-radius: 0 !important; }
.preview-mini-bar-row .bar-fill.high { background: linear-gradient(90deg, #D4AF37, #E6C860) !important; }
.preview-mini-bar-row .bar-fill.medium { background: rgba(230, 200, 96, 0.55) !important; }
.preview-mini-bar-row .bar-fill.low { background: rgba(255, 255, 255, 0.18) !important; }
.preview-mini-bar-row .bar-val { color: #CBC7BE !important; font-weight: 600; }
.preview-mini-bar-row .bar-val { width: auto !important; min-width: 38px; text-align: right; }
.preview-mini-bar-row .bar-val.high {
    color: #E6C860 !important;
    font-weight: 700 !important;
}

/* day headers: mock-h2 voice + square mono count chip */
.day-header {
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #F5F2EA !important;
}
.day-header .match-count {
    font-family: ui-monospace, Consolas, monospace !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.14em !important;
    color: #E6C860 !important;
    border: 1px solid rgba(230, 200, 96, 0.35) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 3px 10px !important;
}

/* filter row: square dark controls, gold action */
.previews-filter select, .previews-filter input,
select, input[type="search"], input[type="text"] {
    border-radius: 0 !important;
}

/* ============ pass 2: numbers in our favour ============ */
/* teams read bigger */
.preview-teams { font-size: 1.06rem !important; }

/* the favoured outcome DOMINATES: thicker gold bar, foil % with glow */
.preview-mini-bar-row:has(.bar-fill.high) .bar-track,
.preview-mini-bar-row:has(.bar-fill.high) .bar-fill { height: 7px !important; }
.preview-mini-bar-row:has(.bar-fill.high) .bar-val {
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    background: linear-gradient(100deg, #F3DD92 0%, #E6C860 40%, #D4AF37 78%, #F3DD92 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.3);
}

/* form chips: honest record language - W green, L red, D grey, ? hairline */
.form-mini span {
    border-radius: 0 !important;
    font-family: ui-monospace, Consolas, monospace !important;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    padding: 2px 5px !important;
}
.form-mini .fm-w { background: rgba(46, 204, 113, 0.15) !important; color: #4ADE80 !important; }
.form-mini .fm-l { background: rgba(255, 107, 107, 0.14) !important; color: #FF8484 !important; }
.form-mini .fm-d { background: rgba(255, 255, 255, 0.08) !important; color: #BDB9AF !important; }
.form-mini .fm-unknown { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; color: #8A867D !important; }
.form-vs { color: #8A867D !important; }

/* hero counter: the number is a foil statement */
.pv-count-line { color: #BDB9AF !important; }
.pv-count-line strong {
    font-family: 'Bodoni Moda', Georgia, serif !important;
    font-size: 1.5rem !important;
    font-weight: 500 !important;
    background: linear-gradient(100deg, #F3DD92 0%, #E6C860 40%, #D4AF37 78%, #F3DD92 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 14px rgba(212, 175, 55, 0.3);
    margin-right: 4px;
}

/* ============ pass 3: competitor-grade rows ============
   Team names ARE the labels (no Home/Draw/Away jargon); the favoured
   team's name reads gold. Labels get room; long names ellipsise. */
.preview-mini-bar-row .bar-label {
    width: 108px !important;
    min-width: 108px;
    text-align: left !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 0.75rem !important;
    color: #CBC7BE !important;
    font-weight: 600;
}
.preview-mini-bar-row .bar-label.favoured { color: #E6C860 !important; font-weight: 700; }
/* teams row above the bars can slim down - names now live on the rows */
.preview-teams { font-size: 0.98rem !important; }