/* TySpin Design System components (formerly T3). Every value comes from tokens.css; class prefix sk- (kept from the
   Sukarti fork, v1). Fonts: Funnel Display (display), Funnel Sans (text and UI), IBM Plex Mono (keys and codes); the
   @font-face rules come with tokens.css. Forked from the TTC Sukarti design system v129 on 2026-11-04. */
body { margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 26px; background: var(--surface); color: var(--ink); }
.sk-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-4); }
.sk-stack { display: grid; gap: var(--space-4); padding: var(--space-4); }
.sk-label { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .01em; }
.sk-num { font-variant-numeric: tabular-nums; }
:where(a, button, input, select):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Button */
.sk-btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: 16px; line-height: 20px; font-weight: 600; padding: var(--space-3) var(--space-6); border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; }
.sk-btn-primary { background: var(--primary); color: var(--on-primary); }
.sk-btn-primary:hover { background: var(--primary-hover); }
.sk-btn-secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); }
.sk-btn-secondary:hover { border-color: var(--primary); color: var(--primary-text); }
.sk-btn-ghost { background: transparent; color: var(--primary-text); padding-inline: var(--space-2); }
.sk-btn-ghost:hover { color: var(--primary-hover); text-decoration: underline; text-underline-offset: 3px; }
.sk-btn-ball { background: var(--ball); color: var(--on-ball); }
.sk-on-navy .sk-btn-secondary { background: transparent; color: var(--on-deep); border-color: var(--on-deep-muted); }
.sk-on-navy :focus-visible { outline-color: var(--on-deep); }
.sk-on-band .sk-btn-secondary { background: transparent; color: var(--on-band); border-color: var(--on-band-muted); }
.sk-on-band .sk-btn-secondary:hover { border-color: var(--on-band); color: var(--on-band); }
.sk-on-band :focus-visible { outline-color: var(--on-band); }
.sk-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* RankBadge: Belgian ranking letters */
.sk-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: .02em; box-sizing: border-box; }
.sk-rank-high { background: var(--rank-high); color: var(--on-rank-high); }
.sk-rank-mid { background: var(--rank-mid); color: var(--on-rank-mid); }
.sk-rank-low { background: var(--rank-low); color: var(--ink); }
.sk-rank-ng { background: transparent; color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* SiteHeader */
.sk-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-6); background: var(--surface-raised); border-bottom: 1px solid var(--line); }
.sk-wordmark { display: inline-flex; align-items: baseline; gap: var(--space-2); text-decoration: none; color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 28px; letter-spacing: -.01em; }
.sk-wordmark b { color: var(--primary-text); font-weight: 700; }
.sk-wordmark:has(.sk-logo-plate) { align-items: center; gap: var(--space-3); }
.sk-logo { display: block; height: 44px; width: auto; }
.sk-wordmark-dot { width: 10px; height: 10px; border-radius: var(--radius-ball); background: var(--ball); align-self: center; }
.sk-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.sk-nav a, .sk-nav button { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px; }
.sk-nav a:hover, .sk-nav button:hover { color: var(--primary-text); }
/* A form action in the menu (e.g. Afmelden) looks like a link */
.sk-nav form { margin: 0; }
.sk-nav button { width: 100%; border: 0; background: none; font-family: var(--font-sans); line-height: 26px; text-align: left; cursor: pointer; }
.sk-nav a[aria-current="page"] { background: var(--primary-soft); color: var(--ink); box-shadow: inset 0 -2px 0 var(--primary); }

.sk-header-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.sk-header-theme { display: flex; align-items: center; }
.sk-header-theme-label { display: none; }
.sk-menu-btn { display: none; }
/* Below 1024px: logo and theme switch on the first row, the menu on a full-width row of its own. It never wraps */
@media (max-width: 1023px) {
  .sk-header { row-gap: var(--space-2); }
  .sk-header-end { display: contents; }
  .sk-header-theme { order: 1; margin-left: auto; }
  .sk-header nav { order: 2; flex: 1 0 100%; min-width: 0; margin: 0 calc(-1 * var(--space-3)); }
  .sk-nav { flex-wrap: nowrap; }
  .sk-nav a { white-space: nowrap; }
}
/* Below 680px: a Menu button opens the full list; the theme switch moves into that list */
@media (max-width: 679px) {
  .sk-header { padding: var(--space-3) var(--space-4); column-gap: var(--space-3); }
  .sk-wordmark { font-size: 24px; line-height: 28px; }
  .sk-logo { height: 36px; }
  .sk-header nav { margin: 0 calc(-1 * var(--space-4)); }
  .sk-header:not(.has-menu) .sk-nav { flex-wrap: wrap; padding: 0 var(--space-2); }
  .sk-menu-btn { order: 1; margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font: 600 16px/20px var(--font-sans); cursor: pointer; }
  .sk-menu-btn:hover { border-color: var(--primary); }
  .sk-menu-btn[aria-expanded="true"] { background: var(--primary-soft); border-color: var(--primary); }
  .sk-menu-bars { position: relative; width: 16px; height: 2px; border-radius: 1px; background: currentColor; }
  .sk-menu-bars::before, .sk-menu-bars::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; border-radius: 1px; background: currentColor; }
  .sk-menu-bars::before { top: -5px; }
  .sk-menu-bars::after { top: 5px; }
  [aria-expanded="true"] .sk-menu-bars { background: transparent; }
  [aria-expanded="true"] .sk-menu-bars::before { top: 0; transform: rotate(45deg); }
  [aria-expanded="true"] .sk-menu-bars::after { top: 0; transform: rotate(-45deg); }
  .sk-header:not(.has-menu) .sk-menu-btn { display: none; }
  .sk-header.has-menu nav, .sk-header.has-menu .sk-header-theme { display: none; }
  .sk-header.has-menu.is-open nav { display: block; order: 2; padding-top: var(--space-2); border-top: 1px solid var(--line); }
  .sk-header.is-open .sk-nav { flex-direction: column; gap: 0; padding: 0 var(--space-2); }
  .sk-header.is-open .sk-nav a, .sk-header.is-open .sk-nav button { padding: var(--space-3) var(--space-4); font-size: 18px; line-height: 24px; }
  .sk-header.is-open .sk-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--primary); }
  .sk-header.has-menu.is-open .sk-header-theme { display: flex; order: 3; flex: 1 0 100%; justify-content: space-between; margin: 0; padding: var(--space-3) var(--space-2) var(--space-1); border-top: 1px solid var(--line); }
  .sk-header.is-open .sk-header-theme-label { display: block; font-weight: 600; color: var(--ink-muted); }
}

/* ThemeToggle: an optional mini switch; the knob sits left in light (orange sun on white) and right in dark (dark moon on the orange knob). The track is empty */
.sk-theme { position: relative; display: inline-block; flex: none; width: 52px; height: 28px; padding: 0; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: var(--radius-ball); background: var(--surface); color: var(--ink-muted); cursor: pointer; }
.sk-theme:hover { border-color: var(--ink-muted); }
.sk-theme-icon { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sk-theme-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--radius-ball); display: inline-flex; align-items: center; justify-content: center; background: var(--toggle-knob); color: var(--on-toggle-knob); box-shadow: 0 0 0 1.5px var(--toggle-knob-ring); transition: transform .2s ease; }
.sk-theme-knob .sk-theme-icon { width: 14px; height: 14px; stroke-width: 2.5; }
.sk-theme-knob circle { fill: currentColor; }
.sk-theme.is-dark .sk-theme-knob { transform: translateX(24px); }
@media (prefers-reduced-motion: reduce) { .sk-theme-knob { transition: none; } }

/* Card shell */
.sk-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); box-sizing: border-box; min-width: 0; }
.sk-card h3 { font-size: 20px; line-height: 26px; font-weight: 600; margin: 0; }
.sk-muted { color: var(--ink-muted); }

/* ScheduleTable */
.sk-table-wrap { overflow-x: auto; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.sk-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.sk-table th { text-align: left; color: var(--ink-muted); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .01em; }
.sk-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: top; }
.sk-table tr:last-child td { border-bottom: 0; }
.sk-table .sk-day { font-family: var(--font-display); font-size: 15px; font-weight: 800; white-space: nowrap; }
.sk-table .sk-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-table tr.is-today td { background: var(--primary-soft); }
.sk-table tr.is-today .sk-day::after { content: "Vandaag"; margin-left: var(--space-2); font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--ink-muted); }

/* Tag (site: .pg-tag). A small pill beside a name: JEUGD, later DAMES */
.sk-tag { display: inline-block; flex: none; background: var(--primary-soft); color: var(--ink); border-radius: var(--radius-sm); padding: 3px 6px; font-family: var(--font-sans); font-size: 12px; line-height: 12px; font-weight: 600; letter-spacing: .01em; }
.sk-tag-title { padding: 4px 8px; font-size: 14px; line-height: 14px; }
/* On a blue-soft ground (today's agenda entries, our ranking row, .sk-on-soft) the tag would vanish: it flips to a raised chip with a primary edge */
.sk-on-soft .sk-tag, .sk-agenda-day.is-today .sk-agenda-entry .sk-tag, tr.is-us .sk-tag, tr.is-today .sk-tag { background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--primary); }
/* Text with a tag (site: .pg-labelled). Centred, not on the baseline, so the tag never sits low beside uppercase labels */
.sk-labelled { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-2); row-gap: var(--space-1); }
h1.sk-labelled, h2.sk-labelled, h3.sk-labelled, p.sk-labelled, h1 > .sk-labelled, h3 > .sk-labelled { display: flex; }

/* Any table: .sk-table-stack turns rows into stacked blocks below 680px (cells keep their own labels) */
@media (max-width: 679px) {
  .sk-table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sk-table-stack tr { display: grid; gap: var(--space-2); padding: var(--space-4); border-bottom: 1px solid var(--line); }
  .sk-table-stack tr:last-child { border-bottom: 0; }
  .sk-table-stack td { display: block; padding: 0; border: 0; width: auto !important; text-align: left !important; }
}
.sk-ranking td.sk-team-name { width: auto; min-width: 0; overflow-wrap: anywhere; }
/* Forms. One label style for every control: 14/20, 600, ink. One hint style: 14/20 ink-muted. Controls are 46px tall */
.sk-field { display: grid; gap: var(--space-2); min-width: 0; }
.sk-field > label, .sk-checks legend { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.sk-input, .sk-field input:not([type="checkbox"]):not([type="radio"]), .sk-field select, .sk-field textarea {
  box-sizing: border-box; width: 100%; min-height: 46px; padding: 0 var(--space-3); margin: 0;
  font-family: var(--font-sans); font-size: 16px; line-height: 24px; color: var(--ink);
  background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.sk-field textarea { padding: var(--space-3); min-height: 96px; resize: vertical; }
.sk-input::placeholder, .sk-field input::placeholder, .sk-field textarea::placeholder { color: var(--ink-muted); opacity: 1; }
.sk-input:hover, .sk-field input:hover, .sk-field select:hover, .sk-field textarea:hover { border-color: var(--ink-muted); }
.sk-input:focus-visible, .sk-field input:focus-visible, .sk-field select:focus-visible, .sk-field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--primary); }
.sk-field input:disabled, .sk-field select:disabled, .sk-field textarea:disabled { color: var(--ink-muted); background: var(--surface); cursor: not-allowed; }
.sk-field input[readonly] { background: var(--surface); }
.sk-hint, .sk-field .sk-muted, .sk-checks .sk-hint, .sk-checks .sk-muted { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
/* Errors: red border plus a message in words; never colour alone */
.sk-field.is-invalid input, .sk-field.is-invalid select, .sk-field.is-invalid textarea, .sk-field [aria-invalid="true"] { border-color: var(--loss); box-shadow: inset 0 0 0 1px var(--loss); }
.sk-error { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--loss); }
.sk-form { display: grid; gap: var(--space-6); max-width: 40rem; }

/* Checks: checkbox and radio groups (fieldset.sk-checks; .sk-checks-stacked puts one option per line). The legend is the field label */
.sk-checks { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); min-width: 0; }
.sk-checks legend { padding: 0; margin-bottom: var(--space-2); }
.sk-checks-stacked { flex-direction: column; flex-wrap: nowrap; gap: var(--space-2); }
.sk-checks label { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: 16px; line-height: 24px; }
.sk-checks input[type="checkbox"], .sk-checks input[type="radio"] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--primary); }
.sk-checks input:disabled + span { color: var(--ink-muted); }
.sk-checks .sk-hint, .sk-checks .sk-muted { flex-basis: 100%; }

/* Filter bar: one row of fields and checks, labels on one line, controls on one line */
.sk-filterbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); }
.sk-filterbar > .sk-field { flex: 1 1 12rem; }
.sk-filterbar > .sk-checks { flex: 0 1 auto; column-gap: var(--space-4); }
.sk-filterbar > .sk-checks label { min-height: 46px; }
.sk-filterbar > .sk-actions { display: flex; gap: var(--space-2); align-items: center; min-height: 46px; }
.sk-filterbar .sk-btn { min-height: 46px; box-sizing: border-box; }
/* Multi-select: div.sk-field.sk-multiselect > span.sk-ms-label + details > summary (looks like a select) + .sk-ms-panel (native checkboxes, no JS) */
.sk-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sk-multiselect { position: relative; }
.sk-filterbar > .sk-multiselect { flex: 0 1 15rem; min-width: 0; }
.sk-multiselect > .sk-ms-label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.sk-multiselect details { position: relative; }
.sk-multiselect summary {
  list-style: none; display: flex; align-items: center; gap: var(--space-2); box-sizing: border-box; min-height: 46px; padding: 0 40px 0 var(--space-3);
  font-size: 16px; line-height: 24px; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; position: relative; }
.sk-multiselect summary::-webkit-details-marker { display: none; }
.sk-multiselect summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border: solid var(--ink-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s ease; }
.sk-multiselect details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.sk-multiselect summary:hover { border-color: var(--ink-muted); }
.sk-multiselect summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--primary); }
.sk-multiselect details[open] summary { border-color: var(--primary); }
.sk-ms-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-ms-value.is-all { color: var(--ink-muted); }
.sk-ms-panel {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 100%; max-width: min(360px, 90vw); box-sizing: border-box;
  display: grid; gap: var(--space-2); padding: var(--space-2); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-popup); }
.sk-ms-panel .sk-checks { gap: 0; max-height: 320px; overflow-y: auto; }
.sk-ms-panel .sk-checks label { min-height: 40px; padding: 0 var(--space-2); border-radius: var(--radius-sm); white-space: nowrap; }
.sk-ms-panel .sk-checks label:hover { background: var(--primary-soft); }
.sk-ms-panel .sk-checks label:has(input:focus-visible) { background: var(--primary-soft); }
.sk-ms-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.sk-filterbar .sk-ms-foot .sk-btn { min-height: 40px; padding-block: var(--space-2); }
@media (max-width: 679px) {
  .sk-ms-panel { position: static; margin-top: var(--space-1); max-width: none; box-shadow: none; }
  .sk-ms-panel .sk-checks label { min-height: 44px; }
  .sk-filterbar > .sk-multiselect { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) { .sk-btn, .sk-team { transition: none; } }

/* ---------------------------------------------------------------
   Page layer: the site's own layout classes (pg-), same names as on
   ttcsukarti.be, built only from tokens. Components above stay sk-.
   --------------------------------------------------------------- */
.pg { max-width: 1120px; margin: 0 auto; }
.pg-main { display: grid; gap: var(--space-12); padding: var(--space-8) var(--space-6) var(--space-12); }
.pg-sec { display: grid; gap: var(--space-6); min-width: 0; }
.pg-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.pg-sec h2 { font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 700; margin: 0; }
.pg-sec h3.pg-sub { font-family: var(--font-display); font-size: 17px; line-height: 22px; font-weight: 700; margin: 0; color: var(--ink-muted); }
.pg-two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6); align-items: start; }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); }
.pg-page-title { font-family: var(--font-display); font-size: 38px; line-height: 40px; font-weight: 800; margin: 0; }
.pg-lead { margin: 0; max-width: 65ch; color: var(--ink-muted); }
.pg-card-text { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.pg-row-note { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
@media (max-width: 760px) { .pg-two { grid-template-columns: 1fr; } }
/* The page gutter switches at the same 680px as the header and footer bands */
@media (max-width: 679px) { .pg-main { padding: var(--space-6) var(--space-4) var(--space-12); } }
@media (max-width: 560px) { .pg-page-title { font-size: 36px; line-height: 40px; } }
/* Error pages (404, 403, 500): page layer, no JS. A small table seen from above with the ball off it, then code, title, text, actions */
.pg-error { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-8); align-items: start; max-width: 800px; padding-block: var(--space-12) var(--space-18); }
.pg-error-art { position: relative; width: 160px; height: 96px; margin-top: var(--space-2); border-radius: var(--radius-sm); background: var(--primary); }
.pg-error-art::before { content: ""; position: absolute; inset: 4px; border: 2px solid var(--court-line); border-radius: 2px; background: linear-gradient(var(--court-line), var(--court-line)) center / 100% 1px no-repeat; }
.pg-error-art::after { content: ""; position: absolute; top: -6px; bottom: -6px; left: calc(50% - 2px); width: 4px; border-radius: 2px; background: var(--deep); }
.pg-error-ball { position: absolute; right: 18px; bottom: -32px; width: 18px; height: 18px; border-radius: var(--radius-ball); background: var(--ball); }
.pg-error-text { display: grid; gap: var(--space-3); min-width: 0; }
.pg-error-text p { margin: 0; max-width: 56ch; font-size: 18px; line-height: 28px; color: var(--ink-muted); }
.pg-error-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.pg-error-text .pg-error-ref { font-size: 14px; line-height: 20px; }
.pg-error-ref code { white-space: nowrap; font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
@media (max-width: 679px) {
  .pg-error { grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-6) var(--space-12); }
  .pg-error-art { width: 120px; height: 72px; margin-bottom: var(--space-6); }
  .pg-error-actions .sk-btn { flex: 1 1 100%; justify-content: center; }
}

/* Credit strip: closes every page in every app, under the footer if there is one */
/* .sk-credit: dropped in 3.0.0 (TySpin footer names Tyzeco); kept only so pages not yet updated still render. Do not use. */
.sk-credit { display: flex; justify-content: center; padding: var(--space-3) var(--space-6) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: var(--band-deep); color: var(--on-deep-muted); font-size: 13px; line-height: 16px; text-align: center; }
.sk-credit p { margin: 0; }
.sk-credit strong { color: var(--on-deep); font-weight: 600; }
@media (max-width: 679px) { .sk-credit { padding-left: var(--space-4); padding-right: var(--space-4); } }

/* Full-width bands: the header and footer backgrounds span the whole screen; their content stays in the 1120px page column, on the same line as the cards */
.sk-header { --band-gutter: var(--space-6); padding-left: max(var(--band-gutter), calc((100% - 1120px) / 2 + var(--band-gutter))); padding-right: max(var(--band-gutter), calc((100% - 1120px) / 2 + var(--band-gutter))); }
@media (max-width: 679px) { .sk-header { --band-gutter: var(--space-4); } }

/* Menus: ActionMenu (.sk-actmenu), icon buttons, the navigator with a picker (.sk-weeknav / .sk-weekpick, used as the season switcher) */
.sk-weeknav { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.sk-iconbtn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 20px; line-height: 1; text-decoration: none; cursor: pointer; list-style: none; box-sizing: border-box; }
.sk-iconbtn:hover { border-color: var(--primary); color: var(--primary-text); }
.sk-iconbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sk-iconbtn[aria-disabled="true"] { color: var(--ink-disabled); border-color: var(--line); pointer-events: none; }
.sk-iconbtn.is-sm { width: 32px; height: 32px; font-size: 18px; }
.sk-actmenu { position: relative; display: inline-block; margin: 0; }
.sk-actmenu > summary { list-style: none; cursor: pointer; }
.sk-actmenu > summary::-webkit-details-marker { display: none; }
.sk-actmenu > summary.sk-btn::after { content: "▾"; font-size: 12px; line-height: 1; }
.sk-actmenu[open] > summary { border-color: var(--primary); background: var(--primary-soft); color: var(--ink); }
.sk-actmenu > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sk-actmenu-panel { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; display: grid; gap: 2px; box-sizing: border-box; width: max-content; min-width: 15rem; max-width: min(23rem, calc(100vw - 32px)); max-height: min(80vh, 44rem); overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-popup); text-align: left; }
.sk-actmenu.is-end > .sk-actmenu-panel { left: auto; right: 0; }
.sk-actmenu-panel form { margin: 0; }
.sk-actmenu-label { padding: 8px 10px 2px; font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .01em; color: var(--ink-muted); }
.sk-actmenu-sub { padding: 6px 10px 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sk-actmenu-sub b { color: var(--ink); }
.sk-actmenu-sep { height: 1px; margin: 4px 0; background: var(--line); }
.sk-actmenu-item { display: grid; width: 100%; min-height: 40px; box-sizing: border-box; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: inherit; font-size: 15px; line-height: 20px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.sk-actmenu-item small { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-muted); }
.sk-actmenu-item:hover { background: var(--primary-soft); }
.sk-actmenu-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; background: var(--primary-soft); }
.sk-actmenu-item.is-danger { color: var(--danger); }
.sk-actmenu-item.is-danger:hover, .sk-actmenu-item.is-danger:focus-visible { background: var(--danger-soft); }
.sk-actmenu-item[disabled], .sk-actmenu-item[aria-disabled="true"] { color: var(--ink-disabled); background: none; cursor: not-allowed; }
.sk-actmenu-item[disabled] small { color: var(--ink-disabled); }
.sk-weekpick > summary { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; border-radius: var(--radius-sm); }
.sk-weekpick > summary h1, .sk-weekpick > summary h2 { margin: 0; font-family: var(--font-display); font-size: 34px; line-height: 38px; }
.sk-weekpick > summary::after { content: "▾"; color: var(--ink-muted); font-size: 16px; }
.sk-weekpick > summary:hover::after { color: var(--primary-text); }
.sk-weekpick[open] > summary { background: var(--primary-soft); }
.sk-weekpick .sk-actmenu-item { grid-template-columns: 1fr auto; align-items: baseline; gap: var(--space-3); font-variant-numeric: tabular-nums; }
.sk-weekpick .sk-actmenu-item[aria-current="page"] { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.sk-weekactions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sk-week-status { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sk-week-status form { margin: 0; display: inline; }
.sk-week-status button { padding: 0; border: 0; background: none; color: var(--primary-text); font: inherit; font-weight: 600; cursor: pointer; }
.sk-week-status button:hover { text-decoration: underline; text-underline-offset: 3px; }
.sk-week-status button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 560px) {
  .sk-weekactions { position: relative; }
  .sk-weekactions > .sk-actmenu { position: static; }
  .sk-weekactions > .sk-actmenu > .sk-actmenu-panel { left: 0; right: 0; width: auto; min-width: 0; max-width: none; }
  .sk-weekpick > summary h1, .sk-weekpick > summary h2 { font-size: 32px; line-height: 36px; }
}
/* AppHeader (T3): brand tile, language switch, user menu. Built on SiteHeader (.sk-header) and ActionMenu (.sk-actmenu) */
.sk-wordmark:has(.sk-brandmark) { align-items: center; gap: 10px; }
/* 3.0.0 TySpin logo (brand/tyspin-logo-sm-vars.svg inline) + product name */
.sk-wordmark-tyspin { align-items: flex-end; gap: 10px; }
.sk-wordmark-tyspin .sk-logo { display: block; height: 34px; width: auto; flex: none; }
.sk-wordmark-app { font-weight: 600; color: var(--ink-muted); line-height: 1; padding-bottom: 3px; }
@media (max-width: 679px) { .sk-wordmark-tyspin { flex-direction: column; align-items: flex-start; gap: 1px; } .sk-wordmark-tyspin .sk-logo { height: 26px; } .sk-wordmark-tyspin .sk-wordmark-app { font-size: 14px; line-height: 16px; padding: 0 0 0 1px; } }
.sk-brandmark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; box-sizing: border-box; border-radius: var(--radius-sm); background: var(--primary); color: var(--on-primary); font-family: var(--font-display); font-size: 18px; line-height: 1; font-weight: 800; letter-spacing: -.01em; }
.sk-brandmark.is-sm { width: 24px; height: 24px; font-size: 12px; border-radius: 6px; }
.sk-lang { display: inline-flex; flex: none; height: 28px; padding: 2px; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: var(--radius-ball); background: var(--surface); }
.sk-lang a { display: inline-flex; align-items: center; min-width: 32px; justify-content: center; padding: 0 8px; box-sizing: border-box; border-radius: var(--radius-ball); color: var(--ink-muted); text-decoration: none; font-family: var(--font-sans); font-size: 14px; line-height: 1; font-weight: 600; letter-spacing: .01em; }
.sk-lang a:hover { color: var(--primary-text); }
.sk-lang a[aria-current="true"] { background: var(--primary); color: var(--on-primary); }
.sk-lang a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sk-usermenu > summary { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-ball); }
.sk-usermenu[open] > summary { background: none; }
.sk-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; box-sizing: border-box; border-radius: var(--radius-ball); background: var(--primary-soft); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 1; font-weight: 600; letter-spacing: .04em; box-shadow: inset 0 0 0 1px var(--line); }
.sk-usermenu > summary:hover .sk-avatar { box-shadow: inset 0 0 0 2px var(--primary); }
.sk-usermenu[open] .sk-avatar { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.sk-usermenu-who { display: grid; gap: 2px; padding: 8px 10px 6px; font-size: 14px; line-height: 20px; color: var(--ink-muted); overflow-wrap: anywhere; }
.sk-usermenu-who b { font-size: 15px; color: var(--ink); }
@media (max-width: 1023px) {
  .sk-header-lang ~ .sk-header-theme { margin-left: 0; }
  .sk-header-user { order: 1; }
}

/* AppFooter (T3): one quiet strip under the page, followed by the credit strip */
.sk-appfooter { --band-gutter: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); padding-top: var(--space-4); padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); padding-left: max(var(--band-gutter), calc((100% - 1120px) / 2 + var(--band-gutter))); padding-right: max(var(--band-gutter), calc((100% - 1120px) / 2 + var(--band-gutter))); border-top: 1px solid var(--line); background: var(--surface-sunken); color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.sk-appfooter p { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.sk-appfooter strong { color: var(--ink); font-weight: 600; }
.sk-appfooter a { color: inherit; text-underline-offset: 2px; }
.sk-appfooter a:hover { color: var(--primary-text); }
@media (max-width: 679px) { .sk-brandmark:not(.is-sm) { width: 36px; height: 36px; font-size: 16px; } }
@media (max-width: 679px) { .sk-appfooter { --band-gutter: var(--space-4); } }

/* ===== T3 Stats v1 (StatsKit, StatsSearch, PlayerPage, HeadToHead). Work under any brand; designed for T3 ===== */
/* Certainty: label with a 3-step meter; the number shows on hover (title) and on tap (details open) */
.sk-cert { position: relative; display: inline-block; vertical-align: middle; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sk-cert > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; border-radius: var(--radius-sm); }
.sk-cert > summary::-webkit-details-marker { display: none; }
.sk-cert > summary:hover { color: var(--ink); }
.sk-cert > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sk-cert-meter { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sk-cert-meter i { display: block; width: 4px; border-radius: 1px; background: var(--line-strong); opacity: .35; }
.sk-cert-meter i:nth-child(1) { height: 6px; }
.sk-cert-meter i:nth-child(2) { height: 9px; }
.sk-cert-meter i:nth-child(3) { height: 12px; }
.sk-cert[data-level="low"] .sk-cert-meter i:nth-child(-n+1),
.sk-cert[data-level="medium"] .sk-cert-meter i:nth-child(-n+2),
.sk-cert[data-level="high"] .sk-cert-meter i { background: var(--primary); opacity: 1; }
.sk-cert-num { position: absolute; z-index: 5; left: 0; top: calc(100% + 4px); padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); box-shadow: var(--shadow-popup); font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.sk-trait-val .sk-cert-num, .sk-mu-val .sk-cert-num, .sk-h2h-side.is-b .sk-cert-num { left: auto; right: 0; }
/* Not enough data: one look everywhere (dashed outline, muted text) */
.sk-nodata { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--ink-muted); font-size: 14px; line-height: 20px; }
.sk-nodata::before { content: ""; width: 8px; height: 8px; border: 1.5px solid currentColor; border-radius: var(--radius-ball); flex: none; }
.sk-nodata.is-block { display: flex; padding: var(--space-4); }
/* Model note, once per page, at the bottom of main */
.sk-modelnote { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
/* Effects in percentage points: sign always shown; better than expected = win, worse = loss */
.sk-pp { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.sk-pp.is-up { color: var(--win); }
.sk-pp.is-down { color: var(--loss); }
/* Distribution rows: label | bar | percentage. Used for the letter forecast and the set scores */
.sk-dist { display: grid; grid-template-columns: max-content minmax(0, 1fr) 3.5em; align-items: center; gap: 6px var(--space-3); margin: 0; padding: 0; list-style: none; }
.sk-dist li { display: contents; }
.sk-dist-label { font-size: 14px; line-height: 20px; color: var(--ink-muted); white-space: nowrap; }
.sk-dist-bar { height: 12px; border-radius: 2px; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.sk-dist-bar > span { display: block; height: 100%; background: var(--line-strong); }
.sk-dist-val { font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-muted); }
.sk-dist li.is-top .sk-dist-bar > span { background: var(--primary); }
.sk-dist li.is-top .sk-dist-label, .sk-dist li.is-top .sk-dist-val { color: var(--ink); font-weight: 600; }
/* Widths come from data-p (0-100 in steps of 1) so no inline style is needed (CSP) */
.sk-dist-bar > span, .sk-split > span, .sk-mu-bar > span { width: var(--p, 0%); }
/* Empty states: a calm panel, never an error look */
.sk-empty { display: grid; gap: var(--space-1); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-sunken); }
.sk-empty strong { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); }
.sk-empty p { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); max-width: 60ch; }
.sk-empty.is-quiet { padding: var(--space-4); background: transparent; border-style: dashed; }

/* StatsSearch */
.sk-psearch > .sk-field.is-q { flex: 3 1 18rem; }
.sk-psearch > .sk-field.is-letter { flex: 0 1 8rem; }
.sk-presults-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sk-plist { margin: 0; padding: 0; list-style: none; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.sk-plist li + li { border-top: 1px solid var(--line); }
.sk-prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-4); padding: var(--space-3) var(--space-4); color: var(--ink); text-decoration: none; }
.sk-prow:hover { background: var(--primary-soft); }
.sk-prow:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sk-prow-name { font-size: 17px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.sk-prow-club { grid-column: 1; font-size: 14px; line-height: 20px; color: var(--ink-muted); overflow-wrap: anywhere; }
.sk-prow-side { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: var(--space-2); }
.sk-prow.is-inactive .sk-prow-name { color: var(--ink-muted); font-weight: 400; }
.sk-prow-last { font-size: 13px; line-height: 18px; color: var(--ink-muted); white-space: nowrap; }
@media (max-width: 679px) {
  .sk-prow { grid-template-columns: minmax(0, 1fr); }
  .sk-prow-side { grid-column: 1; grid-row: auto; flex-wrap: wrap; }
}

/* PlayerPage: header */
.sk-phead { display: grid; gap: var(--space-4); }
.sk-phead-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.sk-phead-meta a { color: var(--ink); }
.sk-pstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-3); }
.sk-pstat { display: grid; align-content: start; gap: var(--space-1); padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); min-width: 0; }
.sk-pstat-label { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .01em; color: var(--ink-muted); }
.sk-pstat-value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: 28px; line-height: 31px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sk-pstat-value .sk-rank { height: 32px; min-width: 48px; font-size: 22px; }
.sk-pstat-sub { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sk-pstat.is-main { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.sk-pstat.is-alert { background: var(--warning-soft); border-color: transparent; }
.sk-pstat.is-alert .sk-pstat-label, .sk-pstat.is-alert .sk-pstat-sub { color: var(--warning); }
/* Blocks on the player page */
.sk-block { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); min-width: 0; }
.sk-block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.sk-block-head h2 { margin: 0; font-family: var(--font-display); font-size: 21px; line-height: 24px; font-weight: 700; }
.sk-block-head p { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sk-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.sk-blocks > .is-wide { grid-column: 1 / -1; }
@media (max-width: 899px) { .sk-blocks { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 679px) { .sk-block { padding: var(--space-4); } }

/* Rating chart: an SVG the server renders; the page only styles it */
.sk-rchart { margin: 0; display: grid; gap: var(--space-2); }
.sk-rchart-scroll { display: flex; flex-direction: row-reverse; overflow-x: auto; }  /* row-reverse: on narrow screens it opens at the newest season */
.sk-rchart svg { display: block; flex: none; width: 100%; min-width: 760px; height: auto; font-family: var(--font-sans); }
.sk-rchart .grid { stroke: var(--line); stroke-width: 1; }
.sk-rchart .axis { fill: var(--ink-muted); font-size: 14px; }
.sk-rchart .season { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.sk-rchart .season-label { fill: var(--ink-muted); font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: .01em; font-size: 15px; }
.sk-rchart .season-label tspan.letter { fill: var(--ink); }
.sk-rchart .band { fill: var(--primary); opacity: .16; }
.sk-rchart .line { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sk-rchart .now { fill: var(--primary); stroke: var(--surface-raised); stroke-width: 2; }
.sk-rchart .break { fill: url(#sk-hatch); }
.sk-rchart .hatch { stroke: var(--line-strong); stroke-width: 1; opacity: .5; }
.sk-rchart .break-label { fill: var(--ink-muted); font-size: 14px; }
.sk-rchart figcaption { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sk-rchart-key { display: inline-flex; align-items: center; gap: 6px; }
.sk-rchart-key::before { content: ""; width: 16px; height: 10px; border-radius: 2px; }
.sk-rchart-key.is-line::before { height: 3px; background: var(--primary); }
.sk-rchart-key.is-band::before { background: var(--primary); opacity: .16; }
.sk-rchart-key.is-break::before { background: repeating-linear-gradient(135deg, var(--line-strong) 0 1px, transparent 1px 4px); opacity: .6; }
.sk-rchart-hint { display: none; font-size: 13px; color: var(--ink-muted); }
@media (max-width: 799px) { .sk-rchart-hint { display: block; } }

/* Form */
.sk-formline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: 15px; line-height: 22px; }
.sk-formstrip { display: flex; gap: 3px; margin: 0; padding: 0; list-style: none; }
.sk-formstrip li { width: 18px; height: 18px; border-radius: 3px; }
.sk-formstrip li.is-won { background: var(--win); }
.sk-formstrip li.is-lost { background: transparent; box-shadow: inset 0 0 0 2px var(--loss); }
.sk-rust { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--ink); font-size: 15px; line-height: 22px; }
.sk-rust strong { color: var(--warning); font-weight: 700; }
.sk-games td { vertical-align: middle; }
.sk-games .sk-opp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); }
.sk-games .sk-opp a { color: var(--ink); font-weight: 600; text-decoration: none; }
.sk-games .sk-opp a:hover { color: var(--primary-text); text-decoration: underline; }
.sk-chance { display: inline-grid; grid-template-columns: 2.6em 48px; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.sk-chance > i { display: block; height: 6px; border-radius: 3px; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.sk-chance > i > span { display: block; height: 100%; width: var(--p, 0%); background: var(--line-strong); }
.sk-games .sk-cell-muted { color: var(--ink-muted); white-space: nowrap; }
.sk-games td.is-num, .sk-games th.is-num { text-align: right; }
@media (max-width: 679px) {
  .sk-games.sk-table-stack tr { grid-template-columns: auto auto minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-1); }
  .sk-games.sk-table-stack td:nth-child(5) { grid-column: 1 / span 2; }
  .sk-games.sk-table-stack td:nth-child(6) { justify-self: end; }
  .sk-games.sk-table-stack td.is-opp { grid-column: 1 / -1; order: -1; }
  .sk-games.sk-table-stack td[data-label]::before { content: attr(data-label) " "; color: var(--ink-muted); }
}

/* Forecast */
.sk-forecast { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4) var(--space-6); align-items: center; }
.sk-forecast-main { display: grid; justify-items: start; gap: var(--space-1); }
.sk-forecast-main .sk-rank { height: 40px; min-width: 60px; font-size: 26px; }
.sk-forecast-note { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
@media (max-width: 479px) { .sk-forecast { grid-template-columns: minmax(0, 1fr); } }

/* Traits */
.sk-traits { margin: 0; padding: 0; list-style: none; display: grid; }
.sk-trait { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.sk-trait:first-child { border-top: 0; padding-top: 0; }
.sk-trait-name { font-weight: 600; font-size: 16px; line-height: 22px; }
.sk-trait-desc { grid-column: 1; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sk-trait-val { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: end; align-content: center; gap: 2px; font-size: 18px; line-height: 24px; }
@media (max-width: 479px) { .sk-trait { grid-template-columns: minmax(0, 1fr); } .sk-trait-val { grid-column: 1; grid-row: auto; justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--space-3); } }

/* Matchups (wide block; the bar column grows): opponents that go better (+) or worse (-) than the ratings predict */
.sk-matchups { margin: 0; padding: 0; list-style: none; display: grid; }
.sk-mu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 22rem) 6em; align-items: center; gap: 2px var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.sk-mu:first-child { border-top: 0; padding-top: 0; }
.sk-mu-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); min-width: 0; }
.sk-mu-who a { color: var(--ink); font-weight: 600; text-decoration: none; }
.sk-mu-who a:hover { color: var(--primary-text); text-decoration: underline; }
.sk-mu-sub { grid-column: 1; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sk-mu-bar { grid-column: 2; grid-row: 1 / span 2; position: relative; height: 10px; border-radius: 2px; background: var(--surface-sunken); }
.sk-mu-bar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line-strong); }
.sk-mu-bar > span { position: absolute; top: 0; bottom: 0; border-radius: 2px; width: calc(var(--p, 0%) / 2); }
.sk-mu-bar.is-up > span { left: 50%; background: var(--win); }
.sk-mu-bar.is-down > span { right: 50%; background: var(--loss); }
.sk-mu-val { grid-column: 3; grid-row: 1 / span 2; display: grid; justify-items: end; gap: 0; }
.sk-mu-val .sk-cert { font-size: 12px; }
@media (max-width: 479px) { .sk-mu { grid-template-columns: minmax(0, 1fr) 4.5em; } .sk-mu-bar { grid-column: 1 / -1; grid-row: auto; order: 3; margin-top: var(--space-1); } .sk-mu-val { grid-column: 2; } }

/* Season record */
.sk-seasons td.is-num, .sk-seasons th.is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-seasons th, .sk-seasons td:first-child { white-space: nowrap; }

/* HeadToHead */
.sk-h2h-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: var(--space-4); }
.sk-h2h-vs { padding-bottom: 12px; font-family: var(--font-display); font-size: 15px; font-weight: 800; color: var(--ink-muted); }
.sk-pick { display: flex; align-items: center; gap: var(--space-2); min-height: 46px; padding: 0 var(--space-2) 0 var(--space-3); box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); }
.sk-pick-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-h2h-opts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); }
@media (max-width: 679px) { .sk-h2h-pick { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } .sk-h2h-vs { padding: 0; } }
/* Segmented radio group (venue): real radios, no script */
.sk-seg { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-2); }
.sk-seg legend { padding: 0; margin-bottom: var(--space-2); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.sk-seg-opts { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-raised); }
.sk-seg label { position: relative; display: inline-flex; }
.sk-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sk-seg label span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); font-weight: 600; color: var(--ink); }
.sk-seg label + label span { box-shadow: inset 1px 0 0 var(--line-strong); }
.sk-seg input:hover + span { color: var(--primary-text); }
.sk-seg input:checked + span { background: var(--primary); color: var(--on-primary); }
.sk-seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -4px; }
/* Result */
.sk-h2h-result { display: grid; gap: var(--space-6); }
.sk-h2h-score { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2) var(--space-6); }
.sk-h2h-side { display: grid; gap: var(--space-1); min-width: 0; }
.sk-h2h-side.is-b { text-align: right; justify-items: end; }
.sk-h2h-name { font-size: 18px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.sk-h2h-pct { font-family: var(--font-display); font-size: 55px; line-height: 52px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sk-h2h-side.is-a .sk-h2h-pct { color: var(--primary-text); }
.sk-h2h-side.is-b .sk-h2h-pct { color: var(--ink-muted); }
.sk-h2h-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sk-h2h-side.is-b .sk-h2h-info { justify-content: flex-end; }
.sk-split { grid-column: 1 / -1; display: flex; height: 14px; border-radius: 3px; overflow: hidden; background: var(--line-strong); }
.sk-split > span { background: var(--primary); box-shadow: 2px 0 0 var(--surface-raised); }
.sk-h2h-facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: 15px; line-height: 22px; }
.sk-h2h-facts b { font-variant-numeric: tabular-nums; }
@media (max-width: 679px) { .sk-h2h-pct { font-size: 48px; line-height: 48px; } }
.sk-h2h-opts > .sk-actions { display: flex; align-items: flex-end; min-height: 46px; }
.sk-h2h-part { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.sk-h2h-part h3 { margin: 0; font-family: var(--font-display); font-size: 17px; line-height: 21px; font-weight: 700; }
.sk-h2h-result .sk-table td { white-space: nowrap; }
.sk-h2h-result .sk-table td:last-child { white-space: normal; min-width: 9rem; }
/* data-p="0"…"100": bar widths as percentages, without inline styles */
[data-p="0"] { --p: 0%; }
[data-p="1"] { --p: 1%; }
[data-p="2"] { --p: 2%; }
[data-p="3"] { --p: 3%; }
[data-p="4"] { --p: 4%; }
[data-p="5"] { --p: 5%; }
[data-p="6"] { --p: 6%; }
[data-p="7"] { --p: 7%; }
[data-p="8"] { --p: 8%; }
[data-p="9"] { --p: 9%; }
[data-p="10"] { --p: 10%; }
[data-p="11"] { --p: 11%; }
[data-p="12"] { --p: 12%; }
[data-p="13"] { --p: 13%; }
[data-p="14"] { --p: 14%; }
[data-p="15"] { --p: 15%; }
[data-p="16"] { --p: 16%; }
[data-p="17"] { --p: 17%; }
[data-p="18"] { --p: 18%; }
[data-p="19"] { --p: 19%; }
[data-p="20"] { --p: 20%; }
[data-p="21"] { --p: 21%; }
[data-p="22"] { --p: 22%; }
[data-p="23"] { --p: 23%; }
[data-p="24"] { --p: 24%; }
[data-p="25"] { --p: 25%; }
[data-p="26"] { --p: 26%; }
[data-p="27"] { --p: 27%; }
[data-p="28"] { --p: 28%; }
[data-p="29"] { --p: 29%; }
[data-p="30"] { --p: 30%; }
[data-p="31"] { --p: 31%; }
[data-p="32"] { --p: 32%; }
[data-p="33"] { --p: 33%; }
[data-p="34"] { --p: 34%; }
[data-p="35"] { --p: 35%; }
[data-p="36"] { --p: 36%; }
[data-p="37"] { --p: 37%; }
[data-p="38"] { --p: 38%; }
[data-p="39"] { --p: 39%; }
[data-p="40"] { --p: 40%; }
[data-p="41"] { --p: 41%; }
[data-p="42"] { --p: 42%; }
[data-p="43"] { --p: 43%; }
[data-p="44"] { --p: 44%; }
[data-p="45"] { --p: 45%; }
[data-p="46"] { --p: 46%; }
[data-p="47"] { --p: 47%; }
[data-p="48"] { --p: 48%; }
[data-p="49"] { --p: 49%; }
[data-p="50"] { --p: 50%; }
[data-p="51"] { --p: 51%; }
[data-p="52"] { --p: 52%; }
[data-p="53"] { --p: 53%; }
[data-p="54"] { --p: 54%; }
[data-p="55"] { --p: 55%; }
[data-p="56"] { --p: 56%; }
[data-p="57"] { --p: 57%; }
[data-p="58"] { --p: 58%; }
[data-p="59"] { --p: 59%; }
[data-p="60"] { --p: 60%; }
[data-p="61"] { --p: 61%; }
[data-p="62"] { --p: 62%; }
[data-p="63"] { --p: 63%; }
[data-p="64"] { --p: 64%; }
[data-p="65"] { --p: 65%; }
[data-p="66"] { --p: 66%; }
[data-p="67"] { --p: 67%; }
[data-p="68"] { --p: 68%; }
[data-p="69"] { --p: 69%; }
[data-p="70"] { --p: 70%; }
[data-p="71"] { --p: 71%; }
[data-p="72"] { --p: 72%; }
[data-p="73"] { --p: 73%; }
[data-p="74"] { --p: 74%; }
[data-p="75"] { --p: 75%; }
[data-p="76"] { --p: 76%; }
[data-p="77"] { --p: 77%; }
[data-p="78"] { --p: 78%; }
[data-p="79"] { --p: 79%; }
[data-p="80"] { --p: 80%; }
[data-p="81"] { --p: 81%; }
[data-p="82"] { --p: 82%; }
[data-p="83"] { --p: 83%; }
[data-p="84"] { --p: 84%; }
[data-p="85"] { --p: 85%; }
[data-p="86"] { --p: 86%; }
[data-p="87"] { --p: 87%; }
[data-p="88"] { --p: 88%; }
[data-p="89"] { --p: 89%; }
[data-p="90"] { --p: 90%; }
[data-p="91"] { --p: 91%; }
[data-p="92"] { --p: 92%; }
[data-p="93"] { --p: 93%; }
[data-p="94"] { --p: 94%; }
[data-p="95"] { --p: 95%; }
[data-p="96"] { --p: 96%; }
[data-p="97"] { --p: 97%; }
[data-p="98"] { --p: 98%; }
[data-p="99"] { --p: 99%; }
[data-p="100"] { --p: 100%; }

/* T3 Stats v111: results gap, compare action, picker with results */
.sk-presults { display: grid; gap: var(--space-3); min-width: 0; }
.sk-phead-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); }
.sk-phead-top .pg-page-title { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 679px) { .sk-phead-top > .sk-btn { flex: 1 1 100%; justify-content: center; } }
.sk-pick-search { align-self: start; }
.sk-pick-q { display: flex; gap: var(--space-2); }
.sk-pick-q input { flex: 1; min-width: 0; }
.sk-plist.is-compact .sk-prow { padding: var(--space-2) var(--space-3); }
.sk-plist.is-compact .sk-prow-name { font-size: 15px; line-height: 22px; }
.sk-plist.is-compact .sk-prow-club { font-size: 13px; line-height: 18px; }
button.sk-prow { width: 100%; margin: 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.sk-h2h-pick:has(.sk-pick-search), .sk-h2h-pick:has(.is-invalid) { align-items: start; }
.sk-h2h-pick:has(.sk-pick-search) .sk-h2h-vs, .sk-h2h-pick:has(.is-invalid) .sk-h2h-vs { padding: 40px 0 0; }
@media (max-width: 679px) { .sk-h2h-pick:has(.sk-pick-search) .sk-h2h-vs, .sk-h2h-pick:has(.is-invalid) .sk-h2h-vs { padding: 0; } }
.sk-h2h-opts:has(.is-invalid) { align-items: flex-start; }
.sk-h2h-opts:has(.is-invalid) > .sk-actions { padding-top: 28px; }
.sk-h2h-pick > .sk-field { grid-template-columns: minmax(0, 1fr); }
.sk-pick { min-width: 0; }

/* T3 Stats v117: seasons on the player page (season switcher, from-season choice, past-season view) */
.sk-seasonnav .sk-weekpick > summary h2 { font-size: 26px; line-height: 30px; font-variant-numeric: tabular-nums; }
.sk-seasonnav .sk-tag { margin-left: var(--space-1); }
.sk-seasonnav .sk-actmenu-panel { min-width: 16rem; }
@media (max-width: 679px) { .sk-seasonnav .sk-weekpick > summary h2 { font-size: 22px; line-height: 26px; } .sk-seasonnav .sk-actmenu-panel { min-width: 13rem; max-width: calc(100vw - 96px); } .sk-seasonnav .sk-weekpick .sk-actmenu-item { grid-template-columns: 1fr; gap: 2px; } }
.sk-pastnote { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); font-size: 15px; line-height: 22px; color: var(--ink); }
.sk-pastnote a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.sk-pastnote a:hover { color: var(--primary-text); }
/* Chips: one choice out of a few, as links (aria-current on the chosen one); no script */
.sk-chips { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.sk-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3); box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: var(--radius-ball); background: var(--surface-raised); color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.sk-chip:hover { border-color: var(--primary); color: var(--primary-text); }
.sk-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sk-chip[aria-current="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.sk-fromseason { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sk-fromseason-label { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
/* Season record: the season you look at is marked; every season name is a link */
.sk-seasons tr.is-selected td { background: var(--primary-soft); }
.sk-seasons tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--primary); font-weight: 600; }
.sk-seasons td:first-child a { color: var(--ink); text-underline-offset: 3px; }
.sk-seasons td:first-child a:hover { color: var(--primary-text); }
/* T3 Stats v118: player-season states (coverage note, empty states) */
.sk-pastnote-cov { flex-basis: 100%; margin: 0; padding-top: var(--space-2); border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--ink-muted); max-width: none; }
.sk-pastnote-cov strong { color: var(--ink); font-weight: 600; }
.sk-empty-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
/* T3 Stats v120: past-season "Speelde als" = season average, end of season as second line */
.sk-pstat-alt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sk-pstat-alt .sk-rank { height: 22px; min-width: 34px; font-size: 15px; }
/* T3 Stats v121: certainty labelled "zekerheid: …" never wraps; matchups on phones: name | pp, sub, full-width bar, certainty right-aligned under the bar */
.sk-cert > summary { white-space: nowrap; }
.sk-mu { grid-template-columns: minmax(0, 1fr) minmax(140px, 22rem) 9rem; }
@media (max-width: 479px) {
  .sk-mu { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .sk-mu-val { display: contents; }
  .sk-mu-val > .sk-pp { grid-column: 2; grid-row: 1; justify-self: end; }
  .sk-mu-sub { grid-column: 1 / -1; grid-row: 2; }
  .sk-mu-bar { grid-column: 1 / -1; grid-row: 3; order: 0; margin-top: var(--space-2); }
  .sk-mu-val > .sk-cert { grid-column: 1 / -1; grid-row: 4; justify-self: end; margin-top: 2px; }
}
/* T3 Stats v121: matchups scope toggle (Dit seizoen / Alle seizoenen) */
.sk-scope { display: inline-flex; }
.sk-block-head > .sk-scope ~ p { flex-basis: 100%; }
/* T3 Stats v122: all games of a player in one season (PlayerGames) */
.sk-backlink { justify-self: start; font-size: 15px; line-height: 22px; color: var(--ink-muted); text-decoration: none; }
.sk-backlink:hover { color: var(--primary-text); text-decoration: underline; text-underline-offset: 3px; }
.sk-morelink { justify-self: start; margin-top: var(--space-2); font-weight: 600; color: var(--ink); text-underline-offset: 3px; }
.sk-morelink:hover { color: var(--primary-text); }
.sk-gsummary { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sk-gfilters { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.sk-gfilter { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sk-allgames td { vertical-align: middle; }
.sk-allgames .sk-opp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); }
.sk-allgames .sk-opp a { color: var(--ink); font-weight: 600; text-decoration: none; }
.sk-allgames .sk-opp a:hover { color: var(--primary-text); text-decoration: underline; }
.sk-allgames .sk-cell-muted { color: var(--ink-muted); }
.sk-g-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sk-g-club, .sk-g-team, .sk-g-sets { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sk-g-match { font-size: 14px; line-height: 20px; }
.sk-g-match > span:first-child { display: block; }
.sk-g-team b { font-weight: 600; color: var(--ink); }
.sk-g-result { white-space: nowrap; }
.sk-g-result .sk-result { font-variant-numeric: tabular-nums; }
.sk-g-unrated { font-size: 14px; color: var(--ink-muted); font-style: italic; }
.sk-upset { display: inline-block; margin-left: var(--space-2); padding: 0 6px; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .01em; vertical-align: 1px; }
.sk-upset.is-win { background: color-mix(in srgb, var(--win) 14%, transparent); color: var(--win); }
.sk-upset.is-loss { background: color-mix(in srgb, var(--loss) 14%, transparent); color: var(--loss); }
.sk-upset.is-ff { border: 1px dashed var(--line-strong); color: var(--ink-muted); }
.sk-allgames tr.is-upset-win > td:first-child { box-shadow: inset 3px 0 0 var(--win); }
.sk-allgames tr.is-upset-loss > td:first-child { box-shadow: inset 3px 0 0 var(--loss); }
.sk-allgames tr.is-forfeit td { color: var(--ink-muted); }
.sk-allgames tr.sk-g-month th { padding-top: var(--space-6); background: transparent; color: var(--ink); text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-size: 15px; line-height: 21px; }
.sk-allgames tbody tr.sk-g-month:first-child th { padding-top: var(--space-3); }
.sk-gblock { gap: var(--space-4); }
@media (max-width: 679px) {
  .sk-allgames.sk-table-stack tr { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: var(--space-1); padding-inline: var(--space-3); }
  .sk-allgames.sk-table-stack td.sk-g-opp { grid-column: 1 / 3; grid-row: 1; }
  .sk-allgames.sk-table-stack td.sk-g-result { display: contents; }
  .sk-allgames.sk-table-stack td.sk-g-result .sk-result { grid-column: 3; grid-row: 1; justify-self: end; align-self: start; }
  .sk-allgames.sk-table-stack td.sk-g-result .sk-upset { grid-column: 3; grid-row: 3; justify-self: end; align-self: center; margin-left: 0; }
  .sk-allgames.sk-table-stack td.sk-g-result .sk-g-sets { grid-column: 1 / -1; grid-row: 4; }
  .sk-allgames.sk-table-stack td.sk-g-date { grid-column: 1; grid-row: 2; }
  .sk-allgames.sk-table-stack td.sk-g-match { grid-column: 2 / -1; grid-row: 2; }
  .sk-allgames.sk-table-stack td.sk-g-chance { grid-column: 1 / 3; grid-row: 3; display: flex !important; align-items: center; gap: 6px; white-space: nowrap; }
  .sk-allgames.sk-table-stack td.sk-g-chance::before { content: attr(data-label) " "; color: var(--ink-muted); font-size: 14px; }
  .sk-allgames.sk-table-stack tr.is-upset-win, .sk-allgames.sk-table-stack tr.is-upset-loss { box-shadow: inset 3px 0 0 var(--win); }
  .sk-allgames.sk-table-stack tr.is-upset-loss { box-shadow: inset 3px 0 0 var(--loss); }
  .sk-allgames.sk-table-stack tr > td:first-child { box-shadow: none; }
  .sk-allgames.sk-table-stack tr.sk-g-month { display: block; padding: var(--space-5) 0 var(--space-2); border-bottom: 1px solid var(--line-strong); }
  .sk-allgames.sk-table-stack tr.sk-g-month th { display: block; padding: 0 0 0 var(--space-3); border: 0; }
}
/* T3 Stats v126: one-click head to head (Onderling link next to every opponent; Wissel on the result) */
.sk-h2hlink { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px 0 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-ball); background: var(--surface-raised); color: var(--ink-muted); font-family: var(--font-sans); font-size: 12px; line-height: 1; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sk-h2hlink svg, .sk-h2h-swap svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sk-h2hlink:hover { color: var(--primary-text); border-color: var(--primary); }
.sk-h2hlink:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sk-h2hlink::before { content: ""; position: absolute; inset: -8px -4px; }
@media (max-width: 479px) {
  .sk-h2hlink { width: 32px; padding: 0; justify-content: center; }
  .sk-h2hlink span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.sk-h2h-mid { display: grid; justify-items: center; gap: var(--space-2); padding-bottom: 4px; }
.sk-h2h-mid .sk-h2h-vs { padding: 0; }
.sk-h2h-swap { gap: 6px; }
@media (max-width: 679px) { .sk-h2h-mid { grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--space-3); padding: 0; } }
a.sk-h2h-name { color: var(--ink); text-decoration: none; }
a.sk-h2h-name:hover { color: var(--primary-text); text-decoration: underline; text-underline-offset: 3px; }
/* T3 Stats v127: next season, predicted vs actual (ranking and strength at the start) */
.sk-predict { display: grid; margin: 0; padding: 0; list-style: none; }
.sk-predict-row, .sk-forecast-strength { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-6); padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.sk-predict-row:first-child { border-top: 0; padding-top: 0; }
.sk-forecast-strength { margin-top: var(--space-4); padding-bottom: 0; }
.sk-predict-name { display: grid; gap: 2px; min-width: 0; }
.sk-predict-name b { font-weight: 600; font-size: 16px; line-height: 22px; color: var(--ink); }
.sk-predict-name span { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sk-predict-vals { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-4); }
.sk-predict-val { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 20px; }
.sk-predict-k { color: var(--ink-muted); }
.sk-predict-val.is-missing { color: var(--ink-muted); font-style: italic; }
.sk-predict-mark { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-ball); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.sk-predict-mark.is-right { color: var(--ink); background: var(--surface-sunken); }
.sk-predict-note { flex-basis: 100%; text-align: right; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
@media (max-width: 679px) {
  .sk-predict-row, .sk-forecast-strength { grid-template-columns: minmax(0, 1fr); }
  .sk-predict-vals { justify-content: flex-start; }
  .sk-predict-note { text-align: left; }
}
/* ===== v1.1 (2026-11-04): classes T3 Stats uses that the v1 fork had left out: result words, small button, pager, htmx partial updates and their inline error ===== */
/* Result word or score: win / loss / draw, always with the word or the score */
.sk-result { display: inline-flex; align-items: center; gap: var(--space-1); }
.sk-result-win { color: var(--win); }
.sk-result-loss { color: var(--loss); }
.sk-result-draw { color: var(--ink-muted); }
.sk-btn-sm { min-height: 32px; padding: 0 var(--space-3); font-size: 14px; line-height: 20px; white-space: nowrap; }
.pg-pager { display: flex; justify-content: space-between; gap: var(--space-3); }
/* Partial updates with htmx (PartialUpdate). Target = the element a request replaces; htmx adds .htmx-request via hx-indicator */
.sk-partial { position: relative; }
.sk-partial::after { content: ""; position: absolute; z-index: 3; inset: 0 0 auto 0; height: 3px; border-radius: var(--radius-md) var(--radius-md) 0 0; background: linear-gradient(90deg, transparent, var(--primary) 15%, var(--primary) 85%, transparent) no-repeat; background-size: 40% 100%; opacity: 0; pointer-events: none; }
.sk-partial.is-cell { width: fit-content; }
.sk-partial.is-cell::after { inset: auto 0 0 0; height: 2px; border-radius: 0; }
.sk-partial.htmx-request, .sk-partial[aria-busy="true"] { cursor: progress; }
.sk-partial.htmx-request > *, .sk-partial[aria-busy="true"] > * { opacity: .55; pointer-events: none; transition: opacity .15s ease .2s; }
.sk-partial.htmx-request::after, .sk-partial[aria-busy="true"]::after { opacity: 1; transition: opacity .15s ease .2s; animation: sk-partial-bar 1.1s linear infinite; }
@keyframes sk-partial-bar { from { background-position: -70% 0; } to { background-position: 170% 0; } }
@media (prefers-reduced-motion: reduce) { .sk-partial.htmx-request::after, .sk-partial[aria-busy="true"]::after { animation: none; background-size: 100% 100%; opacity: .6; } .sk-partial.htmx-request > *, .sk-partial[aria-busy="true"] > * { transition: none; } }
.sk-partial-error { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--danger); border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--ink); font-size: 14px; line-height: 20px; }
.sk-partial-error p { margin: 0; }
.sk-partial-error strong { color: var(--danger); }
.sk-partial-error > div { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sk-partial-error.is-compact { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); padding: 2px var(--space-2); font-size: 13px; line-height: 18px; font-weight: 600; }
.sk-partial-error.is-compact button { padding: 0; border: 0; background: none; color: var(--primary-text); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sk-partial-error.is-compact button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ===== v1.3 (2026-11-04): reference letters from the federation methods (contract Addendum 17 §3), under the letter forecast ===== */
.sk-fedref { display: grid; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.sk-fedref-head { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }
.sk-fedref-list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; }
.sk-fedref-item { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
.sk-fedref-item dt { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .04em; color: var(--ink-muted); }
.sk-fedref-item dt abbr { text-decoration: none; }
.sk-fedref-item dd { margin: 0; }
.sk-rank.sk-rank-ref { height: 22px; min-width: 34px; font-size: 14px; font-weight: 600; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sk-fedref-none { font-size: 13px; line-height: 18px; font-style: italic; color: var(--ink-muted); }
.sk-fedref-note, .sk-fedref-empty { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sk-fedref-empty { font-style: italic; }
.sk-fedref.is-alone { margin-top: 0; padding-top: 0; border-top: 0; }
/* ===== v1.4 (2026-11-04): MatchPrediction, team match prediction and team calendar (contract Addendum 16) ===== */
/* Entry: team pick + calendar */
.sk-mp-teams { display: grid; gap: var(--space-3); }
.sk-mp-cal td { vertical-align: middle; }
.sk-mp-cal .sk-mp-wk { white-space: nowrap; font-weight: 600; }
.sk-mp-cal .sk-mp-when { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.sk-mp-cal .sk-mp-match b { font-weight: 600; }
.sk-mp-cal .sk-mp-act { text-align: right; white-space: nowrap; }
.sk-mp-cal tr.is-next td { background: var(--primary-soft); }
.sk-mp-cal tr.is-next td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.sk-mp-cal tr.is-bye td, .sk-mp-cal tr.is-off td { color: var(--ink-muted); }
.sk-mp-cal tr.is-next .sk-tag { background: var(--primary); color: var(--on-primary); }
.sk-mp-link { color: var(--primary-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sk-mp-link:hover { color: var(--primary-hover); }
.sk-mp-cal .sk-mp-none { font-size: 14px; color: var(--ink-muted); font-style: italic; }
@media (max-width: 679px) {
  .sk-mp-cal.sk-table-stack tr { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: var(--space-1); }
  .sk-mp-cal.sk-table-stack td.sk-mp-wk { grid-column: 1; }
  .sk-mp-cal.sk-table-stack td.sk-mp-when { grid-column: 2; justify-self: end; }
  .sk-mp-cal.sk-table-stack td.sk-mp-match, .sk-mp-cal.sk-table-stack td.sk-mp-res { grid-column: 1 / -1; }
  .sk-mp-cal.sk-table-stack td.sk-mp-act { grid-column: 1 / -1; }
  .sk-mp-cal.sk-table-stack td:empty { display: none; }
  .sk-mp-cal.sk-table-stack tr.is-next { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
  .sk-mp-cal.sk-table-stack tr.is-next td { background: transparent; box-shadow: none; }
  /* v2.1.2: these phone rules were overridden by the base .sk-mp-place rule further down (same specificity, later wins); the place list now scopes them */
  .sk-mp-places .sk-mp-place { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
  .sk-mp-places .sk-mp-no { grid-column: 1; min-width: 0; }
  .sk-mp-places .sk-mp-who { grid-column: 1; }
  .sk-mp-places .sk-mp-place-end { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
}
/* Match head */
.sk-mp-head { display: grid; gap: var(--space-2); }
.pg-page-title { overflow-wrap: break-word; hyphens: auto; }   /* long Dutch words such as "Wedstrijdvoorspelling" on phones */
.sk-mp-meta { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
/* Odds */
.sk-mp-basis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sk-mp-basis .sk-tag { background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sk-mp-basis .sk-tag.is-given { background: var(--primary-soft); box-shadow: none; }
.sk-mp-odds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-6); }
.sk-mp-out { display: grid; gap: 2px; min-width: 0; }
.sk-mp-out.is-draw { justify-items: center; text-align: center; }
.sk-mp-out.is-away { justify-items: end; text-align: right; }
.sk-mp-pct { font-family: var(--font-display); font-size: 48px; line-height: 48px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sk-mp-out.is-home .sk-mp-pct { color: var(--primary-text); }
.sk-mp-out.is-draw .sk-mp-pct, .sk-mp-out.is-away .sk-mp-pct { color: var(--ink-muted); }
.sk-mp-what { font-size: 14px; line-height: 20px; color: var(--ink-muted); overflow-wrap: anywhere; }
.sk-mp-what b { color: var(--ink); font-weight: 600; }
.sk-split3 { grid-column: 1 / -1; display: flex; height: 14px; border-radius: 3px; overflow: hidden; background: var(--ink-muted); }
.sk-split3 > span { width: var(--p, 0%); box-shadow: 2px 0 0 var(--surface-raised); }
.sk-split3 > .is-home { background: var(--primary); }
.sk-split3 > .is-draw { background: var(--line-strong); }
.sk-mp-facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; }
.sk-mp-facts div { display: grid; gap: 0; }
.sk-mp-facts dt { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sk-mp-facts dd { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sk-mp-back { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Played match: what really happened */
.sk-mp-real { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.sk-mp-real b { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sk-mp-real span { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
/* Views compared */
.sk-mp-views td.sk-num, .sk-mp-views th.sk-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-mp-views tr.is-current td { background: var(--primary-soft); }
.sk-mp-views tr.is-current td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.sk-mp-views .sk-mp-viewname { font-weight: 600; }
.sk-mp-views td:first-child { min-width: 11em; }
.sk-mp-views .sk-mp-viewnote { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); font-weight: 400; }
/* Line-ups */
.sk-mp-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.sk-mp-side { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.sk-mp-side-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.sk-mp-side-head h3 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; }
.sk-mp-places { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.sk-mp-place { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-3); }
.sk-mp-place + .sk-mp-place { border-top: 1px solid var(--line); }
.sk-mp-place.is-changed { background: var(--primary-soft); }
.sk-mp-no { font-size: 13px; line-height: 18px; color: var(--ink-muted); white-space: nowrap; min-width: 4.5em; }
.sk-mp-who { display: grid; min-width: 0; }
.sk-mp-who b { font-weight: 600; overflow-wrap: anywhere; }
.sk-mp-who span { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sk-mp-who .is-unrated { font-style: italic; }
.sk-mp-place-end { display: flex; align-items: center; gap: var(--space-2); }
.sk-mp-side-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sk-mp-indication { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
/* Picker for one place: details > candidate list (submit buttons, no script needed) */
.sk-mp-picker { grid-column: 1 / -1; }
.sk-mp-picker > summary { list-style: none; cursor: pointer; }
.sk-mp-picker > summary::-webkit-details-marker { display: none; }
.sk-mp-picker[open] > summary { margin-bottom: var(--space-2); }
.sk-mp-cands { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-raised); max-height: 18rem; overflow-y: auto; }
.sk-mp-cands li + li { border-top: 1px solid var(--line); }
.sk-mp-cand { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 var(--space-3); width: 100%; padding: var(--space-2) var(--space-3); border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.sk-mp-cand:hover { background: var(--primary-soft); }
.sk-mp-cand:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sk-mp-cand b { font-weight: 600; }
.sk-mp-cand > span:last-child { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
.sk-mp-cand .sk-mp-cand-sub { grid-column: 1; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sk-mp-cand[aria-current="true"] { background: var(--surface-sunken); }
/* Score distribution 0-16: columns, height from data-p (share of the highest column) */
.sk-mp-hist { display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); align-items: end; gap: 3px; height: 140px; margin: 0; padding: 0; list-style: none; }
.sk-mp-hist li { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; min-width: 0; }
.sk-mp-hist .sk-mp-bar { align-self: end; height: var(--p, 0%); min-height: 2px; border-radius: 2px 2px 0 0; background: var(--line-strong); }
.sk-mp-hist li.is-top .sk-mp-bar { background: var(--primary); }
.sk-mp-hist li.is-draw .sk-mp-bar { background: repeating-linear-gradient(135deg, var(--line-strong) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sk-mp-hist li.is-draw.is-top .sk-mp-bar { background: var(--primary); box-shadow: none; }
.sk-mp-hist li.is-real .sk-mp-bar { outline: 2px solid var(--ink); outline-offset: 1px; }
.sk-mp-hist .sk-mp-x { padding-top: 4px; font-size: 12px; line-height: 16px; text-align: center; color: var(--ink-muted); font-variant-numeric: tabular-nums; border-top: 1px solid var(--line-strong); }
.sk-mp-hist li.is-draw .sk-mp-x, .sk-mp-hist li.is-top .sk-mp-x { color: var(--ink); font-weight: 600; }
.sk-mp-histkey { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
/* Game chance grid 4 x 4 (home player wins), bands from the home view */
.sk-mp-grid { table-layout: fixed; min-width: 520px; }
.sk-mp-grid th[scope="col"] { text-align: center; }
.sk-mp-grid th[scope="row"] { color: var(--ink); font-size: 14px; }
.sk-mp-grid th small { display: block; font-weight: 400; color: var(--ink-muted); }
.sk-mp-grid td { text-align: center; font-variant-numeric: tabular-nums; vertical-align: middle; }
.sk-mp-grid td.is-fav { background: var(--primary-soft); font-weight: 600; }
.sk-mp-grid td.is-dog { color: var(--ink-muted); }
.sk-mp-grid td .sk-result { display: block; font-size: 13px; line-height: 18px; justify-content: center; }
@media (max-width: 759px) {
  .sk-mp-sides { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 679px) {
  .sk-mp-pct { font-size: 34px; line-height: 36px; }
  .sk-mp-odds { gap: var(--space-2) var(--space-3); }
  .sk-mp-hist { gap: 2px; height: 120px; }
  .sk-mp-hist .sk-mp-x { font-size: 11px; }
  .sk-mp-hist li:nth-child(even):not(.is-draw):not(.is-top) .sk-mp-x { color: transparent; }
}
/* ===== v1.5 (2026-11-05): finding matches, player links and links back from the player page (request prediction-navigation, contract Addendum 18) ===== */
/* Player name links on the prediction pages: like .sk-opp links */
.sk-plink { color: var(--ink); font-weight: 600; text-decoration: none; border-radius: 2px; }
.sk-plink:hover { color: var(--primary-text); text-decoration: underline; text-underline-offset: 3px; }
.sk-plink:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sk-mp-grid .sk-plink { font-weight: inherit; }
/* Picker row: the pick button and the player link are siblings, never nested */
.sk-mp-cands li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.sk-mp-cand-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3); border-left: 1px solid var(--line); color: var(--ink-muted); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sk-mp-cand-link:hover { color: var(--primary-text); text-decoration: underline; text-underline-offset: 3px; }
.sk-mp-cand-link:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* Find a match */
.sk-mp-find { display: grid; gap: var(--space-4); }
.sk-mp-find .sk-filterbar > .sk-field.is-q { flex: 2 1 16rem; }
.sk-mp-find .sk-filterbar > .sk-field.is-week { flex: 0 1 9rem; }
.sk-mp-find .sk-filterbar > .sk-seg { flex: 0 1 auto; }
.sk-mp-find .sk-filterbar > .sk-seg legend { margin-bottom: var(--space-1); }
.sk-mp-count { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sk-mp-count b { color: var(--ink); font-weight: 600; }
.sk-mp-cal tr.sk-mp-group th { padding-top: var(--space-5); background: var(--surface-sunken); color: var(--ink); font-size: 14px; line-height: 20px; }
.sk-mp-cal tr.sk-mp-group:first-child th { padding-top: var(--space-3); }
.sk-mp-cal .sk-mp-match mark { background: var(--primary-soft); color: inherit; border-radius: 2px; padding: 0 1px; }
.sk-mp-or { margin: 0; font-family: var(--font-display); font-size: 17px; line-height: 24px; font-weight: 700; }
@media (max-width: 679px) {
  .sk-mp-cal.sk-table-stack tr.sk-mp-group { display: block; padding: var(--space-4) var(--space-4) var(--space-2); background: var(--surface-sunken); }
  .sk-mp-cal.sk-table-stack tr.sk-mp-group th { display: block; padding: 0; background: transparent; border-bottom: 0; }
  .sk-mp-cal.sk-table-stack td.sk-mp-when:first-child { grid-column: 1 / -1; justify-self: start; }
}
/* Player page: link to a team match, and the team's next match */
.sk-g-pred { display: inline-block; margin-top: 2px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--primary-text); text-decoration: none; }
.sk-g-pred:hover { text-decoration: underline; text-underline-offset: 3px; }
.sk-g-pred:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.sk-games .sk-g-pred { display: block; }
.sk-nextmatch { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-6); padding: var(--space-4) var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: var(--radius-md); }
.sk-nextmatch-main { display: grid; gap: 2px; min-width: 0; }
.sk-nextmatch-label { margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.sk-nextmatch-match { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
.sk-nextmatch-meta { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sk-nextmatch-odds { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; font-size: 14px; line-height: 20px; }
.sk-nextmatch-odds b { font-family: var(--font-display); font-size: 21px; line-height: 24px; font-weight: 800; color: var(--primary-text); font-variant-numeric: tabular-nums; }
.sk-nextmatch-odds .sk-mp-none { font-style: italic; color: var(--ink-muted); }
.sk-nextmatch-odds .sk-tag { background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (max-width: 679px) {
  .sk-nextmatch { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
}
/* ===== v1.6 (2026-11-05): MatchPrediction "Of kies een ploeg": one search for clubs and teams (Addendum 19) ===== */
.sk-mp-teamlist .sk-mp-club { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-3); padding: var(--space-2) var(--space-4); background: var(--surface-sunken); }
.sk-mp-club-name { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.sk-mp-club-code { font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sk-mp-team .sk-prow-name { font-size: 16px; line-height: 22px; }
.sk-mp-teamrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.sk-mp-team { grid-template-columns: minmax(0, 1fr); }
.sk-mp-team-next { grid-column: 1; font-size: 13px; line-height: 18px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sk-mp-team-next.is-none { font-style: italic; }
.sk-mp-team-pred { margin-right: var(--space-3); }
.sk-mp-teamrow .sk-mp-none { font-size: 13px; color: var(--ink-muted); font-style: italic; white-space: nowrap; margin-right: var(--space-4); }
@media (max-width: 679px) {
  .sk-mp-teamrow { grid-template-columns: minmax(0, 1fr); }
  .sk-mp-team-pred { justify-self: start; margin: 0 var(--space-4) var(--space-3); }
}
.sk-mp-teamlist mark, .sk-mp-club-name mark { background: var(--primary-soft); color: inherit; border-radius: 2px; padding: 0 1px; }
/* ===== v1.7 (2026-11-05): MatchPrediction line-up stability and "Ook kans om te spelen" (Addendum 20) ===== */
.sk-mp-stab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sk-mp-stab-level { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-ball); color: var(--ink); font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.sk-mp-stab-level i { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sk-mp-stab-level i b { display: block; width: 4px; border-radius: 1px; background: var(--line-strong); opacity: .35; }
.sk-mp-stab-level i b:nth-child(1) { height: 6px; }
.sk-mp-stab-level i b:nth-child(2) { height: 9px; }
.sk-mp-stab-level i b:nth-child(3) { height: 12px; }
.sk-mp-stab-level[data-level="loose"] i b:nth-child(-n+1),
.sk-mp-stab-level[data-level="mixed"] i b:nth-child(-n+2),
.sk-mp-stab-level[data-level="stable"] i b { background: var(--primary); opacity: 1; }
.sk-mp-stab-src { flex-basis: 100%; font-size: 13px; line-height: 18px; }
.sk-mp-place .sk-chance { font-size: 13px; color: var(--ink-muted); }
.sk-mp-also { display: grid; gap: var(--space-2); }
.sk-mp-also h4 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.sk-mp-also-list { display: grid; margin: 0; padding: 0; list-style: none; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); }
.sk-mp-also-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-3); }
.sk-mp-also-row + .sk-mp-also-row { border-top: 1px solid var(--line); }
.sk-mp-also-who { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); min-width: 0; }
.sk-mp-also-row .sk-chance { font-size: 14px; }
.sk-mp-also-more { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
/* v1.7.1: NONE level (no pill) and unlisted places */
.sk-mp-stab.is-none .sk-mp-stab-src { font-size: 14px; line-height: 20px; }
.sk-mp-unlisted { margin: calc(-1 * var(--space-1)) 0 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
@media (max-width: 679px) {
  .sk-mp-also-row { grid-template-columns: minmax(0, 1fr) auto; }
  .sk-mp-also-row .sk-chance { grid-column: 1; grid-row: 2; }
  .sk-mp-also-row .sk-actmenu { grid-column: 2; grid-row: 1 / span 2; }
}
/* v2.1.2: a seg control with 3 or more options becomes an even grid on phones (2 per row from 320px), never a ragged wrap */
@media (max-width: 679px) {
  .sk-seg-opts:has(> label:nth-child(3)) { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 1px; background: var(--line-strong); width: 100%; box-sizing: border-box; }
  .sk-seg-opts:has(> label:nth-child(3)) label { display: flex; }
  .sk-seg-opts:has(> label:nth-child(3)) label span { flex: 1; justify-content: center; text-align: center; padding: var(--space-2) var(--space-3); background: var(--surface-raised); box-shadow: none; line-height: 20px; }
  .sk-seg-opts:has(> label:nth-child(3)) input:checked + span { background: var(--primary); }
  .sk-block > .sk-seg:has(.sk-seg-opts > label:nth-child(3)) { justify-items: stretch; }
}
/* ===== v2.2 PlayerGames grouped by event: one block per team match or tournament day (details, open by default) ===== */
.sk-gevs { display: grid; gap: var(--space-3); }
.sk-gev { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); overflow: hidden; }
.sk-gev-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); row-gap: 2px; padding: var(--space-3) calc(var(--space-4) + 22px) var(--space-3) var(--space-4); cursor: pointer; list-style: none; position: relative; }
.sk-gev-head::-webkit-details-marker { display: none; }
.sk-gev-head::after { content: ""; position: absolute; right: 18px; top: 22px; width: 7px; height: 7px; border: solid var(--ink-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s ease; }
.sk-gev[open] > .sk-gev-head::after { transform: rotate(-135deg); top: 26px; }
.sk-gev-head:hover { background: var(--surface-sunken); }
.sk-gev-head:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sk-gev-when { grid-column: 1; font-size: 13px; line-height: 18px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sk-gev-title { grid-column: 1; font-family: var(--font-display); font-size: 17px; line-height: 24px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.sk-gev-title b { font-variant-numeric: tabular-nums; margin-left: var(--space-2); }
.sk-gev-sub { grid-column: 1; font-size: 14px; line-height: 20px; color: var(--ink-muted); overflow-wrap: anywhere; }
.sk-gev-score { grid-column: 2; grid-row: 1 / span 3; align-self: center; justify-self: end; font-size: 14px; line-height: 20px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-gev-score b { font-size: 17px; font-weight: 600; }
.sk-gev-body { border-top: 1px solid var(--line); }
.sk-gev-games { margin: 0; border: 0; border-radius: 0; table-layout: fixed; width: 100%; }
.sk-gev-games th:nth-child(1), .sk-gev-games td.sk-g-opp { width: 44%; }
.sk-gev-games th:nth-child(2), .sk-gev-games td.sk-g-chance { width: 22%; }
.sk-gev-games td.sk-g-result { white-space: normal; }
.sk-gev-games thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sk-gev-series { margin: 0; padding: var(--space-3) var(--space-4) var(--space-1); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); border-top: 1px solid var(--line); }
.sk-gev-series:first-child { border-top: 0; }
.sk-gev-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line); background: var(--surface-sunken); font-size: 14px; line-height: 20px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sk-gev-foot .sk-gev-ff { color: var(--ink-muted); }
.sk-gev-foot .sk-g-pred { margin-top: 0; font-size: 14px; line-height: 20px; }
.sk-gev-hidden { color: var(--ink-muted); }
/* v2.3: context tags (evening score, upsets in hindsight): neutral outline, never win/loss colours */
.sk-ctx-tag { display: inline-block; margin-left: var(--space-2); padding: 0 var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-ball); font-size: 12px; line-height: 18px; font-weight: 500; color: var(--ink); background: transparent; white-space: nowrap; vertical-align: 1px; }
.sk-gev-sub .sk-ctx-tag { margin-left: var(--space-2); }
.sk-g-result .sk-ctx-tag { margin-left: 6px; white-space: normal; }
.sk-mp-evening { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sk-mp-evening .sk-ctx-tag { margin-left: 0; }
.sk-mpx { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }
.sk-mpx-team { display: grid; gap: 2px; }
.sk-mpx-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.sk-mpx-score { font-size: 28px; line-height: 34px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sk-mp-up-h { margin: 0 0 var(--space-2); font-size: 15px; line-height: 21px; font-weight: 600; }
.sk-mp-upsets { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); }
.sk-mp-upsets li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); font-size: 14px; line-height: 20px; }
.sk-mp-upsets .sk-upset, .sk-mp-upsets .sk-ctx-tag { margin-left: 0; }
@media (max-width: 679px) {
  .sk-gev-head { padding-left: var(--space-3); grid-template-columns: minmax(0, 1fr); }
  .sk-gev-score { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 2px; }
  .sk-gev-games td.sk-g-opp, .sk-gev-games td.sk-g-chance, .sk-gev-games th { width: auto; }
  .sk-gev-foot { padding-inline: var(--space-3); }
  .sk-gev-series { padding-inline: var(--space-3); }
  .sk-gev-games.sk-table-stack td.sk-g-chance { grid-row: 2; }
  .sk-gev-games.sk-table-stack td.sk-g-result .sk-upset { grid-row: 2; }
  .sk-gev-games.sk-table-stack td.sk-g-result .sk-g-sets { grid-row: 3; }
  .sk-gev-games.sk-table-stack td.sk-g-result .sk-ctx-tag { grid-column: 1 / -1; grid-row: 4; justify-self: start; margin-left: 0; white-space: nowrap; }
  .sk-mpx { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}

/* ===== v1.8 Player flows (Spelersstromen) and club page. Charts are server-rendered SVG: no script; hover text comes from <title>, every value is also in the table view ===== */
.sk-flow-tiles-head { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }
.sk-flow-fig { font-variant-numeric: normal; }
.sk-flow-chart { margin: 0; display: grid; gap: var(--space-3); min-width: 0; }
.sk-flow-chart + .sk-flow-chart { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.sk-flow-chart figcaption h3 { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 700; color: var(--ink); }
.sk-flow-chart figcaption p { margin: var(--space-1) 0 0; font-size: 14px; line-height: 20px; color: var(--ink-muted); max-width: 70ch; }
.sk-flow-chart-hint { margin: 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sk-flow-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sk-flow-key { display: inline-flex; align-items: center; gap: 6px; }
.sk-flow-key::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--k); }
.sk-flow-scroll { display: flex; flex-direction: row-reverse; overflow-x: auto; }   /* phones open at the newest season */
.sk-flow-scroll svg { display: block; flex: none; width: 100%; min-width: 720px; height: auto; font-family: var(--font-sans); }
.sk-flow-chart.is-small .sk-flow-scroll svg { min-width: 0; }
.sk-flow-chart svg .grid { stroke: var(--line); stroke-width: 1; }
.sk-flow-chart svg .base { stroke: var(--line-strong); stroke-width: 1; }
.sk-flow-chart svg .axis { fill: var(--ink-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.sk-flow-chart svg .axis.sm { font-size: 11px; }
.sk-flow-chart svg .dlabel { fill: var(--ink-muted); font-size: 13px; }
.sk-flow-chart svg .dl-v { fill: var(--ink); font-weight: 700; }
.sk-flow-chart svg .dl-season { fill: var(--ink-muted); font-size: 12px; }
.sk-flow-chart svg .prov-label { fill: var(--ink-muted); font-size: 11px; font-style: italic; }
.sk-flow-chart svg .col.is-prov .seg { opacity: .55; }
.sk-flow-chart svg .hit { fill: transparent; }
.sk-flow-chart svg .col:hover .seg, .sk-flow-chart svg .col:focus .seg { filter: brightness(1.12); }
.sk-flow-chart svg .col:focus { outline: none; }
.sk-flow-chart svg .col:focus .hit { stroke: var(--focus); stroke-width: 2; }
.sk-flow-chart svg .exo-band { fill: var(--surface-sunken); }
.sk-flow-chart svg .exo-label { fill: var(--ink); font-size: 11px; font-weight: 600; }
/* series: one colour per role, the same on every chart of the page */
[data-s="stayed"] { --k: var(--viz-rest); fill: var(--viz-rest); }
[data-s="moved"], [data-s="movedin"] { --k: var(--viz-1); fill: var(--viz-1); }
[data-s="left"] { --k: var(--viz-2); fill: var(--viz-2); }
[data-s="new"] { --k: var(--viz-3); fill: var(--viz-3); }
[data-s="returned"] { --k: var(--viz-4); fill: var(--viz-4); }
[data-s="weaker"] { --k: var(--viz-ord-1); }
[data-s="equal"] { --k: var(--viz-ord-2); }
[data-s="stronger"] { --k: var(--viz-ord-3); }
.sk-flow-key[data-s="movedin"]::before { box-shadow: inset 0 0 0 2px var(--surface-raised); outline: 2px solid var(--viz-1); outline-offset: -2px; }
.sk-flow-table { min-width: 0; max-width: 100%; }   /* v2.10.2: an open table scrolls inside its .sk-table-wrap and never widens the .sk-block grid (360px phones) */
.sk-flow-table > .sk-table-wrap { max-width: 100%; }
.sk-flow-table summary { cursor: pointer; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--primary-text); width: max-content; }
.sk-flow-table[open] summary { margin-bottom: var(--space-2); }
.sk-flow-tbl { font-size: 14px; }
.sk-flow-tbl th[scope="row"] { color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.sk-flow-tbl .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-flow-fact { margin: 0 0 var(--space-4); font-size: 16px; line-height: 24px; color: var(--ink); }
.sk-flow-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.sk-flow-two .sk-flow-chart + .sk-flow-chart { margin: 0; padding: 0; border: 0; }
/* letters: rate bar + 100% split per row (HTML, not SVG) */
.sk-flow-letters { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sk-flow-lrow, .sk-flow-lhead { display: grid; grid-template-columns: 6.5rem minmax(90px, 1fr) minmax(0, 2fr);  /* v2.1.3: first column fits the head "Klassement" */ gap: var(--space-3); align-items: center; }
.sk-flow-lhead { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.sk-flow-lrow .sk-rank { justify-self: start; height: 22px; min-width: 36px; font-size: 13px; }
.sk-flow-rate { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: var(--space-2); align-items: center; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; }
.sk-flow-rate > i, .sk-flow-lostbar > i, .sk-flow-tbbar > i { display: block; height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.sk-flow-rate > i > b, .sk-flow-lostbar > i > b, .sk-flow-tbbar > i > b { display: block; height: 100%; width: var(--p); border-radius: 999px; background: var(--viz-1); }
.sk-flow-split { display: flex; height: 22px; gap: 2px; }
.sk-flow-part { flex: 0 0 calc(var(--p) - 2px); min-width: 2px; border-radius: 4px; background: var(--k); display: flex; align-items: center; padding-left: 6px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: #0b0b0b; overflow: hidden; white-space: nowrap; }
.sk-flow-part[data-s="stronger"] { color: #ffffff; }
/* exodus tables */
.sk-flow-xtable td { vertical-align: middle; font-size: 15px; }
.sk-flow-xtable .is-num, .sk-flow-xtable th.is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-flow-club .sk-plink { display: block; }
.sk-flow-code { display: block; font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.sk-flow-lostbar { display: grid; grid-template-columns: 64px auto; gap: var(--space-2); align-items: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sk-flow-lostbar > i > b { background: var(--viz-2); }
.sk-flow-lostsub { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sk-flow-n { font-variant-numeric: tabular-nums; font-weight: 700; }
.sk-flow-xtable .sk-cell-muted { color: var(--ink-muted); }
/* club page: top clubs both ways */
.sk-flow-tbcol h3 { margin: 0 0 var(--space-3); font-size: 16px; line-height: 22px; font-weight: 700; }
.sk-flow-tblist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.sk-flow-tb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 1fr); gap: var(--space-3); align-items: center; font-size: 15px; }
.sk-flow-tb .sk-plink { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-flow-tbbar { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: var(--space-2); align-items: center; font-variant-numeric: tabular-nums; text-align: right; }
.sk-flow-tbmore { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sk-seg + .sk-flow-two { margin-top: var(--space-4); }
@media (max-width: 679px) {
  .sk-flow-two { grid-template-columns: minmax(0, 1fr); }
  .sk-flow-lrow, .sk-flow-lhead { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .sk-flow-lhead span:last-child { display: none; }
  .sk-flow-split { grid-column: 1 / -1; }
  .sk-flow-xtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sk-flow-xtable tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); padding: var(--space-4); border-bottom: 1px solid var(--line); }
  .sk-flow-xtable td { display: block; padding: 0; border: 0; text-align: left !important; }
  .sk-flow-xtable td.sk-flow-club, .sk-flow-xtable td.sk-flow-lost { grid-column: 1 / -1; }
  .sk-flow-xtable td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
}
/* exodus risk: neutral band meter, never an alarm colour */
.sk-flow-note { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface-sunken); border-radius: var(--radius-sm); font-size: 15px; line-height: 22px; color: var(--ink); max-width: 80ch; }
.sk-flow-risk { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sk-flow-risk > b { min-width: 3ch; text-align: right; }
.sk-flow-band { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-ball); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink); }
.sk-flow-band i { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.sk-flow-band i b { display: block; width: 4px; border-radius: 1px; background: var(--line-strong); opacity: .35; }
.sk-flow-band i b:nth-child(1) { height: 5px; } .sk-flow-band i b:nth-child(2) { height: 8px; } .sk-flow-band i b:nth-child(3) { height: 11px; }
.sk-flow-band[data-level="1"] i b:nth-child(-n+1), .sk-flow-band[data-level="2"] i b:nth-child(-n+2), .sk-flow-band[data-level="3"] i b { background: var(--ink); opacity: 1; }
.sk-flow-drivers { display: flex; flex-wrap: wrap; gap: 4px; }
.sk-flow-driver { display: inline-block; padding: 1px var(--space-2); border-radius: var(--radius-ball); background: var(--surface-sunken); border: 1px solid var(--line); font-size: 12px; line-height: 18px; color: var(--ink); white-space: nowrap; }
/* v2.1.7: concrete reasons, longer chips: one per line, may wrap */
.sk-flow-rtable .sk-flow-drivers, .sk-flow-now .sk-flow-drivers { flex-direction: column; align-items: flex-start; }
.sk-flow-rtable .sk-flow-driver, .sk-flow-now .sk-flow-driver { white-space: normal; border-radius: var(--radius-sm); max-width: 46ch; }
.sk-flow-lead { max-width: 80ch; }
.sk-flow-lead p { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink); }
.sk-flow-lead p.sk-hint { margin-top: var(--space-1); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sk-flow-out { font-variant-numeric: tabular-nums; }
.sk-flow-rtable .sk-flow-why { min-width: 260px; }
/* club page: season table, players links */
.sk-flow-stable .sk-flow-club b { white-space: nowrap; }
.sk-flow-act { text-align: right; white-space: nowrap; }
.sk-flow-tb { grid-template-columns: minmax(0, 1fr) minmax(110px, 1fr) auto; }
.sk-flow-tbp { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--primary-text); }
/* detail page */
.sk-flow-season { display: flex; align-items: center; gap: var(--space-3); font-size: 16px; }
.sk-flow-season .is-disabled { opacity: .35; pointer-events: none; }
.sk-flow-filter { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--primary-soft); border-radius: var(--radius-sm); font-size: 15px; justify-self: start; min-width: 0; max-width: 100%; box-sizing: border-box; }  /* v2.1.3: no max-content (it widened main on 360px phones) */
.sk-flow-gnav .sk-chip { display: inline-flex; align-items: center; gap: 6px; }
.sk-flow-gnav .sk-flow-key::before, .sk-flow-group h2 .sk-flow-key::before { width: 10px; height: 10px; }
.sk-flow-gn { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sk-flow-lt { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-muted); }
.sk-flow-lt .sk-rank { height: 22px; min-width: 34px; font-size: 13px; }
.sk-flow-more summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--primary-text); width: max-content; }
.sk-flow-more[open] summary { margin-bottom: var(--space-3); }
@media (max-width: 679px) {
  .sk-flow-rtable td.sk-flow-why { grid-column: 1 / -1; min-width: 0; }
  .sk-flow-stable td.sk-flow-act { grid-column: 1 / -1; text-align: left; }
  .sk-flow-ptable tr { grid-template-columns: 1fr 1fr; }
  .sk-flow-ptable td:first-child { grid-column: 1 / -1; }
  .sk-flow-tb { grid-template-columns: minmax(0, 1fr) auto; }
  .sk-flow-tb .sk-flow-tbbar { grid-column: 1 / -1; grid-row: 2; }
}
.sk-flow-now { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-sunken); }
.sk-flow-now-h { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 600; }
.sk-flow-now-n { flex-basis: 100%; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sk-flow-scope { margin-bottom: var(--space-4); }   /* v2.1.3: period as link chips (nav.sk-scope), no radios */

/* v2.4 proposal: Spelersstromen as three sub-pages (link chips), lists open empty */
.sk-flow-views { margin: var(--space-3) 0 var(--space-2); }
.sk-chip[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.sk-flow-vlead { margin-top: 0; }
.sk-flow-find { display: grid; gap: var(--space-1); max-width: 30rem; margin: 0 0 var(--space-6); }
.sk-flow-find label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.sk-flow-find-row { display: flex; gap: var(--space-2); }
.sk-flow-find-row .sk-input { flex: 1; min-width: 0; }
.sk-flow-start { margin-top: var(--space-4); }
/* v2.5 club charts: net line on in/out (C), time flow A and D */
.sk-flow-net { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.sk-flow-netdot { fill: var(--surface-raised); stroke: var(--ink); stroke-width: 1.5; }
.sk-flow-key[data-s="net"]::before { background: none; border: 0; height: 2px; border-radius: 0; background-color: var(--ink); }
.sk-flow-tf { display: block; width: 100%; height: auto; font-family: var(--font-sans); }
.sk-flow-tf .rb { opacity: .55; }
.sk-flow-tf .rb:hover { opacity: .9; }
.sk-flow-tf .node-club { fill: var(--ink); }
.sk-flow-tf .lab { font-size: 14px; fill: var(--ink); }
.sk-flow-tf .num, .sk-flow-tf .num-s { fill: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sk-flow-tf .num-s { font-size: 12px; }
.sk-flow-tf .hd { font-size: 14px; font-weight: 600; fill: var(--ink); }
.sk-flow-tf .grp { font-size: 12px; font-weight: 600; fill: var(--ink-muted); }
.sk-flow-tf .rb-lab { font-size: 13px; fill: var(--ink-muted); }
.sk-flow-tfblock .sk-flow-season { margin-bottom: var(--space-3); }
.sk-flow-depth { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.sk-flow-depth-l { font-size: 14px; color: var(--ink-muted); }
.sk-flow-tf-phone { display: none; }
.sk-flow-tf .tf-zoom-hit { fill: transparent; }
.sk-flow-tf .tf-zoom:hover .tf-zoom-hit, .sk-flow-tf .tf-zoom:focus-visible .tf-zoom-hit { fill: var(--ink); fill-opacity: .06; }
.sk-flow-tf .tf-zoom:focus-visible { outline: none; }
.sk-flow-tf .tf-zoom:focus-visible .tf-zoom-hit { stroke: var(--focus); stroke-width: 2; }
.sk-flow-tf .tf-zoom-l { font-size: 13px; font-weight: 600; fill: var(--primary-text); }
.sk-flow-tf .tf-zoom:hover .tf-zoom-l { text-decoration: underline; }
.sk-flow-pl-top { margin: 0 0 var(--space-2); font-size: 13px; color: var(--ink-muted); }
.sk-flow-pl-h { margin: var(--space-2) 0 var(--space-1); font-weight: 600; font-size: 14px; }
.sk-flow-pl { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sk-flow-pl li { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) 2.2rem; gap: var(--space-2); align-items: center; font-size: 13px; line-height: 18px; }
.sk-flow-pl-lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-flow-pl-bar { height: 10px; background: var(--surface-sunken); border-radius: 3px; overflow: hidden; }
.sk-flow-pl-bar i { display: block; height: 100%; width: var(--p); background: var(--k); }
.sk-flow-pl-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
@media (max-width: 679px) {
  .sk-flow-tf-wide, .sk-flow-tf-wideonly { display: none; }
  .sk-flow-tf-phone { display: block; }
  .sk-flow-tf .num-s { font-size: 11px; }
}
/* v2.6 flows per size class: compact table in A's block, same season */
.sk-flow-cmp { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); max-width: 46rem; }
.sk-flow-cmp h3 { margin: 0 0 var(--space-1); font-size: 15px; line-height: 21px; font-weight: 600; }
.sk-flow-cmp-sub { margin: 0 0 var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.sk-flow-cmptable th[scope="row"] { font-weight: 400; }
.sk-flow-cmptable td.is-num { width: 7rem; font-variant-numeric: tabular-nums; }
.sk-flow-cmp-sep th { padding-top: var(--space-3); font-size: 13px; font-weight: 600; color: var(--ink-muted); background: transparent; }
.sk-flow-cmp-bar { width: 38%; }
.sk-flow-cmp-bar span { position: relative; display: block; height: 10px; background: var(--surface-sunken); border-radius: 3px; }
.sk-flow-cmp-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 3px; background: var(--k); }
.sk-flow-cmp-bar b { position: absolute; top: -3px; bottom: -3px; left: var(--p); width: 2px; margin-left: -1px; background: var(--ink); }
.sk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 679px) {
  .sk-flow-cmp-bar, .sk-flow-cmptable thead th:last-child { display: none; }
  .sk-flow-cmptable td.is-num { width: auto; }
}

/* ===== v2.8 Provinces (Provincies): how strong a ranking from each province is on the Belgian scale (contract Addendum 28). Server-rendered, no script; choices are links (?letter=, ?provincie=) ===== */
.sk-prov-explain { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink); max-width: 75ch; }
.sk-prov-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.sk-prov-card { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); min-width: 0; }
.sk-prov-name { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.sk-prov-line { margin: 2px 0 0; font-size: 16px; line-height: 22px; color: var(--ink); }
.sk-prov-line b { font-weight: 600; }
.sk-prov-trend svg { display: block; width: 100%; max-width: 150px; height: auto; }
.sk-prov-trend ul { list-style: none; margin: var(--space-1) 0 0; padding: 0; font-size: 12px; line-height: 16px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sk-prov-trend .covid, .sk-prov-chart svg .covid { fill: var(--ink); opacity: .05; }
.sk-prov-trend .base { stroke: var(--line-strong); stroke-width: 1; }
.sk-prov-trend .ln { fill: none; stroke: var(--viz-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sk-prov-trend .ln.is-cur, .sk-prov-chart svg .ln.is-cur { stroke-dasharray: 4 4; }
.sk-prov-trend .pt { fill: var(--viz-1); stroke: var(--surface); stroke-width: 1; }
.sk-prov-trend .pt.is-open, .sk-prov-chart svg .pt.is-open { fill: var(--surface); stroke: var(--pv-c, var(--viz-1)); stroke-width: 1.5; }
/* A: lines per province */
.sk-prov-pick { display: none; align-items: end; gap: var(--space-2); flex-wrap: wrap; }
.sk-prov-pick .sk-field { flex: 1 1 200px; min-width: 0; }
.sk-prov-nosel { margin: 0; }
.sk-prov-phone { display: none; }
.sk-prov-chart svg { display: block; width: 100%; height: auto; font-family: var(--font-sans); }
.sk-prov-chart svg .pv { --pv-c: var(--viz-rest); --pv-w: 1.5px; cursor: pointer; }
.sk-prov-chart svg .pv.is-sel { --pv-c: var(--viz-1); --pv-w: 3px; }
.sk-prov-chart svg .pv:hover:not(.is-sel), .sk-prov-chart svg .pv:focus-visible:not(.is-sel) { --pv-c: var(--ink-muted); --pv-w: 2.5px; }
.sk-prov-chart svg .pv:focus-visible { outline: none; }
.sk-prov-chart svg .pv .ln { fill: none; stroke: var(--pv-c); stroke-width: var(--pv-w); stroke-linejoin: round; stroke-linecap: round; }
.sk-prov-chart svg .pv .hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; }
.sk-prov-chart svg .pv .pt { fill: var(--pv-c); stroke: var(--surface); stroke-width: 1.5; }
.sk-prov-chart svg .band { fill: var(--viz-1); opacity: .16; pointer-events: none; }
.sk-prov-chart svg .dlabel.is-sel { fill: var(--ink); font-weight: 700; }
.sk-prov-chart svg .axis.is-cur { font-style: italic; }
.sk-prov-key::before { content: ""; display: inline-block; width: 16px; height: 0; margin-right: var(--space-2); vertical-align: middle; border-top: 3px solid var(--viz-1); }
.sk-prov-key.is-band::before { height: 10px; border: 0; border-radius: 2px; background: color-mix(in oklab, var(--viz-1) 16%, var(--surface)); }
.sk-prov-key.is-rest::before { border-top: 1.5px solid var(--viz-rest); }
.sk-prov-key.is-cur::before { border-top: 2px dashed var(--ink-muted); }
.sk-prov-tbl td .sk-cell-muted { font-size: 12px; }
.sk-prov-tbl th, .sk-prov-tbl td { white-space: nowrap; }   /* v2.10.2: scroll sideways inside the wrapper instead of squeezing the cells */
@media (max-width: 679px) {
  .sk-prov-cards { grid-template-columns: minmax(0, 1fr); }
  .sk-prov-card { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3); }
  .sk-prov-trend { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-3); align-items: center; }
  .sk-prov-trend ul { margin: 0; }
  .sk-prov-chips { display: none; }
  .sk-prov-pick { display: flex; }
  .sk-prov-wide { display: none; }
  .sk-prov-phone { display: block; }
}

/* ===== v2.10 Club catchment ("vijver"), youth potential, "Clubs en inwoners" (contract Addendum 26 phase 2). No maps; neutral wording, no alarm colours ===== */
.sk-pond-tiles { margin: 0; }
.sk-pond-line { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink); max-width: 70ch; }
.sk-pond-h3 { margin: 0 0 var(--space-2); font-size: 15px; line-height: 21px; font-weight: 600; }
.sk-pond-yscale { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); }
.sk-pond-track { position: relative; display: block; height: 12px; background: var(--surface-sunken); border-radius: 3px; margin: 6px 0; }
.sk-pond-track i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 3px; background: var(--viz-3); }
.sk-pond-track b { position: absolute; top: -5px; bottom: -5px; left: var(--p); width: 2px; margin-left: -1px; background: var(--ink); }
.sk-pond-track b.is-med { background: var(--ink-muted); }
.sk-pond-ylegend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: 13px; line-height: 18px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sk-pond-ylegend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border-radius: 2px; }
.sk-pond-ylegend .is-club::before { background: var(--viz-3); }
.sk-pond-ylegend .is-med::before { width: 2px; height: 12px; border-radius: 0; background: var(--ink-muted); }
.sk-pond-ylegend .is-tq::before { width: 2px; height: 12px; border-radius: 0; background: var(--ink); }
.sk-pond-muni { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.sk-pond-muni li { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) 4.5rem; gap: var(--space-3); align-items: center; font-size: 14px; line-height: 20px; }
.sk-pond-mname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-pond-mbar { position: relative; display: block; height: 10px; background: var(--surface-sunken); border-radius: 3px; }
.sk-pond-mbar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); border-radius: 3px; background: var(--viz-rest); }
.sk-pond-mval { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.sk-pond-mhint { margin: -4px 0 var(--space-2); }
.sk-pond .sk-flow-note { margin: 0; }
/* flows comparison: distance split under "Van andere clubs" and "Naar andere clubs" */
.sk-flow-cmp-sub-row th[scope="row"] { padding-left: var(--space-6); font-size: 13px; color: var(--ink-muted); }
.sk-flow-cmp-sub-row td { font-size: 13px; }
.sk-flow-cmp-sub-row th, .sk-flow-cmp-sub-row td { padding-top: 4px; padding-bottom: 4px; }
@media (max-width: 679px) {
  .sk-pond-muni li { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) 3.5rem; gap: var(--space-2); }
  .sk-pond-atable tr, .sk-pond-ctable tr { grid-template-columns: 1fr 1fr; }
  .sk-pond-atable th.sk-flow-club { grid-column: 1 / -1; display: block; padding: 0; border: 0; text-align: left; }
}
/* ===== Desktop apps: the Sukarti kit for JavaFX (TabtFX, Club desk, kiosks). HTML mirror of sukarti-fx.css.
   Root .sk-fx (add .fx-touch for touch density); every class inside starts with fx-. Only effects JavaFX CSS can do:
   no letter-spacing, no text-transform, no outline; rings are borders, the only shadow is on popups (-fx-effect). */
.sk-fx, .sk-fx * { box-sizing: border-box; }
.sk-fx { font-family: var(--font-sans); color: var(--ink); background: var(--surface); }
.sk-fx{--f:14px;--l:20px;--ctl:32px;--row:32px;--nav:36px;--pad:12px;--gap:8px;--h1:28px;--h1l:32px;--tag:20px;--sb:8px;--side:232px;font-size:var(--f);line-height:var(--l)}
.sk-fx.fx-touch{--f:16px;--l:24px;--ctl:44px;--row:48px;--nav:48px;--pad:16px;--gap:12px;--h1:32px;--h1l:36px;--tag:24px;--sb:12px;--side:264px}
.fx-sheet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:24px;max-width:1360px}
.fx-card{background:var(--surface-raised);border:1px solid var(--line);border-radius:8px;padding:16px;display:grid;gap:12px;align-content:start;min-width:0}
.fx-card.fx-span2{grid-column:span 2}.fx-card.fx-span3{grid-column:span 3}
.fx-cap{font:600 13px/16px var(--font-sans);color:var(--ink-muted);margin:0}
.fx-row{display:flex;flex-wrap:wrap;gap:var(--gap);align-items:center}
h1.fx-h1{font:700 var(--h1)/var(--h1l) var(--font-sans);margin:0}
.fx-h2{font:800 17px/21px var(--font-sans);margin:0}
.fx-label{font:600 13px/16px var(--font-sans);color:var(--ink-muted)}
.fx-small{font-size:12px;line-height:16px;color:var(--ink-muted)}
/* buttons */
.fx-b{height:var(--ctl);min-width:var(--ctl);padding:0 calc(var(--pad) + 2px);border-radius:4px;font:600 var(--f)/1 var(--font-sans);border:1px solid var(--line-strong);background:var(--surface-raised);color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.fx-b.fx-hover{background:var(--surface-sunken)}
.fx-b.fx-p{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}.fx-b.fx-p.fx-hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.fx-b.fx-q{border-color:transparent;background:transparent;color:var(--primary-text)}.fx-b.fx-q.fx-hover{background:var(--primary-soft)}
.fx-b.fx-d{background:var(--danger);border-color:var(--danger);color:var(--surface-raised)}
.fx-b:disabled{background:var(--fill-disabled);border-color:var(--fill-disabled);color:var(--ink-disabled)}
.fx-b.fx-q:disabled{background:transparent;border-color:transparent}
.fx-focus{border-color:var(--focus)!important;background-image:none;position:relative}
.fx-focus::after{content:"";position:absolute;inset:-4px;border:2px solid var(--focus);border-radius:7px;pointer-events:none}
/* inputs */
.fx-in{height:var(--ctl);padding:0 10px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface-raised);color:var(--ink);font:400 var(--f)/var(--l) var(--font-sans);display:inline-flex;align-items:center;min-width:0}
.fx-in.fx-ph{color:var(--ink-muted)}.fx-in.fx-err{border-color:var(--danger)}.fx-in.fx-dis{background:var(--fill-disabled);border-color:var(--fill-disabled);color:var(--ink-disabled)}
.fx-dd::after{content:"⌄";margin-left:auto;padding-left:12px;color:var(--ink-muted);font-size:16px;line-height:0;transform:translateY(-3px)}
.fx-field{display:grid;gap:4px;min-width:0}
.fx-field .fx-msg{font-size:12px;line-height:16px;color:var(--ink-muted)}.fx-field .fx-msg.fx-err{color:var(--danger)}
.fx-chk{display:inline-flex;align-items:center;gap:8px;min-height:var(--ctl)}
.fx-box{width:calc(var(--ctl)/2 + 2px);height:calc(var(--ctl)/2 + 2px);border:1.5px solid var(--line-strong);border-radius:3px;background:var(--surface-raised);display:grid;place-items:center;color:var(--on-primary);font-size:12px;font-weight:700}
.fx-box.fx-on{background:var(--primary);border-color:var(--primary)}.fx-box.fx-r{border-radius:50%}.fx-box.fx-r.fx-on{background:var(--surface-raised);border:5px solid var(--primary)}
.fx-sw{width:calc(var(--ctl) + 8px);height:calc(var(--ctl)*.6);border-radius:999px;background:var(--line-strong);position:relative}
.fx-sw::after{content:"";position:absolute;top:2px;left:2px;width:calc(var(--ctl)*.6 - 4px);height:calc(var(--ctl)*.6 - 4px);border-radius:50%;background:var(--surface-raised)}
.fx-sw.fx-on{background:var(--primary)}.fx-sw.fx-on::after{left:auto;right:2px}
.fx-seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:4px;overflow:hidden}
.fx-seg span{height:calc(var(--ctl) - 2px);padding:0 var(--pad);display:inline-flex;align-items:center;font-weight:600;border-left:1px solid var(--line-strong)}.fx-seg span:first-child{border-left:0}
.fx-seg span.fx-on{background:var(--primary-soft);color:var(--ink);border-bottom:3px solid var(--primary)}
/* nav + history */
.fx-side{width:var(--side);background:var(--surface-sunken);border:1px solid var(--line);border-radius:6px;padding:8px;display:grid;gap:2px}
.fx-side .fx-grp{padding:8px 12px 4px}
.fx-ni{height:var(--nav);display:flex;align-items:center;padding:0 12px;border-radius:4px;color:var(--ink);gap:8px}
.fx-ni.fx-hover{background:var(--surface-raised)}
.fx-ni.fx-cur{background:var(--primary-soft);border-left:3px solid var(--primary);padding-left:9px;font-weight:600;border-radius:0 4px 4px 0}
.fx-ni .fx-n{margin-left:auto;font-size:12px;color:var(--ink-muted)}
.fx-hist{display:inline-flex;gap:2px}
.fx-crumbs{display:flex;gap:6px;align-items:center;color:var(--ink-muted)}.fx-crumbs a{color:var(--primary-text);text-decoration:none}.fx-crumbs b{color:var(--ink);font-weight:600}
/* tags */
.fx-tag{display:inline-flex;align-items:center;height:var(--tag);padding:0 6px;border-radius:4px;font:600 12px/1 var(--font-sans);background:var(--primary-soft);color:var(--ink);white-space:nowrap}
.fx-tag.fx-ok{background:var(--success-soft);color:var(--success)}.fx-tag.fx-warn{background:var(--warning-soft);color:var(--warning)}.fx-tag.fx-bad{background:var(--danger-soft);color:var(--danger)}
.fx-tag.fx-line{background:var(--surface-raised);border:1px solid var(--primary)}
.fx-tag.fx-ball{background:var(--ball);color:var(--on-ball)}
/* table */
.fx-tw{border:1px solid var(--line);border-radius:6px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) var(--sb);background:var(--surface-raised)}
table.fx-t{border-collapse:collapse;width:100%}
.fx-t th{height:var(--row);text-align:left;font:600 13px/16px var(--font-sans);color:var(--ink-muted);padding:0 12px;border-bottom:1px solid var(--line-strong);background:var(--surface-raised);white-space:nowrap}
.fx-t th.fx-sort::after{content:" ▾";color:var(--primary-text)}
.fx-t td{height:var(--row);padding:0 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.fx-t .fx-num{text-align:right;font-variant-numeric:tabular-nums}
.fx-t tr.fx-hover td{background:var(--surface-sunken)}
.fx-t tr.fx-sel td{background:var(--primary-soft)}.fx-t tr.fx-sel td:first-child{border-left:3px solid var(--primary);padding-left:9px}
.fx-t tr.fx-selfocus td{border-top:2px solid var(--focus);border-bottom:2px solid var(--focus)}.fx-t tr.fx-selfocus td:last-child{border-right:2px solid var(--focus)}
.fx-t .fx-us{font-weight:600}.fx-w{color:var(--win);font-weight:600}.fx-lo{color:var(--loss);font-weight:600}.fx-mu{color:var(--ink-muted)}
.fx-sbar{border-left:1px solid var(--line);position:relative;background:var(--surface-raised)}
.fx-sbar::after{content:"";position:absolute;left:2px;right:2px;top:var(--row);height:45%;border-radius:999px;background:var(--scroll-thumb)}
/* messages */
.fx-banner{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:2px 6px 6px 2px;border-left:4px solid var(--primary);background:var(--primary-soft)}
.fx-banner.fx-ok{border-color:var(--success);background:var(--success-soft)}.fx-banner.fx-warn{border-color:var(--warning);background:var(--warning-soft)}.fx-banner.fx-bad{border-color:var(--danger);background:var(--danger-soft)}
.fx-banner b{font-weight:600}.fx-banner .fx-b{margin-left:auto}
.fx-toast{display:flex;gap:12px;align-items:center;padding:10px 14px;border-radius:6px;background:var(--deep);color:var(--on-deep);box-shadow:var(--shadow-popup)}
.fx-toast .fx-b.fx-q{color:var(--on-deep-muted)}
.fx-dlg{border:1px solid var(--line);border-radius:8px;background:var(--surface-raised);box-shadow:var(--shadow-popup);display:grid}
.fx-dlg-h{padding:16px 20px 4px}.fx-dlg-b{padding:4px 20px 16px;color:var(--ink-muted)}.fx-dlg-f{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--line);background:var(--surface-sunken);border-radius:0 0 8px 8px}
.fx-prog{height:4px;border-radius:999px;background:var(--line);overflow:hidden}.fx-prog i{display:block;height:100%;width:62%;background:var(--primary)}
.fx-spin{width:20px;height:20px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--primary)}
.fx-skel{height:12px;border-radius:4px;background:var(--surface-sunken)}
.fx-state{display:grid;justify-items:center;gap:8px;text-align:center;padding:16px;border:1px dashed var(--line-strong);border-radius:6px}
.fx-state .fx-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--primary-soft);color:var(--primary-text)}
.fx-state.fx-bad .fx-ic{background:var(--danger-soft);color:var(--danger)}
.sk-fx details.fx-details{justify-self:stretch;text-align:left;font-size:13px;color:var(--ink-muted)}
.sk-fx details.fx-details>summary{display:inline-flex;align-items:center;gap:6px;padding:4px 0;cursor:pointer;list-style:none}
.sk-fx details.fx-details>summary::-webkit-details-marker{display:none}
.sk-fx details.fx-details>summary::before{content:"";border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent}
.sk-fx details.fx-details[open]>summary::before{transform:rotate(90deg)}
.sk-fx details.fx-details>summary:hover{color:var(--ink)}
.sk-fx .fx-details-box{margin:4px 0 0;padding:8px 12px;max-height:160px;overflow:auto;border:1px solid var(--line);border-radius:6px;background:var(--surface-sunken);font:12px/18px "DejaVu Sans Mono",ui-monospace,monospace;color:var(--ink-muted);white-space:pre-wrap;overflow-wrap:anywhere;user-select:text}
.sk-fx.fx-touch details.fx-details{font-size:15px}.sk-fx.fx-touch details.fx-details>summary{padding:10px 0}.sk-fx.fx-touch .fx-details-box{font-size:13px}
.fx-mono{font-family:"JetBrains Mono","DejaVu Sans Mono",monospace;font-size:12px}
.fx-status{display:flex;gap:16px;align-items:center;height:28px;padding:0 12px;background:var(--surface-sunken);border:1px solid var(--line);border-radius:6px;font-size:12px;color:var(--ink-muted)}
.fx-touch .fx-status{height:36px;font-size:14px}
.fx-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--success)}.fx-dot.fx-busy{background:var(--primary)}.fx-dot.fx-bad{background:var(--danger)}
.fx-status .fx-end{margin-left:auto}
/* splash */
.fx-splash{background:var(--band);color:var(--on-band);border-radius:8px;height:260px;position:relative;overflow:hidden;display:grid;place-items:center}
.fx-splash .fx-court{position:absolute;inset:20px 24px;border:2px solid var(--band-line-faint)}.fx-splash .fx-court::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:2px solid var(--band-line-faint)}.fx-splash .fx-court::after{content:"";position:absolute;top:50%;left:0;right:0;border-top:1px solid var(--band-line-faint)}
.fx-splash .fx-in2{position:relative;display:grid;justify-items:center;gap:10px}
.fx-plate{width:84px;height:84px;border-radius:20px;background:var(--primary);display:grid;place-items:center}.fx-plate img{width:64px}
.fx-splash .fx-nm{font:800 26px/28px var(--font-sans)}.fx-splash .fx-sub{color:var(--on-band-muted);font-size:14px}
.fx-splash .fx-prog{width:180px;background:var(--band-line-faint)}.fx-splash .fx-prog i{background:var(--on-band)}
.fx-splash .fx-court::before,.fx-splash .fx-court::after{opacity:.6}
.fx-splash .fx-in2{background:var(--band);padding:12px 32px;border-radius:8px}
/* shells */
.fx-win{width:100vw;height:100vh;display:grid;grid-template-rows:minmax(0,1fr) auto;background:var(--surface);overflow:hidden}
.fx-shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr) 300px;min-height:0}
.fx-shell .fx-side{border-radius:0;border-width:0 1px 0 0;align-content:start;padding:12px 8px}
.fx-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 12px}.fx-brand .fx-plate{width:40px;height:40px}.fx-brand .fx-plate img{width:30px}
.fx-brand b{font:800 17px/19px var(--font-sans);display:block}.fx-brand small{font-size:12px;line-height:16px;color:var(--ink-muted)}
.fx-side .fx-end{margin-top:auto}
.fx-mainc{display:grid;grid-template-rows:auto auto minmax(0,1fr);min-width:0;min-height:0;padding:16px 20px 0;gap:12px}
.fx-pagehead{display:flex;align-items:end;gap:12px}.fx-pagehead .fx-sub{color:var(--ink-muted);margin-left:2px}
.fx-pagehead .fx-row{margin-left:auto}
.fx-toolbar{display:flex;gap:var(--gap);align-items:center}
.fx-scrollbox{overflow:hidden;min-height:0}
.fx-detail{border-left:1px solid var(--line);background:var(--surface-raised);padding:16px 20px;display:grid;gap:14px;align-content:start}
.fx-kv{display:grid;grid-template-columns:120px 1fr;gap:6px 12px;margin:0}.fx-kv dt{color:var(--ink-muted)}.fx-kv dd{margin:0}
.fx-win>.fx-status{border-radius:0;border-width:1px 0 0}
/* kiosk */
.fx-kbar{display:flex;align-items:center;gap:16px;padding:12px 24px;background:var(--band);color:var(--on-band)}
.fx-kbar .fx-plate{width:56px;height:56px}.fx-kbar .fx-plate img{width:42px}
.fx-kbar h1{font:800 28px/31px var(--font-sans);margin:0}.fx-kbar .fx-sub{color:var(--on-band-muted)}
.fx-kbar .fx-clock{margin-left:auto;font:800 34px/34px var(--font-sans);font-variant-numeric:tabular-nums}
.fx-kbody{padding:24px;display:grid;gap:20px;min-height:0;align-content:start}
.fx-kgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fx-ktile{background:var(--surface-raised);border:1px solid var(--line);border-radius:10px;padding:16px;display:grid;gap:10px;align-content:start}
.fx-ktile.fx-live{border:2px solid var(--primary);padding:15px}
.fx-ktile .fx-tn{display:flex;align-items:center;justify-content:space-between}
.fx-ktile .fx-tn b{font:800 19px/21px var(--font-sans)}
.fx-ktile .fx-vs{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:18px;line-height:24px}
.fx-ktile .fx-sc{font:800 24px/24px var(--font-sans);text-align:right;font-variant-numeric:tabular-nums}
.fx-ktile .fx-b{height:56px;font-size:18px;justify-content:center}
.fx-ktabs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);background:var(--surface-sunken)}
.fx-ktabs span{height:72px;display:grid;place-items:center;font:600 18px/1 var(--font-sans);color:var(--ink-muted);border-top:4px solid transparent}
.fx-ktabs span.fx-on{color:var(--ink);background:var(--primary-soft);border-top-color:var(--primary)}
.fx-score{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center}
.fx-pl{background:var(--surface-raised);border:1px solid var(--line);border-radius:12px;padding:20px;display:grid;gap:16px;justify-items:center}
.fx-pl .fx-nm{font:800 26px/28px var(--font-sans)}.fx-pl .fx-cl{color:var(--ink-muted);font-size:18px}
.fx-big{font:800 103px/95px var(--font-sans);font-variant-numeric:tabular-nums}
.fx-pm{display:flex;gap:16px}.fx-pm .fx-b{width:96px;height:72px;font-size:36px;justify-content:center;border-radius:10px}
.fx-sets{display:flex;gap:10px;justify-content:center}.fx-sets span{min-width:72px;height:48px;border-radius:8px;display:grid;place-items:center;border:1px solid var(--line-strong);font:800 19px/1 var(--font-sans)}
.fx-sets span.fx-w{background:var(--primary-soft);border-color:var(--primary);color:var(--ink)}
.fx-sets span.fx-cur{border:2px dashed var(--primary)}
.fx-mid{display:grid;gap:8px;justify-items:center;color:var(--ink-muted)}
.fx-mid .fx-gm{font:800 38px/38px var(--font-sans);color:var(--ink)}
.fx-detail{min-width:0;overflow:hidden}.fx-detail .fx-row .fx-b:not(.fx-q){flex:1 1 auto;justify-content:center}
.fx-in{white-space:nowrap;overflow:hidden}
.fx-kv dd{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fx-touch .fx-kv{grid-template-columns:136px minmax(0,1fr);row-gap:10px}
/* workspace shell (B) */
.fx-wshell{display:grid;grid-template-columns:var(--side) minmax(0,1fr) 360px;min-height:0}
.fx-wshell .fx-side{border-radius:0;border-width:0 1px 0 0;align-content:start;padding:12px 8px;display:flex;flex-direction:column;gap:2px}
.fx-wmain{display:grid;grid-template-rows:auto auto minmax(0,1fr);min-width:0;min-height:0}
.fx-crumbbar{display:flex;align-items:center;gap:var(--gap);min-height:calc(var(--ctl) + 20px);padding:0 12px;border-bottom:1px solid var(--line);background:var(--surface-raised)}
.fx-crumbbar .fx-crumbs{margin-right:auto;min-width:0;white-space:nowrap}.fx-crumbs a{font-weight:600}
.fx-ent{display:grid;gap:8px;padding:12px 20px 0;border-bottom:1px solid var(--line);background:var(--surface-raised)}
.fx-ent .fx-pagehead .fx-sub{font-size:var(--f)}
.fx-tabs{display:flex;gap:4px}
.fx-tabs span{height:var(--ctl);display:inline-flex;align-items:center;padding:0 12px;font-weight:600;color:var(--ink-muted);border-bottom:3px solid transparent}
.fx-tabs span.fx-on{color:var(--ink);border-bottom-color:var(--primary)}
.fx-wbody{padding:16px 20px;min-height:0;overflow:hidden}
.fx-dock{display:grid;grid-template-rows:auto auto minmax(0,1fr);border-left:1px solid var(--line);background:var(--surface-raised);min-width:0;min-height:0}
.fx-dock-head{display:flex;align-items:center;gap:8px;min-height:calc(var(--ctl) + 20px);padding:0 12px 0 16px;border-bottom:1px solid var(--line)}
.fx-dock-head h2{margin:0 auto 0 0;font:600 16px/20px var(--font-sans)}
.fx-dock .fx-tabs{padding:0 8px;border-bottom:1px solid var(--line)}
.fx-dock-body{padding:16px;display:grid;gap:16px;align-content:start;min-width:0;overflow:hidden}
.fx-call{display:grid;gap:4px;padding:8px 12px;border:1px solid var(--line);border-radius:4px;min-width:0}
.fx-call.fx-on{border-color:var(--primary);border-left-width:3px;padding-left:10px;background:var(--primary-soft)}
.fx-call-top{display:flex;gap:8px;align-items:baseline;min-width:0}
.fx-call-top code{font-family:"JetBrains Mono","DejaVu Sans Mono",monospace;font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-call .fx-ms{margin-left:auto;color:var(--ink-muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.fx-okt{color:var(--success);font-weight:600}.fx-badt{color:var(--danger);font-weight:600}
/* home shell (D) */
.fx-hshell{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0}
.fx-topbar{display:flex;align-items:center;gap:16px;min-height:calc(var(--ctl) + 24px);padding:0 16px;border-bottom:1px solid var(--line);background:var(--surface-raised)}
.fx-topbar .fx-brand{padding:0}
.fx-topnav{display:flex;gap:4px}
.fx-topnav span{height:var(--ctl);display:inline-flex;align-items:center;padding:0 12px;border-radius:4px;font-weight:600;color:var(--ink)}
.fx-topnav span.fx-on{background:var(--primary-soft);border-bottom:3px solid var(--primary);border-radius:4px 4px 0 0}
.fx-cmdk{margin-left:auto;width:300px;justify-content:space-between}
.fx-cmdk kbd{font:400 12px/16px var(--font-sans);color:var(--ink-muted);border:1px solid var(--line-strong);border-radius:4px;padding:0 4px}
.fx-home{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;padding:20px 24px;align-content:start;min-height:0;overflow:hidden}
.fx-home .fx-h2{margin-bottom:12px}
.fx-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.fx-tcard{display:grid;gap:8px;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--surface-raised)}
.fx-tcard h3{margin:0;font:600 18px/24px var(--font-sans);color:var(--primary-text);display:flex;align-items:center;gap:8px}
.fx-tcard .fx-pos{margin-left:auto;font:800 24px/24px var(--font-sans);color:var(--ink);font-variant-numeric:tabular-nums}
.fx-tcard .fx-pos small{font-size:14px;color:var(--ink-muted)}
.fx-tcard p{margin:0;color:var(--ink-muted);font-size:13px;line-height:18px}
.fx-tcard .fx-next{display:flex;justify-content:space-between;gap:8px;padding-top:8px;border-top:1px solid var(--line)}
.fx-slist{display:grid;gap:8px;align-content:start;min-width:0}
/* Desktop kit v128: tabt-cache-fx dashboard mock-up helpers (HTML mirror; JavaFX hooks in DesktopCacheFx/README.md) */
.fx-cf .fx-cf-shell{grid-template-columns:var(--side) minmax(0,1fr)}
.fx-cf .fx-side{display:flex;flex-direction:column;gap:2px}
.fx-cf .fx-ni .fx-tag{margin-left:auto}
.fx-cf-run{background:var(--primary-soft);color:var(--primary-text)}
.fx-cf-user{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 10px;padding:12px 8px 4px;border-top:1px solid var(--line)}
.fx-cf-user b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis}.fx-cf-user small{font-size:12px;color:var(--ink-muted)}
.fx-cf-user .fx-b{grid-column:1/-1;justify-self:start}
.fx-cf-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary-text);font:700 12px/1 var(--font-sans)}
.fx-cf-main{grid-template-rows:auto auto minmax(0,1fr);padding-bottom:16px}
.fx-cf-actions{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.fx-cf-dd{min-width:150px}
.fx-cf-scroll{min-height:0;overflow:auto;display:grid;gap:16px;align-content:start}
.fx-cf-cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.fx-cf-big{font:800 21px/24px var(--font-sans);font-variant-numeric:tabular-nums}.fx-cf-big small{font-size:16px;color:var(--ink-muted);font-weight:600}
.fx-cf-small{font-size:12px;line-height:16px}
.fx-cf-meter{height:8px;border-radius:999px;background:var(--line);overflow:hidden}.fx-cf-meter i{display:block;height:100%;width:var(--p,0%);background:var(--primary)}
.fx-cf-sec{display:grid;gap:8px}
.fx-cf-runtxt{color:var(--primary-text);font-weight:600}
.fx-cf-sheet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fx-cf-num{font:800 24px/28px var(--font-sans)}.fx-cf-bad{color:var(--danger)}
.fx-cf-cardbad{border-color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)}
.fx-cf-rgrid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,2fr);gap:16px;align-items:start}
.fx-cf-model{display:grid;grid-template-columns:180px minmax(0,1fr);gap:16px;min-height:0}
.fx-cf-model .fx-cf-scroll{grid-template-columns:minmax(0,1fr) minmax(220px,300px);align-items:start}
.fx-cf-state{max-width:520px;justify-self:center;margin-top:40px;padding:24px}
.fx-cf-spin{display:inline-block;width:14px;height:14px;border-width:2px;vertical-align:-2px;margin-right:4px}
.fx-cf-sk2{width:60%}
.fx-cf-scrim{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--deep) 45%,transparent)}
.fx-cf-dlg{width:440px}
.fx-win.fx-cf{position:relative}
.fx-cf-login{grid-template-rows:minmax(0,1fr) auto}
.fx-cf-signin{display:grid;justify-items:center;align-content:center;gap:20px;padding:24px}
.fx-cf-signin .fx-plate{width:72px;height:72px}.fx-cf-signin .fx-plate img{width:54px}
.fx-cf-signin-b{display:grid;justify-items:center;gap:12px;width:min(440px,100%);text-align:center}
.fx-cf-signin-b .fx-sub{margin:0;color:var(--ink-muted)}.fx-cf-signin-b .fx-banner{text-align:left;width:100%;box-sizing:border-box}
.fx-cf-signin-b details.fx-details{width:100%}
.fx-cf-wide{min-width:260px;justify-content:center}
.fx-cf-signin .fx-spin{width:28px;height:28px}
@media (max-width:1000px){.fx-cf-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}.fx-cf-sheet .fx-span3{grid-column:1/-1}.fx-cf-rgrid{grid-template-columns:minmax(0,1fr)}.fx-cf-model .fx-cf-scroll{grid-template-columns:minmax(0,1fr)}.fx-cf .fx-pagehead{flex-wrap:wrap}}
.fx-cf .fx-card .fx-kv{grid-template-columns:84px minmax(0,1fr)}.fx-cf .fx-card .fx-kv dd{white-space:normal;overflow-wrap:anywhere}

/* T3 brand tile in the desktop mirror: .fx-plate holds the family letters instead of the club logo */
.fx-plate .fx-brandmark{font:800 34px/1 var(--font-display);color:var(--on-primary)}
.fx-brand .fx-plate{border-radius:10px}.fx-brand .fx-plate .fx-brandmark{font-size:16px}

/* ===== 3.1.0 (2026-11-09): DataStatus, the "data is being updated" line (Addendum 30, T3 Stats) + "updated" time in AppFooter ===== */
/* Full-width band, direct child of body, right after the header. Quiet: sunken ground, ink text, one small orange spin icon. Not an alert, no dismiss. */
.sk-datastatus { --band-gutter: var(--space-6); display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding-top: var(--space-2); padding-bottom: var(--space-2); padding-left: max(var(--band-gutter), calc((100% - 1120px) / 2 + var(--band-gutter))); padding-right: max(var(--band-gutter), calc((100% - 1120px) / 2 + var(--band-gutter))); background: var(--surface-sunken); border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14px; line-height: 20px; }
.sk-datastatus-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--primary); animation: sk-datastatus-spin 2.4s linear infinite; }
.sk-datastatus-icon path, .sk-datastatus-icon polyline { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sk-datastatus-icon circle { fill: currentColor; }
.sk-datastatus-text { margin: 0; min-width: 0; }
.sk-datastatus-text time { font-variant-numeric: tabular-nums; }
.sk-datastatus-sub { color: var(--ink-muted); }
@keyframes sk-datastatus-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sk-datastatus-icon { animation: none; } }
@media (max-width: 679px) { .sk-datastatus { --band-gutter: var(--space-4); } }
.sk-appfooter time { font-variant-numeric: tabular-nums; }