/* Mobile player sheet — bottom-sheet style, intentionally NOT the desktop modal. */

.ups-m-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Use the DYNAMIC viewport height so the sheet is centered in the *visible*
     area on mobile (iOS 100vh includes the URL bar, which pushed a tall sheet
     off-screen — "shows in the middle, need to scroll"). vh is the fallback. */
  height: 100vh;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  z-index: 100;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 16px;
  -webkit-tap-highlight-color: transparent;
}
.ups-m-sheet-overlay.open { display: flex; }

.ups-m-sheet {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  background: var(--bg-elev);
  color: var(--fg);
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ups-m-sheet-in 200ms ease-out;
}
@keyframes ups-m-sheet-in {
  from { transform: scale(0.96); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.ups-m-sheet-grip {
  /* Bottom-sheet ornament — hidden on centered-modal layout. */
  display: none;
}
.ups-m-sheet-head {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.ups-m-sheet-head .name {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
  padding-right: 36px;
}
.ups-m-sheet-head .sub {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 2px;
}
.ups-m-sheet-head-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ups-m-sheet-head-text {
  flex: 1;
  min-width: 0;
}
.ups-m-sheet-photo,
.ups-m-sheet-photo-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 28px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  object-fit: cover;
  object-position: center top;
}
.ups-m-sheet-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ups-m-sheet-photo-placeholder::before {
  content: "?";
  color: var(--fg-muted);
  font-size: 22px;
  font-weight: 600;
}
.ups-m-sheet-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
.ups-m-sheet-close:active { color: var(--fg); }

/* Tab bar (Actions / Stats / News / Bio) — mirrors the desktop FO slide-over. */
.ups-m-sheet-tabs {
  display: flex;
  gap: 4px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.ups-m-sheet-tab {
  flex: 1;
  padding: 11px 8px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.ups-m-sheet-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.ups-m-sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 0 12px;
  -webkit-overflow-scrolling: touch;
}

.ups-m-sheet-block {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.ups-m-sheet-block:last-child { border-bottom: 0; }
.ups-m-sheet-block h4 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.ups-m-sheet-kv {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 6px 12px;
  font-size: 13px;
}
.ups-m-sheet-kv .lbl { color: var(--fg-muted); font-size: 12px; }
.ups-m-sheet-kv .val { color: var(--fg); font-variant-numeric: tabular-nums; }

.ups-m-stat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.ups-m-stat-table th,
.ups-m-stat-table td {
  text-align: right;
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
}
.ups-m-stat-table th:first-child,
.ups-m-stat-table td:first-child { text-align: left; color: var(--fg-muted); }
.ups-m-stat-table thead th {
  color: var(--fg-muted);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ups-m-stat-table .career-row {
  font-weight: 700;
  background: var(--bg-elev2);
}

.ups-m-sheet-foot {
  flex: 0 0 auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) 16px;
  border-top: 1px solid var(--line);
  background: var(--bg-elev);
}
.ups-m-sheet-foot .btn {
  width: 100%;
  padding: 14px;
  background: var(--bg-elev2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
}
.ups-m-sheet-foot .btn:active { background: var(--line); }

.ups-m-sheet-loading,
.ups-m-sheet-empty {
  padding: 24px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 13px;
}

/* ----- Action buttons (Drop / OTB / Extend / Tag) ----- */
.ups-m-sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.btn-act {
  padding: 12px 10px;
  background: var(--bg-elev2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
  text-align: center;
  line-height: 1.2;
}
.btn-act:active { background: var(--line); }
.btn-act.busy { opacity: 0.6; cursor: wait; }
.btn-act.disabled,
.btn-act[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  background: transparent;
  color: var(--fg-muted);
}
.btn-act.otb { border-color: rgba(45, 212, 191, 0.45); color: var(--teal); }
.btn-act.otb.on {
  background: rgba(45, 212, 191, 0.15);
  border-color: var(--teal);
  color: var(--teal);
}
/* Keith's ruling, 2026-10-02 (second pass): "Submit Offer still looks enabled" -- the trade
   review step's Send button always carries .otb.on (3 classes), which outranks the plain
   .btn-act[disabled] rule above (1 class + 1 attribute) on specificity, so a genuinely
   disabled Send button kept its bright teal look under the dimming. Matches .btn-act[disabled]
   exactly, at matching specificity. */
.btn-act.otb.on.disabled,
.btn-act.otb.on[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  background: transparent;
  border-color: var(--line);
  color: var(--fg-muted);
}
.btn-act.drop { border-color: rgba(255, 107, 107, 0.45); color: var(--danger); }
/* ERA forced-retention note — replaces the Drop button for a player won in the
   current Expired Rookie Auction (§A3) until the FA Auction closes. */
.ups-m-era-lock {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 184, 107, 0.12);
  border: 1px solid rgba(255, 184, 107, 0.30);
  color: var(--warn);
  font-size: 12.5px;
  line-height: 1.4;
}
/* §B3 IR — shown under "Place on IR" when MFL's injury report did not load, so
   the button is offered without us being able to verify eligibility. Warning
   tone, not error: the server still checks before it writes. */
.ups-m-ir-note {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 184, 107, 0.12);
  border: 1px solid rgba(255, 184, 107, 0.30);
  color: var(--warn);
  font-size: 12.5px;
  line-height: 1.4;
}
.btn-act.ext { border-color: rgba(91, 141, 255, 0.45); color: var(--accent); }
.btn-act.ropt { border-color: rgba(255, 184, 107, 0.45); color: var(--warn); }
.btn-act.rstr { border-color: rgba(139, 229, 139, 0.45); color: var(--ok); }
.btn-act.tag { border-color: rgba(206, 147, 216, 0.45); color: #ce93d8; }
/* MYAC (§C2) — gold accent; the headline contract action for fresh auction
   defaults (shown instead of Extend pre-deadline). */
.btn-act.myac { border-color: rgba(255, 209, 102, 0.5); color: #ffd166; }
.btn-act.mym { border-color: rgba(38, 198, 218, 0.5); color: #26c6da; }

/* ----- MYAC (§C2) header note above the multi-year buttons ----- */
.ups-m-myac-head {
  font-size: 12px;
  font-weight: 700;
  color: #ffd166;
  letter-spacing: 0.03em;
  margin: 8px 2px 6px;
}
.ups-m-myac-head .ups-m-myac-sub {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--fg-muted);
  letter-spacing: 0;
  line-height: 1.4;
  margin-top: 3px;
}

/* ----- Restructure editor sheet (loaded MYAC reuses these) ----- */
.ups-m-rstr-summary {
  background: var(--bg-elev2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.ups-m-rstr-summary .row,
.ups-m-rstr-derived .row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 2px 0;
}
.ups-m-rstr-summary .lbl,
.ups-m-rstr-derived .lbl { color: var(--fg-muted); }
.ups-m-rstr-summary .val,
.ups-m-rstr-derived .val { color: var(--fg); font-variant-numeric: tabular-nums; font-weight: 600; }
.ups-m-rstr-field { margin-bottom: 12px; }
.ups-m-rstr-field label {
  display: block;
  font-size: 11px;
  color: var(--fg-muted);
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}
.ups-m-rstr-field input {
  width: 100%;
  padding: 12px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 16px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
}
.ups-m-rstr-field input:focus { outline: none; border-color: var(--accent); }
.ups-m-rstr-derived {
  background: rgba(91,141,255,0.06);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 8px 12px;
  margin: 12px 0 8px;
}
.ups-m-rstr-ok {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(139,229,139,0.1);
  color: var(--ok);
  border-radius: 6px;
  font-size: 12px;
  text-align: center;
}
.ups-m-rstr-err {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255,107,107,0.1);
  color: var(--danger);
  border-radius: 6px;
  font-size: 12px;
}
.btn-act .pn {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--fg-muted);
  margin-top: 2px;
  letter-spacing: 0;
}
.btn-act .pn.ok { color: var(--ok); }

/* ----- Inline OTB note editor (replaces grid when adding/editing) ----- */
.ups-m-otb-edit {
  margin-bottom: 10px;
  padding: 10px;
  background: rgba(45, 212, 191, 0.05);
  border: 1px solid rgba(45, 212, 191, 0.35);
  border-radius: 8px;
}
.ups-m-otb-edit-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 8px;
}
.ups-m-otb-note {
  width: 100%;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 56px;
  box-sizing: border-box;
}
.ups-m-otb-note:focus {
  outline: none;
  border-color: var(--teal);
}
.ups-m-otb-edit-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.ups-m-otb-edit-actions .btn-act {
  flex: 1;
  min-height: 42px;
  padding: 10px 8px;
  font-size: 12px;
}

/* "Note: ..." line shown when the player is already on the block (read-only) */
.ups-m-otb-note-display {
  margin: -2px 0 10px;
  padding: 8px 10px;
  background: rgba(45, 212, 191, 0.08);
  border-left: 3px solid var(--teal);
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  color: var(--fg);
}
.ups-m-otb-note-display .lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-right: 6px;
}

/* ----- Player News tab -----
   Mirrors the desktop Team Ops profile NEWS panel (.tops-profile-news*), in
   mobile's own token set. Feed text is decoded-then-escaped in player_sheet.js;
   nothing here renders markup. */
.ups-m-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ups-m-news-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.ups-m-news-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ups-m-news-item:first-child { padding-top: 0; }
.ups-m-news-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.ups-m-news-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.ups-m-news-badge.is-status {
  background: rgba(255, 107, 107, 0.15);
  border: 1px solid rgba(255, 107, 107, 0.35);
  color: var(--danger);
}
.ups-m-news-badge.is-depth {
  background: rgba(91, 141, 255, 0.15);
  border: 1px solid rgba(91, 141, 255, 0.35);
  color: var(--accent);
}
.ups-m-news-head {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.35;
}
.ups-m-news-body {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--fg-muted);
  line-height: 1.45;
  /* Feed prose can carry very long unbroken tokens (urls pasted into a body);
     without this they widen the sheet and force a horizontal scroll. */
  overflow-wrap: anywhere;
}
.ups-m-news-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  min-height: 32px;
  line-height: 32px;
}

/* NFL designation chip beside the player name on the sheet header.
   Severity-coloured, not letter-coloured: OUT / IR / IR-PUP / IR-NFI /
   SUSPENDED / RETIRED share the red tier because they all mean "not playing".
   Rendered only when the injuries feed actually READ — absence of a chip means
   "no designation or we couldn't tell", never "healthy". */
.ups-m-inj-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.5;
  vertical-align: middle;
  border: 1px solid transparent;
  white-space: nowrap;
}
.ups-m-inj-chip.out { color:#fecaca; background:rgba(220,38,38,.22); border-color:rgba(248,113,113,.55); }
.ups-m-inj-chip.d   { color:#fed7aa; background:rgba(234,88,12,.20);  border-color:rgba(251,146,60,.50); }
.ups-m-inj-chip.q   { color:#fde68a; background:rgba(202,138,4,.20);  border-color:rgba(250,204,21,.45); }
.ups-m-inj-chip.ho  { color:#bfdbfe; background:rgba(37,99,235,.20);  border-color:rgba(96,165,250,.45); }
/* NFL roster designation (IR, IR-R, PUP, NFI, SUSP, RET): not playing, but a
   roster status, not this week's injury-report call — its own tone. */
.ups-m-inj-chip.res { color:#e9d5ff; background:rgba(126,34,206,.22); border-color:rgba(192,132,252,.50); }
.ups-m-inj-chip + .ups-m-inj-chip { margin-left: 4px; }
/* The status line under the sheet header: report and roster, each with its source and time. */
.ups-m-sheet-inj { margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: var(--fg-muted); }
.ups-m-sheet-inj:empty { display: none; }

/* ----- Owner chip, points line, contract money (Keith 2026-10-09 review) ----- */
.ups-m-own-chip {
  display: inline-block; margin-top: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; border: 1px solid var(--line); color: var(--fg);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ups-m-own-chip.fa { color: var(--accent); border-color: var(--accent); }
.ups-m-own-chip.unk { color: var(--warn); border-color: var(--warn); }
.ups-m-own-chip.mine { background: var(--accent); border-color: var(--accent); color: #0a1222; }
.ups-m-sheet-pts-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ups-m-sheet-pts-row div { background: var(--bg-elev2); border-radius: 8px; padding: 7px 9px; min-width: 0; }
.ups-m-sheet-pts-row b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.ups-m-sheet-pts-row small { display: block; font-size: 11px; line-height: 1.3; color: var(--fg-muted); }
.ups-m-sheet-pts .ups-m-stat-basis { margin-top: 6px; }
.ups-m-sheet-money .ups-m-sheet-kv { grid-template-columns: 1fr auto; }
.ups-m-sheet-money .ups-m-sheet-kv .val { text-align: right; }
.ups-m-sheet-kv .lbl.hl, .ups-m-sheet-kv .val.hl { color: var(--fg); font-weight: 700; }
.ups-m-sheet-how {
  margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--bg);
  border: 1px solid var(--line); font-size: 12px; line-height: 1.45; color: var(--fg-muted);
}
.ups-m-sheet-how b { color: var(--fg); font-weight: 600; }
.ups-m-sheet-how.warn { border-left: 3px solid var(--warn); color: var(--fg); }
.ups-m-sheet-mflnote { margin-top: 8px; font-size: 11px; color: var(--fg-muted); overflow-wrap: anywhere; }
.ups-m-sheet-actions.one { grid-template-columns: 1fr; }
.btn-act.trade { background: var(--accent); border-color: var(--accent); color: #0a1222; font-weight: 700; }

/* ----- Contract money: remaining guarantee by year (Keith 2026-10-10) ----- */
.ups-m-sheet-kv .val small { display: block; font-size: 11px; font-weight: 500; color: var(--fg-muted); line-height: 1.35; white-space: normal; }
.ups-m-gtd-table, .ups-m-gl-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ups-m-gtd-cap { margin: 4px 0 12px; font-size: 11px; color: var(--fg-muted); line-height: 1.4; }
.ups-m-gtd-table th, .ups-m-gtd-table td, .ups-m-gl-table th, .ups-m-gl-table td { padding: 5px 3px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ups-m-gtd-table th, .ups-m-gtd-table td, .ups-m-gl-table th, .ups-m-gl-table td { padding: 5px 2px; }
.ups-m-gl-table td small { color: var(--fg-muted); font-size: 11px; }
.ups-m-gtd-table th:first-child, .ups-m-gtd-table td:first-child, .ups-m-gl-table th:first-child, .ups-m-gl-table td:first-child { text-align: left; }
.ups-m-gtd-table thead th, .ups-m-gl-table thead th { color: var(--fg-muted); font-weight: 600; font-size: 11px; }
.ups-m-gtd-table tr.cur td { color: var(--fg); font-weight: 600; }
.ups-m-gtd-table tr.tot td { font-weight: 700; border-top: 1px solid var(--line); }
.ups-m-gtd-table tr.opt td { color: var(--fg-muted); font-style: italic; }
.ups-m-gtd-table tr.opt td[colspan] { text-align: left; }
.ups-m-sheet-money .ups-m-sheet-kv + .ups-m-gtd-table + .ups-m-sheet-kv, .ups-m-sheet-money .ups-m-gtd-table + .ups-m-sheet-kv { margin-top: 12px; }
/* Game log */
.ups-m-gl-h { margin: 16px 0 0; }
.ups-m-gl-table td.pts { font-weight: 700; }
.ups-m-gl-table tr.bye td, .ups-m-gl-table tr.dim td { color: var(--fg-muted); }
.ups-m-gl-table tr.bye td.pts, .ups-m-gl-table tr.dnp td.pts { font-weight: 600; letter-spacing: 0.04em; font-size: 11px; }
.ups-m-gl-table tr.dnp td { color: var(--fg-muted); }
.ups-m-gl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ups-m-gl-live { display: inline-block; width: 6px; height: 6px; margin-left: 3px; border-radius: 50%; background: var(--warn); vertical-align: middle; }
@media (max-width: 340px) { .ups-m-gl-table, .ups-m-gtd-table { font-size: 11px; } }
.ups-m-gl-views { display: inline-flex; margin: 8px 0 0; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.ups-m-gl-views button { font: 600 12px/1 inherit; min-height: 32px; padding: 0 12px; border: 0; background: transparent; color: var(--fg-muted); }
.ups-m-gl-views button.on { background: var(--accent); color: var(--bg); }
@media (max-width: 360px) { .ups-m-stat-table th, .ups-m-stat-table td { padding: 5px 4px; } }