/* The odds panel. Built only from /assets/tokens.css: hairlines instead of boxes, words in Plex Sans, every number in
   Plex Mono, color only where it means something (up / down / in-play / delayed / interactive). */

/* ---- top bar: /assets/nav.css (shared by every page); the board uses the whole width ---- */
@media (min-width: 901px) { .top { padding: 0 var(--s6); } }
.banner { padding: var(--s2) var(--s6); color: var(--yellow); border-bottom: 1px solid var(--line); font-size: var(--fs-12); }
.banner a { cursor: pointer; margin-left: var(--s2); }
.note { color: var(--yellow); border-left: 2px solid var(--yellow); padding: 2px var(--s3); margin: 0 0 var(--s4); font-size: var(--fs-12); }

/* ---- odds view ---- */
#v-odds { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.sidebar { position: sticky; top: 48px; height: calc(100vh - 48px); overflow-y: auto; padding: var(--s4) 0;
  border-right: 1px solid var(--line); }
#sports { list-style: none; margin: 0; padding: 0; }
#sports li { display: grid; grid-template-columns: 1fr 28px 40px; align-items: baseline; padding: 5px var(--s4) 5px 22px;
  cursor: pointer; color: var(--text-2); border-left: 2px solid transparent; }
#sports li .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sports li:hover { color: var(--text); }
#sports li.on { color: var(--text); font-weight: 600; border-left-color: var(--blue); }
#sports li .n { font: 400 var(--fs-11) var(--mono); color: var(--muted); text-align: right; }
#sports li .n.lv { color: var(--orange); }
#sports li .n.zero { color: var(--line-strong); }

.board { padding: var(--s4) var(--s6) var(--s16); }
.board-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6); margin-bottom: var(--s4); }
.tabs { display: flex; gap: var(--s6); }
.tabs button { border: 0; border-bottom: 1px solid transparent; background: none; padding: var(--s1) 0; cursor: pointer;
  color: var(--muted); font-size: var(--fs-14); display: inline-flex; align-items: center; gap: 6px; }
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--text); border-bottom-color: var(--text); }
.tabs button b { font-weight: 400; font-size: var(--fs-11); color: var(--muted); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.tools { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.search { display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line-strong); color: var(--muted); }
.search input { border: 0; background: none; padding: 4px 0; width: 160px; outline: none; color: var(--text); }
.search:focus-within { border-bottom-color: var(--text); }
.fresh { margin-left: auto; display: flex; gap: var(--s4); align-items: center; font-size: var(--fs-11); color: var(--muted); }
.fresh .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 6px; vertical-align: 1px; }
.fresh .dot.stale { background: var(--yellow); }
.fresh .delayed { color: var(--yellow); }
.fresh b { font-weight: 500; color: var(--text-2); }

.league { margin-bottom: var(--s6); }
.league-h { display: flex; align-items: baseline; gap: var(--s2); padding: 0 0 var(--s1); cursor: pointer; user-select: none;
  font-weight: 500; border-bottom: 1px solid var(--line-strong); }
.league-h .car { color: var(--muted); width: 12px; display: inline-flex; align-self: center; }
.league-h .cnt { font: 400 var(--fs-11) var(--mono); color: var(--muted); }
.league.closed .ev-table { display: none; }
.ev-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ev-table th { font-size: var(--fs-11); color: var(--muted); font-weight: 400; text-align: right; padding: var(--s1) var(--s2) 2px; }
.ev-table th.l { text-align: left; }
.ev-table col.c-time { width: 72px; } .ev-table col.c-ml { width: 128px; }
.ev-table col.c-hdp, .ev-table col.c-tot { width: 200px; } .ev-table col.c-act { width: 72px; }
.show-fair .ev-table col.c-ml { width: 176px; } .show-fair .ev-table col.c-hdp, .show-fair .ev-table col.c-tot { width: 248px; }
.ev-row td { border-bottom: 1px solid var(--line); padding: 3px var(--s2); vertical-align: top; }
.ev-row:hover td { background: var(--bg-2); }
.t-time { font: var(--fs-11)/var(--row) var(--mono); color: var(--muted); }
.t-time .st { color: var(--orange); display: block; }
.t-time .dt { display: block; }
.t-team { cursor: pointer; }
.t-team div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--row); }
.t-team .draw { color: var(--muted); }
.t-team .sc { float: right; font: 500 var(--fs-13)/var(--row) var(--mono); color: var(--orange); margin-left: var(--s2); }
.mk .cell { display: flex; align-items: center; justify-content: flex-end; gap: var(--s3); height: var(--row); white-space: nowrap; }
.mk .ln { font: var(--fs-12) var(--mono); color: var(--muted); white-space: nowrap; }
.px { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 72px; padding: 0 6px; white-space: nowrap;
  font: 500 var(--fs-13)/var(--row) var(--mono); font-variant-numeric: tabular-nums; color: var(--text); cursor: pointer;
  transition: background-color var(--flash); }
.px:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.px .ar { width: 8px; flex: none; display: inline-flex; justify-content: center; }
.px .fr { display: none; }
.show-fair .px .fr { display: inline; font-weight: 400; color: var(--muted); font-size: var(--fs-11); margin-left: 2px; }
.px.fl-u { background: var(--green-tint); transition: none; } .px.fl-d { background: var(--red-tint); transition: none; }
.px.off { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.ev-row.susp .px { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.t-act { text-align: right; white-space: nowrap; }
.star { border: 0; background: none; padding: 0 2px; color: var(--line-strong); cursor: pointer; line-height: var(--row); }
.star:hover { color: var(--muted); }
.star.on { color: var(--yellow); }
.ev-row.starred td:first-child { box-shadow: inset 1px 0 0 var(--yellow); }   /* starred: a hairline at the edge (lighter than the 2 px selection bar) */
/* toolbar toggles: a labelled button, filled when on */
.toggle { display: inline-flex; align-items: center; gap: 6px; height: var(--ctl-h); padding: 0 10px; cursor: pointer; user-select: none;
  border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius); background: var(--ctl-bg); color: var(--text-2);
  font-size: var(--fs-12); transition: border-color var(--fast), background-color var(--fast), color var(--fast); }
.toggle input { display: none; }
.toggle:hover { border-color: var(--ctl-border-hover); color: var(--text); }
.toggle:has(input:checked) { background: var(--text); border-color: var(--text); color: var(--bg); }

.more { border: 0; background: none; padding: 0 2px; cursor: pointer; font: var(--fs-11)/var(--row) var(--mono); color: var(--blue); }

.empty { color: var(--muted); padding: var(--s12) 0; }
.more-rows { display: flex; align-items: center; justify-content: center; gap: var(--s4); padding: var(--s6) 0; color: var(--muted); font-size: var(--fs-11); }
.locked { padding: var(--s6) 0; color: var(--text-2); border-top: 1px solid var(--line); }
.locked p { margin: 0 0 var(--s3); max-width: 560px; }

/* ---- drawer (event detail) ---- */
.drawer { position: fixed; inset: 48px 0 0 auto; width: min(760px, 100vw); z-index: 40; background: var(--bg);
  box-shadow: var(--shadow); }
.drawer-in { height: 100%; overflow-y: auto; padding: var(--s6) var(--s6) var(--s16); }
.close { position: absolute; top: var(--s3); right: var(--s4); }
.d-head .meta { color: var(--muted); font-size: var(--fs-12); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); align-items: center; }
.d-head .meta .live { color: var(--orange); font-family: var(--mono); }
.d-head .meta .delayed { color: var(--yellow); }
.d-head h2 { margin: var(--s1) 0; font-size: var(--fs-20); font-weight: 500; line-height: var(--lh-tight); padding-right: var(--s8); }
.d-head h2 .v { color: var(--muted); font-weight: 400; }
.d-head .score { font: 500 var(--fs-28) var(--mono); margin: var(--s2) 0 0; color: var(--orange); }
.d-sec { margin-top: var(--s8); }
.d-sec > h3 { font-size: var(--fs-12); font-weight: 500; color: var(--muted); margin: 0 0 var(--s2); }
.mkt { margin: 0 0 var(--s6); }
.mkt h4 { margin: 0; padding-bottom: var(--s1); font-size: var(--fs-13); font-weight: 500; display: flex; gap: var(--s3); align-items: baseline;
  border-bottom: 1px solid var(--line-strong); }
.mkt h4 .mg { font: 400 var(--fs-11) var(--mono); color: var(--muted); }
.mkt table { width: 100%; border-collapse: collapse; }
.mkt th { font-size: var(--fs-11); color: var(--muted); font-weight: 400; text-align: right; padding: var(--s1) 6px 2px; white-space: nowrap; }
.mkt th.l, .mkt td.l { text-align: left; }
.mkt td { padding: 1px 6px; border-bottom: 1px solid var(--line); text-align: right; font: var(--fs-12)/var(--row) var(--mono); white-space: nowrap; }
.mkt tr.main td.l { font-weight: 600; }
.mkt td .px { min-width: 76px; }
.mkt .px:hover { text-decoration: none; }   /* in the detail the whole row is the target (it opens the chart) */
.mkt .sub { color: var(--muted); font-size: var(--fs-11); }
.mkt .susp { color: var(--yellow); font-size: var(--fs-11); }
.chart-btn { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0 2px; display: inline-flex; vertical-align: middle; }
.chart-btn:hover, .chart-btn.on { color: var(--blue); }
.chart-btn.lk { color: var(--line-strong); cursor: default; }
.mkt tr.mrow { cursor: pointer; }
.mkt tr.mrow:hover td { background: var(--bg-2); }
.mkt tr.mrow:hover .chart-btn { color: var(--blue); }
.mkt tr.sel td { background: var(--bg-2); }
.mkt tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--blue); }
.chart-row > td { background: var(--bg-2); padding: 0 var(--s4) var(--s3); border-bottom: 1px solid var(--line-strong); }
.chart-box { padding: var(--s3) 0 var(--s2); font-family: var(--sans); }
.chart-head { display: flex; align-items: baseline; gap: var(--s4); margin-bottom: var(--s3); }
.chart-head .ttl { font-weight: 500; font-size: var(--fs-13); color: var(--text); }
.chart-head .rng { margin-left: auto; display: flex; gap: 2px; }
.chart-head .rng button { border: 0; background: none; cursor: pointer; font: var(--fs-11) var(--mono); color: var(--muted);
  padding: 2px 6px; border-radius: min(var(--ctl-radius), 6px); }
.chart-head .rng button:hover { color: var(--text); }
.chart-head .rng button.on { color: var(--bg); background: var(--text); }
.chart-box svg.hist { width: 100%; height: 220px; display: block; overflow: visible; }
.chart-box .legend { display: flex; gap: var(--s4); font-size: var(--fs-11); color: var(--muted); flex-wrap: wrap; align-items: center; margin-top: var(--s1); }
.chart-box .legend i { display: inline-block; width: 12px; height: 1.5px; vertical-align: middle; margin-right: 6px; }
.chart-box .legend .num { color: var(--text-2); }
.chart-box .legend a { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.chart-tip { position: absolute; pointer-events: none; background: var(--bg); border: 1px solid var(--line-strong); color: var(--text);
  font: var(--fs-11)/1.5 var(--mono); padding: var(--s1) var(--s2); white-space: nowrap; text-align: left; }
.chart-tip .k { color: var(--muted); }

/* ---- pages (drops) ---- */
.page { padding: var(--s8) var(--s6) var(--s16); max-width: var(--content); margin: 0 auto; }
.page h1 { font-size: var(--fs-20); font-weight: 500; margin: 0; line-height: var(--lh-tight); }
.page .lead { color: var(--muted); margin: var(--s1) 0 var(--s6); }
.filters { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: center; padding-bottom: var(--s4);
  margin-bottom: var(--s2); border-bottom: 1px solid var(--line); }
.field { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); }
.field .input { width: 64px; }
.sep { width: 1px; height: 16px; background: var(--line-strong); }
.grid { width: 100%; border-collapse: collapse; }
.grid th { text-align: left; font-size: var(--fs-11); font-weight: 400; color: var(--muted); padding: var(--s2) var(--s2) var(--s1);
  border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.grid th.r, .grid td.r { text-align: right; }
.grid td { padding: 6px var(--s2); border-bottom: 1px solid var(--line); vertical-align: middle; }
.grid td.r, .grid td.t { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.grid td.t { color: var(--muted); font-size: var(--fs-11); white-space: nowrap; }
.grid tr.click { cursor: pointer; }
.grid tr.click:hover td { background: var(--bg-2); }
.grid tr.new td { animation: newrow 3s ease-out; }
.grid tr.sel td { background: var(--bg-2); }
.grid tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--blue); }
#drops tr.sel .d-spark svg { visibility: hidden; }   /* expanded: the full chart replaces the sparkline */
.lbl-m { display: none; }
.grid .chart-row > td { background: var(--bg-2); padding: 0 var(--s4) var(--s3); border-bottom: 1px solid var(--line-strong); }
.chart-head .go { height: 24px; padding: 0 10px; font-size: var(--fs-12); }
@keyframes newrow { from { background: var(--bg-2); } to { background: transparent; } }
.grid .evn b { display: block; font-weight: 500; }
.grid .evn span { color: var(--muted); font-size: var(--fs-11); }
.grid .lv { color: var(--orange); font-family: var(--mono); }
.spark { width: 80px; height: 20px; display: block; }
.lim { margin-left: 4px; display: inline-flex; vertical-align: 1px; }

/* ---- modal, toast ---- */
.modal { position: fixed; inset: 0; z-index: 80; background: rgba(16, 15, 15, .4); display: flex; align-items: center; justify-content: center; padding: var(--s4); }
.modal-in { background: var(--bg); padding: var(--s6); width: min(420px, 100%); box-shadow: var(--shadow); }
.modal-in h3 { margin: 0 0 var(--s4); font-size: var(--fs-16); font-weight: 500; }
.modal-in .input { width: 100%; margin-bottom: var(--s4); font-family: var(--mono); }
.modal-in .acts { display: flex; gap: var(--s2); justify-content: flex-end; }
.modal-in .dev { font-size: var(--fs-11); color: var(--muted); margin-top: var(--s4); }
.modal-in .dev code { cursor: pointer; color: var(--blue); font-family: var(--mono); }
.toast { position: fixed; bottom: var(--s6); left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg);
  padding: var(--s2) var(--s4); z-index: 90; font-size: var(--fs-12); }

/* ==== responsive ================================================================================================
   No library: media queries for the page, container queries for the event detail (its tables react to the drawer's
   own width, so a long 1X2 never needs a horizontal scrollbar), :has() and data attributes for state. */

/* ---- event detail: secondary columns give way, in order, as the drawer narrows (Changed, Margin, Opening, Max) ---- */
.drawer-in { container: drawer / inline-size; }
.mkt table { table-layout: auto; }
.mkt th.side { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
/* Fair odds make every price column wider: with it on, columns give way earlier. Hidden values stay one tap away:
   the row opens its chart, whose legend has the opening / closing prices and the max stakes. */
@container drawer (max-width: 760px) { .mkt table.three .c-chg, .show-fair .mkt .c-chg { display: none; } .show-fair .mkt table.three .c-mg { display: none; } }
@container drawer (max-width: 640px) { .mkt .c-chg { display: none; } .mkt table.three .c-mg, .show-fair .mkt .c-mg { display: none; } }
@container drawer (max-width: 540px) { .mkt .c-mg { display: none; } .mkt table.three .c-open, .mkt table.three .c-max, .show-fair .mkt .c-open { display: none; } }
@container drawer (max-width: 500px) { .mkt .c-open { display: none; } .show-fair .mkt .c-max { display: none; } .mkt th.side { max-width: 88px; } }
@container drawer (max-width: 380px) { .mkt .c-max { display: none; } }

/* phone-only controls: hidden on wider screens */
.mk-switch, .filters-btn, .close .i-back { display: none; }

/* ---- tablet ---- */
@media (max-width: 1100px) {
  #v-odds { grid-template-columns: 176px minmax(0, 1fr); }
  .ev-table col.c-ml { width: 112px; } .ev-table col.c-hdp, .ev-table col.c-tot { width: 168px; }
  .show-fair .ev-table col.c-ml { width: 156px; } .show-fair .ev-table col.c-hdp, .show-fair .ev-table col.c-tot { width: 216px; }
}

/* ---- narrow: the sports list becomes a strip of chips under the top bar ---- */
@media (max-width: 900px) {
  #v-odds { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 48px; z-index: 20; height: auto; background: var(--bg); border-right: 0;
    border-bottom: 1px solid var(--line); padding: 0; }
  #sports { display: flex; overflow-x: auto; scrollbar-width: none; padding: 0 var(--s2); }
  #sports::-webkit-scrollbar { display: none; }
  #sports li { display: flex; gap: 6px; border-left: 0; border-bottom: 2px solid transparent; padding: 10px var(--s3); white-space: nowrap; }
  #sports li.on { border-bottom-color: var(--blue); }
  #sports li .n { text-align: left; }
  .board, .page { padding-left: var(--s4); padding-right: var(--s4); }
  .fresh { margin-left: 0; }
}

/* ---- phone ---- */
@media (max-width: 700px) {
  :root { --row: 28px; }   /* touch: taller rows */
  .banner { padding: var(--s2) var(--s3); }

  /* board header: tabs, then search, then the toggles; the market switch picks the one market per match */
  .board { padding: var(--s3) var(--s3) var(--s16); }
  .board-head { gap: var(--s3); }
  .tabs { width: 100%; }
  .tools { width: 100%; gap: var(--s2); }
  .search { flex: 1 1 100%; }
  .search input { width: 100%; }
  .tools .select { flex: 1; }
  .fresh { display: none; }
  .mk-switch { display: flex; width: 100%; border: 1px solid var(--ctl-border); border-radius: var(--ctl-radius); }
  .mk-switch button { flex: 1; border: 0; background: none; height: 32px; color: var(--text-2); cursor: pointer; font-size: var(--fs-12); }
  .mk-switch button + button { border-left: 1px solid var(--ctl-border); }
  .mk-switch button.on { background: var(--text); color: var(--bg); }

  /* a match is a compact grid: time | teams | the chosen market | star */
  .ev-table, .ev-table tbody { display: block; }
  .ev-table thead, .ev-table colgroup { display: none; }
  .ev-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 28px; align-items: start; border-bottom: 1px solid var(--line); }
  .ev-row td { border: 0; padding: var(--s2) 2px; }
  .ev-row td.mk { display: none; }
  body:not([data-mk="ml"]) .ev-row .t-team .draw { display: none; }   /* "Draw" belongs to 1X2 only */
  body[data-mk="ml"] .ev-row td.mk-ml, body[data-mk="hdp"] .ev-row td.mk-hdp, body[data-mk="tot"] .ev-row td.mk-tot { display: block; }
  .ev-row.starred td:first-child { box-shadow: inset 1px 0 0 var(--yellow); }
  .t-time { padding-left: 6px !important; }
  .t-act { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .px { min-width: 64px; }
  .mk .cell { gap: var(--s2); }

  /* event detail: a full-screen sheet with a back arrow */
  .drawer { inset: 0; width: 100vw; z-index: 70; box-shadow: none; }
  .drawer-in { padding: 56px var(--s4) var(--s16); }
  .close { top: var(--s2); left: var(--s2); right: auto; width: 40px; height: 40px; }
  .close .i-x { display: none; }
  .close .i-back { display: inline; }
  .d-head h2 { font-size: var(--fs-16); padding-right: 0; }
  .chart-head { flex-wrap: wrap; gap: var(--s2); }
  .chart-head .rng { margin-left: 0; }
  .chart-box svg.hist { touch-action: pan-y; }
  .chart-row > td { padding: 0 var(--s2) var(--s3); }

  /* drops: filters behind a button; each row a card */
  .page { padding: var(--s4) var(--s3) var(--s16); }
  .filters-btn { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--s3); }
  .filters { display: none; }
  .filters.open { display: flex; }
  .filters .select { flex: 1 1 40%; }
  #drops, #drops tbody { display: block; }
  #drops thead { display: none; }
  #drops tr.click { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px var(--s3);
    grid-template-areas: "ev ev move" "sel from now" "t max spark"; padding: var(--s2) var(--s2) var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
  /* a card is one surface: hover / selection colour the row, not each cell (the grid gaps would show) */
  #drops tr.click td, #drops tr.click:hover td, #drops tr.sel td { border: 0; padding: 0; background: none; box-shadow: none; }
  #drops tr.click:hover, #drops tr.sel { background: var(--bg-2); }
  #drops tr.sel { box-shadow: inset 2px 0 0 var(--blue); }
  #drops tr.new { animation: newrow 3s ease-out; }
  #drops tr.new td { animation: none; }
  #drops .lbl-m { display: inline; }
  #drops .d-ev { grid-area: ev; } #drops .d-move { grid-area: move; } #drops .d-sel { grid-area: sel; font-size: var(--fs-12); }
  #drops .d-from { grid-area: from; color: var(--muted); } #drops .d-now { grid-area: now; } #drops .d-t { grid-area: t; }
  #drops .d-max { grid-area: max; color: var(--muted); font-size: var(--fs-11); } #drops .d-spark { grid-area: spark; }
  #drops .d-fair { display: none; }
  #drops tr.chart-row { display: block; }
  #drops tr.chart-row td { display: block; }
  .more-rows { padding: var(--s4) 0; }
  .modal-in { padding: var(--s4); }
}