/**
 * Sportradar blocks — front end (also loaded in the editor).
 *
 * Neutral defaults; themes adjust through the custom properties below or their own CSS.
 * Uses native nesting, container queries, :has() and logical properties
 * (all baseline in current Chrome, Edge, Firefox and Safari 16.5+/17.2+).
 */

.sr-block {
  --sr-border: color-mix(in srgb, currentcolor 14%, transparent);
  --sr-stripe: color-mix(in srgb, currentcolor 4%, transparent);
  --sr-highlight: color-mix(in srgb, var(--wp--preset--color--primary, #2271b1) 14%, transparent);
  --sr-accent: var(--wp--preset--color--primary, #2271b1);
  --sr-muted: color-mix(in srgb, currentcolor 60%, transparent);
  --sr-live: #d63638;
  --sr-up: #00a32a;
  --sr-down: #d63638;
  --sr-radius: 4px;
  --sr-cell-pad: 0.5em 0.6em;

  /* Rank column; the pinned name column starts right after it. */
  --sr-rank-width: 2.75rem; /* rem: the same in header and body cells, which have different font sizes. */
  margin-block: 1.5em;
  container-name: sr;

  container-type: inline-size;
  font-variant-numeric: tabular-nums;

  &.is-compact {
    --sr-cell-pad: 0.25em 0.4em;
    font-size: 0.9em;
  }

  /* A block with nothing to show yet, filled in by the script (theme classes on the wrapper,
	   e.g. the sidebars' tab-content, mustn't show it). */
  &[hidden] {
    display: none !important;
  }
}

/* Titles and collapsible sections (<details>) */

.sr-block .sr-title {
  display: flex;
  gap: 0.5em;
  align-items: center;
  margin: 0 0 0.5em;
  font-size: 1.15em;
  font-weight: 700;
}

.sr-block details > summary:is(.sr-title, .sr-subtitle) {
  cursor: pointer;
  list-style: none;

  &::-webkit-details-marker {
    display: none;
  }

  &::after {
    /* A flex item: without this a long, wrapping title squeezes the chevron to nothing. */
    flex-shrink: 0;
    inline-size: 0.5em;
    block-size: 0.5em;
    margin-inline-start: auto;
    content: "";
    border-block-end: 2px solid currentcolor;
    border-inline-end: 2px solid currentcolor;
    transform: rotate(45deg);
    transition: transform 0.2s;
  }
}

.sr-block details[open] > summary:is(.sr-title, .sr-subtitle)::after {
  transform: rotate(-135deg);
}

/*
 * Opening and closing slides (block, group, month, round). CSS only: ::details-content plus
 * interpolate-size, which lets the height animate to auto. Chromium 131+ animates; browsers
 * without interpolate-size (Safari, Firefox for now) open instantly, as before. Rounds shown by
 * "Show more" fade in. Off for people who prefer reduced motion.
 */
@media (prefers-reduced-motion: no-preference) {
  .sr-block details:has(> summary:is(.sr-title, .sr-subtitle)) {
    interpolate-size: allow-keywords;

    &::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete;
    }

    &[open]::details-content {
      block-size: auto;
    }
  }

  .sr-block .sr-round {
    transition: opacity 0.25s ease, translate 0.25s ease;

    @starting-style {
      opacity: 0;
      translate: 0 -0.5em;
    }
  }
}

/* Opacity on the label rather than a muted colour, so it works on themes' dark title bars too. */
.sr-block .sr-month.is-past > summary .sr-month__label {
  opacity: 0.7;
}

/* Group headings inside a block (groups, rounds, dates); each group collapses on its own. */
.sr-block .sr-subtitle {
  display: flex;
  gap: 0.5em;
  align-items: center;
  padding: var(--sr-subtitle-pad, 0.75em 0.6em);
  margin: 0;
  font-size: 1.05em;
  font-weight: 700;
  border-block-end: 1px solid var(--sr-border);
}

.sr-block .sr-group + .sr-group,
.sr-block .sr-table-wrap + .sr-group,
.sr-block .sr-group + .sr-table-wrap {
  margin-block-start: 0.5em;
}

.sr-block .sr-group:not([open]) > .sr-subtitle {
  color: var(--sr-muted);
}

/*
 * The plugin's lists (podium, goals, three stars, bracket) are part of the layout. Themes style
 * content lists (".post-content ol": margins, bullets, li indents) with selectors that beat
 * ".sr-block .sr-x", so margins and markers are reset here, a step stronger: the repeated
 * attribute only adds specificity. Rows that need their own inline padding use two classes.
 */
.sr-block :is(ol, ul)[class*="sr-"][class] {
  padding-inline-start: 0;
  margin: 0;
  list-style: none;

  & > li {
    margin: 0;
    list-style: none;
  }

  & > li::marker {
    content: none;
  }
}

/* Tables */

.sr-block .sr-table-wrap {
  margin: 0;
  overflow-x: auto;
}

/* Several tables in one block (all groups, schedule grouped by date/round, tennis rounds). */
.sr-block .sr-table-wrap + .sr-table-wrap {
  margin-block-start: 1em;
}

.sr-block .sr-table {
  inline-size: 100%;
  margin: 0;
  border-collapse: collapse;

  & th,
  & td {
    padding: var(--sr-cell-pad);
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
    border-block-end: 1px solid var(--sr-border);
  }

  & th {
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    overflow-wrap: normal;

    /* A multi-word heading ("Viim 10") wraps rather than running into the next one. */
    white-space: normal;
  }

  & tbody tr:nth-child(even) {
    background: var(--sr-stripe);
  }

  & .sr-col-name,
  & .sr-col-player,
  & .sr-col-team,
  & .sr-col-tournament,
  & .sr-col-match,
  & .sr-col-players,
  & .sr-col-race,
  & .sr-col-podium {
    text-align: start;
    white-space: normal;
  }

  & .sr-col-points {
    font-weight: 700;
  }

  & .is-primary {
    font-weight: 700;
  }

  & tr.is-highlighted {
    font-weight: 600;
    background: var(--sr-highlight);
  }

  /* Divider where the outcome (promotion, playoffs, relegation…) changes. */
  & tr.sr-outcome-change > td {
    border-block-start: 2px solid currentcolor;
  }

  & tr.is-live .sr-col-result,
  & tr.is-live .sr-col-sets {
    color: var(--sr-live);
  }
}

/*
 * When a table scrolls sideways (narrow screens), the rank and name columns stay put and the
 * stats scroll under them. Sticky cells need an opaque background: the row's stripe or highlight
 * is layered over the card colour (--sr-sticky-bg, Canvas by default).
 */
.sr-block .sr-table {
  & tbody tr:nth-child(even) {
    --sr-row-tint: var(--sr-stripe);
  }

  & tbody tr.is-highlighted {
    --sr-row-tint: var(--sr-highlight);
  }

  & :is(th, td).sr-col-rank:first-child,
  & :is(th, td).sr-col-rank:first-child + :is(.sr-col-name, .sr-col-player) {
    position: sticky;
    z-index: 1;
    background: linear-gradient(var(--sr-row-tint, transparent), var(--sr-row-tint, transparent)), var(--sr-sticky-bg, Canvas);
  }

  & :is(th, td).sr-col-rank:first-child {
    inset-inline-start: 0;
    box-sizing: border-box;
    inline-size: var(--sr-rank-width);
    min-inline-size: var(--sr-rank-width);
    max-inline-size: var(--sr-rank-width);
  }

  & :is(th, td).sr-col-rank:first-child + :is(.sr-col-name, .sr-col-player) {
    inset-inline-start: var(--sr-rank-width);

    /* One line: rows stay even; if that's too wide the table scrolls and this column stays put. */
    white-space: nowrap;
    box-shadow: inset -1px 0 0 var(--sr-border);
  }

  /* Sticky header cells take the header's colour (themes often give thead one). */
  & thead tr {
    background-color: inherit;
  }

  & thead th.sr-col-rank:first-child,
  & thead th.sr-col-rank:first-child + :is(.sr-col-name, .sr-col-player) {
    background: inherit;
  }
}

/* A header colour to inherit when the theme sets none (no specificity, so themes win). */
:where(.sr-block .sr-table thead) {
  background-color: var(--sr-sticky-bg, Canvas);
}

/* Mouse-draggable horizontal scrollers (tables, bracket) while they overflow; see dragScroll(). */
.sr-block .sr-draggable {
  cursor: grab;
}

.sr-block .is-dragging {
  cursor: grabbing;
  user-select: none;

  & img {
    pointer-events: none;
  }
}

/* Snap points would fight the drag (each step would jump a whole round); the strip settles
   on a round when the drag and its glide end. More specific than the bracket's own snap rule. */
.sr-block .sr-bracket__stages.is-dragging {
  scroll-snap-type: none;
}

/* Outcome zones (playoffs, promotion, relegation…): a coloured rank badge and a legend under the
   table. "up" tones for zones at the top, "down" tones for zones that start further down. */
.sr-block {
  --sr-tone-up-0: #1e8e3e;
  --sr-tone-up-1: #2271b1;
  --sr-tone-up-2: #00838f;
  --sr-tone-up-3: #7e57c2;
  --sr-tone-down-0: #d63638;
  --sr-tone-down-1: #e26f00;
}

.sr-block .sr-tone--up-0 { --sr-tone: var(--sr-tone-up-0); }
.sr-block .sr-tone--up-1 { --sr-tone: var(--sr-tone-up-1); }
.sr-block .sr-tone--up-2 { --sr-tone: var(--sr-tone-up-2); }
.sr-block .sr-tone--up-3 { --sr-tone: var(--sr-tone-up-3); }
.sr-block .sr-tone--down-0 { --sr-tone: var(--sr-tone-down-0); }
.sr-block .sr-tone--down-1 { --sr-tone: var(--sr-tone-down-1); }

.sr-block abbr.sr-tip.sr-rank {
  text-decoration: none;
  cursor: default;
}

.sr-block .sr-rank {
  display: inline-block;
  min-inline-size: 1.7em;
  padding: 0.15em 0;
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  background: var(--sr-tone);
  border-radius: 3px;
}

.sr-block .sr-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 1.25em;
  justify-content: center;
  padding: 0.6em var(--sr-cell-pad-inline, 0.6em);
  margin: 0;
  font-size: 0.85em;
  color: var(--sr-muted);
}

.sr-block .sr-legend__item {
  display: flex;
  gap: 0.4em;
  align-items: center;
}

.sr-block .sr-legend__swatch {
  inline-size: 0.8em;
  block-size: 0.8em;
  background: var(--sr-tone);
  border-radius: 2px;
}

/* Notes under a table (after the table, legend or pager): padded like the cells, so they line up
   with them and keep off the card's edges. */
.sr-block .sr-comments {
  padding: var(--sr-cell-pad);
  margin: 0;
  font-size: 0.85em;
  color: var(--sr-muted);
}

/* "Data updated" (i) (Registry::with_updated()): its own line at the bottom right, or at the end
   of the block's footer line (has-updated, moved there by the script). */
.sr-block .sr-updated {
  display: flex;
  justify-content: flex-end;
  padding: 0.25em var(--sr-cell-pad-inline, 0.6em) 0.5em;
  margin: 0;
  line-height: 1;
}

.sr-block .sr-updated__icon {
  display: inline-flex;
  color: var(--sr-muted);
  text-decoration: none;

  & svg {
    inline-size: 1.1em;
    block-size: 1.1em;
  }

  .has-updated > & {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: var(--sr-cell-pad-inline, 0.6em);
    translate: 0 -50%;
  }
}

.sr-block .has-updated {
  position: relative;
  padding-inline-end: 2.25em;

  /* The pager is centred: room on both sides keeps it so. */
  &.sr-pager {
    padding-inline-start: 2.25em;
  }
}

/*
 * Stats-table layout when there's room: fixed column widths for the name / date columns, and the
 * stat columns share the rest evenly instead of bunching up at the edge. Only up to 9 columns:
 * with more, even shares get narrower than the content (numbers run into each other), so wide
 * tables keep their natural widths. Narrow containers keep the automatic layout too (with
 * abbreviated names) and scroll only if the content really doesn't fit.
 */
@container sr (min-width: 520px) {
  /*
   * Sortable tables keep natural column widths (marked on the server, so nothing jumps when the
   * script adds the arrows): even shares can't widen for a heading and its arrow, which then
   * wrapped. Wider than the block, they scroll like any wide table.
   */
  .sr-block .sr-table-wrap[data-sr-table*='"sort":true'] > .sr-table {
    table-layout: auto;
  }

  .sr-block .sr-table:not(.sr-tennis, .sr-periods, .sr-team-stats, .sr-list, :has(thead tr > :nth-child(10))) {
    table-layout: fixed;

    /* No overflow clipping on th: it would cut off the heading tooltips. */

    & .sr-col-rank {
      inline-size: var(--sr-rank-width);
    }

    & .sr-col-name,
    & .sr-col-player {
      inline-size: 34%;
    }

    & .sr-col-team {
      inline-size: 24%;
    }

    & .sr-col-country {
      inline-size: 18%;
    }

    & .sr-col-date {
      inline-size: 7.5em;
    }

    & .sr-col-time {
      inline-size: 5em;
    }

    & .sr-col-result {
      inline-size: 7em;
    }

    & .sr-col-match,
    & .sr-col-race,
    & .sr-col-tournament,
    & .sr-col-podium {
      inline-size: auto;
    }

    /* Safety net: a one-line cell that still doesn't fit its share ends in "…" instead of
		   running into the next column (columns without a class of their own, long values). */
    & td {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    & .sr-col-number,
    & .sr-col-position,
    & .sr-col-nationality,
    & .sr-col-age {
      inline-size: 3.5em;
    }

    /* Records ("7-2-1") and streaks ("V3") are wider than single numbers. */
    & :is(.sr-col-last_10, .sr-col-home_record, .sr-col-road_record) {
      inline-size: 4.5em;
    }

    & .sr-col-streak {
      inline-size: 3.5em;
    }

    & .sr-col-form {
      inline-size: 8.5em;
    }

    /*
		 * Rank, name and one or two stats (winter standings, short custom tables): even shares
		 * would give a lone points column half the table. The stats get a set width instead and
		 * the name takes the rest.
		 */
    &:has(thead .sr-col-rank):has(thead :is(.sr-col-name, .sr-col-player)):not(:has(thead tr > :nth-child(5))) {
      & thead th:not(.sr-col-rank, .sr-col-name, .sr-col-player, .sr-col-team) {
        inline-size: 7em;
      }

      & :is(.sr-col-name, .sr-col-player, .sr-col-team) {
        inline-size: auto;
      }
    }

    /* Long names truncate rather than wrap, keeping rows even. */
    & :is(td.sr-col-name, td.sr-col-player, td.sr-col-team) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      /*
			 * The name sits in an inline-flex team/person box, which an ellipsis can't cut into:
			 * the box fills the cell instead, and the name (or its link) beside the flag truncates.
			 */
      & :is(.sr-team, .sr-person) {
        display: flex;
        min-inline-size: 0;
      }

      /* Only the name (or its link): a jersey number or ranking movement beside it keeps its size. */
      & :is(.sr-team, .sr-person) > :is(.sr-name, a) {
        min-inline-size: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

/* Teams, people, flags */

.sr-block .sr-team,
.sr-block .sr-person {
  display: inline-flex;
  gap: 0.4em;
  align-items: center;
  font-size: 0.9em;
  vertical-align: middle;

  &.is-winner {
    font-weight: 700;
  }
}

.sr-block .is-winner .sr-team {
  font-weight: 700;
}

.sr-block .sr-flag {
  /* Themes often make every img a block; a flag in a line of text has to stay in the line. */
  display: inline-block;
  flex: none;
  inline-size: 1.25em;
  block-size: auto;
  aspect-ratio: 4 / 3;
  box-shadow: 0 0 0 1px var(--sr-border);

  /* Standing in for a country code in text ("only [flag] athletes"): sits on the line like a letter. */
  &.sr-flag--text {
    vertical-align: -0.15em;
  }
}

.sr-block .sr-name--short {
  display: none;
}

/* Narrow containers (sidebars, mobile): abbreviations instead of full names. */
@container sr (max-width: 480px) {
  .sr-block .sr-table {
    --sr-cell-pad: 0.45em 0.3em;
  }

  .sr-block .sr-name--full {
    display: none;
  }

  .sr-block .sr-name--short {
    display: inline;
  }

  .sr-block .sr-table .sr-col-time,
  .sr-block .sr-tennis .sr-col-set {
    font-size: 0.9em;
  }
}

/*
 * A copy of a table's header row pinned to the top of the screen while the real one is scrolled
 * out of view (see floatingHeads()). A sideways-scrolling wrapper is also the sticky boundary,
 * so the real header can't stick to the page. Themes with a fixed top bar set --sr-sticky-top.
 */
.sr-block .sr-head-float {
  position: fixed;
  inset-block-start: var(--sr-sticky-top, 0);
  z-index: 50;
  overflow: hidden;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.12);

  &[hidden] {
    display: none;
  }

  /* Cell widths are copied from the real header, padding included. */
  & .sr-table {
    table-layout: fixed;
  }

  & th {
    box-sizing: border-box;
  }
}

/* Very narrow (e.g. a sidebar on a small screen): flags make way for the numbers. */
@container sr (max-width: 360px) {
  .sr-block .sr-table .sr-flag {
    display: none;
  }
}

.sr-block .sr-vs {
  margin-inline: 0.35em;
  color: var(--sr-muted);
}

.sr-block .sr-suffix,
.sr-block .sr-tiebreak {
  font-size: 0.8em;
  color: var(--sr-muted);
}

.sr-block .sr-live {
  display: inline-block;
  padding: 0 0.35em;
  margin-inline-start: 0.35em;
  font-size: 0.75em;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  background: var(--sr-live);
  border-radius: var(--sr-radius);
}

/* Ranking movement after the name, inside the person box (Html::person() $after): same line. */
.sr-block .sr-movement {
  flex: none;
  font-size: 0.8em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;

  &.is-up {
    color: var(--sr-up);
  }

  &.is-down {
    color: var(--sr-down);
  }
}

/* Tooltips: CSS only, focusable for touch. <abbr class="sr-tip"> (team abbreviations, short names)
   gets the same look; browsers' own abbr underline is replaced by the tip's. */
.sr-block abbr.sr-tip {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  border: 0;
}

.sr-block .sr-tip {
  position: relative;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;

  &::after {
    position: absolute;
    inset-block-end: calc(100% + 6px);
    inset-inline-start: 50%;
    z-index: 10;
    padding: 0.3em 0.6em;
    font-size: 0.8rem;
    font-weight: 400;
    color: #fff;
    text-transform: none;
    letter-spacing: normal;

    /* One line per line of the tip (no wrapping: this fallback has no width to wrap in). */
    white-space: pre;
    pointer-events: none;
    content: attr(data-tip);
    background: rgb(30 30 30 / 0.95);
    border-radius: var(--sr-radius);
    opacity: 0;
    translate: -50% 0;
    transition: opacity 0.15s;
  }

  &:hover::after,
  &:focus-visible::after {
    opacity: 1;
  }
}

/*
 * Table wrappers scroll horizontally, which also clips anything above them, so tooltips in the
 * header open downwards over the table. First/last columns align to the edge instead of centering.
 */
.sr-block .sr-table thead .sr-tip::after {
  inset-block-start: calc(100% + 6px);
  inset-block-end: auto;
}

.sr-block .sr-table :is(th, td):first-child .sr-tip::after {
  inset-inline-start: 0;
  translate: none;
}

.sr-block .sr-table :is(th, td):last-child .sr-tip::after {
  inset-inline-start: auto;
  inset-inline-end: 0;
  translate: none;
}

/*
 * With the script, one shared tooltip on <body> replaces the ::after tips; it can't be clipped
 * by scroll wrappers or themes' overflow: hidden. Lives outside .sr-block, so it has its own
 * custom properties (set them on :root in a theme).
 */
.sr-tips .sr-block .sr-tip::after {
  content: none;
}

.sr-tooltip {
  position: fixed;

  /* Also a manual popover (top layer): undo the browser's popover box. */
  inset: auto;
  z-index: 100000;

  /* No minimum: as wide as the text, up to the screen's width on mobile. */
  max-inline-size: min(20rem, calc(100vw - 8px));
  padding: 0.3em 0.6em;
  margin: 0;
  overflow: visible;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--sr-tooltip-color, #fff);
  text-transform: none;
  letter-spacing: normal;

  /* Multi-line tips (a form game: date / teams / score) keep their line breaks. */
  white-space: pre-line;
  pointer-events: none;
  background: var(--sr-tooltip-bg, rgb(30 30 30 / 0.95));
  border: 0;
  border-radius: var(--sr-tooltip-radius, 4px);

  &[hidden] {
    display: none;
  }
}

/* Table tools added by the script (search, paging, sort) */

/* Search above a table: the pager's control style, with room around it. */

/* With an intro line (moved in by the script): the intro at the start, the search at the end, on
   two lines only when they don't fit side by side. */
.sr-block .sr-tools.has-intro {
  flex-wrap: wrap;
  gap: 0.5em 1em;
  align-items: center;
  justify-content: space-between;

  & .sr-intro {
    padding: 0;
  }
}

.sr-block .sr-tools {
  display: flex;
  justify-content: flex-end;
  padding: 10px var(--sr-cell-pad-inline, 0.6em);

  & input {
    inline-size: min(100%, 16em);
    padding: 5px 8px;
    margin: 0;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.3;
    color: inherit;
    background: var(--sr-pager-bg, #fff);
    border: 1px solid var(--sr-pager-border, #ccc);
    border-radius: 4px;
    box-shadow: none;
  }

  & input:focus-visible {
    outline: 2px solid var(--sr-accent);
    outline-offset: 1px;
  }
}

/* Pager: rows per page, "1 – 10 / 510", first / previous / next / last. Plain buttons, not the theme's. */
.sr-block .sr-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 15px;
  align-items: center;
  justify-content: center;
  padding: 10px var(--sr-cell-pad-inline, 0.6em);
  font-size: 0.9em;

  &[hidden] {
    display: none;
  }

  & label {
    display: flex;
    gap: 5px;
    align-items: center;
    margin: 0;
  }
}

/* Small plain controls shared by the pager and the bracket's scroll buttons (not the theme's buttons). */
.sr-block :is(.sr-pager select, .sr-pager button, .sr-bracket__nav button) {
  padding: 3px 6px;
  margin: 0;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.3;
  color: inherit;
  text-transform: none;
  background: var(--sr-pager-bg, #fff);
  border: 1px solid var(--sr-pager-border, #ccc);
  border-radius: 4px;
  box-shadow: none;
}

.sr-block :is(.sr-pager, .sr-bracket__nav) button {
  min-inline-size: 2.2em;
  cursor: pointer;

  &:hover:not(:disabled) {
    background: var(--sr-pager-hover, #f5f5f5);
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

.sr-block .sr-pager__info {
  color: var(--sr-muted);
}

.sr-block .sr-pager__buttons {
  display: flex;
  gap: 4px;
}

/* The rank heading's column is fixed (the sticky name column starts after it): "#" and its arrow
   on one line, with less padding so they fit. */
.sr-block th.sr-col-rank[aria-sort] {
  padding-inline: 0.3em;
  white-space: nowrap;

  &::after {
    padding-inline: 0;
  }
}

/* The arrow stays beside the heading, text columns' headings too: a table that doesn't fit
   scrolls instead (sortable tables never get the fixed stats layout, see above). */
.sr-block .sr-table th[aria-sort] {
  white-space: nowrap;
}

.sr-block th[aria-sort] {
  cursor: pointer;
  user-select: none;


  &::after {
    /* A bigger tap target: on touch the heading text opens its tooltip, the arrow sorts. */
    padding-inline: 0.15em 0.3em;
    content: "\00a0↕";
    opacity: 0.4;
  }

  &[aria-sort="ascending"]::after {
    content: "\00a0↑";
    opacity: 1;
  }

  &[aria-sort="descending"]::after {
    content: "\00a0↓";
    opacity: 1;
  }
}

/* "Show more / less": a quiet text control with the accent-coloured chevron, not a theme button. */
.sr-block .sr-more {
  all: unset;
  display: flex;
  gap: 0.5em;
  align-items: center;
  padding: 0.5em 0.75em;
  margin: 0.75em auto 0;
  font-size: 0.85em;
  font-weight: 700;
  color: var(--sr-more-color, color-mix(in srgb, currentcolor 75%, transparent));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;

  &[hidden] {
    display: none;
  }

  &:hover {
    color: inherit;
  }

  &:focus-visible {
    outline: 2px solid var(--sr-accent);
    outline-offset: 2px;
  }

  /* The same chevron as on collapsible headings, pointing down (up for "show less"). */
  &::after {
    flex-shrink: 0;
    inline-size: 0.45em;
    block-size: 0.45em;
    margin-block-start: -0.25em;
    content: "";
    border-block-end: 2px solid var(--sr-accent);
    border-inline-end: 2px solid var(--sr-accent);
    transform: rotate(45deg);
  }

  &[aria-expanded="true"]::after {
    margin-block: 0.3em 0;
    transform: rotate(-135deg);
  }
}

/* Form: the last five games as small W / L / D badges, newest first; a corner marks overtime.
   abbr.sr-form__game beats the tooltip's dotted underline (the badge is the hint). */
.sr-block abbr.sr-tip.sr-form__game {
  text-decoration: none;
}

.sr-block .sr-form {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
}

.sr-block .sr-form__game {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: 1.85em;
  block-size: 2em;
  overflow: hidden;
  font-size: 0.7em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  cursor: default;
  background: var(--sr-form-draw, #8c8f94);
  border-radius: 3px;

  &.is-win {
    background: var(--sr-form-win, #1e8e3e);
  }

  &.is-loss {
    background: var(--sr-form-loss, #d63638);
  }

  &.is-extra::before {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    content: "";
    border-block-start: 0.45em solid var(--sr-form-extra, #f0b400);
    border-inline-start: 0.45em solid transparent;
  }
}

/* Errors (only shown to editors) */

.sr-notice {
  padding: 0.75em 1em;
  color: #1e1e1e;
  background: #fcf9e8;
  border-inline-start: 4px solid #dba617;
}

/* Jersey number before the name, inside the person box (Html::person() $before): same line. */
.sr-block .sr-number {
  display: inline-block;
  flex: none;
  min-inline-size: 1.75em;
  font-size: 0.85em;
  color: var(--sr-muted);
}

/* Finnish players in lists and box scores outside tables (goals, stars, depth chart cells). */
.sr-block :is(li, span).is-highlighted {
  font-weight: 600;
  background: var(--sr-highlight);
  border-radius: var(--sr-radius);
}