/*
 * The Arb Finder (ArbFinder.js) — a page over the SureTOOLS tab.
 *
 * The tool pages' shell, restated under `af-` as trend-finder.css restates
 * it under `tf-`: 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 bookie discs the Code Converter's
 * (`.ci-disc`), the sheets the shared SlipSheet.
 *
 * Two things are its own. The arb card: the match, the market and the profit,
 * then each leg as a sunken row — bookie, selection, price — then when the
 * prices were read and the way to the split. And the stake sheet: a total in,
 * each leg's stake out as a row that copies itself, the profit under them.
 * Only the profit is green; a price is not good news.
 */

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

.af {
  --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);
}

.af[hidden] {
  display: none;
}

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

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

  opacity: 1;
}

.af__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);
}

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

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

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

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

.af-top__gap {
  flex: 1;
}

.af-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);
}

.af-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);
}

/* --- Bookies and filters ------------------------------------------------------- */

.af-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

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

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

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

/* A disc on a ticked pill keeps its own colour, ringed off the accent. */
.af-pill .ci-disc {
  box-shadow: 0 0 0 1.5px var(--surface);
}

/* A filter: the value it is on and a chevron, on the page's ground. */
.af-filter {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--tap);
  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);
}

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

/* --- The board ------------------------------------------------------------------ */

.af-board,
.af-lock {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-4) var(--space-4) 0;
}

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

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

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

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

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

.af-caption--inline {
  flex: 1;
  min-width: 0;
  font-size: var(--text-2xs);
}

.af-caption--note {
  margin-top: var(--space-3);
}

/* A sentence where content will be, and at most one thing to do about it. */
.af-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;
}

.af-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);
}

.af-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);
}

.af-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. */
.af .stat-card {
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: none;
}

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

/* --- An arb ---------------------------------------------------------------------- */

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

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

.af-arb__head .logo {
  flex: none;
}

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

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

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

.af-arb__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-15);
}

.af-arb__market,
.af-arb__profit {
  padding: var(--space-05) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.af-arb__market {
  background: var(--accent-tint);
  color: var(--accent);
}

.af-arb__profit {
  background: var(--success-soft);
  color: var(--success-strong);
}

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

/* One leg: the bookie's disc, the selection as its page words it, the price. */
.af-leg {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}

.af-leg__text,
.af-split__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.af-leg__pick,
.af-split__pick {
  overflow: hidden;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.af-leg__sub,
.af-split__sub {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
}

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

.af-arb__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.af-arb__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.af-open,
.af-stakes {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--control-sm);
  padding: 0 var(--space-3);
  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),
    transform var(--spring-duration) var(--spring);
}

.af-open {
  background: var(--accent-tint);
  color: var(--accent);
}

.af-stakes {
  padding-inline: var(--space-4);
  background: var(--accent);
  color: var(--accent-text);
}

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

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

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

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

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

.af-sheet__sub {
  margin-bottom: var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

/* The total: a label over a field the width of the sheet. */
.af-stake,
.af-rounding {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
}

.af-rounding {
  margin-top: var(--space-4);
}

.af-stake__label {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.af-stake__input {
  width: 100%;
  height: var(--control-lg);
  padding: 0 var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  color: var(--text);
  font: inherit;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.af-stake__input:focus {
  border-color: var(--accent);
  outline: none;
}

.af-stake__quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-15);
  margin-top: var(--space-2);
}

.af-chip {
  height: var(--control-xs);
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  transition: transform var(--spring-duration) var(--spring);
}

/* Each leg's stake: a row that copies its figure for the bookie's stake box. */
.af-split {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  margin-top: var(--space-5);
}

.af-split__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  text-align: left;
  transition: transform var(--spring-duration) var(--spring);
}

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

.af-split__stake {
  color: var(--text);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.af-split__copy {
  display: grid;
  place-items: center;
  color: var(--accent);
}

.af-split__row:disabled .af-split__copy {
  color: var(--text-disabled);
}

/* The profit: the one figure on the page that may be green. */
.af-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-05);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--surface-sunken);
  text-align: center;
}

.af-result:empty {
  display: none;
}

.af-result__eyebrow {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.af-result__value {
  color: var(--text);
  font-size: var(--text-2xl);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}

.af-result__value[data-tone="gain"] {
  color: var(--success-strong);
}

.af-result__value[data-tone="loss"] {
  color: var(--error-strong);
}

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

/* A list to pick one from. */
.af-choices {
  display: flex;
  flex-direction: column;
}

.af-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);
}

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

.af-choice__label {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.af-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);
}

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

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

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

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

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

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

.af-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;
}

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