/* Gameweek page charts. Marks are thin (bars <= 12px here), 4px rounded data-ends, 2px surface rings on dots,
   hairline solid grid, text in ink tokens. Accent pink against grey and ink. */

.sec h2 + .sec-sub.lead { max-width: 62ch; font-size: 14px; color: var(--ink-2); }
.gw-deadline { margin-top: 14px; }
.how { margin-top: 14px; }
.how summary, .more summary, .tview summary {
  display: block; width: fit-content; cursor: pointer; list-style: none; padding: 2px 0;
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.how summary::-webkit-details-marker, .more summary::-webkit-details-marker, .tview summary::-webkit-details-marker { display: none; }
.how summary::after, .more summary::after, .tview summary::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 2px 8px;
  border-right: 2px solid var(--pink); border-bottom: 2px solid var(--pink); transform: rotate(45deg); transition: transform .15s;
}
.how[open] summary::after, .more[open] summary::after, .tview[open] summary::after { transform: rotate(-135deg); margin-bottom: -2px; }
.how p { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--panel); font-size: 13.5px; color: var(--ink-2); max-width: 70ch; }
.note { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.more { margin-top: 10px; }
.more > .db-list { margin-top: 8px; }

/* legend: line-key swatches, text stays ink */
.legend2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 12px 0 8px; font-size: 12.5px; color: var(--ink-2); }
.lg { display: inline-flex; align-items: center; gap: 7px; }
.lgd { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.lgd.home { background: var(--ink); border-radius: 2px; }
.lgd.draw { background: #c9c9d1; border-radius: 2px; }
.lgd.away { background: var(--pink); border-radius: 2px; }
.lgd.over { background: var(--pink); }
.lgd.under { background: var(--ink); }
.lgd.even { background: #b4b4bd; }
.lgd.market { background: #fff; border: 2px solid var(--pink); }
.lgd.mk { width: 3px; height: 12px; margin: 0 3.5px; border-radius: 1px; background: var(--ink); }
.legend2 a { color: var(--ink); font-weight: 700; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.lg-note { margin-left: auto; color: var(--ink-3); }

/* (b) doubts list */
.db-list { display: grid; gap: 8px; }
.db { padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.db-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.db-id { display: flex; align-items: center; gap: 7px; min-width: 0; }
.db-name { min-width: 0; font-weight: 700; font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }
.db-pos { flex: none; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.db-news { margin-top: 5px; font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.db-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 7px; }
.db-own { font-size: 12px; color: var(--ink-3); }
.db-foot .xchips { margin-top: 0; }
.fpl-pill { flex: none; display: inline-block; padding: 3px 10px; border-radius: 999px; font: 700 12px/1.3 'Figtree', sans-serif; color: var(--ink); }
.fpl-pill.c75 { background: #ececf0; }
.fpl-pill.c50 { background: rgba(255, 135, 166, .30); }
.fpl-pill.c25 { background: rgba(255, 135, 166, .58); }
.fpl-pill.c0 { background: var(--pink); }
.db-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 6px; margin: 12px 0 10px; font-size: 12.5px; color: var(--ink-2); }
.db-legend .fpl-pill { padding: 2px 8px; font-size: 11.5px; }

/* (c) captain picks */
.plist { display: grid; gap: 8px; }
.pcard { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 10px; align-items: start; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; }
.prank { padding-top: 1px; font: 900 15px/1.2 'Rubik', sans-serif; color: var(--pink); }
.pmain { min-width: 0; }
.pname { display: flex; align-items: center; gap: 7px; min-width: 0; font-weight: 700; font-size: 15px; line-height: 1.2; }
.pname span { min-width: 0; overflow-wrap: anywhere; }
.pick-tag { flex: none; padding: 2px 6px; border-radius: 999px; background: var(--pink-soft); color: var(--ink); font-style: normal; font-size: 10px; }
.pick-tag .explainer-button { width: 13px; height: 13px; font-size: 8px; }
.psub { margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.xbar { height: 8px; margin-top: 8px; border-radius: 8px; background: #ececf0; overflow: hidden; }
.xbar i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--pink); }
.xbreak { display: flex; height: 10px; margin-top: 9px; overflow: hidden; border-radius: 8px; background: var(--line); }
.xbreak i { display: block; min-width: 1px; height: 100%; }
.xb-appearance { background: #d5d5dc; }
.xb-goals { background: var(--pink); }
.xb-assists { background: var(--lav); }
.xb-clean { background: var(--cyan); }
.xb-defcon { background: #54545d; }
.xb-bonus { background: #ffc857; }
.break-legend { display: flex; flex-wrap: wrap; gap: 5px 12px; margin: 10px 0 8px; color: var(--ink-3); font-size: 10.5px; text-transform: capitalize; }
.break-legend span { display: inline-flex; align-items: center; gap: 5px; }
.break-legend i { width: 9px; height: 9px; border-radius: 2px; }
.stats { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 7px; font-size: 12.5px; color: var(--ink-2); }
.stat b { color: var(--ink); font-weight: 700; }
.pnews { margin-top: 6px; font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
.pbig { text-align: right; min-width: 52px; }
.pbig b { display: block; font: 900 24px/1 'Rubik', sans-serif; }
.pbig i { display: block; margin-top: 3px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.xchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.xchip { display: inline-block; max-width: 100%; padding: 4px 10px; border-radius: 999px; background: #000; color: #fff; text-decoration: none; font: 600 11.5px/1.2 'Figtree', sans-serif; overflow-wrap: anywhere; }
.xchip:hover { background: #1b1b1f; }

/* (c2) projection consensus: cards on phones, table from 720px. Shaded number = highest model. */
.credits { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.credits a { color: var(--ink); font-weight: 700; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 2px; }
#co-body { margin-top: 12px; }
.cons-cards { display: grid; gap: 8px; }
.ccard { padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.ctop { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 10px; align-items: start; }
.cvals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }
.cv { min-width: 0; padding: 6px 2px 5px; border-radius: 10px; background: var(--panel); text-align: center; }
.cv i { display: block; font-style: normal; font-size: 10px; font-weight: 600; color: var(--ink-3); overflow-wrap: anywhere; }
.cv b { display: block; margin-top: 1px; font-size: 16px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cv.hi { background: rgba(255, 135, 166, .26); }
.cv.hi i { color: var(--ink-2); }
.cv.off b { font-weight: 600; color: var(--ink-3); }
.ctable { display: none; }
.ctable .prank { flex: none; width: 18px; }

/* source mix: pills pick one model or Blend; Blend adds a weight slider per model */
.mix { margin-top: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.mix-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.mix-l { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.mix .pills { gap: 6px; }
.mix .pill { padding: 6px 12px; font-size: 12.5px; }
.mix-sl { display: grid; gap: 6px; margin-top: 12px; }
.mix-s { display: grid; grid-template-columns: 82px minmax(0, 1fr) 40px; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.mix-s input { width: 100%; margin: 0; accent-color: var(--pink); }
.mix-pct { text-align: right; font: 800 14px 'Rubik', sans-serif; font-variant-numeric: tabular-nums; }
.mix-note { margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }
.msrc { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.msrc b { color: var(--ink); font-weight: 700; }

/* player lists: each list is a dropdown, closed by default */
.fold { margin-top: 10px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); overflow: clip; }
#lists .sec-sub + .fold { margin-top: 14px; }
.fold > summary {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px;
  padding: 13px 40px 13px 14px; cursor: pointer; list-style: none;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after {
  content: ""; position: absolute; right: 17px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border-right: 2px solid var(--pink); border-bottom: 2px solid var(--pink); transform: rotate(45deg); transition: transform .15s;
}
.fold[open] > summary::after { margin-top: -2px; transform: rotate(-135deg); }
.fold[open] > summary { border-bottom: 1px solid var(--line); background: #fff; }
.fold > summary:hover { background: #fff; }
.fold-t { flex: 1 1 240px; min-width: 0; }
.fold-t h3 { font: 800 17px/1.25 'Rubik', sans-serif; }
.fold-sub { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.fold-top { flex: none; max-width: 100%; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; color: var(--ink-2); overflow-wrap: anywhere; }
.fold-top:empty { display: none; }
.fold-body { padding: 10px; background: #fff; }

/* (d) clean-sheet bars */
.cs-list { display: grid; gap: 2px; }
.csr { display: grid; grid-template-columns: 20px minmax(0, 104px) minmax(0, 1fr) 40px; column-gap: 8px; align-items: center; padding: 5px 4px; border-radius: 10px; min-width: 0; }
.csr > .eleven-line { grid-column: 2 / -1; margin-top: 2px; }
.csr:hover { background: var(--panel); }
.crest-ph { width: 20px; height: 20px; }
.cs-t { min-width: 0; line-height: 1.15; }
.cs-t b { display: block; font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.cs-t span { display: block; margin-top: 1px; font-size: 11px; color: var(--ink-3); overflow-wrap: anywhere; }
.bar { position: relative; height: 10px; background: transparent; border-radius: 0; min-width: 0; }
.bar .emk { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; border-radius: 1px; background: var(--ink); box-shadow: 0 0 0 1px #fff; }
.bar i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--pink); }
.cs-v { text-align: right; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* (e) goals per match: xG numbers plus one 1X2 stack */
.gm-list { display: grid; gap: 8px; }
.gm { padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.gm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px; }
.gm-teams { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 14.5px; }
.gm-teams b { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.gm-ko { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.gm-xg { display: flex; justify-content: space-between; margin-top: 11px; }
.gm-xg span { display: flex; flex-direction: column; }
.gm-xg span:last-child { align-items: flex-end; text-align: right; }
.gm-xg b { font: 900 22px/1 'Rubik', sans-serif; }
.gm-xg i { margin-top: 3px; color: var(--ink-3); font-size: 10px; font-style: normal; }
.gm-1x2 { display: flex; gap: 2px; height: 6px; margin-top: 12px; }
.gm-1x2 i { display: block; min-width: 2px; }
.gm-1x2 .home { background: var(--ink); border-radius: 3px 0 0 3px; }
.gm-1x2 .draw { background: #c9c9d1; }
.gm-1x2 .away { background: var(--pink); border-radius: 0 3px 3px 0; }
.gm-p { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; margin-top: 6px; font-size: 12.5px; color: var(--ink-2); }
.gm-p span:first-child { text-align: left; overflow-wrap: anywhere; }
.gm-p span:nth-child(2) { text-align: center; }
.gm-p span:last-child { text-align: right; overflow-wrap: anywhere; }
.gm-note { margin-top: 6px; font-size: 11.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.gm-note a { color: var(--ink); font-weight: 700; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.gm > .eleven-line { margin-top: 8px; }
.model-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 12px 0 9px; color: var(--ink-2); font-size: 12px; }
.model-legend strong { color: var(--ink); }
.model-legend > span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); }

/* (f) scatter */
.scwrap { max-width: 560px; }
.sc { display: block; width: 100%; height: auto; touch-action: pan-y; }
.sc .tk { font: 500 10.5px 'Figtree', sans-serif; fill: #85858f; }
.sc .ax { font: 600 11px 'Figtree', sans-serif; fill: #4b4b54; }
.sc .pl { font: 700 11px 'Figtree', sans-serif; fill: #0a0a0a; stroke: #fff; stroke-width: 3px; paint-order: stroke; stroke-linejoin: round; }
.perf-lists { display: grid; gap: 10px; margin-top: 14px; }
.perf-rank { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 14px; }
.perf-rank h3 { font: 800 14px/1.2 'Rubik', sans-serif; }
.perf-rank ol { display: grid; gap: 6px; margin-top: 9px; }
.perf-rank li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 1px 7px; align-items: center; min-width: 0; }
.perf-rank .prank { grid-row: 1 / 3; }
.perf-name { min-width: 0; }
.perf-name b, .perf-name i { display: block; overflow-wrap: anywhere; }
.perf-name i { color: var(--ink-3); font-size: 10.5px; font-style: normal; }
.perf-rank strong { text-align: right; font-size: 12px; }
.perf-rank small { color: var(--ink-3); font-size: 10.5px; text-align: right; }

/* table-view twin */
.tview { margin-top: 12px; }
.tview .tv { width: 100%; margin-top: 8px; table-layout: fixed; border-collapse: collapse; font-size: 12.5px; }
.tv th, .tv td { padding: 6px 5px; text-align: left; border-bottom: 1px solid #f0f0f3; overflow-wrap: anywhere; vertical-align: middle; }
.tv th { font-weight: 700; color: var(--ink-2); }
.tv .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tv-player b, .tv-player i { display: block; }
.tv-player i { margin-top: 1px; color: var(--ink-3); font-size: 10.5px; font-style: normal; }
.tv td.tv-pos { color: var(--pink); font-weight: 800; }
.tv td.tv-neg { color: var(--ink-3); font-weight: 700; }

@media (max-width: 430px) {
  .tview .tv { font-size: 11.5px; }
  .tv th, .tv td { padding-right: 3px; padding-left: 3px; }
  .tv .tv-low { display: none; }
}

#tip { position: fixed; z-index: 20; max-width: 260px; padding: 8px 10px; border-radius: 10px; background: #000; color: #fff; font-size: 12px; line-height: 1.35; pointer-events: none; }
#tip .tip-v { font-weight: 800; font-size: 13px; }
#tip .tip-l { color: #d8d8de; overflow-wrap: anywhere; }
#tip .tip-l:empty { display: none; }

.back { margin-top: 36px; }
.mini-list { display: grid; gap: 6px; }
.mini-row { display: grid; grid-template-columns: 22px 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.mini-name { min-width: 0; }
.mini-name b, .mini-name i { display: block; overflow-wrap: anywhere; }
.mini-name i { margin-top: 1px; color: var(--ink-3); font-style: normal; font-size: 11px; }
.mini-row strong { text-align: right; font-size: 12px; }
.set-grid { display: grid; gap: 8px; }
.set-row { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.set-row h3 { display: flex; align-items: center; gap: 7px; font: 700 14px 'Figtree', sans-serif; }
.set-row p { margin-top: 3px; color: var(--ink-2); font-size: 12px; }

@media (min-width: 720px) {
  .cons-cards { display: none; }
  .ctable { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
  .ctable th, .ctable td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .ctable th { font-size: 12.5px; font-weight: 700; color: var(--ink-2); text-align: left; }
  .ctable .cp { width: 34%; }
  .ctable .n { text-align: right; font-variant-numeric: tabular-nums; }
  .ctable th.n.off, .ctable td.off { color: var(--ink-3); }
  .cpid { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .cpn { min-width: 0; line-height: 1.2; }
  .cpn b { display: block; font-weight: 700; overflow-wrap: anywhere; }
  .cpn i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-3); }
  .ctable .v { display: inline-block; min-width: 40px; padding: 2px 8px; border-radius: 8px; }
  .ctable .v.hi { background: rgba(255, 135, 166, .26); font-weight: 700; }
  .ctable td.avg .v { font: 900 17px/1.2 'Rubik', sans-serif; }
  .plist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .db-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-list, .set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perf-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}