/* Scenarios (/lab/scenarios, static/v4/scenarios.js): the builder of a scenario (the matches and
   their changes) beside the answer (the assumptions, each match before / after, the season). Every
   class starts with sx- so nothing collides with the rest of the site; colours come from the tokens.
   Wide: the builder on the left, the answer on the right. Narrow: the answer first, then the
   builder (conclusions before the controls). */

.sx { display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); grid-template-areas: "build res"; gap: var(--gap); padding: var(--pad); align-items: start; min-width: 0; }
.sx-res { grid-area: res; display: grid; gap: var(--gap); min-width: 0; }
.sx-build { grid-area: build; display: grid; gap: var(--gap); min-width: 0; }
.sx-out, .sx-eds { display: grid; gap: var(--gap); min-width: 0; }
.sx-out:empty, .sx-eds:empty { display: none; }
.sx > *, .sx-res > *, .sx-build > *, .sx-out > *, .sx-eds > * { margin-top: 0 !important; }
.sx-note { margin: 0; padding: 12px var(--pad) 16px; font-size: 13.5px; color: var(--mut); line-height: 1.5; }
.sx-empty { margin: 0; padding: 0 var(--pad) 18px; font-size: 14px; color: var(--mut); line-height: 1.55; max-width: 70ch; }
.sx-cf { margin: 0; padding: 0 4px; font-size: 12.5px; color: var(--faint); line-height: 1.5; }
.sx-cf a { color: var(--cob-2); font-weight: 600; white-space: nowrap; }

/* the assumptions, first */
.sx-sum .ch { padding-bottom: 6px; }
.sx-hyp { margin-left: auto; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--pill); background: var(--cob-soft); color: var(--cob-2); font: 700 12px var(--font); white-space: nowrap; cursor: default; }
.sx-lead { margin: 0 var(--pad) 12px; padding: 12px 16px; border-radius: var(--r-sm); background: var(--s2); font-size: 15px; line-height: 1.4; }
.sx-lead span { display: block; font: 700 11.5px var(--font); letter-spacing: 0; color: var(--mut); margin-bottom: 2px; }
.sx-lead b { color: var(--text); }
.sx-as { list-style: none; margin: 0; padding: 0 var(--pad) 16px; display: grid; gap: 8px; counter-reset: sx; }
.sx-as li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.45; color: var(--text); counter-increment: sx; }
.sx-as li::before { content: counter(sx); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--cob); color: var(--on-cob); font: 700 11.5px/20px var(--font); text-align: center; }
.sx-fact { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--pill); background: var(--win-soft, var(--cob-soft)); color: var(--win, var(--cob-2)); font: 700 10.5px/1.6 var(--font); font-style: normal; text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px; cursor: default; }
.sx-notes { margin: 0; padding: 10px var(--pad) 14px; list-style: none; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 12.5px; color: var(--faint); line-height: 1.45; }
.sx-how { margin: 0; padding: 0 var(--pad) 20px 40px; display: grid; gap: 8px; font-size: 14.5px; color: var(--mut); line-height: 1.45; }
.sx-how b { color: var(--text); }

/* a changed match */
.sx-m .ch .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-added { margin: 0; padding: 0 var(--pad) 12px; font-size: 13px; color: var(--mut); line-height: 1.45; } .sx-added b { color: var(--text); }
.sx-m-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); border-top: 1px solid var(--line); }
.sx-blk { padding: 14px var(--pad) 16px; display: grid; gap: 9px; align-content: start; min-width: 0; }
.sx-blk + .sx-blk { border-left: 1px solid var(--line); }
.sx-blk.sx-fix { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
.sx-blk.sx-fix:first-child { border-top: 0; }
.sx-blk h3 { margin: 0; font: 700 14px var(--font); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.sx-blk h3 span { font-weight: 500; font-size: 12.5px; color: var(--faint); }
.sx-r { display: grid; grid-template-columns: minmax(72px, 1fr) minmax(60px, 1.2fr) auto 58px; align-items: center; gap: 10px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sx-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mut); }
.sx-bar { position: relative; display: block; height: 8px; border-radius: 99px; background: var(--s3); overflow: hidden; }
.sx-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; }
.sx-bar i.b { background: var(--faint); opacity: .45; }
.sx-bar i.a { background: var(--cob); height: 4px; top: 2px; }
.sx-v { white-space: nowrap; color: var(--mut); cursor: default; } .sx-v b { color: var(--text); }
.sx-d { font-weight: 700; text-align: right; white-space: nowrap; color: var(--mut); font-variant-numeric: tabular-nums; }
.sx-d.up { color: var(--win); } .sx-d.down { color: var(--loss); }
.sx-x { margin: 0; font-size: 13px; color: var(--mut); line-height: 1.5; } .sx-x b { color: var(--text); }
.sx-mv span { white-space: nowrap; margin-right: 8px; } .sx-mv s { color: var(--faint); }

/* the players a change moves */
.sx-pt { display: grid; font-size: 13px; font-variant-numeric: tabular-nums; }
.sx-ph, .sx-pr { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; }
.sx-ph { font: 600 11.5px var(--font); color: var(--faint); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.sx-pr { padding: 7px 0; border-bottom: 1px solid var(--line); }
.sx-pr:last-child { border-bottom: 0; }
.sx-pn { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.sx-pn a { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sx-pn a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sx-pn small { flex-basis: 100%; font-size: 11.5px; color: var(--faint); }
.sx-pn em { font: 700 10.5px var(--font); font-style: normal; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: var(--pill); }
.sx-pn em.out { background: var(--loss-soft); color: var(--loss); } .sx-pn em.in { background: var(--cob-soft); color: var(--cob-2); }
.sx-pc { white-space: nowrap; color: var(--mut); display: inline-flex; align-items: center; gap: 4px; cursor: default; }
.sx-pc b { color: var(--text); }
.sx-pc i { font-style: normal; font-size: 10.5px; } .sx-pc i.up { color: var(--win); } .sx-pc i.down { color: var(--loss); }
.sx-more-n { margin: 0; padding: 6px 0; font-size: 12px; color: var(--faint); border-bottom: 1px solid var(--line); }

/* the season */
.sx-st { display: grid; font-size: 13.5px; font-variant-numeric: tabular-nums; border-top: 1px solid var(--line); }
.sx-sh, .sx-sr { display: grid; grid-template-columns: minmax(150px, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 12px; align-items: center; padding: 9px var(--pad); }
.sx-sh { font: 600 11.5px var(--font); color: var(--faint); padding-top: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.sx-sr + .sx-sr { border-top: 1px solid var(--line); }
.sx-tn { min-width: 0; display: grid; }
.sx-tn a { display: inline-block; padding: 3px 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-tn a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sx-tn small { font-size: 11.5px; color: var(--faint); }
.sx-sc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.sx-sc.no { color: var(--faint); }
.sx-sc .sx-bar { flex: 0 0 100%; height: 6px; max-width: 150px; }
.sx-sc .sx-bar i.a { height: 2px; }
.sx-scv { white-space: nowrap; color: var(--mut); cursor: default; } .sx-scv b { color: var(--text); }
.sx-sc .sx-d { font-size: 12.5px; text-align: left; }

/* the players' races in the season (top scorer, most assists) */
.sx-race { border-top: 1px solid var(--line); padding: 12px 0 4px; }
.sx-race h3 { margin: 0; padding: 0 var(--pad) 8px; font: 700 14px var(--font); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.sx-race h3 span { font-weight: 500; font-size: 12.5px; color: var(--faint); }
.sx-rh, .sx-rr { display: grid; grid-template-columns: minmax(150px, 1.3fr) repeat(2, minmax(0, 1fr)); gap: 12px; align-items: center; padding: 8px var(--pad); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sx-rh { font: 600 11.5px var(--font); color: var(--faint); padding-top: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.sx-rr + .sx-rr { border-top: 1px solid var(--line); }
.sx-rr .sx-sc.no .sx-scv b { color: var(--mut); }

/* the builder: one card per match */
.sx-ed .ch { align-items: flex-start; padding-bottom: 8px; }
.sx-ed-t { display: grid; gap: 2px; min-width: 0; flex: 1; }
.sx-ed-t h3 { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-ed-t .sub { font-size: 12.5px; }
.sx-rm { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--mut); font-size: 18px; line-height: 1; border: 1px solid var(--line); background: var(--s1); }
.sx-rm:hover { color: var(--text); background: var(--s2); }
.sx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 4px var(--pad) 12px; }
.sx-seg { flex-wrap: wrap; }
.sx-seg button { padding: 6px 11px; }
.sx-seg .v[aria-pressed="true"] .vword { color: inherit; }
.sx-lbl { margin: 0; font: 700 12px var(--font); color: var(--mut); }
.sx-lbl span { font-weight: 500; color: var(--faint); margin-left: 4px; }
.sx-side { padding: 12px var(--pad) 14px; border-top: 1px solid var(--line); display: grid; gap: 8px; min-width: 0; }
.sx-side h4 { margin: 0; font: 700 14px var(--font); }
.sx-side .chips { gap: 6px; }
.sx-side .chip { height: 30px; padding: 0 11px; font-size: 12.5px; }
.sx-side .chip small { font-size: 11px; color: var(--faint); font-weight: 600; }
.sx-o[aria-pressed="true"] { background: var(--loss-soft); color: var(--loss); border-color: var(--loss); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.sx-i[aria-pressed="true"] { background: var(--cob); color: var(--on-cob); border-color: var(--cob); }
.sx-i[aria-pressed="true"] small { color: inherit; opacity: .8; }
.sx-more summary { cursor: pointer; font: 700 12px var(--font); color: var(--cob-2); list-style: none; display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; }
.sx-more summary::-webkit-details-marker { display: none; }
.sx-more summary::before { content: "+"; font-weight: 700; }
.sx-more[open] summary::before { content: "−"; }
.sx-more summary span { font-weight: 500; color: var(--faint); }
/* a banned player (a fact: footy.site.bans) and how many matches a player out misses */
.sx-ban { border-style: dashed; }
.sx-ban small { text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px !important; color: var(--loss) !important; }
.sx-ban[aria-pressed="true"] small { color: inherit !important; }
.sx-span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.sx-span .sx-seg button { padding: 4px 10px; min-width: 32px; }
.sx-span .sx-lbl { font-weight: 600; }
.sx-more[open] summary { margin-bottom: 8px; }

/* the picker */
.sx-add-in { display: grid; gap: 12px; padding: 2px var(--pad) var(--pad); min-width: 0; }
.sx-lgs { gap: 6px; }
.sx-lgs .chip { height: 30px; padding: 0 11px; font-size: 12.5px; }
.sx-day .dd-btn { min-width: 0; }
.sx-fx { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sx-f { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 1px 10px; padding: 9px 10px 9px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--s1); text-align: left; font-size: 13.5px; transition: background .12s, border-color .12s; }
.sx-f:hover:not(:disabled) { background: var(--s2); border-color: var(--line-2); }
.sx-f .sx-ft { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.sx-f .sx-ft i { font-style: normal; color: var(--faint); font-weight: 500; }
.sx-f .sx-when { font-size: 12px; color: var(--faint); white-space: nowrap; }
.sx-f .plus { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cob); color: var(--on-cob); font-weight: 700; font-size: 16px; line-height: 1; }
.sx-f .sx-when { grid-row: 2; grid-column: 1; }
.sx-f .plus { grid-row: 1 / span 2; grid-column: 2; }
.sx-f:disabled { cursor: default; opacity: .6; }
.sx-f:disabled .plus { background: var(--s3); color: var(--mut); }

/* the match page's "What if a player misses it" (static/v4/scenario.js): the way on to the Lab */
.scn-open { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; color: var(--faint); }
.scn-open a { color: var(--cob-2); font-weight: 700; font-size: 13.5px; }
.scn-open a:hover { text-decoration: underline; text-underline-offset: 3px; }
.scn-span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.scn-span .sx-seg button { padding: 4px 10px; min-width: 32px; }
.scn-chips .chip small { font-size: 10.5px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.scn-chips .chip.sx-ban small { color: var(--loss); }
.scn-chips .chip[aria-pressed="true"] small { color: inherit; }
.scn-text .sx-fact { margin: 0 6px 0 0; }
.sx-fact.hyp { background: var(--cob-soft); color: var(--cob-2); }
.scn-h2 { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.scn-race span { white-space: nowrap; cursor: default; }


@media (max-width: 1360px) {
  .sx-m-in { grid-template-columns: minmax(0, 1fr); }
  .sx-blk + .sx-blk { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 1100px) {
  .sx { grid-template-columns: minmax(0, 1fr); grid-template-areas: "res" "build"; }
}
@media (max-width: 760px) {
  .sx { padding: var(--pad) 0; gap: var(--gap); }
  .sx > .sx-res > .card, .sx-out > .card, .sx-eds > .card, .sx-build > .card { border-radius: var(--r-sm); }
  .sx-cf { padding: 0 var(--pad); }
  .sx-as li { font-size: 14.5px; }
  .sx-lead { font-size: 14.5px; }
  .sx-r { grid-template-columns: minmax(0, 1fr) auto 54px; }
  .sx-r .sx-bar { display: none; }
  .sx-ph { display: none; }
  .sx-pr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 8px; }
  .sx-pn { grid-column: 1 / -1; }
  .sx-pn small { flex-basis: auto; }
  .sx-pc { display: grid; gap: 1px; }
  .sx-pc::before { content: attr(data-l); font: 600 10.5px var(--font); color: var(--faint); }
  .sx-pc i { display: none; }
  .sx-sh { display: none; }
  .sx-sr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .sx-tn { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: start; align-items: baseline; gap: 8px; }
  .sx-sc::before { content: attr(data-l); flex: 0 0 100%; font: 600 10.5px var(--font); color: var(--faint); }
  .sx-rh { display: none; }
  .sx-rr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
}

/* the three kinds of number: CONFIRMED (our data), SCENARIO ASSUMPTION, MODEL OUTPUT */
.sx-fact.mo { margin-left: auto; background: var(--chip, rgba(127, 127, 160, .16)); color: var(--mut); }
.ch .sx-fact.mo + .more { margin-left: 8px; }
.scn-h .sx-fact.mo { margin-left: 8px; }
.sx-race h3 .sx-fact.mo { margin-left: auto; }