/* ==========================================================================
   GRIDIRON — gridiron-lineup.css
   Owns the DEPTH CHART screen: every .lineup-* selector, and nothing else.
   These rules used to live in css/gridiron-team.css back when the lineup
   was rendered by js/gridiron-landing.js; they moved out with the JS.

   Every value below is a var(--token) from css/gridiron-tokens.css — no
   literal colours, no COMBINE hexes. The two rarity keyframes referenced
   here (gl-legendary-pulse / gl-epic-pulse) are declared in
   css/gridiron-card.css; CSS keyframes are document-global, so renaming
   one means renaming both.

   This file must NOT restyle .pcard*/.btn/.chip/.panel globally — only
   scoped overrides such as `.lineup__preview .pcard { ... }` are allowed.
   ========================================================================== */

/* ---------------------------------------------------------------------
   1. Shell
   --------------------------------------------------------------------- */
.lineup {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.lineup__tagline {
  margin-top: var(--s-2);
  max-width: 68ch;
  color: var(--c-text-2);
}

/* ---------------------------------------------------------------------
   2. Unit tabs — the PRIMARY structure of this screen. Offense, defense
   and special teams are three separate elevens (well, 11/11/2), not one
   flat list, so the tab strip is the first thing under the title.
   --------------------------------------------------------------------- */
.lineup-tabs {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.lineup-tab {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  background: transparent;
  border: var(--bw) solid var(--c-line-2);
  border-radius: var(--r-sm);
  color: var(--c-text-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.lineup-tab:hover {
  border-color: var(--c-line-strong);
  color: var(--c-text);
}
.lineup-tab.is-active {
  background: var(--c-turf-a10);
  border-color: var(--c-turf);
  color: var(--c-turf-bright);
}
.lineup-tab__count {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--c-text-3);
}
.lineup-tab.is-active .lineup-tab__count {
  color: var(--c-turf-bright);
}

/* ---------------------------------------------------------------------
   3. "Placing" banner — click-to-place mode, entered from the inline card
   in the rail.
   --------------------------------------------------------------------- */
.lineup__selecting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: var(--bw) dashed var(--c-turf);
  border-radius: var(--r-sm);
  background: var(--c-turf-a10);
}
.lineup__selecting-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--c-turf-bright);
}

/* ---------------------------------------------------------------------
   4. Two-column content — the formation on the left, the rail on the
   right. Collapses to one column on narrow viewports with the rail last.
   --------------------------------------------------------------------- */
.lineup__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: var(--s-5);
  align-items: start;
}
.lineup__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.lineup__rail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
@media (max-width: 900px) {
  .lineup__content {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   5. Unit OVR bar
   --------------------------------------------------------------------- */
.lineup__ovrbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--c-panel);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-md);
}

.lineup__ovr {
  --ovr-color: var(--c-metal-dim);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 108px;
  padding: var(--s-3) var(--s-4);
  border: var(--bw-2) solid var(--ovr-color);
  border-radius: var(--r-sm);
  background: var(--c-panel-2);
}
.lineup__ovr[data-tier="elite"] { --ovr-color: var(--c-ovr-elite); }
.lineup__ovr[data-tier="great"] { --ovr-color: var(--c-ovr-great); }
.lineup__ovr[data-tier="good"]  { --ovr-color: var(--c-ovr-good); }
.lineup__ovr[data-tier="avg"]   { --ovr-color: var(--c-ovr-avg); }
.lineup__ovr[data-tier="low"]   { --ovr-color: var(--c-ovr-low); }

.lineup__ovr-num {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  font-size: var(--fs-stat-num);
  color: var(--ovr-color);
}
.lineup__ovr-label {
  color: var(--c-text-3);
  white-space: nowrap;
}

.lineup__stats {
  flex: 1 1 240px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--s-3);
  align-content: center;
}
.lineup__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lineup__stat-label {
  color: var(--c-text-3);
}
.lineup__stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-stat-num-sm);
  color: var(--c-text);
}
.lineup__stat-sub {
  color: var(--c-text-3);
  font-size: 0.5625rem;
}

/* ---------------------------------------------------------------------
   6. Field graphic — .lineup-slot children are positioned absolutely at
   their --sx/--sy custom properties (percentage of the field box), set
   inline per slot in js/gridiron-lineup.js from FORMATION_COORDS. This
   makes the lineup read as an actual formation instead of a card grid.
   --------------------------------------------------------------------- */
.lineup-field {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  /* SIZE CONTAINER. FORMATION_COORDS places every marker as a PERCENTAGE of
     this box, so a marker sized in fixed px silently grows relative to the
     formation as the viewport narrows and neighbours collide — the whole
     offense front crossed over below ~1100px. Sizing the marker in cqw
     (percent of THIS box's width) keeps the marker-to-gap ratio constant at
     every width, which is what actually makes the formation legible.
     width:100% + aspect-ratio makes both axes determinate, which is what
     container-type:size requires. */
  container-type: size;
  container-name: gl-field;
  border-radius: var(--r-lg);
  border: var(--bw-2) solid var(--c-chalk-line);
  background:
    repeating-linear-gradient(
      180deg,
      var(--c-turf-a10) 0,
      var(--c-turf-a10) 1px,
      transparent 1px,
      transparent calc(100% / 9)
    ),
    linear-gradient(180deg, var(--c-bg-deep) 0%, var(--c-panel) 100%);
  overflow: hidden;
}
.lineup-field[data-unit="offense"] { border-color: var(--c-off); }
.lineup-field[data-unit="defense"] { border-color: var(--c-def); }
.lineup-field[data-unit="special"] { border-color: var(--c-st); }

.lineup-field__los {
  position: absolute;
  left: 0;
  right: 0;
  top: 33%;
  height: 2px;
  background: var(--c-chalk-line);
}
.lineup-field[data-unit="offense"] .lineup-field__los { top: 33%; background: var(--c-off); opacity: 0.5; }
.lineup-field[data-unit="defense"] .lineup-field__los { top: 26%; background: var(--c-def); opacity: 0.5; }
.lineup-field[data-unit="special"] .lineup-field__los { display: none; }

/* ---------------------------------------------------------------------
   7. Starting slots
   --------------------------------------------------------------------- */
.lineup-slot {
  --unit-color: var(--c-turf);
  --ovr-color: var(--c-metal-dim);
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: center;
  font: inherit;
  color: inherit;
}
.lineup-slot:hover,
.lineup-slot:focus-visible,
.lineup-slot.is-open {
  z-index: 2;
}

.lineup-slot__art {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  /* Fallback for a browser with no container-query support; the @container
     block below is the real rule. 74px is the size on a full-width field. */
  width: 74px;
  height: 74px;
  padding: var(--s-1);
  background: var(--c-panel);
  border: var(--bw-2) solid var(--c-line);
  border-radius: 999px;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* 8.4cqw is 74px on the ~880px field a desktop layout gives, i.e. the size
   above, and shrinks with the field from there. The tightest pair in
   FORMATION_COORDS is 9% of the field apart, so holding the marker under
   that percentage is what guarantees no two markers touch — at any width,
   without a breakpoint per layout. The 34px floor is the smallest circle
   the OVR number stays readable in; below it the marker starts to crowd
   again, which is why the 640px breakpoint also opens the field out to a
   taller aspect ratio and drops the name labels. */
@container gl-field (min-width: 0px) {
  .lineup-slot__art {
    width: clamp(34px, 8.4cqw, 74px);
    height: clamp(34px, 8.4cqw, 74px);
  }
}
.lineup-slot__art[data-unit="offense"] { --unit-color: var(--c-off); }
.lineup-slot__art[data-unit="defense"] { --unit-color: var(--c-def); }
.lineup-slot__art[data-unit="special"] { --unit-color: var(--c-st); }
.lineup-slot__art[data-tier="elite"] { --ovr-color: var(--c-ovr-elite); }
.lineup-slot__art[data-tier="great"] { --ovr-color: var(--c-ovr-great); }
.lineup-slot__art[data-tier="good"]  { --ovr-color: var(--c-ovr-good); }
.lineup-slot__art[data-tier="avg"]   { --ovr-color: var(--c-ovr-avg); }
.lineup-slot__art[data-tier="low"]   { --ovr-color: var(--c-ovr-low); }

.lineup-slot:hover .lineup-slot__art,
.lineup-slot:focus-visible .lineup-slot__art {
  border-color: var(--unit-color);
  box-shadow: var(--glow-sm);
  transform: scale(1.08);
}
.lineup-slot:focus-visible {
  outline: none;
}

/* The card for this player is the one open in the rail. */
.lineup-slot.is-open .lineup-slot__art {
  border-color: var(--c-turf-bright);
  box-shadow: var(--glow-md);
}

.lineup-slot__art::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 2px solid var(--unit-color);
  opacity: 0.5;
}

/* Manually pinned (GL.state.setLineupSlot) rather than auto-filled by OVR */
.lineup-slot--pinned .lineup-slot__art {
  border-color: var(--c-turf-bright);
  box-shadow: var(--glow-sm);
}
.lineup-slot--pinned .lineup-slot__art::before {
  border-style: dashed;
  opacity: 0.9;
}

.lineup-slot__unpin {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 2;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--c-bg-deep);
  border: var(--bw) solid var(--c-line-strong);
  color: var(--c-text-2);
  font-size: 0.625rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lineup-slot__unpin:hover {
  border-color: var(--c-bad);
  color: var(--c-bad);
}

/* Drag-and-drop target feedback (js/gridiron-lineup.js dragover) */
.lineup-slot.is-drop-ok .lineup-slot__art {
  border-color: var(--c-turf-bright);
  box-shadow: var(--glow-md);
  transform: scale(1.1);
}
.lineup-slot.is-drop-bad .lineup-slot__art {
  border-color: var(--c-bad);
  opacity: 0.5;
}

.lineup-slot[draggable="true"] {
  cursor: grab;
}
.lineup-slot.is-dragging {
  cursor: grabbing;
}
.lineup-slot.is-dragging .lineup-slot__art {
  opacity: 0.4;
}

/* A player is "picked up" and this slot is on his unit — a legal target. */
.lineup-slot--pick-target .lineup-slot__art {
  border-color: var(--c-turf-bright);
  box-shadow: var(--glow-sm);
}

.lineup-slot__ovr {
  position: relative;
  z-index: 1;
  font-size: 1.125rem;
  line-height: 1;
  font-weight: 700;
  color: var(--ovr-color);
}

.lineup-slot__name {
  width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-text-3);
}

/* Cross-training tag — only printed when GL.data.fitFor says this man is
   covering a position he is not listed at. */
.lineup-slot__fit {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  color: var(--c-warn);
  white-space: nowrap;
}

.lineup-slot--empty .lineup-slot__art {
  border-style: dashed;
}
.lineup-slot__plus {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--c-line-strong);
}
.lineup-slot--empty:hover .lineup-slot__art .lineup-slot__plus,
.lineup-slot--empty:focus-visible .lineup-slot__art .lineup-slot__plus {
  color: var(--c-turf);
}

.lineup-slot__foot {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--s-1);
}
.lineup-slot__label {
  color: var(--c-text);
  font-size: 0.6875rem;
}
.lineup-slot__grade {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.6875rem;
  color: var(--c-text-2);
}

/* ---------------------------------------------------------------------
   8. Reserves — explicit seats per unit, never auto-filled. Sized by the
   unit (GL.state.RESERVE_COUNTS), so nothing here assumes a fixed count.
   --------------------------------------------------------------------- */
.lineup-reserves {
  padding: var(--s-4);
  background: var(--c-panel);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-md);
}
.lineup-reserves:empty {
  display: none;
}
.lineup-reserves__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.lineup-reserves__title {
  color: var(--c-text);
}
.lineup-reserves__meta {
  color: var(--c-text-3);
}
.lineup-reserves__row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-2);
}

.lineup-rslot {
  --ovr-color: var(--c-metal-dim);
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-2) var(--s-3);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-panel-2);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lineup-rslot:hover,
.lineup-rslot:focus-visible {
  border-color: var(--c-line-strong);
  outline: none;
}
.lineup-rslot.is-open {
  border-color: var(--c-turf-bright);
  box-shadow: var(--glow-sm);
}
.lineup-rslot--empty {
  border-style: dashed;
  justify-content: center;
  color: var(--c-text-3);
}
.lineup-rslot--pick-target {
  border-color: var(--c-turf-bright);
  border-style: solid;
}
.lineup-rslot.is-drop-ok {
  border-color: var(--c-turf-bright);
  box-shadow: var(--glow-md);
}
.lineup-rslot.is-drop-bad {
  border-color: var(--c-bad);
  opacity: 0.5;
}
.lineup-rslot[draggable="true"] { cursor: grab; }
.lineup-rslot.is-dragging { cursor: grabbing; opacity: 0.4; }

.lineup-rslot__ovr {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  color: var(--ovr-color);
}
.lineup-rslot__ovr[data-tier="elite"] { --ovr-color: var(--c-ovr-elite); }
.lineup-rslot__ovr[data-tier="great"] { --ovr-color: var(--c-ovr-great); }
.lineup-rslot__ovr[data-tier="good"]  { --ovr-color: var(--c-ovr-good); }
.lineup-rslot__ovr[data-tier="avg"]   { --ovr-color: var(--c-ovr-avg); }
.lineup-rslot__ovr[data-tier="low"]   { --ovr-color: var(--c-ovr-low); }

.lineup-rslot__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.lineup-rslot__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--c-text);
}
.lineup-rslot__pos {
  color: var(--c-text-3);
  font-size: 0.5625rem;
}
.lineup-rslot__empty {
  color: var(--c-text-3);
}
.lineup-rslot__clear {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--c-bg-deep);
  border: var(--bw) solid var(--c-line-strong);
  color: var(--c-text-2);
  font-size: 0.625rem;
  line-height: 1;
  cursor: pointer;
}
.lineup-rslot__clear:hover {
  border-color: var(--c-bad);
  color: var(--c-bad);
}

/* ---------------------------------------------------------------------
   9. Unit chemistry (teammate synergies for THIS unit's starters)
   --------------------------------------------------------------------- */
.lineup__synergy {
  padding: var(--s-4);
  background: var(--c-panel);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-md);
}
.lineup__synergy.is-empty {
  display: none;
}
.lineup__synergy-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.lineup__synergy-total {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--c-ok);
}
.lineup__synergy-total.is-neg {
  color: var(--c-bad);
}
.lineup__synergy-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.lineup__syn {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: 5px 10px;
  border-radius: var(--r-sm);
  border: var(--bw) solid color-mix(in srgb, var(--c-ok) 45%, transparent);
  background: color-mix(in srgb, var(--c-ok) 12%, transparent);
  color: var(--c-text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: help;
}
.lineup__syn.is-neg {
  border-color: color-mix(in srgb, var(--c-bad) 45%, transparent);
  background: color-mix(in srgb, var(--c-bad) 12%, transparent);
}
.lineup__syn:focus-visible {
  outline: var(--bw-2) solid var(--c-turf-bright);
  outline-offset: 2px;
}
.lineup__syn-delta {
  font-family: var(--font-mono);
  color: var(--c-ok);
}
.lineup__syn.is-neg .lineup__syn-delta {
  color: var(--c-bad);
}

/* ---------------------------------------------------------------------
   10. Season CTA — hidden until a season module is loaded AND every unit
   is set. js/gridiron-lineup.js feature-detects; nothing here forces it.
   --------------------------------------------------------------------- */
.lineup__season-cta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-4);
  border: var(--bw) solid var(--c-turf);
  border-radius: var(--r-md);
  background: var(--c-turf-a10);
}
.lineup__season-hint {
  color: var(--c-text-2);
}

/* ---------------------------------------------------------------------
   11. Right-hand rail — available players, then the inline card
   --------------------------------------------------------------------- */
.lineup__rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.lineup__rail-title {
  color: var(--c-text);
}
.lineup__sort {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.lineup__sort-select {
  max-width: 130px;
}
.lineup__sort-dir {
  white-space: nowrap;
}

.lineup__rail-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-height: 460px;
  overflow-y: auto;
  padding-right: 2px;
}
.lineup__rail-empty {
  color: var(--c-text-3);
}

.lineup-chip {
  --chip-hue: var(--c-metal-dim);
  --ovr-color: var(--c-metal-dim);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: var(--bw) solid var(--c-line);
  border-left: 3px solid var(--chip-hue);
  border-radius: var(--r-sm);
  background: var(--c-panel);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lineup-chip[data-tier="elite"] { --ovr-color: var(--c-ovr-elite); }
.lineup-chip[data-tier="great"] { --ovr-color: var(--c-ovr-great); }
.lineup-chip[data-tier="good"]  { --ovr-color: var(--c-ovr-good); }
.lineup-chip[data-tier="avg"]   { --ovr-color: var(--c-ovr-avg); }
.lineup-chip[data-tier="low"]   { --ovr-color: var(--c-ovr-low); }

.lineup-chip:hover,
.lineup-chip:focus-visible {
  border-color: var(--c-line-strong);
  transform: translateX(2px);
  outline: none;
}
.lineup-chip.is-open,
.lineup-chip.is-selected {
  border-color: var(--c-turf-bright);
  box-shadow: var(--glow-sm);
}
.lineup-chip[draggable="true"] { cursor: grab; }
.lineup-chip.is-dragging { cursor: grabbing; opacity: 0.4; }

/* Same rarity treatment the card uses, so a great pull looks the same in
   the rail as it does on its own card. Keyframes: css/gridiron-card.css. */
.lineup-chip[data-grade="A"] {
  animation: gl-legendary-pulse 2.4s ease-in-out infinite;
}
.lineup-chip[data-grade="B"] {
  animation: gl-epic-pulse 3.2s ease-in-out infinite;
}

.lineup-chip__ovr {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--ovr-color);
}
.lineup-chip__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.lineup-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  color: var(--c-text);
}
.lineup-chip__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text-3);
}
.lineup-chip__pos {
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------
   12. Inline card preview (COMBINE 64d830d) — the card opens HERE, in the
   rail, not in a modal, so the formation stays on screen while you read.
   --------------------------------------------------------------------- */
.lineup__preview {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-3);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-panel-2);
}
.lineup__preview.is-empty {
  display: none;
}
.lineup__preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.lineup__preview-title {
  color: var(--c-text-2);
}
.lineup__preview-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-text-2);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lineup__preview-close:hover {
  border-color: var(--c-line-strong);
  color: var(--c-text);
}
.lineup__preview-close svg {
  width: 14px;
  height: 14px;
}

/* Scoped card override — the rail is narrow, so the radar and the OVR
   badge give back some of the room they take on the full card. */
.lineup__preview .pcard__radar {
  max-width: 220px;
  margin-inline: auto;
}

.lineup__preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.lineup__preview-note {
  color: var(--c-text-3);
}

/* ---------------------------------------------------------------------
   13. Responsive
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .lineup-field {
    aspect-ratio: 16 / 15;
  }
  /* NO .lineup-slot__art width/height here. It used to pin the marker at a
     fixed 52px, which — on a ~350px phone field — is a LARGER share of the
     formation than the 74px desktop marker is of a 880px one, so the
     markers collided harder on a phone than on a desktop. The @container
     rule in section 7 sizes it from the field instead; overriding it here
     would put the collision straight back. Only the label sizes, which do
     not drive collisions, belong in this block. */
  .lineup-slot__ovr {
    font-size: 0.9375rem;
  }
  .lineup-slot__plus {
    font-size: 1.05rem;
  }
  .lineup-slot__name,
  .lineup-slot__fit {
    display: none;
  }
  .lineup__rail-list {
    max-height: none;
  }
}