/*
 * Today page quick view: the side panel a match row opens (js/today_quick_view.js, View/QuickView/panel.ctp).
 * The team profile inside is the stats page's own element (Elements/match/team_radar.ctp), which reads the
 * .cs-modern colour tokens; they are repeated on .tqv because css/corner_modern.css is not loaded here.
 */
.tqv{
  --bg:#eef1f5; --card:#fff; --bd:#e5e8ee; --bd2:#eef0f4;
  --tx:#16203a; --tx2:#475069; --mut:#8b93a6;
  --brand:#2f5fc9; --brand-s:#eef3fb; --over:#15a05a; --under:#e0533d; --orange:#e2640f; --r:10px;
  /* the two sides, everywhere in the panel: home blue, away orange (the stats page's team profile pair; red and green
     already mean win / loss and over / under, and swap between the two editions) */
  --home:#2f5fc9; --away:#e2640f;
  position:fixed; top:0; right:0; bottom:0; width:750px; max-width:100%; z-index:10040;
  display:flex; flex-direction:column; background:var(--card); color:var(--tx);
  border-left:1px solid var(--bd); box-shadow:-10px 0 28px rgba(16,24,40,.16);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  transform:translateX(100%); visibility:hidden; transition:transform .18s ease, visibility 0s linear .18s;
}
.tqv.open{ transform:none; visibility:visible; transition:transform .18s ease; }
/* the left edge is a handle: drag to set the panel's width (kept in this browser), double-click for the default */
.tqv-rs{ position:absolute; top:0; bottom:0; left:-4px; width:9px; cursor:ew-resize; z-index:2; }
.tqv-rs:hover,html.tqv-drag .tqv-rs{ background:linear-gradient(to right, transparent 3px, var(--brand) 3px, var(--brand) 6px, transparent 6px); }
html.tqv-drag,html.tqv-drag *{ cursor:ew-resize !important; user-select:none !important; }
html.tqv-drag .tqv{ transition:none; }
@media (prefers-reduced-motion:reduce){ .tqv,.tqv.open{ transition:none; } }
@media (max-width:767px){ .tqv{ width:100% !important; border-left:0; } .tqv-rs{ display:none; } html.tqv-on,html.tqv-on body{ overflow:hidden; } }
/* the floating feedback button sits over the panel's last button */
html.tqv-on .tc-fb-btn{ display:none !important; }
/* and so does the phone's app download bar, which would cover the panel's footer links */
html.tqv-on #tcAndroidAppBar{ display:none !important; }
/* and the site notice toast (Telegram channel), which sits over the footer's last two links */
html.tqv-on #tcSiteNotice{ display:none !important; }

#inplay_match_table tr[data-match_id]{ cursor:pointer; }
#inplay_match_table tr.tqv-sel > td{ background:#e6efff !important; }
#inplay_match_table .btn-qv svg{ width:14px; height:14px; vertical-align:-2px; fill:none; stroke:currentColor; stroke-width:2; }

.tqv-bar{ flex:none; display:flex; align-items:center; gap:6px; padding:8px 12px; border-bottom:1px solid var(--bd); background:var(--bg); }
.tqv-bar .tqv-sp{ flex:1 1 auto; }
.tqv-b{ width:32px; height:32px; border:1px solid var(--bd); border-radius:8px; background:var(--card); color:var(--tx2); font-size:15px; line-height:1; cursor:pointer; padding:0; }
.tqv-b:hover{ border-color:var(--brand); color:var(--brand); }
.tqv-b:focus-visible{ outline:2px solid var(--brand); outline-offset:1px; }
/* keyboard hints, only where there is a keyboard: Esc in the close button, the step buttons drawn as key caps */
.tqv-b kbd{ display:none; }
@media (hover:hover) and (pointer:fine){
  .tqv-b.tqv-x{ display:inline-flex; align-items:center; gap:6px; width:auto; padding:0 8px 0 10px; }
  /* the page's Bootstrap paints kbd as a black chip: undo it down to plain grey text */
  .tqv-b kbd{ display:inline-block; padding:0; border:0; border-radius:0; background:none; box-shadow:none;
    font-family:inherit; font-size:10px; font-weight:500; line-height:1; color:var(--mut); }
  /* the close button is a key cap like the step buttons, so none of the three stands out */
  .tqv-b.tqv-x,.tqv-b.tqv-key{ background:var(--bg); border-bottom-width:3px; font-weight:700; }
  .tqv-b.tqv-x:active,.tqv-b.tqv-key:active{ border-bottom-width:1px; transform:translateY(2px); }
}
/* customize: opened from the bar, above the match. One row per module: shown or not, and its place */
.tqv-b.tqv-cz-btn{ width:auto; padding:0 10px; font-size:13px; white-space:nowrap; }
.tqv-b.tqv-cz-btn[aria-expanded="true"]{ border-color:var(--brand); color:var(--brand); }
.tqv-cz{ flex:none; max-height:46%; overflow-y:auto; padding:10px 16px 12px; border-bottom:1px solid var(--bd); background:var(--bg); }
.tqv-cz-top{ display:flex; align-items:center; justify-content:flex-end; margin-bottom:6px; font-size:13px; }
.tqv-cz li.off label{ color:var(--tx2); }
/* a row that was just moved: it slides to its new place (set by the script) and stays lit for a moment */
.tqv-cz li{ position:relative; margin:0 -6px; padding-left:6px; padding-right:6px; border-radius:6px; }
.tqv-cz li.moved{ z-index:1; animation:tqv-moved 3s ease-out; }
@keyframes tqv-moved{ 0%,60%{ background:#ffe69a; } 100%{ background:transparent; } }
/* the two buttons stay in sight while the list scrolls above them */
.tqv-cz-ft{ position:sticky; bottom:-12px; display:flex; justify-content:flex-end; gap:8px; margin-top:6px; padding:8px 0 12px; background:var(--bg); }
.tqv-cz-ft button{ min-width:84px; padding:6px 14px; border:1px solid var(--bd); border-radius:8px; background:var(--card); font-size:13px; font-weight:600; color:var(--tx); cursor:pointer; }
.tqv-cz-ft button:hover{ border-color:var(--brand); color:var(--brand); }
.tqv-cz-ft .tqv-cz-ok,.tqv-cz-ft .tqv-cz-ok:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
.tqv-cz label small{ margin-left:4px; font-size:11px; font-weight:500; color:var(--mut); }
.tqv-cz ul{ list-style:none; margin:0; padding:0; }
.tqv-cz li{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:3px 0; }
.tqv-cz label{ display:flex; align-items:center; gap:8px; margin:0; font-weight:500; cursor:pointer; }
.tqv-cz input{ margin:0; }
.tqv-cz li span{ display:flex; gap:4px; }
.tqv-cz .tqv-b{ width:28px; height:28px; font-size:13px; }
.tqv-cz .tqv-b svg{ width:14px; height:14px; vertical-align:-2px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.tqv-cz .tqv-b:disabled,.tqv-cz input:disabled{ opacity:.4; cursor:not-allowed; }
.tqv-cz .tqv-b:disabled:hover{ border-color:var(--bd); color:var(--tx2); }
.tqv-cz-lock{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; padding:8px 12px; border-radius:8px; background:#fdf5d8; color:#84560a; text-decoration:none; }
.tqv-cz-lock:hover{ color:#84560a; text-decoration:none; }
.tqv-cz-lock b{ color:var(--brand); white-space:nowrap; }
.tqv-cz-reset{ padding:0; border:0; background:none; color:var(--brand); font-size:13px; font-weight:600; cursor:pointer; }
.tqv-mod[hidden]{ display:none; }
.tqv-body{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.tqv-frag{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.tqv-wait{ padding:60px 0; text-align:center; }
.tqv-wait p{ margin:12px 16px 0; color:var(--mut); font-size:13px; }
.tqv-none{ margin:0; padding:40px 16px; text-align:center; color:var(--mut); }
.tqv-more{ display:block; width:100%; margin:0 0 10px; padding:11px 12px; border:1px dashed var(--bd); border-radius:var(--r); background:var(--card);
  font:inherit; font-size:13px; font-weight:600; color:var(--brand); text-align:center; cursor:pointer; }
.tqv-more:hover{ border-color:var(--brand); background:var(--brand-s); }

/* head, centred like a scoreboard: league, kick-off, status; home | score | away; the lines at kick-off */
/* the first thing in the scrolling body, full width over its padding: it scrolls away with the modules */
.tqv-hd{ margin:-10px -10px 10px; padding:12px 16px; border-bottom:1px solid var(--bd); background:var(--card); text-align:center; }
.tqv-lg{ font-size:12.5px; color:var(--mut); }
.tqv-st{ display:inline-block; margin-left:6px; padding:0 7px; border-radius:10px; background:var(--bd2); color:var(--tx2); font-weight:700; font-size:12px; }
.tqv-st.is-live{ background:#fdecea; color:#c2432e; }
.tqv-tm{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:baseline; gap:4px 14px; margin-top:6px; font-size:19px; font-weight:700; line-height:1.3; }
/* as in the app's match head: each name centred in its half, the score between them */
.tqv-tm .h,.tqv-tm .a{ text-align:center; }
.tqv-tm .h,.tqv-tm .a{ overflow-wrap:anywhere; }
.tqv-tm small{ margin-left:5px; font-size:12px; font-weight:500; color:var(--mut); }
.tqv-tm .sc{ color:var(--brand); font-variant-numeric:tabular-nums; white-space:nowrap; }
.tqv-tm .vs{ color:var(--mut); font-weight:500; font-size:14px; }
/* cards and corners under each side's name, in the same three columns: card tiles and a corner flag, the app's way */
.tqv-tm .st{ display:flex; justify-content:center; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--tx2); font-variant-numeric:tabular-nums; }
.tqv-tm .st i{ font-style:normal; white-space:nowrap; line-height:1; }
.tqv-tm .st .yc,.tqv-tm .st .rc{ min-width:16px; padding:3px 4px; border-radius:3px; font-size:11px; font-weight:700; text-align:center; }
.tqv-tm .st .yc{ background:#eebc2e; color:#7f3b03; } .tqv-tm .st .rc{ background:#f14949; color:#fff; }
.tqv-tm .st .cn{ display:inline-flex; align-items:center; gap:3px; }
.tqv-tm .st svg{ width:15px; height:15px; color:var(--home); }
.tqv-tm .a.st svg{ color:var(--away); }
.tqv-px{ display:flex; flex-wrap:wrap; justify-content:center; gap:2px 16px; margin-top:6px; font-size:13px; color:var(--tx); }
.tqv-px i{ font-style:normal; color:var(--mut); }

/* each module is a white block on the grey body: the gaps set them apart, no rules needed */
.tqv-bd{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:10px 10px 0; background:var(--bg); }
.tqv-mod{ margin:0 0 10px; padding:12px 14px 14px; border-radius:10px; background:var(--card); }
.tqv-mod h3{ margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--tx2); }
.tqv-mod h3 small{ margin-left:8px; font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--mut); }
/* a list the reader opens inside a module (the events under the live counters): its title is the switch, drawn like a
   module title with a small arrow after it */
.tqv-fold{ margin-top:12px; }
.tqv-fold > summary{ display:block; list-style:none; cursor:pointer; }
.tqv-fold > summary::-webkit-details-marker{ display:none; }
.tqv-fold > summary:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
.tqv-fold > summary h3{ display:flex; align-items:center; justify-content:center; margin:0; }
.tqv-fold > summary:hover h3{ color:var(--brand); }
.tqv-fold > summary h3::after{ content:""; width:6px; height:6px; margin-left:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); }
.tqv-fold[open] > summary{ margin-bottom:8px; }
.tqv-fold[open] > summary h3::after{ transform:translateY(1px) rotate(-135deg); }

/* live counters as in the app: a row of rings (home value, ring, away value), then split bars side by side */
.tqv-rings{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px 8px; text-align:center; font-variant-numeric:tabular-nums; }
.tqv-ring .lab{ margin-bottom:4px; font-size:12px; color:var(--tx2); }
.tqv-ring .rw{ display:inline-flex; align-items:center; gap:8px; font-size:15px; }
.tqv-ring svg{ flex:none; width:40px; height:40px; }
.tqv-ring circle{ fill:none; stroke-width:5; } .tqv-ring circle.h{ stroke:var(--home); } .tqv-ring circle.a{ stroke:var(--away); }
.tqv-bars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2px 28px; margin-top:8px; }
.tqv-cmp{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:3px 8px; font-variant-numeric:tabular-nums; }
.tqv-cmp .lab{ grid-column:1 / -1; margin-top:2px; font-size:12px; color:var(--tx2); text-align:center; }
/* each number sits against its end of the bar */
.tqv-cmp b{ min-width:12px; font-weight:700; text-align:right; } .tqv-cmp b.r{ text-align:left; }
.tqv-cmp .trk{ display:flex; gap:2px; height:8px; border-radius:4px; overflow:hidden; background:var(--bd2); }
.tqv-cmp .trk i{ display:block; height:100%; } .tqv-cmp .trk .h{ background:var(--home); } .tqv-cmp .trk .a{ background:var(--away); }

/* events, newest first: icon and text, no rules between rows (the app's list). The list is centred as one block;
   inside it the rows start at the same edge, so the icons stay in a column */
.tqv-ev{ list-style:none; width:-moz-fit-content; width:fit-content; max-width:100%; margin:0 auto; padding:0; font-size:13px; color:var(--tx2); }
.tqv-ev li{ display:flex; align-items:center; gap:8px; padding:3px 0; }
.tqv-ev li.is-mark{ padding:6px 0; font-size:12px; font-weight:700; color:var(--mut); }
.tqv-ev .ic{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; }
.tqv-ev .ic img,.tqv-ev .ic svg{ width:15px; height:15px; }
.tqv-ev li.is-h .ic svg{ color:var(--home); } .tqv-ev li.is-a .ic svg{ color:var(--away); }
.tqv-ev .ic .yc,.tqv-ev .ic .rc{ display:block; width:9px; height:12px; border-radius:2px; }
.tqv-ev .ic .yc{ background:#eebc2e; } .tqv-ev .ic .rc{ background:#f14949; }
.tqv-ev small{ color:var(--mut); }

/* attacking momentum, the live page's curve: above the centre line the home side is on top, below it the away side */
.tqv-mo-lg{ display:flex; flex-wrap:wrap; gap:2px 16px; margin-bottom:2px; font-size:12.5px; color:var(--tx2); }
.tqv-mo-lg i{ display:inline-block; width:9px; height:9px; margin-right:5px; border-radius:50%; }
.tqv-mo-lg i.h{ background:var(--home); } .tqv-mo-lg i.a{ background:var(--away); }
.tqv-mo{ display:block; width:100%; height:auto; }
.tqv-mo .ax{ stroke:var(--mut); stroke-width:1; stroke-dasharray:4 3; opacity:.7; }
.tqv-mo .ht{ stroke:var(--bd); stroke-width:1; }
.tqv-mo .fh{ fill:var(--home); fill-opacity:.18; } .tqv-mo .fa{ fill:var(--away); fill-opacity:.18; }
.tqv-mo .lh,.tqv-mo .la{ fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.tqv-mo .lh{ stroke:var(--home); } .tqv-mo .la{ stroke:var(--away); }
.tqv-mo text{ font-size:10px; fill:var(--mut); }

/* the stats page's team profile: its own title and card frame are dropped, the module title stands in */
/* the element paints the home card with --brand and the away card with --orange */
.tqv-cs{ --brand:var(--home); --orange:var(--away); }
.tqv-cs .cs-radar{ margin:0; }
.tqv-cs .cs-radar > .alert{ display:none; }
.tqv-cs .cs-radar .cs-rc-wrap{ gap:10px; }
.tqv-cs .cs-radar .cs-rc{ padding:10px 10px 12px; }
@media (max-width:767px){ .tqv-cs .cs-radar .cs-rc-wrap{ flex-direction:column; } }

/* recent form: the stats page's table cut to the panel, one table per side, no rules — every other row is tinted */
.tqv-rf{ margin-bottom:14px; }
.tqv-rf:last-child{ margin-bottom:0; }
.tqv-rf h4{ margin:0 0 4px; font-size:13px; font-weight:700; color:var(--home); }
.tqv-rf.is-a h4{ color:var(--away); }
.tqv-rf-x{ overflow-x:auto; }
.tqv-rf table{ width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.tqv-rf th{ padding:3px 6px; font-size:11px; font-weight:600; color:var(--mut); text-align:center; white-space:nowrap; }
.tqv-rf td{ padding:5px 6px; text-align:center; vertical-align:middle; white-space:nowrap; }
.tqv-rf tbody tr:nth-child(even) td{ background:var(--bg); }
.tqv-rf .r{ text-align:right; } .tqv-rf .l{ text-align:left; }
.tqv-rf td.r,.tqv-rf td.l{ white-space:normal; overflow-wrap:anywhere; }
.tqv-rf td.d{ color:var(--mut); } .tqv-rf td.s{ font-weight:700; }
.tqv-rf td.r,.tqv-rf td.l{ color:var(--mut); }
.tqv-rf td.me{ font-weight:700; color:var(--home); } .tqv-rf.is-a td.me{ color:var(--away); }
.tqv-rf small{ font-weight:500; color:var(--mut); }
.tqv-rf b.over{ color:var(--over); } .tqv-rf b.under{ color:var(--under); } .tqv-rf b.draw{ color:var(--mut); }
.tqv-rf .lk{ text-decoration:none; }
.tqv-rf i.lg{ margin-right:5px; vertical-align:1px; }
.tqv-mod i.lg{ display:inline-block; flex:none; width:8px; height:8px; border-radius:50%; background:#b8bfcc; }
.tqv-mod i.lg.c1{ background:#7c3aed; } .tqv-mod i.lg.c2{ background:#db2777; } .tqv-mod i.lg.c3{ background:#ca8a04; }
.tqv-mod i.lg.c4{ background:#0d9488; } .tqv-mod i.lg.c5{ background:#8b5e3c; } .tqv-mod i.lg.c6{ background:#475569; }
.tqv-lgd{ display:flex; flex-wrap:wrap; gap:4px 12px; margin:0 0 8px; }
.tqv-lgd button{ display:inline-flex; align-items:center; gap:5px; padding:2px 0; border:0; background:none; font:inherit; font-size:12px; color:var(--tx2); cursor:pointer; text-align:left; }
.tqv-lgd button small{ color:var(--mut); }
.tqv-lgd.is-flt button:not(.is-on){ opacity:.4; }
.tqv-lgd button.is-cur{ color:var(--tx); }
.tqv-lgd button.is-on{ color:var(--tx); font-weight:700; }
.tqv-lg1{ display:flex; align-items:center; gap:5px; margin:0 0 8px; font-size:12px; color:var(--tx); }
.tqv-rf tr.lg-off{ display:none; }
.tqv-rf.lg-none .tqv-rf-x{ display:none; }
.tqv-rf.lg-none h4{ opacity:.4; }
.tqv-rf em{ display:inline-block; width:20px; height:20px; border-radius:5px; font-size:11px; font-weight:800; line-height:20px; text-align:center; font-style:normal; }
.tqv-rf .fw{ background:#e7f6ee; color:#117a45; } .tqv-rf .fd{ background:#eef0f4; color:#475069; } .tqv-rf .fl{ background:#fdecea; color:#c2432e; }
/* domestic edition: red = win / over, green = loss / under */
.tqv-cn{ --over:#e0533d; --under:#15a05a; }
.tqv-cn .tqv-rf .fw{ background:#fdecea; color:#c2432e; } .tqv-cn .tqv-rf .fl{ background:#e7f6ee; color:#117a45; }

/* ---- modules a member adds ---- */
/* the two sides next to each other; one under the other when the panel is narrow */
.tqv-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px 24px; }
.tqv-cols > div{ min-width:0; }
.tqv-mod h4{ margin:0 0 6px; font-size:13px; font-weight:700; }
.tqv-mod h4 small{ margin-left:4px; font-size:12px; font-weight:500; color:var(--mut); }
.tqv-cols .is-h > h4{ color:var(--home); } .tqv-cols .is-a > h4{ color:var(--away); }

/* match facts: one bar per market, its three outcomes by count, the leading one named beside it */
.tqv-fx .fr{ display:grid; grid-template-columns:minmax(0,1fr) 104px 86px; align-items:center; gap:8px; padding:3px 0; font-size:13px; }
.tqv-fx .lab{ color:var(--tx2); } .tqv-fx .lab small{ color:var(--mut); }
.tqv-fx .seg{ display:flex; gap:1px; height:16px; border-radius:4px; overflow:hidden; }
.tqv-fx .seg i{ min-width:14px; font-style:normal; font-size:10.5px; font-weight:700; line-height:16px; text-align:center; color:#fff; }
.tqv-fx .seg .w{ background:var(--over); } .tqv-fx .seg .d{ background:var(--mut); } .tqv-fx .seg .l{ background:var(--under); }
.tqv-fx b{ font-size:12.5px; text-align:right; white-space:nowrap; }
.tqv-fx b.w{ color:var(--over); } .tqv-fx b.d{ color:var(--tx2); } .tqv-fx b.l{ color:var(--under); }

/* historical stats: averages of the last ten */
.tqv-mod h3 .tqv-hs-pick{ display:inline-flex; align-items:center; gap:4px; }
.tqv-hs-n{ padding:1px 2px; border:1px solid var(--bd); border-radius:6px; background:var(--card); font:inherit; font-size:12px; color:var(--tx); cursor:pointer; }
.tqv-hs table{ width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.tqv-hs th{ padding:3px 4px; font-size:11px; font-weight:600; color:var(--mut); text-align:center; white-space:nowrap; }
.tqv-hs td{ padding:4px 4px; text-align:center; white-space:nowrap; }
.tqv-hs td.k{ text-align:left; color:var(--tx2); }
.tqv-hs tbody tr:nth-child(even) td{ background:var(--bg); }

/* distribution: the stats page's block — a kind switch in the title row, a summary line and a histogram per side */
.tqv-dist > h3{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.tqv-dist > h3 > span[data-kind],.tqv-dist .tqv-dp{ display:none; }
.tqv-dist[data-on="goal"] > h3 > span[data-kind="goal"],.tqv-dist[data-on="corner"] > h3 > span[data-kind="corner"],.tqv-dist[data-on="card"] > h3 > span[data-kind="card"]{ display:inline; }
.tqv-dist[data-on="goal"] .tqv-dp[data-kind="goal"],.tqv-dist[data-on="corner"] .tqv-dp[data-kind="corner"],.tqv-dist[data-on="card"] .tqv-dp[data-kind="card"]{ display:block; }
.tqv-seg{ display:inline-flex; margin-left:auto; border:1px solid var(--bd); border-radius:6px; overflow:hidden; }
.tqv-seg button{ padding:2px 10px; border:0; background:var(--card); font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--tx2); cursor:pointer; }
.tqv-dist[data-on="goal"] .tqv-seg [data-dist-kind="goal"],.tqv-dist[data-on="corner"] .tqv-seg [data-dist-kind="corner"],.tqv-dist[data-on="card"] .tqv-seg [data-dist-kind="card"]{ background:var(--brand); color:#fff; }
.tqv-ds{ margin-bottom:12px; }
.tqv-ds:last-child{ margin-bottom:0; }
.tqv-ds p{ margin:0 0 4px; font-size:12px; line-height:1.5; color:var(--tx2); }
.tqv-ds p b{ color:var(--tx); }
.tqv-ds svg,.tqv-tg svg,.tqv-ch svg{ display:block; width:100%; height:auto; }
.tqv-ds svg{ max-width:400px; } /* a side on its own (the other has no matches) keeps the size of a half */
.tqv-ds svg text,.tqv-tg svg text,.tqv-ch svg text{ font-size:9px; fill:var(--tx2); }
.tqv-ds svg text.v{ font-weight:700; fill:var(--tx); }
.tqv-ds .ax,.tqv-tg .ax,.tqv-ch .ax,.tqv-ch .ht{ stroke:var(--bd); stroke-width:1; }
.tqv-ds rect{ fill:var(--home); } .tqv-ds .is-a rect{ fill:var(--away); }
.tqv-dist .tqv-fold{ margin-top:4px; }
.tqv-dist .tqv-fold[open] > summary{ margin-bottom:12px; }

/* time distribution: per five minutes a goals column and a corners column; got above the rule, given away below */
.tqv-tg{ margin-bottom:14px; }
.tqv-tg:last-child{ margin-bottom:0; }
.tqv-tg h4{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px; color:var(--home); }
.tqv-tg.is-a h4{ color:var(--away); }
.tqv-tg h4 .lg{ margin-left:auto; font-size:11.5px; font-weight:500; color:var(--tx2); }
.tqv-tg h4 .lg i{ display:inline-block; width:9px; height:9px; margin:0 4px 0 10px; border-radius:2px; }
.tqv-tg .goal_get{ fill:var(--home); background:var(--home); } .tqv-tg .corner_get{ fill:var(--home); fill-opacity:.45; background:var(--home); opacity:.45; }
.tqv-tg.is-a .goal_get{ fill:var(--away); background:var(--away); } .tqv-tg.is-a .corner_get{ fill:var(--away); background:var(--away); }
.tqv-tg .goal_lost{ fill:#6b7385; background:#6b7385; } .tqv-tg .corner_lost{ fill:#b9c0cf; background:#b9c0cf; }
.tqv-tg svg text.v{ font-size:9px; font-weight:700; fill:var(--tx2); }
.tqv-tg svg text.tk{ fill:var(--mut); }
.tqv-tg .ht{ stroke:var(--bd); stroke-width:1; stroke-dasharray:3 3; }
.tqv-ch{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.tqv-ch polyline{ fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.tqv-ch polyline.h{ stroke:var(--home); } .tqv-ch polyline.a{ stroke:var(--away); }
.tqv-ch h4 small b.h{ color:var(--home); } .tqv-ch h4 small b.a{ color:var(--away); }

/* odds: a market panel of the odds page (its own markup, .oa-*), cut to the bookmaker list and drawn here without its stylesheet */
.tqv-od-b{ font-size:13px; font-variant-numeric:tabular-nums; }
.tqv-od .tqv-wait{ padding:14px 0; }
.tqv-od .oa-market-panel > *:not(.oa-major){ display:none; }
.tqv-od .oa-major-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 10px; margin-bottom:4px; }
.tqv-od .oa-major-head strong{ font-size:12px; font-weight:600; color:var(--tx2); }
.tqv-od .oa-major-head > div{ display:flex; flex-wrap:wrap; gap:8px; }
.tqv-od .oa-detail-segment{ display:inline-flex; border:1px solid var(--bd); border-radius:6px; overflow:hidden; }
.tqv-od .oa-detail-segment button{ padding:2px 9px; border:0; background:var(--card); font-size:12px; color:var(--tx2); cursor:pointer; }
.tqv-od .oa-detail-segment button.active{ background:var(--brand); color:#fff; }
.tqv-od .oa-handicap-snapshot,.tqv-od .oa-goals-snapshot,.tqv-od .oa-corners-snapshot,.tqv-od .oa-cards-snapshot{ display:none; }
.tqv-od .oa-handicap-snapshot.active,.tqv-od .oa-goals-snapshot.active,.tqv-od .oa-corners-snapshot.active,.tqv-od .oa-cards-snapshot.active{ display:block; }
.tqv-od-cap,.tqv-od .oa-major-table-subhead,.tqv-od .oa-major-row{ display:grid; grid-template-columns:minmax(90px,1.1fr) 1fr 1fr 12px; align-items:center; gap:10px; padding:3px 6px; }
.tqv-od-cap{ padding-bottom:0; font-size:11px; font-weight:600; color:var(--mut); text-align:center; }
.tqv-od .oa-major-table-subhead{ font-size:11px; color:var(--mut); }
.tqv-od .oa-major-group{ display:grid; grid-template-columns:repeat(3,1fr); text-align:center; }
/* a bookmaker's row opens its odds history under it: the arrow says so (the summary rows have none) */
.tqv-od .oa-major-arrow{ color:var(--mut); text-align:center; transition:transform .12s; }
.tqv-od .oa-major-row[data-bid]{ cursor:pointer; border-radius:6px; }
.tqv-od .oa-major-row[data-bid]:hover{ background:var(--brand-s); }
.tqv-od .oa-major-row:not([data-bid]) .oa-major-arrow{ visibility:hidden; }
.tqv-od .oa-major-row[aria-expanded="true"] .oa-major-arrow{ transform:rotate(90deg); }
.tqv-bh{ max-height:220px; margin:2px 0 8px; padding:4px 0; border-radius:6px; background:var(--bg); font-size:12px; overflow-y:auto; }
.tqv-bh .hd,.tqv-bh .rw{ display:grid; grid-template-columns:1.3fr .6fr 1fr 1fr 1fr .7fr; padding:2px 8px; text-align:center; }
.tqv-bh .hd{ font-size:11px; font-weight:600; color:var(--mut); }
.tqv-bh .rw .t{ color:var(--tx2); }
.tqv-bh .rw .up{ color:var(--over); font-weight:600; } .tqv-bh .rw .down{ color:var(--under); font-weight:600; }
.tqv-bh .tqv-none{ padding:10px 0; }
.tqv-od .oa-major-sort{ padding:0; border:0; background:none; color:inherit; font:inherit; cursor:default; }
.tqv-od .oa-major-row.oa-major-stat{ color:var(--tx2); background:var(--bg); }
.tqv-od .oa-major-company{ overflow-wrap:anywhere; }
.tqv-od .oa-major-company strong{ font-weight:600; }
.tqv-od .oa-major-closing .up{ color:var(--over); font-weight:600; } .tqv-od .oa-major-closing .down{ color:var(--under); font-weight:600; }
.tqv-od .oa-major-empty{ padding:8px 0; color:var(--mut); text-align:center; }
/* the goals panel's second block: Bet365's fixed lines — line | open over / under | closing over / under | chance of over.
   A row with history opens the price moves under it. */
.tqv-od .oa-major + .oa-major{ margin-top:16px; }
.tqv-od .oa-major-head > span{ font-size:12px; color:var(--mut); }
.tqv-od .oa-ladder-head,.tqv-od .oa-ladder-subhead,.tqv-od .oa-ladder-row{ display:grid; align-items:center; column-gap:0; padding:4px 6px; text-align:center; }
.tqv-od .oa-ladder-head{ grid-template-columns:minmax(84px,1fr) 2fr 2fr minmax(96px,1.3fr) 18px; padding-bottom:0; font-size:11px; font-weight:600; color:var(--mut); }
.tqv-od .oa-ladder-subhead,.tqv-od .oa-ladder-row{ grid-template-columns:minmax(84px,1fr) 1fr 1fr 1fr 1fr minmax(96px,1.3fr) 18px; }
.tqv-od .oa-ladder-subhead{ padding-top:0; font-size:11px; color:var(--mut); }
.tqv-od .oa-ladder-head span:nth-child(3),.tqv-od .oa-ladder-subhead span:nth-child(4),.tqv-od .oa-ladder-row span:nth-child(4){ border-left:1px solid var(--bd2); }
.tqv-od .oa-ladder-row.has-history{ cursor:pointer; }
.tqv-od .oa-ladder-line{ text-align:left; font-weight:700; }
.tqv-od .oa-ladder-close.up{ color:var(--over); font-weight:600; } .tqv-od .oa-ladder-close.down{ color:var(--under); font-weight:600; }
.tqv-od .oa-ladder-prob{ position:relative; display:block; height:18px; margin:0 6px; border-radius:4px; background:var(--bd2); overflow:hidden; }
.tqv-od .oa-ladder-prob i{ position:absolute; left:0; top:0; bottom:0; background:var(--brand); opacity:.28; }
.tqv-od .oa-ladder-prob b{ position:relative; font-size:12px; line-height:18px; }
.tqv-od .oa-ladder-arrow{ color:var(--mut); transition:transform .12s; }
.tqv-od .oa-ladder-row[aria-expanded="true"] .oa-ladder-arrow{ transform:rotate(90deg); }
.tqv-od .oa-ladder-withdrawn{ color:var(--mut); }
.tqv-od .oa-ladder-history{ max-height:190px; margin:2px 0 8px; padding:4px 0; border-radius:6px; background:var(--bg); overflow-y:auto; }
.tqv-od .oa-ladder-tick{ display:grid; grid-template-columns:1.4fr 1fr 1fr; padding:2px 8px; font-size:12px; text-align:center; color:var(--tx2); }
.tqv-od .oa-ladder-tick-head{ font-size:11px; font-weight:600; color:var(--mut); }

/* ways on to the match's pages */
.tqv-ft{ flex:none; display:flex; gap:8px; padding:10px 16px; border-top:1px solid var(--bd); background:var(--card); }
.tqv-ft a{ flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:9px 8px; border:1px solid var(--bd); border-radius:8px; text-align:center; font-weight:600; color:var(--tx); text-decoration:none; }
.tqv-ft a:hover{ border-color:var(--brand); color:var(--brand); }
.tqv-ft a.is-main,.tqv-ft a.is-main:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
.tqv-ft .ls{ display:none; }
/* a phone: the long label of the third link would take two lines, the short one fits; the form tables break names
   between words only and scroll sideways instead of cutting a name into syllables */
@media (max-width:767px){
  .tqv-ft .lf{ display:none; } .tqv-ft .ls{ display:inline; }
  .tqv-rf td.r,.tqv-rf td.l{ min-width:84px; overflow-wrap:normal; }
}
.tqv-ft svg{ flex:none; width:14px; height:14px; fill:currentColor; opacity:.8; }
/* standing on a bottom ad (js adLift): the foot takes the top bar's grey and a firm line under it, so the panel ends
   clearly where the ad begins */
.tqv.is-lifted .tqv-ft{ background:var(--bg); border-bottom:2px solid #c9d0db; }
.tqv.is-lifted .tqv-ft a:not(.is-main){ background:var(--card); }
/* "Remove ads" (a non-member, on an ad only): a small line under the foot, on the same grey; the firm line moves under it */
.tqv-noad{ display:none; }
.tqv.is-lifted .tqv-noad{ display:block; flex:none; margin-top:-4px; padding:0 16px 6px; background:var(--bg); border-bottom:2px solid #c9d0db; text-align:right; font-size:12px; line-height:18px; color:var(--tx2); text-decoration:none; }
.tqv.is-lifted .tqv-noad:hover{ color:var(--brand); text-decoration:none; }
.tqv.is-lifted.has-noad .tqv-ft{ border-bottom:0; }