@layer reset, base, compositions, utilities, blocks, exceptions;

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("https://raw.githubusercontent.com/googlefonts/atkinson-hyperlegible-next/main/fonts/webfonts/AtkinsonHyperlegibleNext%5Bwght%5D.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("https://raw.githubusercontent.com/googlefonts/atkinson-hyperlegible-next/main/fonts/webfonts/AtkinsonHyperlegibleNext-Italic%5Bwght%5D.woff2") format("woff2-variations");
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  :where(body, h1, h2, h3, p, ol, ul, dl, dd, figure) {
    margin: 0;
  }

  :where(ol, ul) {
    padding: 0;
  }

  img,
  svg {
    display: block;
    max-inline-size: 100%;
  }
}

@layer base {
  :root {
    color-scheme: light;
    --ink: #15201b;
    --ink-soft: #52605a;
    --paper: #f7f6f1;
    --surface: #fffefa;
    --surface-soft: #eeeee7;
    --line: #d6d8d1;
    --line-strong: #aeb5ad;
    --accent: #08766d;
    --accent-dark: #055950;
    --accent-soft: #dceeea;
    --watch: #a95509;
    --watch-soft: #f8e8d4;
    --risk: #9a3d38;
    --risk-soft: #f5dfdd;
    --locked: #246446;
    --locked-soft: #dcebe2;
    --step--1: clamp(0.875rem, 0.85rem + 0.11vw, 0.95rem);
    --step-0: clamp(1rem, 0.98rem + 0.11vw, 1.0625rem);
    --step-1: clamp(1.25rem, 1.16rem + 0.4vw, 1.5rem);
    --step-2: clamp(1.75rem, 1.48rem + 1.2vw, 2.5rem);
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-s: 1rem;
    --space-m: clamp(1.25rem, 1.16rem + 0.4vw, 1.5rem);
    --space-l: clamp(1.75rem, 1.48rem + 1.2vw, 2.5rem);
    --space-xl: clamp(2.5rem, 2.14rem + 1.6vw, 3.5rem);
    --space-2xl: clamp(3.5rem, 2.96rem + 2.4vw, 5rem);
    --gutter: clamp(1rem, 0.55rem + 2vw, 2.25rem);
    --radius-s: 0.35rem;
    --radius-m: 0.65rem;
    --measure: 66ch;
    --page-max: 80rem;
  }

  html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
  }

  body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    min-block-size: 100vh;
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
    font-size: var(--step-0);
    line-height: 1.55;
  }

  :where(h1, h2, h3) {
    line-height: 1.12;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--step-2);
    letter-spacing: -0.025em;
  }

  h2 {
    font-size: var(--step-1);
  }

  h3 {
    font-size: var(--step-0);
  }

  :where(p, li, dd) {
    max-inline-size: var(--measure);
  }

  a {
    color: var(--accent-dark);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
  }

  :where(a, button, input, select, summary):focus-visible {
    outline: 0.2rem solid var(--accent);
    outline-offset: 0.18rem;
  }

  button,
  input,
  select {
    min-block-size: 2.75rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-s);
    background: var(--surface);
    color: inherit;
    font: inherit;
  }

  input,
  select {
    padding-inline: 0.75rem;
  }

  button,
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.75rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius-s);
    background: var(--accent);
    color: white;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
  }

  :where(button, .button):hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
  }

  table {
    inline-size: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
  }

  th,
  td {
    padding: 0.7rem 0.75rem;
    border-block-end: 1px solid var(--line);
    text-align: start;
    vertical-align: middle;
  }

  th {
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-weight: 700;
  }

  summary {
    cursor: pointer;
    font-weight: 700;
  }

  meter {
    inline-size: 100%;
    block-size: 0.55rem;
    border: 0;
    background: var(--surface-soft);
    accent-color: var(--accent);
  }
}

@layer compositions {
  .wrapper {
    inline-size: min(100% - 2 * var(--gutter), var(--page-max));
    margin-inline: auto;
  }

  .flow > * + * {
    margin-block-start: var(--flow-space, var(--space-s));
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--cluster-justify, flex-start);
    gap: var(--cluster-space, var(--space-xs));
  }

  .switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--switcher-gap, var(--space-m));
  }

  .switcher > * {
    flex-grow: 1;
    flex-basis: calc((var(--switcher-threshold, 42rem) - 100%) * 999);
  }

  .grid {
    display: grid;
    gap: var(--grid-gap, var(--space-m));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 18rem)), 1fr));
  }

  .with-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sidebar-gap, var(--space-l));
    align-items: flex-start;
  }

  .with-sidebar > :first-child {
    flex: 1 1 var(--sidebar-width, 16rem);
  }

  .with-sidebar > :last-child {
    flex: 999 1 0;
    min-inline-size: min(100%, var(--content-min, 55%));
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .muted {
    color: var(--ink-soft);
  }

  .numeric {
    font-variant-numeric: tabular-nums;
  }

  .no-wrap {
    white-space: nowrap;
  }

  .skip-link {
    position: fixed;
    z-index: 1;
    inset-block-start: var(--space-xs);
    inset-inline-start: var(--space-xs);
    translate: 0 -200%;
    padding: var(--space-2xs) var(--space-xs);
    border: 1px solid var(--ink);
    border-radius: var(--radius-s);
    background: var(--surface);
    color: var(--ink);
    font-weight: 750;
  }

  .skip-link:focus {
    translate: 0;
  }
}

@layer blocks {
  .site-header {
    border-block-end: 1px solid var(--line);
    background: color-mix(in srgb, var(--paper) 92%, transparent);
  }

  .site-header .wrapper {
    min-block-size: 4rem;
    padding-block: var(--space-xs);
    --cluster-justify: space-between;
  }

  .wordmark {
    color: var(--ink);
    font-size: 1.05rem;
    font-weight: 850;
    letter-spacing: -0.02em;
    text-decoration: none;
  }

  .site-nav a {
    color: var(--ink-soft);
    font-size: var(--step--1);
  }

  main {
    padding-block: var(--space-l) var(--space-2xl);
  }

  .home-main {
    padding-block-start: var(--space-xl);
  }

  .home-shell {
    max-inline-size: 54rem;
  }

  .home-shell > * + * {
    margin-block-start: var(--space-2xl);
  }

  .lede {
    color: var(--ink-soft);
    font-size: var(--step-1);
    line-height: 1.45;
  }

  .launcher {
    --cluster-space: var(--space-xs);
    align-items: stretch;
  }

  .launcher input {
    flex: 999 1 26rem;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .launcher button {
    flex: 1 0 auto;
  }

  .panel,
  .match-card,
  .notice {
    padding: var(--space-m);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background: var(--surface);
    outline: 1px solid transparent;
    outline-offset: -1px;
  }

  .eyebrow {
    color: var(--accent-dark);
    font-size: var(--step--1);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .event-header {
    --flow-space: var(--space-xs);
  }

  .event-meta {
    color: var(--ink-soft);
    font-size: var(--step--1);
  }

  .event-context {
    font-size: var(--step-1);
    font-weight: 800;
    line-height: 1.2;
  }

  .event-context a {
    color: var(--ink);
  }

  .journey-grid {
    --grid-min: 17rem;
    list-style: none;
  }

  .journey-grid > li {
    max-inline-size: none;
  }

  .journey-card {
    display: block;
    block-size: 100%;
    color: var(--ink);
    text-decoration: none;
  }

  .journey-card strong {
    display: block;
    font-size: var(--step-1);
    line-height: 1.2;
  }

  .journey-card:hover {
    border-color: var(--accent);
  }

  .journey-card:hover strong {
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
  }

  .to-guide {
    max-inline-size: 72ch;
  }

  .marker-fields {
    align-items: end;
  }

  .form-field {
    display: grid;
    gap: var(--space-3xs);
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-weight: 700;
  }

  .form-field input {
    inline-size: min(100%, 13rem);
  }

  .marker-result {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  }

  .marker-code {
    display: inline-block;
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-s);
    background: var(--surface-soft);
    color: var(--ink);
    font-size: var(--step-2);
    font-weight: 850;
    line-height: 1;
    overflow-wrap: anywhere;
  }

  .tabs {
    border-block-end: 1px solid var(--line);
  }

  .tabs a {
    display: inline-flex;
    min-block-size: 2.75rem;
    align-items: center;
    padding-inline: var(--space-s);
    border-block-end: 0.2rem solid transparent;
    color: var(--ink-soft);
    font-weight: 750;
    text-decoration: none;
  }

  .tabs a[aria-current="page"] {
    border-color: var(--accent);
    color: var(--ink);
  }

  .cut-composition {
    inline-size: 100%;
    border-block: 1px solid var(--line);
  }

  .cut-composition-region {
    inline-size: 100%;
    padding-block: var(--space-xs);
  }

  .cut-composition-table caption {
    padding-block-end: var(--space-xs);
    color: var(--ink);
    font-weight: 800;
    text-align: start;
  }

  .cut-composition-table :is(th, td) {
    padding: 0.35rem 0.5rem;
  }

  .scope-picker {
    max-inline-size: 54rem;
  }

  .scope-picker select {
    flex: 999 1 26rem;
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .scope-picker button {
    flex: 1 0 auto;
  }

  .score-expression {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .recent-pairing-header {
    --cluster-justify: space-between;
  }

  .pairing-seats {
    --switcher-gap: var(--space-s);
    --switcher-threshold: 34rem;
  }

  .pairing-seat {
    padding: var(--space-s);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: var(--surface-soft);
  }

  .pairing-seat .cluster {
    --cluster-justify: space-between;
  }

  .pairing-seat h3,
  .pairing-seat .muted {
    overflow-wrap: anywhere;
  }

  .pairing-score {
    font-size: var(--step-1);
    font-weight: 850;
    line-height: 1.1;
  }

  .match-list {
    list-style: none;
    --grid-min: 22rem;
  }

  .match-card {
    display: grid;
    align-content: start;
    gap: var(--space-s);
  }

  .match-card header {
    --cluster-justify: space-between;
  }

  .match-card[data-priority="pivotal"] {
    border-color: color-mix(in srgb, var(--watch) 48%, var(--line));
  }

  .priority {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.7rem;
    padding-inline: 0.55rem;
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-weight: 800;
  }

  .priority[data-level="pivotal"] {
    background: var(--watch-soft);
    color: #753802;
  }

  .match-player {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2xs) var(--space-s);
    align-items: center;
  }

  .match-player strong {
    overflow-wrap: anywhere;
  }

  .match-player meter {
    grid-column: 1 / -1;
  }

  .side-label {
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-weight: 650;
  }

  .id-outlook {
    padding-block-start: var(--space-xs);
    border-block-start: 1px solid var(--line);
  }

  .id-outlook strong {
    color: var(--accent-dark);
  }

  .id-outlook[data-state="risk"] strong {
    color: var(--risk);
  }

  .outcomes {
    font-size: var(--step--1);
  }

  .outcomes th,
  .outcomes td {
    padding: 0.45rem 0.5rem;
  }

  .table-region {
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
  }

  .table-region:focus-visible {
    outline: 0.2rem solid var(--accent);
    outline-offset: 0.15rem;
  }

  .standings-table {
    min-inline-size: 58rem;
  }

  .media-match-table {
    min-inline-size: 66rem;
  }

  .media-match-table :is(th, td) {
    padding: 0.45rem 0.5rem;
  }

  .media-match-table thead tr:first-child th:not(:first-child) {
    background: var(--surface-soft);
    color: var(--ink);
    text-align: center;
  }

  .media-match-table tbody tr:hover {
    background: var(--accent-soft);
  }

  .media-player-cell {
    min-inline-size: 12rem;
  }

  .media-player-name {
    display: flex;
    min-inline-size: 0;
    align-items: center;
    gap: var(--space-3xs);
  }

  .media-player-name .table-truncate {
    max-inline-size: 12rem;
  }

  .media-player-link {
    color: var(--ink);
    font-weight: 800;
  }

  .media-identity {
    max-inline-size: 14rem;
    margin-block-start: 0.05rem;
    color: var(--ink-soft);
    font-size: 0.76rem;
  }

  .media-match-table thead tr:nth-child(2) > :nth-child(5),
  .media-match-table tbody tr > :nth-child(6) {
    padding-inline-start: var(--space-l);
  }

  .media-match-table thead tr:first-child > :nth-child(3) {
    padding-inline-start: var(--space-l);
  }

  .media-match-table .status {
    min-block-size: 1.4rem;
    padding-inline: 0.4rem;
  }

  .match-stakes {
    display: block;
    margin-block-start: 0.1rem;
    color: var(--accent-dark);
    font-size: 0.76rem;
    font-weight: 750;
    white-space: nowrap;
  }

  .media-outcome {
    color: var(--ink);
    font-weight: 800;
    text-align: end;
    white-space: nowrap;
  }

  .conditional-table {
    min-inline-size: 34rem;
  }

  .pairing-outcomes-table {
    min-inline-size: 72rem;
  }

  .projection-table {
    min-inline-size: 66rem;
  }

  .table-note {
    display: block;
    margin-block-start: var(--space-3xs);
    color: var(--watch);
    font-size: var(--step--1);
    white-space: normal;
  }

  .standings-table tbody tr:hover {
    background: var(--accent-soft);
  }

  .player-link {
    color: var(--ink);
    font-weight: 750;
  }

  .table-truncate {
    display: block;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .player-name-cell .table-truncate {
    max-inline-size: clamp(12rem, 22vw, 20rem);
  }

  .id-outlook-cell .table-truncate {
    max-inline-size: clamp(10rem, 18vw, 16rem);
  }

  .chance {
    display: inline-grid;
    min-inline-size: 4ch;
    justify-items: end;
    font-weight: 800;
  }

  .status {
    display: inline-flex;
    min-block-size: 1.65rem;
    align-items: center;
    padding-inline: 0.55rem;
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-weight: 800;
    white-space: nowrap;
  }

  .status[data-state="locked"] {
    background: var(--locked-soft);
    color: var(--locked);
  }

  .status[data-state="risk"] {
    background: var(--risk-soft);
    color: var(--risk);
  }

  .status[data-state="watch"] {
    background: var(--watch-soft);
    color: var(--watch);
  }

  .player-detail {
    scroll-margin-block-start: var(--space-m);
  }

  .notice {
    border-color: color-mix(in srgb, var(--watch) 20%, var(--line));
    background: color-mix(in srgb, var(--watch-soft) 55%, var(--surface));
  }

  .notice[data-state="error"] {
    border-color: color-mix(in srgb, var(--risk) 25%, var(--line));
    background: color-mix(in srgb, var(--risk-soft) 65%, var(--surface));
  }

  .active-tournaments {
    list-style: none;
    border-block-start: 1px solid var(--line);
  }

  .active-tournaments > li {
    max-inline-size: none;
    border-block-end: 1px solid var(--line);
  }

  .active-tournament {
    inline-size: 100%;
    min-block-size: 3.75rem;
    padding-block: var(--space-xs);
    color: inherit;
    text-decoration: none;
    --cluster-justify: space-between;
    --cluster-space: var(--space-2xs) var(--space-m);
  }

  .active-tournament:hover strong {
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
  }

  .active-tournament-name {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2xs);
    min-inline-size: 0;
  }

  .active-tournament-name strong {
    overflow-wrap: anywhere;
  }

  .active-tournament-meta {
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
  }

  .prose {
    max-inline-size: 72ch;
  }

  .prose section {
    --flow-space: var(--space-xs);
  }

  .prose :where(ul, ol) {
    padding-inline-start: 1.35em;
  }

  .prose :where(li + li) {
    margin-block-start: var(--space-2xs);
  }

  .methodology {
    border-block-start: 1px solid var(--line);
    padding-block-start: var(--space-m);
  }

  .methodology details > * + * {
    margin-block-start: var(--space-s);
  }

  .player-event-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-l);
    padding-block-end: var(--space-xs);
    border-block-end: 1px solid var(--line);
  }

  .player-event-copy {
    flex: 1 1 28rem;
    min-inline-size: 0;
    --flow-space: var(--space-3xs);
  }

  .player-event-copy p {
    max-inline-size: none;
  }

  .player-event-title {
    font-size: var(--step-0);
    font-weight: 800;
    line-height: 1.2;
  }

  .player-event-title a {
    color: var(--ink);
  }

  .player-event-nav {
    flex: 0 0 auto;
    --cluster-space: var(--space-2xs);
  }

  .player-event-nav a {
    display: inline-flex;
    min-block-size: 2.5rem;
    align-items: center;
    padding-inline: var(--space-xs);
    border-block-end: 0.18rem solid transparent;
    color: var(--ink-soft);
    font-weight: 750;
    text-decoration: none;
  }

  .player-event-nav a[aria-current="page"] {
    border-color: var(--accent);
    color: var(--ink);
  }

  .media-view-nav {
    margin-block-start: var(--space-2xs);
  }

  .media-view-nav a:first-child {
    padding-inline-start: 0;
  }

  .player-stale {
    padding: var(--space-xs) var(--space-s);
    font-size: var(--step--1);
  }

  .player-profile {
    --flow-space: var(--space-l);
  }

  .player-identity {
    --flow-space: var(--space-2xs);
  }

  .player-identity h1 {
    overflow-wrap: anywhere;
  }

  .player-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs) 0;
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
    list-style: none;
  }

  .player-facts li {
    max-inline-size: none;
    white-space: nowrap;
  }

  .player-facts li + li::before {
    content: "·";
    padding-inline: var(--space-2xs);
    color: var(--line-strong);
  }

  .player-facts li:first-child {
    color: var(--ink);
    font-weight: 800;
  }

  .forecast-overview {
    --flow-space: var(--space-xs);
  }

  .player-cohort {
    padding: var(--space-xs) var(--space-s);
    background: var(--surface-soft);
    color: var(--ink-soft);
    font-size: var(--step--1);
    --flow-space: var(--space-2xs);
  }

  .player-cohort-line {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs) var(--space-s);
    align-items: baseline;
  }

  .player-cohort-line strong {
    color: var(--ink);
  }

  .player-cohort p {
    max-inline-size: 72ch;
  }

  .player-match {
    padding: var(--space-m);
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
    border-radius: var(--radius-m);
    background: color-mix(in srgb, var(--accent-soft) 32%, var(--surface));
    --flow-space: var(--space-s);
  }

  .player-match-empty {
    border-color: var(--line);
    background: color-mix(in srgb, var(--surface-soft) 45%, var(--surface));
  }

  .player-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-l);
  }

  .player-section-header .flow {
    --flow-space: var(--space-3xs);
  }

  .pairing-participants {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-xs);
  }

  .pairing-participant {
    display: grid;
    align-content: start;
    gap: var(--space-3xs);
    min-inline-size: 0;
    padding: var(--space-xs) var(--space-s);
    border-block-start: 1px solid var(--line);
    background: var(--surface-soft);
  }

  .pairing-participant .cluster {
    --cluster-justify: space-between;
    --cluster-space: var(--space-2xs);
  }

  .pairing-participant h3 {
    overflow-wrap: anywhere;
  }

  .pairing-identity {
    overflow: hidden;
    color: var(--ink-soft);
    font-size: var(--step--1);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pairing-participant .score-expression {
    color: var(--ink-soft);
    font-size: var(--step--1);
  }

  .player-impact-region {
    border-block-start: 1px solid var(--line);
  }

  .player-impact-table {
    min-inline-size: 34rem;
    font-size: var(--step--1);
    table-layout: fixed;
  }

  .player-impact-table :is(th, td) {
    padding: 0.42rem 0.6rem;
  }

  .player-impact-table thead th {
    background: var(--surface-soft);
    color: var(--ink);
  }

  .player-impact-table thead th:first-child {
    inline-size: 9rem;
    text-align: start;
  }

  .outcome-heading {
    display: inline-flex;
    max-inline-size: 100%;
    gap: var(--space-3xs);
    white-space: nowrap;
  }

  .outcome-player-name {
    min-inline-size: 0;
    max-inline-size: clamp(5rem, 14vw, 12rem);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .player-impact-table :is(th, td):not(:first-child) {
    text-align: end;
  }

  .player-impact-table tbody th {
    color: var(--ink-soft);
    font-weight: 650;
  }

  .player-impact-table .impact-subject th {
    padding-block-start: var(--space-xs);
    border-block-end-color: var(--line-strong);
    background: color-mix(in srgb, var(--accent-soft) 36%, var(--surface));
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-align: start;
    text-transform: uppercase;
  }

  .player-impact-table .impact-chance {
    color: var(--ink);
    font-size: var(--step-0);
    font-weight: 850;
  }

  .player-impact-table .impact-evidence :is(th, td) {
    padding-block-start: 0.2rem;
    color: var(--ink-soft);
    font-size: 0.78rem;
  }

  .pairing-closed {
    color: var(--ink-soft);
    font-size: var(--step--1);
  }

  .player-pathways {
    --flow-space: var(--space-xs);
  }

  .path-frontiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: var(--space-xs);
  }

  .path-frontier {
    display: grid;
    align-content: start;
    gap: var(--space-3xs);
    padding: var(--space-xs) var(--space-s);
    border: 1px solid var(--line);
    border-block-start: 0.22rem solid var(--line-strong);
    background: var(--surface);
  }

  .path-frontier[data-state="safe"],
  .path-frontier[data-state="locked"] {
    border-block-start-color: var(--locked);
  }

  .path-frontier[data-state="live"],
  .path-frontier[data-state="watch"] {
    border-block-start-color: var(--watch);
  }

  .path-frontier[data-state="side"] {
    border-block-start-color: var(--accent);
  }

  .path-frontier[data-state="out"],
  .path-frontier[data-state="risk"] {
    border-block-start-color: var(--risk);
  }

  .path-frontier dt {
    color: var(--ink-soft);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.035em;
    text-transform: uppercase;
  }

  .path-frontier dd {
    font-variant-numeric: tabular-nums;
  }

  .path-frontier > dd:first-of-type {
    color: var(--ink);
    font-size: var(--step-1);
    font-weight: 850;
    line-height: 1.1;
  }

  .path-frontier-detail {
    color: var(--ink-soft);
    font-size: 0.78rem;
  }

  .pathway-table-region {
    border-block-start: 1px solid var(--line);
  }

  .pathway-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3xs) var(--space-xs);
    color: var(--ink-soft);
    font-size: 0.78rem;
  }

  .pathway-filter[hidden] {
    display: none;
  }

  .pathway-filter label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    color: var(--ink);
    font-weight: 750;
    cursor: pointer;
  }

  .pathway-filter input {
    margin: 0;
  }

  .pathway-table {
    min-inline-size: 44rem;
    font-size: 0.84rem;
  }

  .pathway-table :is(th, td) {
    padding: 0.4rem 0.5rem;
  }

  .pathway-table thead th {
    position: sticky;
    z-index: 1;
    inset-block-start: 0;
    background: var(--surface-soft);
    color: var(--ink);
    line-height: 1.2;
    white-space: nowrap;
  }

  .pathway-table :is(th, td):nth-child(n + 2) {
    text-align: end;
  }

  .pathway-table tbody tr:hover {
    background: var(--accent-soft);
  }

  .pathway-result {
    color: var(--ink);
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .cell-primary,
  .cell-evidence {
    display: block;
    white-space: nowrap;
  }

  .freshness-indicator {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-s);
    background: var(--accent-soft);
    color: var(--ink);
  }

  .freshness-indicator[data-state="delayed"] {
    background: var(--risk-soft);
  }

  .freshness-indicator[data-state="paused"] {
    background: var(--watch-soft);
  }

  .freshness-copy {
    --cluster-justify: space-between;
    gap: var(--space-2xs) var(--space-m);
  }

  .freshness-state,
  .freshness-next {
    gap: var(--space-2xs);
  }

  .freshness-indicator progress {
    display: block;
    inline-size: 100%;
    block-size: 0.45rem;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: rgb(255 255 255 / 60%);
    accent-color: var(--accent);
  }

  .freshness-indicator[data-state="delayed"] progress {
    accent-color: var(--risk);
  }

  .freshness-indicator[data-state="paused"] progress {
    accent-color: var(--watch);
  }

  .freshness-scale {
    display: flex;
    justify-content: space-between;
    gap: var(--space-s);
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;
  }

  .freshness-scale > :last-child {
    text-align: end;
  }

  .freshness-resume {
    min-block-size: 2rem;
    padding: 0.25rem 0.65rem;
    font-size: var(--step--1);
  }

  .cell-primary {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
  }

  .cell-evidence {
    margin-block-start: 0.08rem;
    color: var(--ink-soft);
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
  }

  .definition-list {
    display: grid;
    grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
    gap: var(--space-xs) var(--space-m);
  }

  .definition-list dt {
    font-weight: 800;
  }

  .debug-panel {
    position: fixed;
    z-index: 10;
    inset-block-start: var(--space-xs);
    inset-inline-end: var(--space-xs);
    inline-size: min(28rem, calc(100% - 2 * var(--space-xs)));
    max-block-size: calc(100dvh - 2 * var(--space-xs));
    padding: var(--space-s);
    overflow: auto;
    border: 2px solid var(--ink);
    border-radius: var(--radius-s);
    background: var(--surface);
    box-shadow: 0 0.5rem 1.5rem rgb(21 32 27 / 22%);
    font-size: var(--step--1);
    --flow-space: var(--space-s);
  }

  .debug-panel-header {
    --cluster-justify: space-between;
    align-items: flex-start;
  }

  .debug-panel h2 {
    font-size: var(--step-1);
  }

  .debug-state {
    padding: var(--space-2xs) var(--space-xs);
    background: var(--surface-soft);
    font-variant-numeric: tabular-nums;
  }

  .debug-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
    gap: var(--space-xs);
  }

  .debug-fields input {
    inline-size: 100%;
  }

  .debug-close,
  .debug-reset {
    border-color: var(--line-strong);
    background: var(--surface);
    color: var(--ink);
  }

  :where(.debug-close, .debug-reset):hover {
    border-color: var(--ink);
    background: var(--surface-soft);
    color: var(--ink);
  }

  .debug-panel kbd {
    padding-inline: 0.3em;
    border: 1px solid var(--line-strong);
    border-radius: 0.2em;
    background: var(--surface-soft);
    font: inherit;
  }

}

@layer exceptions {
  [hidden] {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
      transition-duration: 0.01ms;
    }
  }

  @media (forced-colors: active) {
    .status,
    .priority,
    .button,
    button {
      border: 1px solid currentColor;
    }
  }
}