/*
 * The slip tools' shared parts (CodeInput.js) — the platform picker, the
 * platform button, and the code field with its four states.
 *
 * These are one stylesheet for the same reason they are one module: a punter
 * who has learned to paste a code in one tool has to find the same field, the
 * same wait, the same failure and the same loaded summary in the next one, and
 * that only stays true while there is one of each.
 *
 * Every tool that mounts these declares the `--sd-*` motion scale on its root
 * (slip-controls.css), and supplies `--brand` on a disc from platform data.
 * Nothing here positions itself: a tool decides where these sit.
 */

/* --- Platform discs -------------------------------------------------------------- */

/* The monogram on a brand-coloured disc — the Slip Builder's league chip
   placeholder, doing the same job for a bookmaker that has no crest here. */
.ci-disc {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: var(--brand, var(--text-muted));
  color: var(--text-inverse);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1;
}

.ci-disc--sm {
  width: 20px;
  height: 20px;
  font-size: 9px;
}

.ci-disc--lg {
  width: 36px;
  height: 36px;
  font-size: var(--text-xs);
}

/*
 * A platform selector opens a picker rather than going anywhere, so its
 * chevron points down like any other select. The rotated one belongs on rows
 * that lead somewhere, and these do not.
 */
.ci-chevron {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--text-muted);
}

/* --- The platform button ------------------------------------------------------------ */

.ci-platform-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.ci-platform-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--space-2) 0 6px;
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  text-align: left;
  transition:
    background-color var(--sd-fade) var(--se-out),
    transform var(--spring-duration) var(--spring);
}

.ci-platform-btn[data-pressed="true"] {
  background: var(--surface-pressed);
}

/* Unset is a state, not a default. The Converter's target genuinely has not
   been chosen yet, and a disc wearing somebody's brand would be a lie. */
.ci-platform-btn[data-set="false"] .ci-disc {
  background: var(--surface-pressed);
  color: var(--text-disabled);
}

.ci-platform-btn[data-set="false"] .ci-platform-btn__name {
  color: var(--text-muted);
  font-weight: var(--weight-semibold);
}

.ci-platform-btn__text {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.ci-platform-btn__label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ci-platform-btn__name {
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The small grey tag under an unset selector, saying what it is for before
   anybody has pressed it. It goes once there is an answer. */
.ci-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

/* --- The code field ------------------------------------------------------------------- */

.ci {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ci-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  height: 44px;
  padding: 0 5px 0 var(--space-3);
  border-radius: 13px;
  background: var(--surface-sunken);
  cursor: text;
}

/* The ring goes on the field, not on the bare input inside it — the search
   overlay's note, for the same reason: an outline on a nested input traces a
   box nobody drew. */
.ci-field:focus-within {
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / 0.35);
}

/*
 * Tracked capitals, because that is how a booking code is printed everywhere it
 * is ever seen — on the bookmaker's own slip, in the tipster's broadcast — and
 * a code set as ordinary text stops looking like a code.
 */
.ci-input,
.ci-code {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ci-input {
  height: 100%;
  border: 0;
  background: none;
}

.ci-input::placeholder {
  color: var(--text-muted);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  text-transform: none;
}

.ci-input:focus-visible {
  outline: none;
}

/* A code being fetched is not a code you are still typing, so it greys until
   the answer lands. */
.ci[data-status="loading"] .ci-code {
  color: var(--text-muted);
}

.ci-paste {
  flex: none;
  height: 32px;
  padding: 0 var(--space-3);
  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);
}

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

.ci-copy {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  transition:
    background-color var(--sd-fade) var(--se-out),
    transform var(--spring-duration) var(--spring);
}

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

/* The one thing on these screens that turns continuously, and only while a
   code is actually in the air. The line beside it says the same thing in
   words, which is what lets reduced motion stop it dead. */
.ci-spinner {
  flex: none;
  width: 16px;
  height: 16px;
  margin-right: var(--space-1);
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: var(--radius-full);
  animation: ci-spin 700ms linear infinite;
}

@keyframes ci-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- The line under the field ------------------------------------------------------------ */

.ci-foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 24px;
  margin-top: var(--space-2);
}

.ci-status {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

/* Wraps rather than overflowing: the Converter's rows are narrow (the swap
   button straddles their right edge) and a chip clipped mid-word reads as a
   bug rather than as a tight fit. */
.ci-chips {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ci-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.ci-chip--games {
  background: var(--accent-tint);
  color: var(--accent);
}

.ci-chip--odds {
  background: var(--surface-sunken);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* --- A code that could not resolve --------------------------------------------------------- */

/* Never a dead end: the code stays editable and the retry is right there. */
.ci-error {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--border);
}

.ci-error__text {
  flex: 1;
  color: var(--warning-strong);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.35;
}

.ci-retry {
  flex: none;
  height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  transition: transform var(--spring-duration) var(--spring);
}

/* --- The platform sheet ---------------------------------------------------------------------- */

.ci-platforms {
  display: flex;
  flex-direction: column;
}

.ci-platform {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 60px;
  padding: var(--space-2) var(--space-1);
  text-align: left;
  transition: transform var(--spring-duration) var(--spring);
}

.ci-platform + .ci-platform {
  border-top: 1px solid var(--border);
}

.ci-platform[data-pressed="true"] {
  box-shadow: inset 0 0 0 999px rgb(var(--text-rgb) / 0.04);
}

/* The other selector's choice. Greyed rather than missing: a converter whose
   source vanished from the target list would look broken rather than strict. */
.ci-platform:disabled {
  opacity: 0.4;
  cursor: default;
}

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

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

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

.ci-platform__mark {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 2px var(--border-strong);
}

.ci-platform[data-current="true"] .ci-platform__mark {
  background: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 5px var(--surface);
}

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

@media (prefers-reduced-motion: reduce) {
  /* The one thing here that never stops turning, which is exactly what this
     setting is asking not to have. The field still says "Getting the slip" in
     words, so nothing is lost but the spin. */
  .ci-spinner {
    animation: none;
    border-top-color: var(--border-strong);
  }
}