/* The dashboards (players, goalkeepers, teams) on direction A: the old dashboard stylesheet with its
   token names mapped onto the site's tokens, plus the few helper classes its scripts expect. */
:root { --paper: var(--bg); --surface: var(--s1); --sunken: var(--s2); --mist: var(--s4); --muted: var(--mut); --cobalt: var(--cob); --cobalt-2: var(--cob); --cobalt-text: var(--cob-2); --cobalt-soft: var(--cob-soft); --track: var(--s3); --focus: var(--cob); --r-pill: 999px; --shadow-2: var(--shadow); --shadow-3: var(--shadow); --topbar-h: var(--top); --display: var(--disp); }
.muted { color: var(--mut); } .faint { color: var(--faint); } .num { font-variant-numeric: normal; }
.table-wrap { overflow: auto; } .sub-row { display: block; font-size: 12px; color: var(--faint); font-weight: 500; }
.select { height: 36px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--s2); color: var(--text); font: 600 14px var(--font); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wrap { max-width: none; margin: 0; padding: 0 20px; }
.dash .card { margin-top: 0; }
.dash-body { padding-top: 16px; }
.dash-bar { top: calc(var(--top) + 56px); background: var(--glass); }
.dash-bar .wrap { padding-left: 20px; padding-right: 20px; }
.dk-head h2 { font-family: var(--disp); font-weight: 800; letter-spacing: -.02em; }
.dc-svg .res { fill: var(--level); } .dc-svg .r-w .res { fill: var(--win); } .dc-svg .r-l .res { fill: var(--loss); }
.dc-legend .l-w { background: var(--win); } .dc-legend .l-d { background: var(--level); } .dc-legend .l-l { background: var(--loss); }
.dd-res { background: var(--s3); } .dd-res.r-w { background: var(--win); color: #fff; } .dd-res.r-l { background: var(--loss); color: #fff; }
.dk-res { background: var(--s3); } .dk-res.r-w { background: var(--win); color: #fff; } .dk-res.r-l { background: var(--loss); color: #fff; }
.dp-svg { background: radial-gradient(120% 90% at 50% 0%, var(--pitch-a), var(--pitch-b)); }
.dp-svg .ln { stroke: var(--pitch-line); } .dp-svg .ln.goal { stroke: #fff; } .dp-svg .ln.dot { fill: var(--pitch-line); }
.dp-svg .s { fill: rgba(255, 255, 255, .3); stroke: #fff; } .dp-svg .g { fill: var(--cob); stroke: #fff; }
.dp-svg .s.against { fill: rgba(255, 107, 107, .3); stroke: var(--loss); } .dp-svg .g.against { fill: var(--loss); }
@media (max-width: 760px) { .dash-bar { top: var(--top); } }
/* The dashboards (players, goalkeepers, teams) and the Stats section, on the site's own paper,
   cards and colours: the same hero as the player and team pages (.v-night), cards (.card),
   chips and menus, light or dark with the theme. Results as everywhere on the site: won in
   cobalt, drawn in mist, lost in ink; the side "for" in cobalt, "against" in ink. */

/* -- the hero: the page's own (.v-night .v-phero / .v-thero), with the dashboard's figure ------ */
.dash-hero .chips-row .chip[aria-current="page"] { pointer-events: none; }
.dash-hero .big .v-kicker { max-width: 300px; }

/* -- the sticky bar of filters ---------------------------------------------------------------------- */
.dash-bar { position: sticky; top: var(--topbar-h, 64px); z-index: 30; background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.dash-bar .wrap { display: flex; align-items: center; gap: 8px; padding-top: 10px; padding-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.dash-bar .wrap::-webkit-scrollbar { display: none; }
.db-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: var(--r-pill); border: 0;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: 600 14px var(--font); cursor: pointer; white-space: nowrap; }
.db-pill:hover { box-shadow: inset 0 0 0 1px var(--mist); }
.db-pill small { color: var(--muted); font-weight: 600; font-size: 13px; }
.db-pill[data-on="1"] { background: var(--cobalt-2); box-shadow: none; color: #fff; }
.db-pill[data-on="1"] small { color: rgba(255, 255, 255, .78); }
.db-pill svg { width: 12px; height: 12px; opacity: .6; }
.db-pill[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--cobalt), 0 0 0 3px var(--cobalt-soft); }
.db-count { flex: none; margin-left: auto; padding-left: 10px; font: 700 13px var(--font); color: var(--muted); white-space: nowrap; }
.db-clear { flex: none; background: none; border: 0; color: var(--cobalt-text); font: 700 14px var(--font); cursor: pointer; white-space: nowrap; }
/* the menu of a filter: the site's menu (.dd-pop), with headings */
.db-pop { position: fixed; z-index: 90; min-width: 240px; max-width: min(360px, calc(100vw - 24px)); max-height: min(440px, 70vh); overflow: auto; overscroll-behavior: contain;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: var(--shadow-3); }
.db-pop h3 { margin: 10px 12px 4px; font: 700 12px var(--font); color: var(--muted); letter-spacing: 0; }
.db-opt { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 8px;
  background: none; color: inherit; font: 600 14px var(--font); text-align: left; cursor: pointer; }
.db-opt:hover, .db-opt:focus-visible { background: var(--sunken); outline: none; }
.db-opt[aria-checked="true"] { color: var(--cobalt-text); }
.db-opt[aria-checked="true"]::after { content: ""; flex: none; width: 5px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.db-opt small { margin-left: auto; color: var(--muted); font-weight: 500; }
.db-opt-l { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.db-pill:focus-visible, .dm-chip:focus-visible, .dc-line button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 719px) {
  .db-pop { left: 0 !important; right: 0; bottom: 0; top: auto !important; max-width: none; max-height: 62vh; border-radius: 16px 16px 0 0;
    padding: 10px 10px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px -10px rgba(11, 11, 12, .35); }
  .db-pop::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--mist); margin: 0 auto 10px; }
}

/* -- the page --------------------------------------------------------------------------------------- */
.dash-body { padding-top: 20px; padding-bottom: 40px; display: grid; gap: 16px; }
.dash-card:empty, .dash-detail:empty { display: none; }
.dk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 14px; padding: 22px 24px 14px; }
.dk-head h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.dk-head .sub { font-size: 13px; color: var(--muted); font-weight: 500; }
.dk-note { margin: 0; padding: 12px 24px 18px; font-size: 13px; color: var(--muted); max-width: 90ch; }
.dash-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dash-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }

/* -- the next match: Vesta's chances and the expected numbers --------------------------------------- */
.nx-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 0 24px 16px; }
.nx-m { display: inline-flex; align-items: center; gap: 8px; font: 800 20px var(--display); color: var(--text); text-decoration: none; }
.nx-m:hover { text-decoration: underline; }
.nx-when { font-size: 14px; color: var(--muted); }
.nx-st { font: 700 12px var(--font); padding: 4px 10px; border-radius: var(--r-pill); background: var(--sunken); color: var(--muted); }
.nx-st.on { background: var(--cobalt-soft); color: var(--cobalt-text); }
.nx-past { margin-left: auto; font-size: 13px; color: var(--muted); }
.nx-past button { background: none; border: 0; padding: 0; margin-left: 4px; color: var(--cobalt-text); font: 700 13px var(--font); cursor: pointer; }
/* every number expected: one list a group, as the chips over the chart */
.nx-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 0 32px; padding: 4px 24px 6px; border-top: 1px solid var(--line); }
.nx-col { padding: 10px 0 8px; }
.nx-h, .nx-row { display: grid; grid-template-columns: minmax(0, 1fr) 54px 38px 64px 42px; gap: 10px; align-items: center; }
.nx-h { padding: 6px 0; font: 700 12px var(--font); color: var(--muted); }
.nx-h span:first-child { color: var(--text); font-size: 13px; }
.nx-h .e, .nx-h .p, .nx-h .l { text-align: right; }
.nx-row { width: 100%; min-height: 40px; padding: 6px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.nx-row:hover .k { color: var(--cobalt-text); }
.nx-row[aria-pressed="true"] { box-shadow: inset 3px 0 0 var(--cobalt-2); padding-left: 10px; }
.nx-row .k { font-size: 14px; min-width: 0; }
.nx-row .k .vt, .nx-win .vt { font: 700 10px var(--font); font-style: normal; color: var(--cobalt-text); margin-left: 6px; vertical-align: 1px; }
.nx-row .e { font: 800 17px var(--display); text-align: right; font-variant-numeric: tabular-nums; }
.nx-row .l { font: 600 12px var(--font); color: var(--muted); text-align: right; }
.nx-row .t { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
.nx-row .t:empty { background: none; }
.nx-row .t i { display: block; height: 100%; border-radius: 99px; background: var(--cobalt-2); }
.nx-row .p { font: 700 13px var(--font); text-align: right; font-variant-numeric: tabular-nums; }
/* a side's numbers: theirs and the opponent's */
.nx-cols.pair { grid-template-columns: minmax(0, 760px); }
.nx-cols.pair .nx-h, .nx-cols.pair .nx-row { grid-template-columns: minmax(0, 1fr) 64px 64px 48px 64px 64px; }
.nx-row .e.a { color: var(--muted); }
.nx-win { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.nx-win > div { padding: 14px 24px; border-right: 1px solid var(--line); }
.nx-win > div:last-child { border-right: 0; }
.nx-win .k { display: block; font: 600 13px var(--font); color: var(--muted); }
.nx-win .v { display: block; font: 800 26px var(--display); margin: 2px 0 8px; }
.nx-win .t { display: block; height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
.nx-win .t i { display: block; height: 100%; border-radius: 99px; background: var(--cobalt-2); }

/* -- the chart card ---------------------------------------------------------------------------------- */
.dash-chart { padding: 20px 24px 22px; }
.dm-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin: 0 -24px 18px; padding-left: 24px; padding-right: 24px; }
.dm-row::-webkit-scrollbar { display: none; }
/* a row that runs on: it fades at the edge of the card */
.dm-row { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.dm-group { flex: none; display: flex; align-items: center; gap: 6px; padding-right: 12px; margin-right: 6px; border-right: 1px solid var(--line); }
.dm-group:last-child { border-right: 0; }
.dm-label { font: 700 12px var(--font); color: var(--muted); margin-right: 2px; white-space: nowrap; }
.dm-chip { flex: none; padding: 8px 14px; border-radius: var(--r-pill); border: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted);
  font: 600 14px var(--font); cursor: pointer; white-space: nowrap; text-decoration: none; }
.dm-chip:hover { color: var(--text); }
.dm-chip[aria-pressed="true"] { background: var(--cobalt-2); color: #fff; box-shadow: none; }
.dc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 14px; }
.dc-big { font: 800 clamp(40px, 5.4vw, 60px)/.95 var(--display); letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.dc-big .against { color: var(--faint); }
.dc-what { font: 800 18px var(--display); color: var(--text); }
.dc-meta { font-size: 13px; color: var(--muted); }
.dc-meta em, .dt-cell .s em { font-style: normal; font-weight: 700; }
.dc-meta em.up, .dt-cell .s em.up { color: var(--cobalt-text); } .dc-meta em.down, .dt-cell .s em.down { color: var(--text); }
.dc-svg { display: block; width: 100%; height: auto; overflow: visible; }
.dc-svg .grid { stroke: var(--line); }
.dc-svg .tick { fill: var(--faint); font: 600 11px var(--font); }
.dc-svg .val { fill: var(--text); font: 700 11px var(--font); }
.dc-svg .season { stroke: var(--line-2); stroke-dasharray: 3 4; }
.dc-svg .hit { fill: transparent; cursor: pointer; }
.dc-svg .b { fill: var(--cobalt-2); }
.dc-svg .b.neg { fill: var(--text); opacity: .78; }
.dc-svg .b.zero { fill: var(--mist); }
.dc-svg .res { fill: var(--mist); } .dc-svg .r-w .res { fill: var(--cobalt-2); } .dc-svg .r-l .res { fill: var(--text); }
.dc-svg .bar:hover .hit { fill: color-mix(in srgb, var(--text) 4%, transparent); }
.dc-svg .bar.on .hit { fill: var(--cobalt-soft); }
.dc-svg .bar.on .b { stroke: var(--text); stroke-width: 1.5; }
.dc-svg .avg { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; opacity: .55; }
.dc-svg .ghost { fill: var(--cobalt-soft); stroke: var(--cobalt-2); stroke-dasharray: 3 3; }
.dc-svg .ghost-t { fill: var(--cobalt-text); font: 800 11px var(--font); }
.dc-svg .na { fill: var(--faint); font: 700 12px var(--font); }
.dc-svg .bar.miss .b, .dc-svg .b.miss { opacity: .28; }
.dc-svg .b.neg.miss { opacity: .2; }
.dc-svg .dc-thr line { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 5 4; pointer-events: none; }
.dc-svg .dc-grip { cursor: ns-resize; }
.dc-svg .dc-grip rect { fill: var(--text); }
.dc-svg .dc-grip text { fill: var(--paper); font: 800 10px var(--font); pointer-events: none; }
/* the opponent's logo under each bar (DLine.logos) */
.dc-plot { position: relative; }
.dc-logos { position: absolute; left: 0; right: 0; height: 20px; pointer-events: none; }
.dc-lg { position: absolute; top: 0; transform: translateX(-50%); display: grid; place-items: center; pointer-events: auto; cursor: pointer; }
.dc-lg .mark { display: block; }
.dc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.dc-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.dc-legend .l-b { background: var(--cobalt-2); } .dc-legend .l-a { background: var(--text); opacity: .78; }
.dc-legend .l-avg { height: 2px; background: var(--text); opacity: .55; vertical-align: 3px; }
.dc-legend .l-w { background: var(--cobalt-2); height: 4px; } .dc-legend .l-d { background: var(--mist); height: 4px; } .dc-legend .l-l { background: var(--text); height: 4px; }
.dc-legend .l-g { border: 1px dashed var(--cobalt-2); background: var(--cobalt-soft); }
.dc-legend .l-thr { width: 14px; height: 0; border-radius: 0; border-top: 2px dashed var(--text); vertical-align: 3px; }
.dc-hint { margin: 8px 0 0; font-size: 12px; color: var(--faint); }
.dc-empty { padding: 40px 0; color: var(--muted); }
.dc-dragging, .dc-dragging * { cursor: ns-resize !important; user-select: none; }

/* the reader's line: the strip under the heading */
.dc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; padding: 8px 10px 8px 14px; border-radius: 14px; background: var(--sunken); font-size: 13px; color: var(--muted); }
.dc-line-k { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--text); }
.dc-line-k i { width: 16px; height: 0; border-top: 2px dashed var(--text); }
.dc-line-ctl { display: inline-flex; align-items: center; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.dc-line-ctl button { width: 32px; height: 32px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text); font: 700 17px/1 var(--font); cursor: pointer; }
.dc-line-ctl button:hover { background: var(--sunken); }
.dc-line-v { min-width: 96px; padding: 0 4px; text-align: center; font: 700 14px var(--font); color: var(--text); }
.dc-line-s { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.dc-line-s b { color: var(--text); }
.dc-line-s .nx { color: var(--cobalt-text); font-weight: 600; }
.dc-line-s .nx b { color: var(--cobalt-text); }
.dc-line-reset { margin-left: auto; background: none; border: 0; padding: 0; color: var(--cobalt-text); font: 700 13px var(--font); cursor: pointer; }
.dc-seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.dc-seg button { padding: 6px 12px; border: 0; border-radius: var(--r-pill); background: none; color: var(--muted); font: 600 13px var(--font); cursor: pointer; white-space: nowrap; }
.dc-seg button[aria-pressed="true"] { background: var(--cobalt-2); color: #fff; }

/* -- the match touched ----------------------------------------------------------------------------- */
.dash-detail { padding: 20px 22px; position: sticky; top: calc(var(--topbar-h, 64px) + 72px); }
.dd-when { font-size: 13px; color: var(--muted); }
.dd-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0 4px; font: 800 21px/1.15 var(--display); color: var(--text); text-decoration: none; }
.dd-title:hover { text-decoration: underline; }
.dd-res { display: inline-block; padding: 3px 8px; border-radius: 6px; font: 700 11px var(--font); background: var(--mist); color: var(--text); }
.dd-res.r-w { background: var(--cobalt-2); color: #fff; } .dd-res.r-l { background: var(--text); color: var(--paper); }
.dd-facts { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); display: grid; gap: 3px; }
.dd-goals { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.dd-goals span { padding: 3px 8px; border-radius: 6px; font: 700 11px var(--font); background: var(--sunken); color: var(--muted); }
.dd-goals span.f { background: var(--cobalt-2); color: #fff; }
.dd-vesta { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--cobalt-soft); font-size: 13px; color: var(--text); }
.dd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 14px; }
.dd-grid div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.dd-grid .k { color: var(--muted); } .dd-grid .v { font-weight: 800; color: var(--text); }
.dd-grid .v.hot { color: var(--cobalt-text); }
/* the starting eleven: one chip a player, his goals and assists inside */
.dd-xi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.dd-xi > span { flex-basis: 100%; font: 700 12px var(--font); color: var(--muted); }
.dd-xi a { display: inline-flex; gap: 6px; align-items: baseline; padding: 5px 11px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font: 600 12px var(--font); text-decoration: none; }
.dd-xi a:hover { box-shadow: inset 0 0 0 1px var(--mist); }
.dd-xi a i { font-style: normal; color: var(--cobalt-text); }

/* -- every number of the chosen matches --------------------------------------------------------------- */
.dt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); border-top: 1px solid var(--line); }
.dt-cell { position: relative; display: grid; gap: 4px; align-content: start; padding: 16px 20px 18px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: none; text-align: left; color: var(--text); font: inherit; cursor: pointer; }
.dt-cell:hover { background: var(--sunken); }
.dt-cell[aria-pressed="true"] { background: var(--cobalt-soft); }
.dt-cell[aria-pressed="true"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cobalt-2); }
.dt-cell .k { font: 600 13px var(--font); color: var(--muted); }
.dt-cell .v { font: 800 30px/1.05 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dt-cell .v small { font: 600 14px var(--font); color: var(--muted); margin-left: 3px; }
.dt-cell .s { font-size: 12px; color: var(--muted); }
.dt-cell.locked, .dt-cell.static { cursor: default; }
.dt-cell.static:hover, .dt-cell.locked:hover { background: none; }
.dt-part { display: block; font-size: 11px; color: var(--faint); }

/* -- every shot: the pitch as on the match page -------------------------------------------------------- */
.dp-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 24px 16px; }
.dp-filters .sep { width: 1px; background: var(--line); margin: 0 4px; }
.dp-chip { padding: 7px 13px; border-radius: var(--r-pill); border: 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font: 600 13px var(--font); cursor: pointer; }
.dp-chip:hover { color: var(--text); }
.dp-chip[aria-pressed="true"] { background: var(--cobalt-2); color: #fff; box-shadow: none; }
.dp-wrap { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 8px 28px; padding: 0 24px 20px; align-items: start; }
.dp-pitch { margin: 0; position: sticky; top: calc(var(--topbar-h, 64px) + 72px); }
.dp-svg { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--sunken); }
.dp-svg .ln { fill: none; stroke: var(--line-2); stroke-width: .3; }
.dp-svg .ln.goal { stroke: var(--muted); stroke-width: .5; }
.dp-svg .ln.dot { fill: var(--line-2); }
.dp-svg .s { fill: color-mix(in srgb, var(--cobalt-2) 12%, transparent); stroke: var(--cobalt-2); stroke-width: .22; }
.dp-svg .g { fill: var(--cobalt-2); stroke: var(--surface); stroke-width: .3; }
.dp-svg .s.against { fill: color-mix(in srgb, var(--text) 8%, transparent); stroke: var(--text); }
.dp-svg .g.against { fill: var(--text); }
.dp-cap { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 10px 2px 0; font-size: 12px; color: var(--muted); }
.dp-cap i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.dp-cap .c-g { background: var(--cobalt-2); } .dp-cap .c-a { background: var(--text); } .dp-cap .c-s { border: 1px solid var(--cobalt-2); }
.dp-cap .c-sa { border: 1px solid var(--text); }
.dp-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 16px; margin-bottom: 8px; }
.dp-nums div { display: grid; padding: 6px 0; }
.dp-nums .k { font: 600 12px var(--font); color: var(--muted); } .dp-nums .v { font: 800 24px var(--display); letter-spacing: -.02em; }
.dp-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 28px; align-items: start; }
.dp-part { margin-top: 14px; }
.dp-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(50px, 120px) 30px; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.dp-row .n { text-align: right; } .dp-row .g { text-align: right; font-weight: 800; }
.dp-row .bar { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; }
.dp-row .bar i { display: block; height: 100%; border-radius: 99px; background: var(--cobalt-2); }
.dp-row-h { color: var(--muted); font: 700 12px var(--font); border-top: 0; }

/* -- quarters of an hour -------------------------------------------------------------------------------- */
.dq { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 8px 24px 8px; align-items: end; }
.dq-col { display: grid; justify-items: center; gap: 3px; font-size: 12px; color: var(--muted); }
.dq-bars { position: relative; width: 100%; max-width: 46px; height: 130px; }
.dq-bars i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 6px 6px 2px 2px; }
.dq-bars i.a { background: var(--track); } .dq-bars i.b { background: var(--cobalt-2); }
.dq-bars i.b.against { background: var(--text); opacity: .78; }
.dq-col b { font: 800 18px var(--display); color: var(--text); } .dq-col em { font-style: normal; font-weight: 700; color: var(--text); }

/* -- tables ------------------------------------------------------------------------------------------- */
.dash-card .table-wrap { border-top: 1px solid var(--line); }
.dk-sort th[data-sort] { padding: 0; }
.dk-th { background: none; border: 0; font: inherit; color: inherit; padding: 10px 12px; width: 100%; text-align: inherit; cursor: pointer; white-space: nowrap; }
.dk-sort th[aria-sort="descending"] .dk-th::after { content: " \25BC"; font-size: 9px; }
.dk-sort th[aria-sort="ascending"] .dk-th::after { content: " \25B2"; font-size: 9px; }
.dk-sort tr.on td { background: var(--cobalt-soft); }
/* the match of a row: opponent and score on one line, the league and the shapes under them */
.dk-sort td.team > a { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.dk-sort td.team .num { white-space: nowrap; }
.dk-sort td.team .dk-res { margin-left: 0; }
.dk-sort td.team .sub-row { display: block; flex-basis: 100%; font-size: 12px; color: var(--muted); font-weight: 500; }
.dk-sel { min-width: 200px; }
.dk-more { width: 100%; background: none; border: 0; border-top: 1px solid var(--line); padding: 14px; font: 700 14px var(--font); color: var(--cobalt-text); cursor: pointer; }
.dk-link { background: none; border: 0; padding: 0; color: var(--cobalt-text); font: 700 13px var(--font); cursor: pointer; }
.dk-res { display: inline-block; padding: 2px 6px; border-radius: 5px; font: 700 10.5px var(--font); background: var(--mist); color: var(--text); margin-left: 6px; vertical-align: 1px; }
.dk-res.r-w { background: var(--cobalt-2); color: #fff; } .dk-res.r-l { background: var(--text); color: var(--paper); }
.dk-card-y, .dk-card-r { display: inline-block; width: 9px; height: 12px; border-radius: 2px; margin-left: 3px; vertical-align: -1px; }
.dk-card-y { background: #F2C400; } .dk-card-r { background: #E0322B; }

/* -- compare --------------------------------------------------------------------------------------------- */
.dx-find { position: relative; padding: 0 24px 16px; max-width: 520px; }
.dx-find .suggest { top: calc(100% - 10px); left: 24px; right: 24px; }
.dx-try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 24px 20px; }
.dx-try > span { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.dx-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; padding: 14px 24px; border-top: 1px solid var(--line); }
.dx-head span { display: grid; font: 800 16px var(--display); }
.dx-head small { font: 500 12px var(--font); color: var(--muted); }
.dx-a { color: var(--cobalt-text); } .dx-b, .dx-b a { color: var(--text); text-align: right; }
.dx-t { padding: 0 24px 20px; }
.dx-r { display: grid; grid-template-columns: minmax(0, 1.2fr) 56px minmax(80px, 1.4fr) 56px; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.dx-r .k { color: var(--muted); } .dx-r .n { text-align: right; } .dx-r .n.win { font-weight: 800; }
.dx-r .bars { display: grid; gap: 3px; } .dx-r .bars i { display: block; height: 6px; border-radius: 99px; min-width: 2px; }
.dx-r .bars i.a { background: var(--cobalt-2); } .dx-r .bars i.b { background: var(--text); opacity: .78; }

/* -- the hub of the section (/stats) -------------------------------------------------------------------- */
.hub-find { position: relative; }
.hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 959px) { .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .hub-grid { grid-template-columns: 1fr; } }
.hub-tile { display: grid; gap: 8px; align-content: start; padding: 22px 24px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-2); color: var(--text); text-decoration: none; transition: border-color .15s; }
.hub-tile:hover { border-color: var(--cobalt-2); }
.hub-tile .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--cobalt-soft); color: var(--cobalt-text); }
.hub-tile .ic svg { width: 22px; height: 22px; }
.hub-tile h3 { margin: 4px 0 0; font: 800 19px var(--display); }
.hub-tile p { margin: 0; font-size: 14px; color: var(--muted); }
.hub-tile .go { font: 700 14px var(--font); color: var(--cobalt-text); }
.hub-list { list-style: none; margin: 0; padding: 0; }
.hub-list li a { display: grid; grid-template-columns: 22px 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 24px; border-top: 1px solid var(--line); text-decoration: none; color: var(--text); }
.hub-list li a:hover { background: var(--sunken); }
.hub-list .n { font: 800 20px var(--display); text-align: right; }
.hub-list .n small { font: 600 12px var(--font); color: var(--muted); }
.hub-list .r { font: 700 13px var(--font); color: var(--muted); }
.hub-list .m { display: grid; place-items: center; width: 24px; height: 24px; }
.hub-list .who b { display: block; } .hub-list .who span { font-size: 12px; color: var(--muted); }
.hub-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 799px) { .hub-cols { grid-template-columns: 1fr; } }

/* -- narrower screens --------------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .dash-main, .dash-two { grid-template-columns: minmax(0, 1fr); }
  .dash-detail, .dp-pitch { position: static; }
}
@media (max-width: 719px) {
  .dash-chart { padding: 16px 16px 18px; }
  .dm-row { margin: 0 -16px 14px; padding-left: 16px; padding-right: 16px; }
  .dk-head { padding: 18px 16px 12px; }
  .dk-note { padding: 10px 16px 16px; }
  .nx-top { padding: 0 16px 14px; } .nx-past { margin-left: 0; }
  .nx-cols { padding: 4px 16px 6px; grid-template-columns: minmax(0, 1fr); }
  .nx-h, .nx-row { grid-template-columns: minmax(0, 1fr) 48px 32px 44px 40px; gap: 8px; }
  .nx-cols.pair .nx-h, .nx-cols.pair .nx-row { grid-template-columns: minmax(0, 1fr) 40px 40px 28px 38px 38px; gap: 6px; }
  .nx-win > div { padding: 12px 14px; }
  .dp-wrap { grid-template-columns: minmax(0, 1fr); padding: 0 16px 16px; }
  .dp-filters { padding: 0 16px 14px; }
  .dt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dt-cell { padding: 12px 14px; }
  .dt-cell .v { font-size: 24px; }
  .dp-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dq { padding: 6px 16px 8px; gap: 6px; }
  .dx-find, .dx-try, .dx-t { padding-left: 16px; padding-right: 16px; }
  .dx-head { padding: 12px 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dx-r { grid-template-columns: minmax(0, 1fr) 44px 70px 44px; gap: 6px; }
  .dash-detail { padding: 16px; }
  .dc-line { gap: 8px; } .dc-line-reset { margin-left: 0; }
}