/*
 * The Lineup Builder (LineupBuilder.js) — a composition tool for one
 * artifact, a starting-eleven graphic, over the SureTOOLS tab.
 *
 * The shell is the player page's: a fixed page that fades while its sheet
 * rises, at z-index 70 — over the tab panes, under the fixture page's 80 and
 * the player page's 98. Inside it, one column: the top row (back, the share
 * callout, more), the lineup's name as the display title, the formation
 * pill, the canvas, then the free-form switch and Reset.
 *
 * The canvas (LineupCanvas.js) is an SVG drawn entirely with attributes,
 * because it is also the image Share renders and an SVG rasterised as an
 * image cannot read a stylesheet. What this file gives it is only what the
 * image has no use for: the tokens' spring between marks, the arrival pop,
 * the cursors, the touch rules. Its greens live in that file; the one
 * on-screen control that matches them, the stat pill, reads `--turf-ink`
 * from tokens.css.
 *
 * The sheets are the Slip Builder's (slip-controls.css); their motion scale
 * is restated on the page root below, since it is declared on `.slip` and
 * this page does not wear that class.
 */

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

.lineup-builder {
  --enter-y: 12px;
  /* The sheets', the toggle's and the toasts' motion scale — slip-controls.css
     declares these on `.slip`; the same values, so the same controls move the
     same way here. */
  --sd-fade: 180ms;
  --sd-chevron: 200ms;
  --sd-check: 220ms;
  --sd-odo: 350ms;
  --sd-roll: 150ms;
  --sd-pop: 250ms;
  --sd-pulse: 250ms;
  --sd-spring: var(--spring-duration);
  --sd-thumb: 250ms;
  --se-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --se-spring: var(--spring);

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

.lineup-builder[hidden] {
  display: none;
}

.lineup-builder [hidden] {
  display: none !important;
}

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

  opacity: 1;
}

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

/* The page's own scroller, so the tab pane under it keeps its place. */
.lineup-builder__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* The page behind must not scroll under a finger on this one. */
body[data-tool-open] {
  overflow: hidden;
}

.lb {
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--space-8) + var(--safe-bottom));
}

/* --- Top row -------------------------------------------------------------------- */

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

/*
 * The feature-discovery line between the two buttons — shown until the user
 * has shared once, then gone for good. A button, since the menu it points at
 * is one tap away either way.
 */
.lb-callout {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: 40px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  transition: transform var(--spring-duration) var(--spring);
}

.lb-callout__arrows {
  font-size: var(--text-md);
  line-height: 1;
}

/* --- Title and formation ----------------------------------------------------------- */

/* The lineup's name — the display step, the one thing a screen may lead with.
   A button: tapping it is the other way to Save As. */
.lb-title {
  margin: var(--space-3) var(--space-4) 0;
  color: var(--text);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
  text-align: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  transition: transform var(--spring-duration) var(--spring);
}

.lb-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 34px;
  margin: var(--space-2) var(--space-4) 0;
  padding: 0 var(--space-2) 0 var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-card);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  transition: transform var(--spring-duration) var(--spring);
}

.lb-pill__chevron,
.lb-stat__chevron,
.lb-chip__chevron {
  color: currentColor;
  opacity: 0.7;
}

/* The shape pill and the team pill, side by side under the title. */
.lb-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) 0;
}

.lb-pills .lb-pill {
  margin: 0;
}

/* The search row: the picker's field, standing on the page as a way in. */
.lb-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  margin: var(--space-3) var(--space-3) 0;
  padding: 0 var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  color: var(--text-muted);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  text-align: left;
  transition: transform var(--spring-duration) var(--spring);
}

.lb-search__label {
  flex: 1;
  min-width: 0;
}

/* --- Canvas ---------------------------------------------------------------------------- */

.lb-canvas-wrap {
  position: relative;
  margin: var(--space-3) var(--space-3) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  /* The canvas's own ground colour, so the corners match while the SVG loads. */
  background: #25763f;
}

.lb-canvas {
  display: block;
  width: 100%;
  height: auto;
  /* A drag on the pitch is a drag, never a scroll or a selection. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/*
 * A token springs between marks — a shape change, a drop that swapped, a
 * drop that changed nothing and travels home — and follows the finger with no
 * transition at all while it is held. CSS transforms on SVG groups, in user
 * units; the export bakes them into attributes (LineupCanvas.js).
 */
.lb-token {
  cursor: grab;
  transition: transform var(--spring-duration) var(--spring);
}

.lb-token[data-dragging="true"] {
  cursor: grabbing;
  transition: none;
}

.lb-token:focus-visible {
  outline: none;
}

.lb-token:focus-visible .lb-token__inner {
  filter: drop-shadow(0 0 0 2px #fff);
}

/* The arrival: a player placed pops onto his mark. */
.lb-token__inner {
  transform-box: fill-box;
  transform-origin: center;
}

.lb-token__inner[data-anim="arrive"] {
  animation: lb-arrive 250ms var(--spring) both;
}

@keyframes lb-arrive {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  70% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

/* The stat pill, floating at the pitch's lower right, in the canvas's ink. */
.lb-stat {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 34px;
  padding: 0 var(--space-2) 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--turf-ink);
  color: var(--text-inverse);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-floating);
  transition: transform var(--spring-duration) var(--spring);
}

/* --- Controls under the pitch ----------------------------------------------------------- */

.lb-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) 0;
}

.lb-switch {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.lb-switch__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

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

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

/* The toggle at full size here: the page is not at --slip-scale. */
.lb-switch .slip-toggle {
  width: 46px;
  height: 28px;
}

.lb-switch .slip-toggle__thumb {
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
}

.lb-switch .slip-toggle[aria-checked="true"] .slip-toggle__thumb {
  transform: translateX(18px);
}

/* Save and Reset, side by side under the switch. */
.lb-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}

/* Save, in the accent: the one commit on the screen. Goes green for the beat
   the label reads "Saved". */
.lb-save {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 36px;
  padding: 0 var(--space-5) 0 var(--space-4);
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--text-inverse);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-accent);
  transition:
    background-color var(--duration) var(--easing),
    transform var(--spring-duration) var(--spring);
}

.lb-save[data-saved="true"] {
  background: var(--success);
}

/* Reset, in the danger tint: it undoes composition work, and says so. */
.lb-reset {
  align-self: center;
  height: 36px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-full);
  background: var(--error-soft);
  color: var(--error-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transition: transform var(--spring-duration) var(--spring);
}

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

/* The Slip Builder's sheets at this page's full size, not its 0.75. */
.lineup-builder .slip-sheet__panel {
  max-height: min(84dvh, 760px);
}

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

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

.lineup-builder .slip-search {
  height: 44px;
  margin-bottom: var(--space-3);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
}

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

.lineup-builder .slip-empty {
  padding: var(--space-5) 0;
  font-size: var(--text-sm);
}

/* An option in the formation, stat and filter lists: label, a line under it, a tick when chosen. */
.lb-options {
  display: flex;
  flex-direction: column;
}

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

.lb-option:last-child {
  border-bottom: 0;
}

.lb-option__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lb-option__label {
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

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

.lb-option__tick {
  flex: none;
  color: var(--accent);
  opacity: 0;
  transition: opacity var(--sd-fade) var(--se-out);
}

.lb-option[aria-pressed="true"] .lb-option__label {
  color: var(--accent);
}

.lb-option[aria-pressed="true"] .lb-option__tick {
  opacity: 1;
}

/* A club in the team list: its crest before its name. */
.lb-club .logo {
  flex: none;
}

/* The picker's three filters, in a row. */
.lb-chips {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.lb-chip {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 34px;
  padding: 0 var(--space-2) 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),
    color var(--sd-fade) var(--se-out),
    transform var(--spring-duration) var(--spring);
}

.lb-chip__kind {
  flex: none;
  color: var(--text-muted);
}

.lb-chip__kind::after {
  content: " ·";
}

.lb-chip__value {
  flex: 1;
  min-width: 0;
}

.lb-chip[data-set="true"],
.lb-chip[aria-expanded="true"] {
  background: var(--accent-tint);
  color: var(--accent);
}

.lb-chip[data-set="true"] .lb-chip__kind {
  color: rgb(var(--accent-rgb) / 0.7);
}

.lb-picker {
  display: flex;
  flex-direction: column;
}

.lb-picker__more {
  padding: var(--space-3) 0 var(--space-4);
  text-align: center;
}

/* A player in the picker. */
.lb-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 52px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  transition: transform var(--spring-duration) var(--spring);
}

.lb-row:last-child {
  border-bottom: 0;
}

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

.lb-row .logo {
  flex: none;
}

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

.lb-row__name {
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

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

/* Already on the pitch — picking him here moves him. */
.lb-row__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
}

/* Actions in a sheet: the token's, the menu's, Save. */
.lb-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-1) 0 var(--space-2);
}

.lb-action {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  text-align: left;
  transition: transform var(--spring-duration) var(--spring);
}

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

.lb-action[data-tone="danger"] {
  background: var(--error-soft);
  color: var(--error-strong);
}

.lb-action__label {
  flex: 1;
  min-width: 0;
}

/* The name field, on its own line above Save. */
.lb-name {
  margin-bottom: var(--space-2);
}

/* My Lineups: a row is the lineup and two small buttons beside it. */
.lb-library {
  display: flex;
  flex-direction: column;
}

.lb-lib {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.lb-lib:last-child {
  border-bottom: 0;
}

.lb-lib__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 56px;
  padding: var(--space-2) 0;
  text-align: left;
  transition: transform var(--spring-duration) var(--spring);
}

.lb-lib__name {
  color: var(--text);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.lb-lib[data-current="true"] .lb-lib__name {
  color: var(--accent);
}

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

.lb-lib .icon-btn {
  width: 34px;
  height: 34px;
  box-shadow: none;
}

/* The crest a lineup started from sits beside its name; the text takes the squeeze. */
.lb-lib__main {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
}

.lb-lib__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lb-lib__crest {
  flex: none;
}

/* --- The server's waits ---------------------------------------------------------------------- */

/* A recent search is a row and an X beside it; the row keeps its own press. */
.lb-row-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.lb-row-wrap .lb-row {
  flex: 1;
  min-width: 0;
}

.lb-row-wrap .icon-btn {
  width: 30px;
  height: 30px;
  box-shadow: none;
}

.lb-picker__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: 0.08em;
  text-transform: uppercase;
}

.lb-wait {
  padding: var(--space-3) 0;
  color: var(--text-muted);
  text-align: center;
}

.lb-retry {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  align-self: center;
  height: 30px;
  margin: 0 auto var(--space-2);
  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: transform var(--spring-duration) var(--spring);
}

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

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

@media (prefers-reduced-motion: reduce) {
  .lb-token {
    transition: none;
  }

  .lb-token__inner[data-anim="arrive"] {
    animation: none;
  }

  .lineup-builder__sheet {
    transform: none;
  }
}