/*
 * The Compare tools (Compare.js, with CompareTeams.js and ComparePlayers.js
 * on it) — two pages over the SureTOOLS tab, one stylesheet.
 *
 * The page is the tool pages' shell: fixed at z-index 70, fading while its
 * sheet rises, its own scroller, white cards on the off-white page and
 * nothing casting a shadow but the two floating buttons in the top row. It
 * is restated under `cmp-` for the reason odds-converter.css gives.
 *
 * The table is borrowed, not restyled: each section is the fixture page's
 * `stat-card` and each figure its `stat-row` (fixture-statistics.css), so the
 * bars, the leader grammar and the club colours are the Statistics tab's
 * exactly. What this file adds is the head — two slots with a crest-coloured
 * stripe over each, which is the key to every bar below — the three row
 * kinds that are not bars, and the two sheets.
 *
 * The colours themselves are `--stat-home` / `--stat-away`, resolved on the
 * page root (it carries `data-team-colours`) from the triples
 * `applyTeamColours` samples off each side's crest. Left is "home", right
 * is "away" — the words the fixture rows already use.
 */

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

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

.cmp[hidden] {
  display: none;
}

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

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

  opacity: 1;
}

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

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

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

/* --- Top row and title ----------------------------------------------------------- */

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

.cmp-top__gap {
  flex: 1;
}

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

/* --- The head -------------------------------------------------------------------- */

/*
 * One card, two slots. The hairline between them is the card's own; the "vs"
 * sits on it at the marks' height, the one piece of furniture that says the
 * two halves are a pair rather than two cards that happen to touch.
 */
.cmp-head {
  --cmp-mark: var(--mark-3xl);

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin: var(--space-4) var(--space-4) 0;
  border-radius: var(--radius-xl);
  background: var(--surface);
  overflow: hidden;
}

.cmp-head__vs {
  position: absolute;
  top: calc(var(--space-5) + var(--cmp-mark) / 2);
  left: 50%;
  display: grid;
  place-items: center;
  width: var(--control-xs);
  height: var(--control-xs);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

.cmp-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: calc(190px * var(--scale));
  padding: var(--space-5) var(--space-3) var(--space-4);
  text-align: center;
}

.cmp-slot[data-side="right"] {
  border-left: 1px solid var(--border);
}

/* The key: each side's colour, the same one its bars below are drawn in. */
.cmp-slot::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(3px * var(--scale));
  background: var(--stat-home);
  transition: background-color var(--duration) var(--easing);
}

.cmp-slot[data-side="right"]::before {
  background: var(--stat-away);
}

.cmp-slot[data-state="empty"]::before {
  background: var(--border);
}

.cmp-slot[data-state="empty"] .cmp-slot__who,
.cmp-slot[data-state="empty"] .cmp-slot__pickers,
.cmp-slot[data-state="empty"] .cmp-slot__note,
.cmp-slot:not([data-state="empty"]) .cmp-slot__add {
  display: none;
}

/* Empty: the outline of a mark that is not there yet, and the word under it. */
.cmp-slot__add {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  width: 100%;
  border-radius: var(--radius-lg);
  transition: transform var(--spring-duration) var(--spring);
}

.cmp-slot__add-mark {
  display: grid;
  place-items: center;
  width: var(--cmp-mark);
  height: var(--cmp-mark);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--accent-tint);
  color: var(--accent);
}

.cmp-slot__add-label {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.cmp-slot__who {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  min-width: 0;
  border-radius: var(--radius-lg);
  transition: transform var(--spring-duration) var(--spring);
}

.cmp-slot__mark {
  display: grid;
  place-items: center;
  width: var(--cmp-mark);
  height: var(--cmp-mark);
  margin-bottom: var(--space-1);
}

.cmp-slot__name {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cmp-slot__sub {
  max-width: 100%;
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cmp-slot__line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  vertical-align: middle;
}

.cmp-slot__line > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmp-slot__line .logo {
  flex: none;
}

.cmp-slot__pickers {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
  width: 100%;
  margin-top: var(--space-1);
}

.cmp-slot__pickers:empty {
  display: none;
}

/* Why this side's column is dashes, when it is — the guide's inline note. */
.cmp-slot__note {
  color: var(--warning-strong);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.cmp-slot__note:empty {
  display: none;
}

/* --- Pickers -------------------------------------------------------------------------- */

/* The Lineup Builder's chip in the sunken grey a control inside a white card wears. */
.cmp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  min-width: 0;
  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);
  transition:
    background-color var(--sd-fade) var(--se-out),
    transform var(--spring-duration) var(--spring);
}

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

/* A pill with nothing to choose yet says what it is on, and is not a button in waiting. */
.cmp-pill:disabled {
  opacity: 1;
}

.cmp-pill__label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cmp-pill__chevron {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

.cmp-pill--busy {
  display: block;
  border-radius: var(--radius-full);
}

/* The clubs' one season, under the head: on the page's ground, so white. */
.cmp-season {
  display: flex;
  justify-content: center;
  margin: var(--space-3) var(--space-4) 0;
}

.cmp-season .cmp-pill {
  width: auto;
  height: var(--control-sm);
  padding: 0 var(--space-3) 0 var(--space-4);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--text);
  font-size: var(--text-sm);
}

/* --- The stage ---------------------------------------------------------------------- */

.cmp-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-4) var(--space-4) 0;
}

.cmp-stage__slow {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  text-align: center;
}

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

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

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

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

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

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

/* --- Rows that are not bars ---------------------------------------------------------- */

.cmp-row .stat-row__value {
  display: flex;
  min-width: 0;
}

.cmp-row .stat-row__value[data-side="away"] {
  justify-content: flex-end;
}

/* A league position: the Split row's pill, full colour on the higher place only. */
.cmp-place {
  padding: var(--space-05) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.cmp-place[data-side="home"][data-lead="true"] {
  background: var(--stat-home);
  color: var(--text-inverse);
}

.cmp-place[data-side="away"][data-lead="true"] {
  background: var(--stat-away);
  color: var(--text-inverse);
}

/* A club: its crest on the card's outer edge, its name inside it. */
.cmp-club {
  display: inline-flex;
  align-items: center;
  gap: var(--space-15);
  min-width: 0;
}

.stat-row__value[data-side="away"] .cmp-club {
  flex-direction: row-reverse;
}

.cmp-club .logo {
  flex: none;
}

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

/* A form run: the fixture preview's result pills, at a row's size. */
.cmp-form {
  display: inline-flex;
  gap: var(--space-05);
}

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

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

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

/* --- Top players ----------------------------------------------------------------------- */

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

.cmp-pair__rank {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

.cmp-player {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.cmp-player[data-side="away"] {
  flex-direction: row-reverse;
  text-align: right;
}

.cmp-player .logo {
  flex: none;
}

.cmp-player--none {
  color: var(--text-disabled);
}

.cmp-player[data-side="away"].cmp-player--none {
  justify-content: flex-start;
}

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

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

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

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

/* The Slip Builder's sheet at this page's size — the other tool pages' three overrides. */
.cmp .slip-sheet__panel {
  max-height: min(84dvh, calc(760px * var(--scale)));
}

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

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

/* The search field, the Lineup Builder's. */
.cmp .slip-search {
  height: var(--tap);
  margin-bottom: var(--space-2);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
}

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

/* Room held for the results, so the sheet does not jump as they land. */
.cmp-hits {
  display: flex;
  flex-direction: column;
  min-height: calc(300px * var(--scale));
}

.cmp-hits .cmp-note {
  padding-inline: 0;
}

.cmp-hits__note {
  padding: var(--space-5) 0;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-align: center;
}

.cmp-hit {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: calc(56px * var(--scale));
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  transition: transform var(--spring-duration) var(--spring);
}

.cmp-hit:last-child {
  border-bottom: 0;
}

.cmp-hit[data-pressed="true"] {
  box-shadow: inset 0 0 0 calc(999px * var(--scale)) rgb(var(--text-rgb) / 0.04);
}

.cmp-hit .logo {
  flex: none;
}

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

.cmp-hit__name {
  overflow: hidden;
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cmp-hit__sub {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* A competition or a season to pick: the Odds Format sheet's rows. */
.cmp-choices {
  display: flex;
  flex-direction: column;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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