/* Scenarios viz (WVIZ-523). Tokens are the REAL ones from base.css and the
   generated theme.css — --color-status-positive / --color-status-negative /
   --color-link, matching race-for-the-shield.css. The first draft invented
   --color-focus, --color-positive and --color-negative, none of which exist;
   the invalid outline colour is what made the keyboard audit report
   focus-not-visible on the scroll region.

   Scenarios viz. BEM: scenarios[__element][--modifier].
   Chips carry STATE, not team colour: this panel is about the league table's
   shape rather than about any one club, and the brand accents stay on chrome
   (see CLAUDE.md — team colour owns the data, brand owns the chrome). */

.scenarios__empty {
  color: var(--color-text-muted);
  font-style: italic;
}

/* A wide table at every viewport. It scrolls inside this container so the body
   never scrolls sideways at 375px (responsive-overflow.spec.js). tabindex="0"
   in the template makes the scroller keyboard-reachable, which a scrollable
   region needs to be. */
.scenarios__grid-scroll {
  overflow-x: auto;
  margin-block-end: 1.5rem;
}

.scenarios__grid-scroll:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: -2px;
}

.scenarios__grid {
  border-collapse: collapse;
  font-size: 0.875rem;
  min-width: 100%;
}

.scenarios__grid th,
.scenarios__grid td {
  border-block-end: 1px solid var(--color-border);
  padding: 0.4rem 0.6rem;
  text-align: center;
  white-space: nowrap;
}

.scenarios__grid-club {
  text-align: start;
}

.scenarios__grid thead th {
  color: var(--color-text-muted);
  font-weight: 600;
}

/* 24px is the WCAG 2.2 AA target-size floor (--hit-min). These are not
   interactive, but they carry a title tooltip and sit in a dense grid, so the
   floor keeps them legible and separable. */
.scenarios__chip {
  border-radius: 999px;
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: var(--hit-min, 24px);
  min-width: var(--hit-min, 24px);
  padding-inline: 0.4rem;
}

.scenarios__chip--clinched {
  background: color-mix(in srgb, var(--color-status-positive) 15%, transparent);
  color: var(--color-status-positive);
}

.scenarios__chip--eliminated {
  background: color-mix(in srgb, var(--color-status-negative) 15%, transparent);
  color: var(--color-status-negative);
}

.scenarios__chip--threshold,
.scenarios__chip--conditional {
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.scenarios__chip--open {
  color: var(--color-text-muted);
}

.scenarios__key {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  margin-block-end: 2rem;
}

.scenarios__line {
  margin-block-end: 1.75rem;
}

.scenarios__line-title {
  font-size: 1rem;
  margin-block-end: 0.5rem;
}

.scenarios__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.scenarios__item {
  border-inline-start: 3px solid var(--color-border);
  line-height: 1.5;
  margin-block-end: 0.4rem;
  padding-inline-start: 0.75rem;
}

.scenarios__item--clinched {
  border-inline-start-color: var(--color-status-positive);
}

.scenarios__item--eliminated {
  border-inline-start-color: var(--color-status-negative);
}

.scenarios__item--open {
  color: var(--color-text-muted);
}

/* WVIZ-562: level finishes, pairs a tiebreaker would separate at a line. */
.scenarios__ties-title {
  font-size: 0.875rem;
  margin-block: 1rem 0.4rem;
}

.scenarios__ties {
  list-style: none;
  margin: 0;
  padding: 0;
}

.scenarios__tie {
  border-inline-start: 3px dashed var(--color-border);
  line-height: 1.5;
  margin-block-end: 0.4rem;
  padding-inline-start: 0.75rem;
}

.scenarios__ties-note {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-block: 0.4rem;
}

.scenarios__example {
  margin-block: 0.25rem 0.5rem;
}

/* The summary is the control, so it meets the target-size floor. */
.scenarios__example-summary {
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.875rem;
  line-height: var(--hit-min, 24px);
  min-height: var(--hit-min, 24px);
}

.scenarios__example-summary:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.scenarios__example-list {
  font-size: 0.875rem;
  margin-block: 0.25rem;
  padding-inline-start: 1.25rem;
}