/* ==========================================================================
   GRIDIRON — gridiron-team.css
   Owns the landing/team screen: .team-* / .rcard* / .arch-* rules only.
   Every value below is a var(--token) from css/gridiron-tokens.css. This
   file must NOT restyle .pcard*/.spin-*/.btn/.chip/.panel/.stat-box
   globally — only scoped overrides such as `.team-detail .pcard { ... }`
   are allowed.
   ========================================================================== */

/* ---------------------------------------------------------------------
   1. Shell / hero
   --------------------------------------------------------------------- */
.team-shell {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.team-hero .t-small {
  margin-top: var(--s-3);
  color: var(--c-text-2);
  max-width: 62ch;
}

.team-hero__rule {
  margin-top: var(--s-4);
  height: 2px;
  background: linear-gradient(90deg, var(--c-turf) 0%, var(--c-chalk-line) 60%, transparent 100%);
}

/* ---------------------------------------------------------------------
   1.5 Lineup — Madden-style position-slot grid. Tapping any slot (filled
   or empty) starts a spin locked to that position (js/gridiron-spin.js
   start(posId)). Scoped override of .pcard__silhouette is allowed per the
   file banner note (shared via GL.card.buildSilhouette).
   --------------------------------------------------------------------- */
.lineup-tabs {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.lineup-tab {
  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-grid {
  margin-top: var(--s-3);
}

/* ---------------------------------------------------------------------
   1.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-landing.js from FORMATION_COORDS. This
   makes the lineup read as an actual formation (Madden depth-chart style)
   instead of a flat card grid.
   --------------------------------------------------------------------- */
.lineup-field {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  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; }

.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 {
  z-index: 2;
}

.lineup-slot__art {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  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);
}
.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;
}

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

/* Manually assigned via drag-and-drop (js/gridiron-landing.js setLineupSlot) */
.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-landing.js dragover) */
.lineup-slot--drop-ok .lineup-slot__art {
  border-color: var(--c-turf-bright);
  box-shadow: var(--glow-md);
  transform: scale(1.1);
}
.lineup-slot--drop-bad .lineup-slot__art {
  border-color: var(--c-bad);
  opacity: 0.5;
}

/* Slot chip mid-drag (js/gridiron-landing.js dragstart on .lineup-slot) */
.lineup-slot[draggable="true"] {
  cursor: grab;
}
.lineup-slot.is-dragging {
  cursor: grabbing;
}
.lineup-slot.is-dragging .lineup-slot__art {
  opacity: 0.4;
}

/* Click-to-place fallback: a roster card is "picked up" (js/gridiron-landing.js
   selectedRosterId) and this slot is a valid same-position drop 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);
}

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

/* ---------------------------------------------------------------------
   1.6 Topline — pairs the team-overall stat panel with the generate CTA,
   two columns collapsing to one on narrow viewports.
   --------------------------------------------------------------------- */
.team-topline {
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  align-items: stretch;
  gap: var(--s-4);
  margin-top: var(--s-4);
}
@media (max-width: 620px) {
  .team-topline {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   2. Stats
   --------------------------------------------------------------------- */
.team-stats,
#team-overall {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--s-3);
}
#team-overall {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  padding: var(--s-4);
  background: var(--c-panel);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-md);
}
.team-stats__best {
  grid-column: 1 / -1;
  color: var(--c-text-2);
}
@media (max-width: 760px) {
  .team-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.team-roster-heading {
  margin-top: var(--s-2);
  color: var(--c-text);
}

/* ---------------------------------------------------------------------
   3. Gate
   --------------------------------------------------------------------- */
.team-gate {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-2);
  text-align: left;
  margin-bottom: var(--s-4);
}
.team-gate__note {
  color: var(--c-text-2);
  font-family: var(--font-mono);
  min-height: 1.4em;
}

/* Hero icon on #btn-generate (js/gridiron-landing.js renderGate/heroIcon) —
   deliberately unconstrained width/height so it fills the flex button the
   same way combine-fc's ico-ball does (see pitch-ui.js renderGate). Unlike
   combine-fc's solid-fill ball icon, ico-football is stroke-drawn
   (fill="none"), so blowing the whole coordinate system up via viewBox
   scaling also blows the 2px stroke-width up to tens of pixels, turning
   the laces into fat blocks and the outline into a featureless blob.
   vector-effect: non-scaling-stroke pins the stroke to a constant screen
   width regardless of that scale, so the giant icon still reads as a thin-
   lined football instead of a smiley-face blob. */
.team-gate .btn__icon path {
  vector-effect: non-scaling-stroke;
}

.btn.is-gated {
  border: 2px solid var(--c-metal-dim);
  color: var(--c-metal-bright);
  background: linear-gradient(180deg, rgba(194, 200, 207, 0.10), rgba(194, 200, 207, 0.04));
}
.btn.is-gated:hover {
  border-color: var(--c-metal);
  box-shadow: var(--glow-metal);
  color: var(--c-metal-bright);
}

/* ---------------------------------------------------------------------
   4. Controls
   --------------------------------------------------------------------- */
.team-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-3);
}
.team-controls__views {
  display: flex;
  gap: var(--s-2);
}
.team-controls label.t-label {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  color: var(--c-text-3);
}
.team-controls select {
  background: var(--c-panel-2);
  border: var(--bw) solid var(--c-line-2);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 10px;
  min-height: 36px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.team-controls select:focus-visible {
  outline: none;
  border-color: var(--c-turf);
  box-shadow: 0 0 0 2px var(--c-turf-a35);
}
.team-controls__count {
  color: var(--c-text-3);
  margin-left: auto;
  align-self: center;
}

/* ---------------------------------------------------------------------
   5. Roster grid / rcard tile
   --------------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-3);
}
.team-grid--list {
  grid-template-columns: minmax(0, 1fr);
}

.rcard {
  --unit-color: var(--c-turf);
  --ovr-color: var(--c-metal-dim);
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  text-align: left;
  background: color-mix(in srgb, var(--ovr-color) 8%, var(--c-panel));
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.rcard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--unit-color);
}
.rcard[data-unit="offense"] { --unit-color: var(--c-off); }
.rcard[data-unit="defense"] { --unit-color: var(--c-def); }
.rcard[data-unit="special"] { --unit-color: var(--c-st); }

.rcard[data-tier="elite"] { --ovr-color: var(--c-ovr-elite); }
.rcard[data-tier="great"] { --ovr-color: var(--c-ovr-great); }
.rcard[data-tier="good"]  { --ovr-color: var(--c-ovr-good); }
.rcard[data-tier="avg"]   { --ovr-color: var(--c-ovr-avg); }
.rcard[data-tier="low"]   { --ovr-color: var(--c-ovr-low); }

.rcard {
  cursor: grab;
}
.rcard:hover {
  border-color: var(--c-line-strong);
  box-shadow: var(--glow-sm);
}
.rcard:focus-visible {
  outline: none;
  border-color: var(--c-turf);
  box-shadow: 0 0 0 2px var(--c-turf-a35);
}
.rcard.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.rcard--starting {
  border-color: var(--c-turf-bright);
}
/* Click-to-place fallback: "picked up" via click, waiting on a slot click
   (js/gridiron-landing.js selectedRosterId) */
.rcard.is-selected {
  border-color: var(--c-turf-bright);
  box-shadow: var(--glow-md);
}
.rcard__starting {
  grid-column: 1 / -1;
  color: var(--c-turf-bright);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rcard__ovr-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rcard__ovr {
  font-family: var(--font-num);
  font-size: var(--fs-stat-num);
  line-height: 1;
  font-weight: 700;
  color: var(--ovr-color);
  text-align: center;
}

.rcard__grade {
  position: absolute;
  top: -4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: var(--bw) solid var(--ovr-color);
  background: var(--c-panel);
  color: var(--ovr-color);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
}

.rcard__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rcard__name {
}
.rcard__meta {
  color: var(--c-text-2);
}
.rcard__college {
  color: var(--c-text-3);
}

.rcard__pos {
  justify-self: end;
}

.rcard__badges {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-top: var(--s-1);
}

/* ---------------------------------------------------------------------
   6. Depth chart
   --------------------------------------------------------------------- */
.team-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.team-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--c-line);
}
.team-group[data-unit="offense"] .team-group__head { border-bottom-color: var(--c-off); }
.team-group[data-unit="defense"] .team-group__head { border-bottom-color: var(--c-def); }
.team-group[data-unit="special"] .team-group__head { border-bottom-color: var(--c-st); }
.team-group__head .t-small { color: var(--c-text-2); }
.team-group__head .t-label {
  font-size: var(--fs-h3);
  letter-spacing: 0.12em;
}

.team-group__pos {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: start;
  gap: var(--s-3);
}

/* ---------------------------------------------------------------------
   7. Empty / links
   --------------------------------------------------------------------- */
.team-empty {
  padding: var(--s-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: center;
}

.team-links {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.team-links__danger {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: auto;
}
.team-links__confirm {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-bad);
}
.team-links__confirm .btn {
  border-color: var(--c-bad);
  color: var(--c-bad);
}
.team-links__confirm .btn:hover {
  box-shadow: 0 0 12px -4px var(--c-bad);
}

/* ---------------------------------------------------------------------
   8. Player detail modal (reuses .pcard, scoped only)
   --------------------------------------------------------------------- */
.team-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}
.team-detail .pcard {
  max-width: 360px;
  width: 100%;
}
.team-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
}

/* ---------------------------------------------------------------------
   9. Archive modal
   --------------------------------------------------------------------- */
.arch-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.arch-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.arch-row {
  display: grid;
  grid-template-columns: 90px 56px 56px 1fr auto;
  align-items: center;
  gap: var(--s-3);
  text-align: left;
  background: var(--c-panel);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.arch-row:hover {
  border-color: var(--c-line-strong);
  box-shadow: var(--glow-sm);
}
.arch-row:focus-visible {
  outline: none;
  border-color: var(--c-turf);
  box-shadow: 0 0 0 2px var(--c-turf-a35);
}
.arch-row__date {
  color: var(--c-text-3);
}
.arch-row__ovr {
  font-family: var(--font-num);
  color: var(--c-metal-dim);
  text-align: center;
}
.arch-row__ovr[data-tier="elite"] { color: var(--c-ovr-elite); }
.arch-row__ovr[data-tier="great"] { color: var(--c-ovr-great); }
.arch-row__ovr[data-tier="good"]  { color: var(--c-ovr-good); }
.arch-row__ovr[data-tier="avg"]   { color: var(--c-ovr-avg); }
.arch-row__ovr[data-tier="low"]   { color: var(--c-ovr-low); }
.arch-row__name {
  overflow-wrap: anywhere;
}
.arch-row__flag {
  color: var(--c-text-3);
  justify-self: end;
}
.arch-row__flag--on {
  color: var(--c-turf);
}

.archive-view__clear {
  margin-top: var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* ---------------------------------------------------------------------
   10. Responsive
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .lineup-field {
    aspect-ratio: 16 / 15;
  }
  .lineup-slot__art {
    width: 52px;
    height: 52px;
  }
  .lineup-slot__ovr {
    font-size: 0.9375rem;
  }
  .lineup-slot__plus {
    font-size: 1.05rem;
  }
  .lineup-slot__name {
    display: none;
  }
}

@media (max-width: 720px) {
  .team-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .team-controls label.t-label,
  .team-controls select {
    width: 100%;
  }
  .team-controls__count {
    margin-left: 0;
  }
  .team-grid {
    grid-template-columns: 1fr;
  }
  .arch-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "date ovr"
      "name flag"
      "pos pos";
  }
  .arch-row__date { grid-area: date; }
  .arch-row__ovr { grid-area: ovr; text-align: right; }
  .arch-row__pos { grid-area: pos; }
  .arch-row__name { grid-area: name; }
  .arch-row__flag { grid-area: flag; }
}

@media (prefers-reduced-motion: reduce) {
  .rcard,
  .arch-row {
    transition: none;
  }
}