/*
 * The Trend Finder (TrendFinder.js) — a page over the SureTOOLS tab.
 *
 * The tool pages' shell (compare.css), restated under `tf-` for the reason
 * odds-converter.css gives: fixed at z-index 70, fading while its sheet rises,
 * its own scroller, white cards on the off-white page. The pills are the Slip
 * Builder's (`.slip-when`), the cards the fixture page's `stat-card` on a
 * tool page's terms, the sheets the shared SlipSheet.
 *
 * Three things are its own. The fixture card: a pick, then each side as a
 * sunken row with its count and a meter, then what surrounds the figure (the
 * league's own, the meetings), then the way onto the slip. The table: a
 * sticky club column and cells shaded by how often — shade, not colour, so a
 * frequent loss does not read as good news. And the proof sheet: every match
 * a figure was counted over, ticked or not.
 */

/* --- Shell -------------------------------------------------------------------- */

.tf {
  --enter-y: calc(12px * var(--scale));

  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  max-width: var(--app-max-width);
  margin-inline: auto;
  background: var(--bg);
  opacity: 0;
  transition: opacity var(--duration) var(--easing);
}

.tf[hidden] {
  display: none;
}

.tf [hidden] {
  display: none !important;
}

.tf[data-open="true"] {
  --enter-y: 0px;

  opacity: 1;
}

.tf__sheet {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: var(--safe-top);
  transform: translateY(var(--enter-y));
  transition: transform var(--duration) var(--easing);
}

.tf__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.tf-content {
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--space-7) + max(var(--safe-bottom), var(--tg-chrome-inset, 0px)));
}

/* Room under the last card for the slip pill, which docks at this page's foot. */
.tf[data-tray="show"] .tf-content {
  padding-bottom: calc(var(--space-8) + calc(56px * var(--scale)) + max(var(--safe-bottom), var(--tg-chrome-inset, 0px)));
}

/* --- Top row, title, competitions --------------------------------------------------- */

.tf-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3) 0;
}

.tf-top__gap {
  flex: 1;
}

.tf-title {
  margin: var(--space-3) var(--space-4) 0;
  color: var(--text);
  font-size: var(--text-4xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.tf-lede {
  margin: var(--space-1) var(--space-4) 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

.tf-rail__track {
  display: flex;
  gap: var(--space-2);
  width: max-content;
  padding-inline: var(--space-4);
}

.tf-rail .slip-when {
  flex: none;
}

.tf-leagues {
  margin-top: var(--space-4);
}

.tf-league {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-15);
  height: var(--control-xs);
  padding: 0 var(--space-3) 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.tf-league .logo {
  flex: none;
}

/* Still on its way: the name greys and a dot pulses where it will settle. */
.tf-league[data-status="loading"] .tf-league__name {
  color: var(--text-muted);
}

.tf-league[data-status="loading"]::after {
  content: "";
  width: calc(6px * var(--scale));
  height: calc(6px * var(--scale));
  border-radius: var(--radius-full);
  background: var(--accent);
  animation: tf-pulse 1.1s ease-in-out infinite;
}

.tf-league[data-status="error"] {
  border-color: var(--warning-strong);
  color: var(--warning-strong);
}

.tf-league--edit {
  padding-inline: var(--space-3);
  border-style: dashed;
  border-color: var(--border-strong);
  color: var(--accent);
  transition: transform var(--spring-duration) var(--spring);
}

@keyframes tf-pulse {
  0%,
  100% {
    opacity: 0.25;
  }

  50% {
    opacity: 1;
  }
}

/* --- Tabs --------------------------------------------------------------------------- */

/* The three rooms stay in reach while a long list scrolls under them. */
.tf-tabs {
  position: sticky;
  top: 0;
  z-index: 2;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--bg);
}

/* --- Panels -------------------------------------------------------------------------- */

.tf-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-1);
}

.tf-panel > :not(.tf-rail),
.tf-lock {
  margin-inline: var(--space-4);
}

.tf-lock {
  margin-top: var(--space-4);
}

.tf-pill--more {
  padding-inline: var(--space-3);
  background: var(--surface);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* A filter: the value it is on and a chevron, on the page's ground. */
.tf-filter {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--control-xs);
  padding: 0 var(--space-2) 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  transition: transform var(--spring-duration) var(--spring);
}

.tf-filter__chevron {
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

.tf-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
}

.tf-summary__count {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.tf-summary__count:empty {
  display: none;
}

.tf-summary__rule,
.tf-caption {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

.tf-caption--warn {
  color: var(--warning-strong);
}

.tf-caption--center {
  text-align: center;
}

.tf-caption--inline {
  flex: 1;
  min-width: 0;
}

.tf-link {
  color: var(--accent);
  font-size: inherit;
  font-weight: var(--weight-bold);
}

/* A sentence where content will be, and at most one thing to do about it. */
.tf-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--surface);
  text-align: center;
}

.tf-note__text {
  max-width: calc(300px * var(--scale));
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

.tf-note__action {
  height: var(--control-sm);
  padding: 0 var(--space-5);
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transition:
    background-color var(--sd-fade) var(--se-out),
    transform var(--spring-duration) var(--spring);
}

.tf-note__action[data-pressed="true"] {
  background: var(--accent-pressed);
}

/* The fixture page's stat card, on a tool page's terms: tonal, no edge, no shadow. */
.tf .stat-card {
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: none;
}

.tf-card--skeleton .panel-skeleton {
  padding: 0;
}

/* A ranked list reads from its left edge, heading included. */
.tf-card--list .stat-card__heading {
  text-align: left;
}

/* --- A fixture the Match Finder found --------------------------------------------------- */

.tf-fix {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--surface);
}

.tf-fix__head {
  display: flex;
  align-items: center;
  gap: var(--space-15);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

.tf-fix__head .logo {
  flex: none;
}

.tf-fix__league {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tf-fix__when {
  flex: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tf-fix__title {
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.tf-fix__pick {
  align-self: flex-start;
  padding: var(--space-05) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.tf-fix__sides {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
}

/* One side's count: its crest, its name and venue, its fraction over a meter. */
.tf-side {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  text-align: left;
  transition: transform var(--spring-duration) var(--spring);
}

.tf-side[data-pressed="true"] {
  background: var(--surface-pressed);
}

.tf-side .logo {
  flex: none;
}

.tf-side__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.tf-side__name {
  overflow: hidden;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tf-side__sub {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}

.tf-side__figure,
.tf-trend__figure {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.tf-side__fraction {
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.tf-meter {
  display: block;
  width: calc(56px * var(--scale));
  height: calc(4px * var(--scale));
  border-radius: var(--radius-full);
  background: var(--border);
  overflow: hidden;
}

.tf-meter__fill {
  display: block;
  width: calc(var(--share, 0) * 100%);
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--accent);
}

.tf-fix__context {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-15);
}

.tf-chip {
  padding: var(--space-05) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.tf-fix__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.tf-slip,
.tf-open {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--control-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  transition:
    background-color var(--sd-fade) var(--se-out),
    color var(--sd-fade) var(--se-out),
    transform var(--spring-duration) var(--spring);
}

.tf-slip {
  margin-right: auto;
  padding: 0 var(--space-4) 0 var(--space-3);
  background: var(--accent);
  color: var(--accent-text);
}

.tf-slip[data-pressed="true"] {
  background: var(--accent-pressed);
}

.tf-slip[data-state="on"] {
  background: var(--success-soft);
  color: var(--success-strong);
}

.tf-slip[data-state="full"] {
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.tf-open {
  flex: none;
  padding: 0 var(--space-3);
  background: var(--accent-tint);
  color: var(--accent);
}

/* --- Runs ------------------------------------------------------------------------------ */

.tf-runs {
  display: flex;
  flex-direction: column;
}

.tf-run {
  display: grid;
  grid-template-columns: calc(18px * var(--scale)) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: calc(48px * var(--scale));
  text-align: left;
  transition: transform var(--spring-duration) var(--spring);
}

.tf-run + .tf-run {
  border-top: 1px solid var(--border);
}

.tf-run__rank {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.tf-run__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.tf-run__name {
  overflow: hidden;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tf-run__sub {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}

.tf-run__value {
  min-width: calc(32px * var(--scale));
  padding: var(--space-05) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: var(--text-md);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.tf-card__more {
  align-self: flex-start;
  font-size: var(--text-sm);
}

/* --- The league at a glance ------------------------------------------------------------ */

.tf-pulse__since {
  margin-top: calc(var(--space-2) * -1);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.tf-pulse__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-15);
}

.tf-pulse__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  text-align: center;
}

.tf-pulse__value {
  color: var(--text);
  font-size: var(--text-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.tf-pulse__label {
  color: var(--text-secondary);
  font-size: var(--text-3xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.tf-pulse__fraction {
  color: var(--text-muted);
  font-size: var(--text-3xs);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

.tf-pulse__per-game {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

/* --- The table ----------------------------------------------------------------------------- */

.tf-card--table {
  padding: var(--space-2) 0;
  overflow: hidden;
}

.tf-table-scroll {
  width: 100%;
}

.tf-table {
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-xs);
}

.tf-table th,
.tf-table td {
  padding: var(--space-05) var(--space-1);
  text-align: center;
  white-space: nowrap;
}

.tf-table thead th {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}

/* The club column stays put while the figures scroll under it. */
.tf-table .tf-table__club {
  position: sticky;
  left: 0;
  z-index: 1;
  padding-left: var(--space-3);
  background: var(--surface);
  text-align: left;
}

.tf-table__sort {
  padding: var(--space-1) var(--space-15);
  border-radius: var(--radius-sm);
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.tf-table th[aria-sort="descending"] .tf-table__sort {
  background: var(--accent-tint);
  color: var(--accent);
}

.tf-table__team {
  display: inline-flex;
  align-items: center;
  gap: var(--space-15);
  max-width: calc(128px * var(--scale));
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.tf-table__team .logo {
  flex: none;
}

.tf-table__team span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Shade, not colour: how often, whatever it is that happened. */
.tf-cell {
  display: inline-block;
  min-width: calc(40px * var(--scale));
  padding: var(--space-1) var(--space-15);
  border-radius: var(--radius-sm);
  background: rgb(var(--accent-rgb) / calc(var(--heat, 0) * 0.3));
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.tf-cell--none,
.tf-cell--league {
  background: none;
  color: var(--text-muted);
}

.tf-table__league th,
.tf-table__league td {
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}

/* --- Sheets --------------------------------------------------------------------------------- */

.tf .slip-sheet__panel {
  max-height: min(86dvh, calc(780px * var(--scale)));
}

.tf .slip-sheet__title {
  padding: var(--space-1) var(--space-4) var(--space-3);
  font-size: var(--text-lg);
}

.tf .slip-sheet__body {
  padding: 0 var(--space-4) var(--space-4);
}

.tf .slip-search {
  height: var(--tap);
  margin-bottom: var(--space-2);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
}

.tf .slip-search__input {
  font-size: var(--text-md);
}

.tf-sheet-hint {
  margin-bottom: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

.tf-choices {
  display: flex;
  flex-direction: column;
}

.tf-choices__heading {
  margin: var(--space-3) 0 var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.tf-choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: calc(52px * var(--scale));
  text-align: left;
  transition: transform var(--spring-duration) var(--spring);
}

.tf-choice + .tf-choice {
  border-top: 1px solid var(--border);
}

.tf-choice .logo {
  flex: none;
}

.tf-choice__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.tf-choice__label {
  overflow: hidden;
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tf-choice__sub {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.tf-choice__sub:empty {
  display: none;
}

.tf-choice__tick {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--icon-lg);
  color: var(--accent);
  opacity: 0;
  transition: opacity var(--sd-fade) var(--se-out);
}

.tf-choice[aria-pressed="true"] .tf-choice__label {
  color: var(--accent);
}

.tf-choice[aria-pressed="true"] .tf-choice__tick {
  opacity: 1;
}

/* A several-at-once list shows its unticked rows as boxes to tick. */
.tf-choice[data-kind="check"] .tf-choice__tick {
  width: calc(22px * var(--scale));
  height: calc(22px * var(--scale));
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-full);
  opacity: 1;
  color: transparent;
}

.tf-choice[data-kind="check"][aria-pressed="true"] .tf-choice__tick {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-text);
}

.tf-choice[data-kind="check"] .tf-choice__tick svg {
  width: 70%;
  height: 70%;
}

/* --- A club's card ------------------------------------------------------------------------------ */

.tf-team {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tf-team__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tf-team__head .logo {
  flex: none;
}

.tf-team__who {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.tf-team__league {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.tf-form {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-05);
}

.tf-form__chip {
  display: grid;
  place-items: center;
  width: calc(18px * var(--scale));
  height: calc(20px * var(--scale));
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}

.tf-form__chip[data-outcome="win"] {
  background: var(--form-win-soft);
  color: var(--form-win);
}

.tf-form__chip[data-outcome="loss"] {
  background: var(--form-loss-soft);
  color: var(--form-loss);
}

.tf-team__next,
.tf-team__averages {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}

.tf-team__label {
  margin-right: var(--space-15);
  padding: var(--space-05) var(--space-15);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--text-3xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.tf-team__switches {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tf-team__family {
  display: flex;
  flex-direction: column;
}

.tf-team__heading {
  margin: var(--space-2) 0 var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.tf-trend {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: calc(48px * var(--scale));
  padding: var(--space-15) 0;
  text-align: left;
  transition: transform var(--spring-duration) var(--spring);
}

.tf-trend + .tf-trend {
  border-top: 1px solid var(--border);
}

.tf-trend__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  min-width: 0;
}

.tf-trend__label {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.tf-trend__sub {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-15);
}

.tf-trend__sub:empty {
  display: none;
}

.tf-trend__run,
.tf-trend__delta {
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}

.tf-trend__run {
  color: var(--accent);
}

/* Above or below the league is not better or worse — a club losing more than
   most is not good news — so neither direction takes a colour. */
.tf-trend__delta {
  color: var(--text-muted);
}

.tf-trend__delta[data-dir="up"] {
  color: var(--text-secondary);
}

.tf-trend__fraction {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

/* --- The proof sheet ------------------------------------------------------------------------------ */

.tf-proof__sub {
  margin-bottom: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

.tf-proof {
  display: flex;
  flex-direction: column;
}

.tf-proof__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) 0;
  text-align: left;
  transition: transform var(--spring-duration) var(--spring);
}

.tf-proof__row + .tf-proof__row {
  border-top: 1px solid var(--border);
}

.tf-proof__mark {
  display: grid;
  place-items: center;
  width: calc(24px * var(--scale));
  height: calc(24px * var(--scale));
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.tf-proof__row[data-hit="true"] .tf-proof__mark {
  background: var(--success-soft);
  color: var(--success-strong);
}

.tf-proof__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  min-width: 0;
}

.tf-proof__line,
.tf-proof__meta {
  display: flex;
  align-items: center;
  gap: var(--space-15);
  min-width: 0;
}

.tf-proof__line .logo,
.tf-proof__meta .logo {
  flex: none;
}

.tf-proof__venue {
  flex: none;
  width: calc(16px * var(--scale));
  color: var(--text-muted);
  font-size: var(--text-3xs);
  font-weight: var(--weight-bold);
}

.tf-proof__opp {
  overflow: hidden;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tf-proof__meta {
  /* Under the name, past the venue letter's column. */
  padding-left: calc(var(--space-4) + var(--space-15));
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tf-proof__score {
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.tf-proof__row[data-hit="false"] .tf-proof__opp,
.tf-proof__row[data-hit="false"] .tf-proof__score {
  color: var(--text-secondary);
}

/* --- About, foot ------------------------------------------------------------------------------------ */

.tf-about {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tf-about__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
}

.tf-about__name {
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.tf-about__text,
.tf-about__foot {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

.tf-about__foot {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.tf-foot {
  margin: var(--space-6) var(--space-4) 0;
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  text-align: center;
}

/* --- Reduced motion ------------------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .tf__sheet {
    transform: none;
  }

  .tf-league[data-status="loading"]::after {
    animation: none;
    opacity: 1;
  }
}