/* ============================================================
   Contract Assignment (#142) — Post-Draft Contract Window
   Owner Window: scoreboard header (dark) + roster body (light) +
   sticky bottom submit bar. Mobile-first (390x844 primary).
   All tokens, zero raw hex — themes re-skin automatically.
   ============================================================ */

.contract-assign-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--bg-page);
}

.contract-assign-loading,
.contract-assign-error,
.contract-assign-empty {
  padding: var(--space-2xl) var(--space-base);
  text-align: center;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.contract-assign-error {
  color: var(--text-danger);
}

.contract-assign-commissioner-flag {
  margin: var(--space-sm) var(--space-base) 0;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-action-bg);
  color: var(--color-action-darkest);
  border: 2px solid var(--border-action);
  border-radius: var(--border-radius-default);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

/* Non-commissioner deep-linked to another team's window — read-only, matches
   the commissioner-flag treatment but with the structure-muted palette
   since there's no action to take here. */
.contract-assign-readonly-flag {
  margin: var(--space-sm) var(--space-base) 0;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-structure-lightest);
  color: var(--text-secondary);
  border: 2px solid var(--border-default);
  border-radius: var(--border-radius-default);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

/* Post-load save-failure banner — reviewer finding: the initial-load error
   branch only covers a failed first fetch; this covers every write attempt
   made once the page has already rendered. */
.contract-assign-save-error {
  margin: var(--space-sm) var(--space-base) 0;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-danger-bg);
  color: var(--color-danger-dark);
  border: 2px solid var(--color-danger-primary);
  border-radius: var(--border-radius-default);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

/* ---------- scoreboard header ---------- */

.contract-assign-scoreboard {
  margin: var(--space-base);
  padding: var(--space-md) var(--space-base);
  background: var(--bg-scoreboard);
  border: 2px solid var(--color-accent-aqua);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-border);
}

.contract-assign-scoreboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}

.contract-assign-team-name {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  letter-spacing: 1.5px;
  color: var(--text-inverse);
  text-transform: uppercase;
}

.contract-assign-star {
  color: var(--color-accent-gold);
  font-size: var(--font-size-base);
}

.contract-assign-countdown {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--border-radius-full);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.contract-assign-countdown--critical,
.contract-assign-countdown--expired {
  background: var(--color-danger-primary);
  border-color: transparent;
}

.contract-assign-countdown-value {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  color: var(--text-inverse);
  font-variant-numeric: tabular-nums;
}

.contract-assign-countdown-label {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  letter-spacing: 1.5px;
  color: var(--color-structure-light);
}

.contract-assign-countdown--critical .contract-assign-countdown-label,
.contract-assign-countdown--expired .contract-assign-countdown-label {
  color: rgba(255, 255, 255, 0.85);
}

.contract-assign-meters {
  display: flex;
  gap: var(--space-md);
}

.contract-assign-meter {
  flex: 1;
  min-width: 0;
}

.contract-assign-meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
}

.contract-assign-meter-label {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  letter-spacing: 1.5px;
  color: var(--color-structure-light);
  text-transform: uppercase;
}

/* Reviewer fix: danger-light text on bg-scoreboard was 3.20:1 (fails 4.5:1
   body-text threshold at this size). Swapped to the same danger-bg/danger-dark
   chip pairing already used by .contract-assign-tag--dropped (7.33:1). */
.contract-assign-meter-flag {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2xs);
  border-radius: var(--border-radius-sm);
  background: var(--color-danger-bg);
  color: var(--color-danger-dark);
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  letter-spacing: 1px;
}

.contract-assign-meter-values {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}

.contract-assign-meter-current {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-2xl);
  color: var(--text-inverse);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.contract-assign-meter-current--over {
  color: var(--color-danger-light);
}

.contract-assign-meter-max {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-structure-medium);
  white-space: nowrap;
}

.contract-assign-meter-bar {
  margin-top: var(--space-sm);
  height: 8px;
  border-radius: var(--border-radius-full);
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.contract-assign-meter-fill {
  height: 100%;
  width: 0;
  background: var(--color-accent-aqua);
  border-radius: var(--border-radius-full);
  transition: width 0.25s ease, background 0.2s ease;
}

.contract-assign-meter-fill--tight {
  background: var(--color-action-primary);
}

.contract-assign-meter-fill--over {
  background: var(--color-danger-primary);
}

/* ---------- roster body ---------- */

.contract-assign-roster {
  flex: 1;
  padding-bottom: var(--space-2xl);
}

.contract-assign-group-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-base) var(--space-xs);
  position: sticky;
  top: 0;
  background: var(--bg-page);
  z-index: 1;
}

.contract-assign-group-label {
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  letter-spacing: 2px;
  color: var(--text-secondary);
}

.contract-assign-group-rule {
  flex: 1;
  height: 1px;
  background: var(--border-default);
}

.contract-assign-group-count {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
}

.contract-assign-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-base);
  background: var(--bg-card);
  border-left: 6px solid transparent;
  border-bottom: 1px solid var(--border-default);
}

/* Anatomy (mobile-first, 390px primary; ~91px measured for a normal row —
   see the CODENOTE on .contract-assign-stepper-btn):
     [pos pill] [identity: badges-line (New/Rookie/FA/Pending-Drop, own
                 line above the name) + name-line + meta-line, flex:1 —
                 gets ALL spare width so real NFL names never truncate]
     [controls, side-by-side: 56px years stepper (flush, compact — up
                 chevron / value / down chevron read as one connected
                 control) + 56px Drop/Restore, each its own fixed column]
   Salary lives in the meta sub-line (folded in with team/bye) instead of
   its own fixed-width block — that block plus the old horizontal +/- pair
   was the horizontal space the player name was starving for. Badges live
   above the name instead of sharing its line so the name never competes
   with them for width either. */

.contract-assign-row--drafted {
  background: var(--bg-highlight);
  border-left-color: var(--color-action-primary);
}

.contract-assign-row--dropped {
  opacity: 0.6;
}

.contract-assign-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 24px;
  padding: 0 var(--space-xs);
  flex-shrink: 0;
  background: var(--color-position-default-bg);
  color: var(--color-position-default-text);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);
  letter-spacing: 0.5px;
  border-radius: var(--border-radius-sm);
}

.contract-assign-pill--qb  { background: var(--color-position-qb-bg);  color: var(--color-position-qb-text); }
.contract-assign-pill--rb  { background: var(--color-position-rb-bg);  color: var(--color-position-rb-text); }
.contract-assign-pill--wr  { background: var(--color-position-wr-bg);  color: var(--color-position-wr-text); }
.contract-assign-pill--te  { background: var(--color-position-te-bg);  color: var(--color-position-te-text); }
.contract-assign-pill--k   { background: var(--color-position-k-bg);   color: var(--color-position-k-text); }
.contract-assign-pill--def { background: var(--color-position-def-bg); color: var(--color-position-def-text); }

.contract-assign-row-identity {
  flex: 1;
  min-width: 0;
}

/* Carries the a11y group role/label that used to sit on .contract-assign-row-name-line
   itself — now spans both the badges line and the name line beneath it, so
   a screen reader still gets one coherent announcement ("Kurt Warner —
   New, Rookie") even though the badges no longer share the name's line. */
.contract-assign-row-name-group {
  min-width: 0;
}

/* New/Rookie/FA/Pending-Drop badges moved onto their own line directly
   above the name instead of sharing the name's line — the name no longer
   has to compete with them for width. */
.contract-assign-row-badges-line {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-2xs);
}

.contract-assign-row-name-line {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex-wrap: wrap;
}

.contract-assign-row-name {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  /* Never truncate — a real NFL name is the one thing an owner must be able
     to read to set the right contract. Wraps to a second line instead. */
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  flex: 1 1 auto;
  min-width: 0;
}

.contract-assign-tag {
  display: inline-flex;
  align-items: center;
  height: var(--space-lg);
  padding: 0 var(--space-xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: var(--border-radius-sm);
}

/* Reviewer fix: text-inverse on action-primary failed 6/8 themes (chiefs
   1.40, cardinals 1.76 — near-invisible; the gold badge also blended into
   the gold-family bg-highlight row on those themes). structure-deepest is
   dark in every theme by construction, so white text always clears 4.5:1
   (worst case bengals 9.52:1) and the badge reads as a dark chip against
   the light highlight row instead of disappearing into it. */
.contract-assign-tag--new {
  background: var(--color-structure-deepest);
  color: var(--text-inverse);
}

/* Reviewer fix: aqua-dark on aqua-bg failed 5/8 (worst chiefs 2.20). The
   accent-aqua family is theme-specific (sometimes gold, sometimes orange)
   and isn't guaranteed dark, so swapped to the same structure-bg/
   structure-deep light-chip pairing already proven safe for
   .contract-assign-tag--dropped's danger-bg/danger-dark (worst bengals 5.24:1). */
.contract-assign-tag--source {
  background: var(--color-structure-bg);
  color: var(--color-structure-deep);
}

.contract-assign-tag--dropped {
  background: var(--color-danger-bg);
  color: var(--color-danger-dark);
}

/* Team/bye + salary folded into one sub-line under the name (was a
   separate fixed ~62px-wide block). Reviewer fix: --color-structure-primary
   failed 4.5:1 against --bg-highlight even at :root default (4.22) and
   under dolphins/bengals against both card and highlight backgrounds —
   swapped to --color-structure-deep, worst case dolphins 5.46:1 vs
   bg-highlight / 6.11:1 vs bg-card, clears 4.5:1 on all 8 themes against
   both backgrounds (drafted rows sit on bg-highlight, everyone else on
   bg-card). */
.contract-assign-row-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-structure-deep);
}

.contract-assign-row-meta-sep {
  opacity: 0.6;
}

.contract-assign-row-meta-salary {
  font-weight: var(--font-weight-semibold);
}

/* Side-by-side, not stacked: the years stepper and Drop each get a fixed
   56px column (matching the width .contract-assign-restore-btn already
   used standalone elsewhere in this row) so DROP has a fixed position
   independent of the stepper instead of living inside its column. */
.contract-assign-row-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
  width: auto;
}

/* Vertical stepper — up rectangle / value / down rectangle, pulled flush
   into one connected control (zero inter-part gap, the touching borders
   between parts dropped so they don't double up, a single outer radius
   rounded on the up face's top corners and the down face's bottom
   corners). This is the horizontal-space fix from the original redesign
   (the old side-by-side −/+ pair plus the salary block ate ~150px of a
   390px row; this column is 56px) plus the commissioner-approved compact
   treatment that keeps the row at ~91px — see the height CODENOTE below. */
.contract-assign-stepper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 56px;
  flex-shrink: 0;
}

/* CODENOTE — accepted deviation from the 44px touch-target guideline,
   commissioner-approved: the compact stepper (mocked and signed off as
   "THAT IS PERFECT") needs the row height back down near the original
   row's ~91px, which a 44px-tall three-piece stepper cannot fit (two 44px
   faces alone are 88px before the value or row padding/border are
   counted). The <button> itself is still the full-rectangle hit area (not
   just the glyph, which is the smaller .contract-assign-stepper-btn-face
   inside it) and is padded as large as the compact design allows —
   min-height 26px + 1px top/bottom padding, measured real button height
   (getBoundingClientRect, headless Chrome) 26px. Row total measured 91px
   uniformly across plain/badged/long-name states.

   Design-review fix: `align-items: center` on the button + a fixed 12px
   face height left a ~7-8px unbordered gap between each chevron face and
   the value box — the control read as detached, not the single connected
   piece signed off on. `align-items: stretch` (the button is a
   row-direction flex container, so its cross axis is height) plus
   dropping the face's own fixed height makes the face fill the button's
   full stretched height instead, so the three parts genuinely touch.
   `padding: 1px 0` (a leftover from the pre-stretch layout) left a
   residual 1px seam between the face and the value box even after the
   stretch fix — the face fills the button's CONTENT height, and the old
   padding still ate 2px of the 26px button off that content area. Padding
   is now 0 so the face fills the full 26px and the seam closes to 0. */
.contract-assign-stepper-btn {
  width: 100%;
  min-height: 26px;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}

.contract-assign-stepper-btn-face {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-sm);
  border: 2px solid var(--border-default);
  background: var(--bg-card);
  color: inherit;
}

/* Flush seams: the up face's bottom border and radius, the down face's top
   border and radius, and the value's top/bottom borders/radius are all
   zeroed so the three parts read as one connected control instead of
   three separately-bordered boxes. */
.contract-assign-stepper-btn--up .contract-assign-stepper-btn-face {
  border-bottom: none;
  border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
}

.contract-assign-stepper-btn--down .contract-assign-stepper-btn-face {
  border-top: none;
  border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
}

/* aria-disabled, not :disabled — native `disabled` would evict focus to
   <body> on a mid-interaction min/max clamp. */
.contract-assign-stepper-btn[aria-disabled='true'] {
  cursor: not-allowed;
}

.contract-assign-stepper-btn[aria-disabled='true'] .contract-assign-stepper-btn-face {
  color: var(--text-tertiary);
  opacity: 0.5;
}

.contract-assign-stepper-btn:focus-visible {
  outline: 2px solid var(--color-action-primary);
  outline-offset: -2px;
}

/* The year value keeps the largest min-height of the stepper's three
   parts — it's the thing being set, so it stays the visually dominant
   piece even in the compact treatment. */
.contract-assign-stepper-value {
  width: 100%;
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border-default);
  border-top: none;
  border-bottom: none;
  border-radius: 0;
  background: var(--bg-highlight);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  color: var(--text-primary);
}

.contract-assign-stepper-value--empty {
  border-color: var(--border-action);
  background: var(--color-action-bg);
  color: var(--color-action-primary);
}

/* Drop moved out of the stepper's column into its own fixed 56px column
   to the right of it (was previously stacked underneath the stepper) —
   same outlined-red styling as before, just repositioned and vertically
   centered by .contract-assign-row-controls's align-items:center.
   Design-review fix: --text-danger (--color-danger-primary) measured
   4.27:1 on dolphins against --bg-highlight at this font-size — under
   4.5. --color-danger-dark is the same darker-red token already used for
   .contract-assign-tag--dropped; worst case here is dolphins 9.82:1 vs
   bg-card / 8.76:1 vs bg-highlight across all 8 themes. */
.contract-assign-drop-btn,
.contract-assign-restore-btn {
  width: 56px;
  min-height: 44px;
  padding: 0 var(--space-2xs);
  border-radius: var(--border-radius-default);
  border: 2px solid var(--border-danger);
  background: transparent;
  color: var(--color-danger-dark);
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
}

.contract-assign-drop-btn[aria-disabled='true'],
.contract-assign-restore-btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

.contract-assign-drop-btn:focus-visible,
.contract-assign-restore-btn:focus-visible {
  outline: 2px solid var(--color-action-primary);
  outline-offset: -2px;
}

/* Design-review fix: --color-accent-aqua-dark measured as low as 2.10-2.25
   against bg-card/bg-highlight on several themes (the accent-aqua family
   is theme-specific — sometimes gold, sometimes orange — and isn't
   guaranteed dark; same root cause as the earlier tag--source fix).
   Swapped to the same structure-deep token already verified safe for
   .contract-assign-row-meta (worst case dolphins 6.11:1 vs bg-card /
   5.46:1 vs bg-highlight). */
.contract-assign-restore-btn {
  border-color: var(--color-structure-deep);
  color: var(--color-structure-deep);
}

/* ---------- sticky submit bar (first sticky-bottom surface in the app) --- */

.contract-assign-submit-bar {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-base);
  flex-wrap: wrap;
  padding: var(--space-md) var(--space-base);
  /* First bottom-pinned surface in the app — pad for the iOS home indicator
     so the Submit CTA is never obstructed (matches .draft-board-tab-bar). */
  padding-bottom: max(var(--space-md), env(safe-area-inset-bottom, 0px));
  background: var(--bg-card);
  border-top: var(--border-width-thick) solid var(--border-default);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12);
}

.contract-assign-submit-status {
  flex: 1;
  min-width: 180px;
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.contract-assign-btn {
  min-height: 44px;
  padding: 0 var(--space-lg);
  border-radius: var(--border-radius-default);
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  border: 2px solid transparent;
}

.contract-assign-btn--primary {
  background: var(--color-action-primary);
  color: var(--text-inverse);
  box-shadow: var(--shadow-action);
}

.contract-assign-btn--primary:disabled {
  background: var(--color-structure-lighter);
  color: var(--color-structure-medium);
  box-shadow: none;
  cursor: not-allowed;
}

.contract-assign-btn--ghost {
  background: transparent;
  border-color: var(--border-default);
  color: var(--text-secondary);
}

/* ---------- tablet / desktop ---------- */

@media (min-width: 768px) {
  .contract-assign-scoreboard {
    max-width: 720px;
    margin: var(--space-lg) auto;
  }

  .contract-assign-roster {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
  }

  .contract-assign-submit-bar {
    max-width: 720px;
    margin: 0 auto;
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .contract-assign-meter-fill {
    transition: none !important;
  }
}